Attach a slider to a property – but how? [SOLVED]

[joelg]

Hi Jack & Co

 

Thanks again for some great stuff.

 

In the description of TimelineLite you write:

 

"You could even attach a slider to one of these properties to give the user the ability to drag forwards/backwards through the whole timeline."

 

Is there a working example or tutorial on this topic somewhere?

 

Many regards

 

Joel Grøndrup

[GreenSock]

In its simplest form, it'd look like this:

 

var myTimeline:TimelineLite = new TimelineLite();
//populate timeline here...
//myTimeline.append(...) (or whatever)

slider.minimum = 0;
slider.maximum = myTimeline.totalDuration;
slider.liveDragging = true;
slider.addEventListener(SliderEvent.CHANGE, onChangeSlider);

function onChangeSlider(e:SliderEvent):void {
myTimeline.gotoAndStop(e.value);
}

 

You could add listeners to sense when the user releases the slider and then resume() the timeline at that point if you want. But hopefully this gives you a nudge in the right direction.

[joelg]

Great, thanks!

[alphaville]

Hi,

 

In the demonstration, like a video player, slider is also moving on the timeline while playing the animation. How can we add that property to the slider?

 

Thanks.

[GreenSock]

That should be as simple as hooking up an ENTER_FRAME or an onUpdate to do this:

 

slider.value = myTimeline.currentTime;

[alphaville]

I have some very basic knowledge of AS2 but AS3 and greensock is pretty new for me. I thought I can build a video player like presentation with images, transitions after seeing your example of Timelinelite.

 

This is the code i took from the video tutorials site that you suggested. How can I change the value of the slider component to "Timeline.currentTime" . In properties panel it shows that the value is number and it is zero.

 

import com.greensock.*;

var timeline:TimelineMax = new TimelineMax();

var boxes_arr:Array = new Array(box_mc, box2_mc, box3_mc, box4_mc);

for(var key:String in boxes_arr){
var mc:MovieClip = MovieClip(boxes_arr[key]);
timeline.append(TweenMax.to(mc, .5, {y:180}));
timeline.append(TweenMax.to(mc, .5, {scaleX:2, scaleY:2}));
timeline.append(TweenMax.to(mc, 1, {rotation:360, x:600, scaleX:1, scaleY:1}));
timeline.append(TweenMax.to(mc, .5, {y:0, alpha:0}));
}

timeline.append(TweenMax.to(theEnd_mc, 1, {x:320}));


import fl.controls.Slider;
import fl.events.SliderEvent;

;


mySlider.addEventListener(SliderEvent.THUMB_DRAG, thumbDragHandler);



function thumbDragHandler(event:SliderEvent):void {
timeline.pause();

  timeline.currentProgress = event.value;
}

 

Thank you.

[GreenSock]

this.addEventListener(Event.ENTER_FRAME, updateSlider);
function updateSlider(event:Event):void {
   mySlider.value = timeline.currentProgress;
}

[alphaville]

Thank you very much for your help.