In Flash CS4 & CS5, Slider component can be used as navigation to move through different frames of a MovieClip on stage. It will display different frames of a MovieClip when dragged.
To use the following AS3 code, just create a MovieClip named mc on your stage. You can place different animations/text/artwork/nested clips or whatever on its each frame. Slider will just move through these frames when dragged.
Just Create a new Flash (ActionScript 3.0) document. and drag the Slider component from the Components panel to the your Library panel.
Place the following code on the first frame of your movie:
import fl.controls.Slider;
var aSlider:Slider = new Slider();
aSlider.width = 200;
aSlider.move(120, 330);
addChild(aSlider);
trace(mc.totalFrames);
aSlider.maximum = mc.totalFrames;
aSlider.liveDragging=true;
aSlider.addEventListener(Event.CHANGE,mcHandler);
function mcHandler(e:Event){
mc.frameTxt.text = aSlider.value;
trace("aSlider.value: "+aSlider.value);
mc.gotoAndStop(aSlider.value);
}
I have put together all this as a working CS4 fla file. You can Download Flash Slider sample fla file from here.
Hope that helps.
Cheers!
Useful content for newbies like me. Can you still ask a question? I wanted to resize the slider? How can I increase the size of the slider? In advance, thank you and look forward to your reply)
Yes, you can resize with, provide any number:
aSlider.width = 200;I can’t download the sample file.
link works just fine, just checked.
Yeah mate! It’s great!
Hi Ali,
I have another question for this project. Instead of showing the frame #, I’m trying to continuously show the minutes:seconds as it plays through the mc. I thought I had it; dividing the value by the fps and seconds.
mc.addEventListener(“enterFrame”,onEnterFrame);
function onEnterFrame(e:Event) {
aSlider.value = mc.currentFrame;
mc.frameTxt.text = aSlider.value / 29 / 60;
}
But it displays it as 2.892341235 and it doesn’t switch to minutes after .59 sec. Do you know if it’s possible to convert this so it displays similarly to a digital clock?
Thanks again for all your help.
Sarah
Sarah,
I did not get what exactly the relation between frame number and time was in your question but I have created a counter to show time for how long a screen is being seen.
You can check this post for the Flash AS3 Timer AS3 code and also download fla file from there.
Cheers.
Hi Ali,
Good news. I was able to figure it out. Woo Hoo!!
First, I fixed the button image problem by using the instance name (ppBtn) instead of event.target.
Then after a few trials and errors, I placed the new variable (ppSlider) in the function mcHandler, which I changed to mcAlong. I have the slider continuing to play the mc after it’s been moved, so I added the if statement for the button and made sure I used the correct button image. I don’t fully understand it, but somehow it’s working (see code below). Woo Hoo!!
var ppSlider:Boolean = true;
function mcAlong(e:Event){
mc.gotoAndPlay(aSlider.value);
if(ppSlider) {
mc.ppBtn.gotoAndStop(‘play’);
mc.pp = true;
}
}
Thank you so much for all your help.
Sarah
I’m glad that you resolved it yourself and in the process, learnt many new things!
Keep up the good work.
Cheers.
Thanks Ali. I’ll give it a try and let you know how it goes.
Sarah
Hi Ali,
I added the PlayPuaseButton in the mc using the below code. I wasn’t sure how to import it and get it working, so I used this code instead.
var pp:Boolean = true;
function ppState(event:MouseEvent) {
if(pp) {
stop();
event.target.gotoAndStop(‘pause’);
pp = false;
}else{
play();
event.target.gotoAndStop(‘play’);
pp = true;
}
}
ppBtn.addEventListener(MouseEvent.CLICK, ppState);
It sort of works. When I click on the button it will pause the mc and the slider. And when clicked again, the mc/slider play. However, the button images don’t change. Meaning that the event.target isn’t working or something.
And after the slider has been manually moved, the button isn’t consistent with the slider any more. Meaning sometimes I have to click the button twice to get the mc/slider to stop after I manually move the slider or click somewhere on the slider bar.
Can you please help me fix the play/pause btn or direct me to a tutorial. I tried using the btn code from your Load External swf… post, but couldn’t figure out how to make it work.
Any help is greatly appreciated.
Thanks,
Sarah
Hi Sarah,
I’ve been very busy lately, could not reply earlier.
I think you need to define a variable that should be updated both when button is clicked and also when the slider is moved.
You should move 1 frame each time for the next step in your presentation and should update that flag variable from both button click and slider dragging and then based on that variable value, should take decisions to show the state of button. If you can’t figure out, I’ll try to put together some code for you. But try yourself first.
Thank you so much Ali for the slider source file. Something was wrong with my mc. I think I had too many move clips inside each other that conflicted with the slider. Now it’s working as long as I keep my animations in the same mc.
Thanks again,
Sarah
I’m glad that it worked for you.
Cheers!