Jump to content
Search Community

Can I use TimelineLite on tweens that are done through flash (as opposed to GreenSock), such as shape tweens?

pocketrockets test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm very new to GreenSock as well as Adobe Animate and I'm trying to get a handle on how everything works. After reading up on TimelineLite, I'd love to use it for my entire project because it sounds way easier than trying to figure out all the timing myself. But I'm not sure if I can use this feature for ALL my tweens, or only those tweens that can be controlled by GreenSock.

 

For example, let's say I have 3 objects on the stage, with instant names mc1, mc2, and mc3. Let's say that mc1 and mc2 are just moving around with GreenSock, but mc3 is a complex shape tween that takes 100 frames to complete. Could I still use TimelineLite to make it so that mc3 starts right after mc2 ends? If so, could someone give me an example of how to do that?

 

Secondly, it is my understanding that GreenSock tweens can control these features: positioning, movement, color, timing, fading in and out. Is GreenSock used for anything more complex such as drastically changing the shape of a vector image, or a complex motion tween? If so, does anyone have any examples of such instances?

 

Thanks for your support. Any information that could answer my questions or just quickly give me a better understanding of how to use GreenSock for my animation would be greatly appreciated. :)

Link to comment
Share on other sites

Hi pocketrockets :)

 

I think the short answer to most of your questions is yes. GreenSock can animate just about anything. You can have multiple tweens and timelines to create almost anything you can imagine.

 

It seems like your biggest question is about SVG shape tweens. You definitely need to have a look at the morphSVG plugin. It will blow your mind.

http://greensock.com/morphSVG

http://greensock.com/morphsvg-update

 

Here's a CodePen collection with more examples of morph:

http://codepen.io/collection/naMaNQ/

 

The GS getting started video:

https://greensock.com/get-started-js

 

The GreenSock Jump Start Collection on CodePen is very helpful too:

http://codepen.io/collection/ifybJ/

 

Hopefully these links gives you a good start and understanding of what's possible.

 

Happy tweening

:)

  • Like 3
Link to comment
Share on other sites

What Craig said is all well and good, but if you are using Animate CC the bad news is that GSAP can't really touch the SVG data that ultimately gets rendered to canvas. We're hopeful that CJ Gammon's SVG export for Animate will allow that someday.

 

However, if you want to control a shape tween movie clip with GSAP, the answer is YES! you can.

Our EaselPlugin allows you to tween to a particular frame.

 

Here is a demo with yoyo-ing shape tween: http://greensock.com/forums-support-files/animate-frame-animation/

 

The code is pretty straight-forward


tl.from(this.logo_mc, 0.5, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut})
  .from(this.GreenSock_mc, 0.3, {y:"+=70", alpha:0, ease:Back.easeOut}, "-=0.3")
  .from(this.shapetween_mc, 1, {alpha:0})

  //easel frame tween

  .to(this.shapetween_mc, 1, {easel:{frame:59}, repeat:1, yoyo:true});

The unfortunate news is that you have to jump through some hoops to configure a custom template that loads TweenMax and the EaselPlugin.

 

You can read all about how to do that here: http://greensock.com/animatecc-templates

 

 

 

The best news in the world is that I already did that for you :) Grab the zip below it contains an Animate CC fla that uses a publish template that loads all that you need. It also contains the publish template html file incase you want to peak inside and see what it does.

 

 

 

 

animate-frame-animation.zip

  • Like 4
Link to comment
Share on other sites

Ha! I have to read more closely. :)

 

I thought this was a debate between using Animate CC and using GreenSock. I saw the shape tween part of the question and got all excited about telling someone about morphSVG. In case it's not obvious - I love that plugin. :-D  

  • Like 1
Link to comment
Share on other sites

Ha! I have to read more closely. :)

 

I thought this was a debate between using Animate CC and using GreenSock. I saw the shape tween part of the question and got all excited about telling someone about morphSVG. In case it's not obvious - I love that plugin. :-D

 

I didn't understand the question. I think there's going to be a lot of confusion going on between AnimateCC, Flash, GSAP, Easel, and canvas.

 

