Clone Symbol in runtime/dynamically (hack)

Hi,

I know this is not possibile to do in an “ethical” way…so what I’m looking for is an Hype hack! :stuck_out_tongue:

I would like to clone a Symbol instance in runtime: I can easily clone the DOM elements but, of course, Hype uses IDs to control every element inside and their animations…

Here you can find an example of what I achieved until now:

Symbol clone hack.hype.zip (47.2 KB)

4 Likes

Nice!

I have tried this before by swapping around the ids but there is no way at the moment afaik to do it properly. It may be possible in a future Hype.

2 Likes

Nice hack!
Cloning isn’t supported now - a “hack” to get it to work fully would mean having an official solution since the Hype runtime makes pretty deep assumptions about the elements uniqueness.

eheheh…I tried! :stuck_out_tongue:

This is a really old thread. So old, the bot asked me if I really want to bother. It’s the closest I can find to what I would like to do. Also, I’m somewhat ignorant when it comes to JavaScript. Sorry. I once learned ActionScript to an adequate degree. Arguably. I bet the Hype developers are pretty sick of hearing that.

I’m trying to create a lot of identical objects and control their visibility randomly. Seems easy, but not so much. I did find that after cloning the objects with JS (thanks to @Cescomare), I could control the visibility of the objects in reverse order. It seems odd that I can control their visibility, but not assign them to an array of IDs. In my example, those last two are invisible, even though I addressed [37] and [4]. Still, I seem to be able to address them? (/me braces himself for scorn and ridicule.)

marque.hype.zip (87.2 KB)

Don’t use k as you for loop index. Seems it is clashing somewhere.

Use i or even ii

Also you want

hypeDocument.getElementById("bulbOn"+[i]).style.display = "none";

not

hypeDocument.getElementById("bulbOn[i]").style.display = "none";

1 Like

I ended up doing this the hard way, duplicating the “on” bulb 2,043 times (easy) and naming every instance with a unique, sequential ID (annoying and time consuming).

My question is, can I create one symbol of “bulbOn”, and using JS, duplicate it with loops, giving each instance its own unique ID.

I will spare you my failed attempts.

Since creating the original, I’ve been using this file to learn more about controlling animations in Hype with JS. I’ve found timing and the asynchronous nature of JS to be frustrating. I finally got a random flashing, and (just now) a waterfall version of the marquee working. I suspect that it’s much more processor-intensive than it needs to be, since each instance is its own SVG. It certainly makes the graphic portion of the file difficult to work on. Scrolling, selecting, zooming, etc. are slow and crashy. I finally feel like I have spent enough time trying, and have enough basic understanding to ask "how should I have created 2,043 uniquely ID’d instances-isn’t there a much better way?"saylers-left-random-flashing.hype.zip (218.4 KB)
saylers-by-rows.hype.zip (221.9 KB)

2 Likes

Omg you had me at this - Who would’ve thought Y offset rotation is key frame-able :grin:

2 Likes

:grin::sunglasses:

I would use the clone extension

I also re did the background png to make sure spacing was correct.

saylers-by-rows_Clone_MHv1.hype.zip (109.5 KB)

saylers-left-random-flashing_MHv1.hype.zip (109.9 KB)

3 Likes

Ok guys, this might be a stupid question but in what scenarios would this actually be useful - the cloning?

Exactly! The cloning! I thought that part would be relatively easy, and I didn’t find a lot of useful examples or reference for a noob like me. It seemed like it would be a common enough technique, especially when one doesn’t know how many of a particular object will be used, or, as in this case, when a lot of duplicate objects are needed. OR I might just be bad at searching.

Thank you for not only taking the time to point me toward the clone extension, but also apply it to this situation. It looks like the clone extension was there all along and I missed it in my searches. Hopefully this application will be helpful to others! OH! And thanks for writing the clone extension in the first place!

3 Likes

Hello to All!

@jerm & @MarkHunte - Nice work!!!

What follows is a little off topic here (no clones involved) - but it occurred to me an alternate~easy way to do the cascading light effect on Jeremy’s “Saylers” project would be with a symbol. The following uses eight symbol instances of a master. The cascading lights (5 row) are a screen grab. No coding, just timeline. I used Jeremy’s “bulbs off” background - but it could have been a repeating pattern background image matrix of 7x7 “off” bulbs (to match 28 to a row) to really go lightweight.

Hype Project: saylers-by-rows_SymbolImage.hype.zip (111.7 KB)

On-line Demo here.

5 Likes

Nice way of doing it jim.

1 Like

The other nice thing about that is CPU.
Going in I knew the amount of elements would be a CPU hog but since this thread is 'Clone' I avoided thinking of doing things different with the number of objects but @jims approuch is always best if you can go down that road.

89.7% one is the clones
3.3 is the symbols images.

There are many reasons you may want to clone. The main reason I normally do it is when I need a selection to be generated dynamically. For example

Cloning is part of the Native JS API. But Hype is a self maintained would and does not support cloning and see the new elements so it is a Hack where using cloning with Hype is concerned.

1 Like

While this is from 2017, I'm struggling to find a way to make Hype to dynamically populate a catalog of products on a website.
http://zanate.com.mx/proyectos/fabiola_rodriguez/2020/ozmaq/catalogo_interactivo/demo/

The idea is to create a single symbol, and by some sort of javascript voodoo, to replicate this same symbol horizontally, each one with their own unique ID.

This is useful, in case I need to make adjustments or the client want to add or remove certain features from the thumbnail, I would only edit the master / original symbol, and this is going to be reflected on all 150 thumbnails I am supposed to create.

I have been able to populate a bunch of symbol instances with uniqueID with their own unique information:
https://p1.f0.n0.cdn.getcloudapp.com/items/12uDZZPY/Screen+Shot+2020-01-29+at+14.49.33.png?v=914d9c10ddc9c99f11929044b10a493b

But still, most probably because my current JS skills limitations, I'm required to place each 150 instances manually.

Sounds like it is doable by @MaxZieb's Extension ...