Highlighted

Loading Javascript into a Layer/MovieClip

Explorer ,
May 31, 2019

Copy link to clipboard

Copied

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!

Views

504

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Loading Javascript into a Layer/MovieClip

Explorer ,
May 31, 2019

Copy link to clipboard

Copied

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!

Views

505

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 31, 2019 0
Adobe Community Professional ,
May 31, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0
Explorer ,
May 31, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0
Adobe Community Professional ,
May 31, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 1
Explorer ,
May 31, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0
Adobe Community Professional ,
May 31, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0
Adobe Community Professional ,
May 31, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0
Explorer ,
May 31, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0
Adobe Community Professional ,
May 31, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0
Adobe Community Professional ,
May 31, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0
Adobe Community Professional ,
May 31, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0
ClayUUID LATEST
Adobe Community Professional ,
May 31, 2019

Copy link to clipboard

Copied

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.)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0