But I don't see why you couldn't use the MorphSVGPlugin. Easel is just a canvas library, and canvas and SVG are pretty interchangeable. Not too long ago, the only way to use an SVG in the browser was to use a plugin from Adobe or a canvas library.

 

Check out these examples. They're usually pretty indistinguishable. The Fabric one can take a while to load.

Fabric - http://fabricjs.com/test/svg_import/

Canvg - http://gabelerner.github.io/canvg/examples/index.htm

 

So svg-to-canvas and canvas-to-svg is totally doable.

http://www.inkfood.com/svg-to-canvas/

 

That's why it wasn't too hard to figure out how to exploit the MorphSVGPlugin in this demo.

See the Pen RWeOWX?editors=0010 by osublake (@osublake) on CodePen

 

It was actually pretty easy to do, and worked on my first try. I think with newer versions of the plugin you might not even need to use an SVG element as a proxy. So maybe they should rename it to the MorphSVGsAndOtherStuffLikeCanvasPlugin. It's kind of catchy, right?

  • Like 3
Link to comment
Share on other sites

First of all I'd like to say thanks to everyone that answered. Wow! You all seem very knowledgeable and yes, the morphSVG did blow my mind. However I think I left out some key details, so I'm going to add them here in case it changes things-

 

I forgot to mention that I'm actually just creating an Fla project with Adobe Animate. (So I'm NOT using HTML5 canvas!) The reason is I'm doing this for a college project and for some reason that's what my professor is requiring. I noticed that the Flash/Actionscript forum is archived so I had to post in this forum- I hope you guys don't mind. Does that change my ability to use the features mentioned above?

 

Secondly I guess I should clarify that, although I would love to learn how to become a Greensock master in the future, I was mostly interested in the TimelineLite and morphSVG features to save time. The due date of my project is rapidly approaching and I'm still having a really hard time making my animation work, although it's not for a lack of trying.  So if it's a case where TimelineLite would save me time in the long run, but it would require a lot of time to figure out how to use, it's probably not the best solution for me right now. But to figure this one out I'm just going to ask a separate question about how to efficiently use TimelineLite.  

 

Carl- Wow, thanks for the files! The code looks relatively simple but I'm sure it would have taken me hours to figure out so thank you very much. :) Do you know if it will work the same for an Fla file?

Link to comment
Share on other sites

thanks for the clarification on what you are trying to do.

 

Just to be clear an Animate document is an FLA regardless of whether it outputs and ActionScript SWF or HTML5 document (JavaScript and canvas).

 

MorphSVG will not work with either. Although Blake has had impressive success fooling it to work with his canvas code, the Animate canvas is very much a "black box" and my guess is that it would take a considerable amount of effort to make it work. 

 

So since you are dealing with ActionScript-based content you should be posting in the Flash / ActionScript Archive. I'm a little surprised that you could not post there as other's have very recently. 

 

Please confirm that you do not see the "start new topic" button as shown below:

http://img.prntscr.com/img?url=http://i.imgur.com/SuPfL5q.png

 

To learn more about why Flash / ActionScript is archived please read: http://greensock.com/forums/topic/13924-question-about-this-forum/?p=58781

 

It is unfortunate that your school is still trying to make money by teaching people Flash / ActionScript. For a long time I held the belief that writing ActionScript inside Flash was the best and easiest way to introduce anyone to programming concepts (I did it for nearly 10 years). It was an excellent "self-contained" environment that gave you access to everything you needed. 

 

However now that the entire web has moved away from the .swf its extremely hard to justify investing any time in learning ActionScript. The only benefits being that you will be familiar with the Animate workspace when you realize that outputting HTML5 canvas is the better option and perhaps you'll realize that core JavaScript syntax is virtually the same.  

 

I totally understand that you are learning and don't have any control over the curriculum. I moved your new question to the Flash / ActionScript archive

http://greensock.com/forums/topic/14327-how-to-use-timelinelite-on-nested-symbols-and-in-conjunction-with-buttons/

  • Like 1
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...