Jump to content
GreenSock

mafox296

Embedded timeline

Recommended Posts

How do I use an embedded timeline in GSAP. E.g. a bird flapping its wings a time line embedded in the bird flying across the stage.

Link to comment
Share on other sites

Hi and Welcome to the GreenSock forums.

 

I'm a little foggy on what you are asking for. The terminology of embedding a timeline in a timeline seems very much like a Flash question relating to MovieClips. 

 

If you are referring to nesting GSAP's TimelineLite instances inside each other, that is certainly possible. Or you could make a single TimelineLite that contains a tween to move your bird and another to flap the wings. This is a super-rough example:

http://codepen.io/GreenSock/pen/3db43518049230c584062fb17ea381a1

 

I think if we had more information, or perhaps a sample of your work it would be much easier to advise you properly.

  • Like 2
Link to comment
Share on other sites

How do I use an embedded timeline in GSAP. E.g. a bird flapping its wings a time line embedded in the bird flying across the stage.

As suggested  I've attached a  file, that use a simple  illustration of a candle, repeated a few times that move across the stage with the flame as an embedded movie clip. I see I can't include the fla, the swf , nor the js  files generated by "Toolkit for create JS" in Flash.So I have just attached the HTML file.

Thanks.

candles1.html

Link to comment
Share on other sites

You can attach a .zip file with the required javascript to your post. The HTML is meaningless on its own.

Link to comment
Share on other sites

To see the movie clip you need the js file which I can't up lolad so I have put the demonstration on a site:

http://michaelafoxorg.ipage.com/candles/candles.html

 

The flame, created in Flash CS6 consists of a sprite using 8 graphics on its own time line. The candle is a single sprite, which moves across its time line. There are then 8 instances of the composite candle moving across the main timeline.

Link to comment
Share on other sites

Right now there isn't really anything we can do with what you provided.

Took a peak at the js file that your current demo is using:

http://michaelafoxorg.ipage.com/candles/candles1.js

 

There are over 400 lines of js code. In order to help we would really need to see a much simpler animation perhaps with just 1 candle so that we can better make sense of what is happening. 

 

As Jamie suggested, a zip of all your files would allow us to investigate and experiment.

Link to comment
Share on other sites

As suggested I've reduced the code to a single candle and created the HTML and JS file, which is only 7k long, using "Toolkit for createJS". I've also been exploring Easle.js and Zoe ( to create sprite sheets from SWF files). And wonder if Greensock and these othe tools can live togerther?

The candle is a very simple example compared with my other experiments.

Here is the URL

http://michaelafoxorg.ipage.com/Single-Candle/Candle.html

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×