Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rhino

Timeline Slider

Recommended Posts

Hi,

 

I New to Greenstock. I have an animation in flash AS2 that controls page flips (series of jpgs) with a next and back btn. Currently it only controls 1 page flip back or forward. I want to add a slider so i can control it with the slider as well for faster flips to a certain page.

 

 

Wondering if im looking in the right place ....any help would be appricated.

 

Ive attached my file , To keep the file size low i just replaced the page jpgs with a moving box tween.

 

Thanks!

book5.zip

Link to comment
Share on other sites

There are a few tools in the GreenSock animation platform that can help with some aspects of this. 

We are really walking away from AS2 as it isn't even supported any more in Adobe's own products. 

I would strongly suggest that if you are still going to use Flash for interactive products that you move to AS3. 

 

In the example you sent me with a single tween in the main timeline, its pretty easy create a scrubber that controls a timeline.

 

Check out this FLA that I found in a kirupa.com forum post: http://www.kirupa.com/forum/attachment.php?attachmentid=31471&d=1133925671

 

If you need large parts of your project to use scripted animation, than I would suggest experimenting with TweenLite. We have a framePlugin that allows you to control the playback of frames of the main timeline (or any movieclip). You could then add script to your UI components (buttons, sliders) that control those tweens. At this stage of the project I'm not entirely sure that is necessary.

 

If interested, you can see a video here and demo files that show how that sort of system works in AS3: http://www.snorkl.tv/2010/10/overview-of-tweenmax-framelabel-and-frame-plugins-nifty-way-to-play-a-flash-timeline-backwards/(AS2 syntax is very similar).

Link to comment
Share on other sites

Hi,

 

So I have decided to use as3, and ive modified this example file from a tutorial. Attached is a file that does pretty much what I want. The only changes i need to make that im not quite sure how to do are :

 

1.The only buttons i need is the toggle , play , reverse.

 

2.I have placed some label markers in the timeline I need the play button to act as a next btn and only play untill it hits a marker on the timeline then it would stop and so on. The same for the reverse would act as previous and stop at the previous marker.

 

this is to simulate page turns. (one press of next plays 1 page turn, one press of previous goes back a page ect)

 

the slider would work just as it does now so it could span across all pages.

 

 

 

 

timelineslider.zip

Link to comment
Share on other sites

had to do some edits to your file to pause at the labels like

  1. adding unique labels
  2. placing tweens to those labels in the timeline
  3. adding pauses
tl = new TimelineLite({paused:true, onUpdate:trackProgress});
tl.to(jumper_mc, .9, {frameLabel:"marker2", ease:Linear.easeNone})
 .addPause()
 .to(jumper_mc, .9, {frameLabel:"marker3", ease:Linear.easeNone})
 .addPause()
 .to(jumper_mc, .9, {frameLabel:"marker4", ease:Linear.easeNone})
Also it seems the file you found was using an ancient version of GSAP with a slightly different syntax.
I included a more recent version in the zip.
 
Here are the docs for TimelineLite: http://greensock.com/asdocs/com/greensock/TimelineLite.htmlwhich should help you understand more of what is happening.

timelineslider-fixed.zip

Link to comment
Share on other sites

Thanks for the support that is perfect!:)

Link to comment
Share on other sites

First of all thanks for all the support , I'm really impressed with this product. Just 1 more question for now. Is it possible, instead of using the frame labels, to set each interval (which will eventually be a page turn) up in its own movie clip and still have them play in reverse / forward just like they do now?

 

i was just thinking it may be better for organization and functionality...thoughts?

Link to comment
Share on other sites

Yeah, I think you could do that, your timeline code would probably look something like this

 

tl = new TimelineLite({paused:true, onUpdate:trackProgress});
tl.to(book1, .9, {frameLabel:"end", ease:Linear.easeNone})
 .addPause()
 .to(book2, .9, {frameLabel:"end", ease:Linear.easeNone})
 .addPause()
 .to(book3, .9, {frameLabel:"end", ease:Linear.easeNone})
 
Assuming each mc, was named book1, book2, book3 .... and each mc had a label "end" at the end of its timeline.
Give it a shot, it definitely makes more sense (from a maintenance perspective) than 1 big long timeline
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.
×