Loading Javascript into a Layer/MovieClip

[Guest]

Hi everybody,

I have a confetti js script that I found online. It's really nice and easy to use. When I load it into Animate, I later have to edit CSS so it loads directly on top. That works fine.

The problem I'm having is that while loading on top, I can't figure out how to make it underneath, that is, part of the background.

I can trigger it from a movieclip, but it just loads externally on the page.

Is there a way to load external JS classes/functions so that it's underneath? I'd use z-indexing, but I'm not entirely sure where everything's listed. thanks!

[ClayUUID]

Your question, as phrased, is nonsense. Scripts are not visible objects. They do not have depth or coordinates.

I'm guessing what you actually want to know is how to make your confetti script render its output as part of an Animate background. From how you've described it, it sounds as if the script works by generating browser DOM elements. That means it cannot fully integrate with Animate, because Animate draws everything to a single canvas element. You can only draw browser elements entirely above it, or entirely below it (which are then invisible unless you do some hackery to make the Animate stage partially transparent).

The only way to do what you seem to want is to generate your confetti with a script that uses Animate's CreateJS library. Then it would be able to be inserted at any layer depth among the rest of the stage content.

[Guest]

Yeah, that's what I was afraid of. I think I'm going to have to rebuild the whole thing from scratch on-page using GSAP instead.

It's a pain, but Animate's not really all that dynamic. It's typically either all in-the-box or not. I've been able to band-aid stuff in the past, but this isn't one of those times.

Thanks

[ClayUUID]

It's perfectly dynamic for anyone capable of coding to the CreateJS library, which is what Animate uses internally in HTML5 mode. You couldn't do what you're trying to do with SWFs either.

[Guest]

Yeah, I suppose. The only time I use that is with Adobe's internal animation timeline engine. If I can't timeline animate or instantiate things with ease, I'll just go to the page otherwise I end up having to Frankenstein things inside and out. Create JS is useful, but it's no Greensock and I keep anding up needing to do a number of things that just aren't as intuitive.

If I were in SWF I'd just use Actionscript, but those times have long gone.

[ClayUUID]

soupking  wrote

If I were in SWF I'd just use Actionscript, but those times have long gone.

CreateJS's API was deliberately modeled after ActionScript, so any AS2/AS3 skills should be highly transferable.

[resdesign]

I am wondering if it would work if you used an empty container on a layer and loaded it inside. Is seems that it should work even with Canvas.

[Guest]

I wish I could, but there's not really a transparent use of z-indexing. It's either in the canvas blob or outside in parsed HTML.

[ClayUUID]

resdesign  wrote

I am wondering if it would work if you used an empty container on a layer and loaded it inside. Is seems that it should work even with Canvas.

No. Absolute no. The canvas API supports drawing exactly four things: pixels, lines, bitmaps, and text. You cannot draw DOM elements into a canvas.

[resdesign]

Yes, I know that. I was talking about using a layer with an empty movie clip and use his script on that.

[ClayUUID]

resdesign  wrote

Yes, I know that. I was talking about using a layer with an empty movie clip and use his script on that.

His script is written for the browser DOM and API. Canvas and CreateJS use a completely different DOM and API. So how are you imagining that would work?

(Spoiler: It wouldn't work.)

[resdesign]

BTW I hate CANVAS. I can do pretty much everything I need in Animate CC but I think Edge Animate was way more powerful and practical since you could use both DOM and CANVAS.

Same with Construct 2 and 3.

Basically you had to play with the containers and the z-index as especially input field would be on the top but could be move out when needed.