Clone Symbol in runtime/dynamically (hack)

( #1


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 (47.2 KB)

Clone element and animation


(Mark Hunte) #3

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.

(Jonathan Deutsch) #4

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.

( #5

eheheh…I tried! :stuck_out_tongue:

(Jeremy Bolesky) #6

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.) (87.2 KB)

(Mark Hunte) #7

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";


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

(Jeremy Bolesky) #8

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?" (218.4 KB) (221.9 KB)

(Pete) #9

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

( #10


(Mark Hunte) #11

I would use the clone extension

I also re did the background png to make sure spacing was correct. (109.5 KB) (109.9 KB)

(Pete) #12

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

(Jeremy Bolesky) #13

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.

(Jeremy Bolesky) #14

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!


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: (111.7 KB)

On-line Demo here.

(Mark Hunte) #16

Nice way of doing it jim.

(Mark Hunte) #17

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.