Adding a class to symbols

[reindeer4]

Hi - I used to use Adobe Flash (CS3-6) but haven't touched the program much in last few years.

Just starting with Animate CC 2019.

Looking for a way to add a class to several symbols / movie clips so I can then manipulate those with GreenSock's TweenMax.

Looked like you could either use a function like this:

function myFunction() {
var element = document.getElementById("myDIV");
  element.classList.add("mystyle");
}

Or could simply assign new class in html document:

<div id="myItem1" class="mystyle"></div>

<div id="myItem2" class="mystyle"></div>

I tried this in Brackets and Dreamweaver but doesn't seem like the changes to the code stick, so I'm probably not adding it to the right area.

Would appreciate some help as to where to place the code - as well as suggestions for good workflow for adjusting css / html / and javascript when working with Animate.

Thanks

[kglad]

animate objects are drawn on a canvas and are therefore not reference-able as DOM objects.

that said, you can assign a 'class' to animate objects by using (double click) the linkage column and you can use code to create methods and properties for that 'class'.

what are you trying to do?

[reindeer4]

Hi kglad -

Years ago, I'd made (what was for me) a complex flash website based on the Gaia framework that incorporated a number of outside libraries to enhance functionality. Not trying to recreate that precisely, but i would like to crate a new version in HTML 5 that's compliant with new web standards.

To get started, i'd like to create some navigation buttons (or movieclips) and assign them a specific class usch as "myNav" so I can easily animate them with TweenMax and other features of the GreenSock library.

I just tried creating some buttons (which let me directly assign a class in their parameters) and also created a square and converted to symbol - and then in the library panel, in the linkage column, I typed myNav.  But neither of those seem to be getting picked up by TweenMax (which has already been included into the project).

Thanks for any suggestions.

[kglad]

Quick Start: GSAP and Adobe Animate CC 2017 | GreenSock

[reindeer4]

Thanks - I've watched that video and gone through some other GreenSock documentation and have things working within the Animate CC framework - so everything works as expected when I test a movie from within Animate itself.

Had some problems getting things working on actual site - but tracked that down through Web Devel in Chrome to my failure to upload an image required by animate (index_atlas_.png)

Once I uploaded that, page loaded properly.

[avid_body16B8 · Accepted solution]

OK. this is totally overkill in this demo but I was just playing to see how this can be implemented.

So here is the example: https://drive.google.com/open?id=15TNHF1a070EHVAPoB2Jr4uKXT-pQ1TIi

Hope this helps.

I try to post examples because just talk is not always enough.

[kglad]

(i don't see anything different from greensocks' example linked in msg 5, other than the jquery)

[avid_body16B8]

Did you watch the videos on the Greensock web site? if you give an instance name for your movieclips or buttons you should be able to access them.

I played with it a few weeks ago and it worked perfectly fine.

i will try to find my test file to post.

[ClayUUID]

Yeah, you're talking about CSS classes. "Class" in Animate refers to code.

Assuming you're working in a Canvas document, to animate a symbol programmatically just give it an instance name on the stage and then use the built-in tween library. There's no reason to muck things up by getting yet another library involved, unless you specifically need some advanced functionality that TweenMax provides.

[reindeer4]

Hi Clay UUID -

Tried to follow that first link but I get a 403 You Don't Have Permission error so can't view that page.

I am working on a canvas document - and while I could certainly make do using the built in Tween library, i'd like to learn the proper steps to get things working with GreenSock as I do want to be able to use external libraries going forward.

Thanks for any suggestions.

[avid_body16B8]

As ClayUUID mentioned, createjs which ANCC canvas uses works fine and is actually very similar to the Greensock library.