slider to control main timeline

[tphoto1]

What code would I need to take the Slider Component and have it control the Main timeline? I have created a presentation with audio embedded and images coming up and moving as the person is talking about it. I need a way to scrub back and forth down the timeline.

[Ned Murphy · Accepted solution]

Try the following, where sl is the Slider instance....

function moveAlong(evt:Event):void {
gotoAndStop(sl.value);
}

sl.minimum = 1;
sl.maximum = this.totalFrames;
sl.liveDragging = true;
sl.addEventListener(Event.CHANGE, moveAlong);

[tphoto1]

Ned,

It worked really well. I am using the FlashEff 2 component in this presentation, which is why I'm in AS3 in the first place. I was afraid any solution would somehow conflict with that component or the embedded audio. Your code worked perfectly and thank you for including what to name my instance. You rock.

Jay

[Ned Murphy]

You're welcome, Jay.

[ChadThompson]

Does the slider's playhead move with the swf's timeline? I'm able to scrub just fine, but unless I move it, the slider's playhead remains stationarey at the beginning. Is there another line of code I'm missing?

[snorky]

This code was exactly what I have been searching for tonight!!!

But I have the same question as chadest...what code would I use to keep the scrubber synched up with the main timeline?

I tried putting the following code on every frame,

sl.value = this.currentFrame;

and that works but I'm sure that I'm doing it wrong because adding it to all my frames will be insane!

Thanks in advance if you can help!

[snorky]

Got it figured out! All I had to do was add an enterFrame listener and function. The code below works and updates the scrubber as the timeline progresses.

function moveAlong(evt:Event):void {
gotoAndStop(sl.value);
}

sl.minimum = 1;
sl.maximum = this.totalFrames;
sl.liveDragging = true;
sl.addEventListener(Event.CHANGE, moveAlong);

this.addEventListener("enterFrame",onEnterFrame);
function onEnterFrame(e:Event) {
sl.value = this.currentFrame;
}

[tphoto1]

Snorky,

This makes it nicer. Good job. I had to change the second line from gotoAndStop to gotoAndPlay. I have audio embedded in my timeline and gotoAndStop messed up the audio, plus my timeline is a running presentation so it's nice that it just starts running again when you move to a spot in the presentation.

thanks,

Jay

[snorky]

any time I get actionscript code to work I feel like I have really accomplished something!

I'm curious as to why the "gotoAndStop messed up the audio". I also have audio running throughout my presentation and the audio tracks the rest of the content perfectly when I use the scrubber. Is there a problem I have not seen yet?

As an experiment I tried your suggestion and it is doing something I thought was weird. When I click the scrubber thumb and drag it it works fine and when I release it it starts playing again at that point. But, when I drag it and stop, still holding the mouse button down, it starts playing again. I would have expected it to stay stopped as long as I held the mouse button down. Maybe I need to use a different mouse event?

[tphoto1]

I'm in a little over my head. I'm not sure why it effected the audio. gotoAndPlay reacts the same way for me, but that doesn't bother me that much.

The only problem I am having with the scrubber is sometimes when I pull it all the way to the very end, it kicks over to the preloader and because the preloader has already loaded, it gets stuck there. When I had the preloader in the main timeline, I would also have that problem when running it all the way back to the front. Since I moved the preloader to its own scene it alleviated the problem of scrolling to the beginning. I have know idea why scrolling to the end could possibly make it go to the preloader, but it does sometimes. I have a stop in the last frame and it does stop there when it is playing and arrives at the end. This may be a preloader issue and not this scrubber's issue. I'm not sure. Also when I pull the scrubber to the very end, sometimes it gets stuck there, it starts playing from the beginning, but my scrubber is just dead sitting all the way at the end even though it has started over. The scrubber seems to work great as long as I don't pull it all the way to the very end.

I'm still working on it, but to see my project go to:

http://www.thatcherdesign.com/LifeWay/sgl/SGLwebinar3.html

[snorky]

I noticed that the gotoAndPlay does indeed work in your project as we have discussed. And, since yours is further along with content (ie. there is a good amount of content in there) I agree this is not an issue. I was testing on a simple presentation with only a handful of screens and it was very obvious that the thumb was moving while the mouse button was still down. but when I add content this will be so much less obvious as to not be an issue.

for your scrubber issues, maybe something to try is to set the min greater that the first few frames and the max less than the final frame. maybe that would preserve the functionality of having the scrubber while eliminating this behavior?

I had questions about your presentation. did you write the script and record the voiceover first and then match up the screens with it? that's how I'm doing it. did you use any special software to capture/format the screens? I started using Camtasia but filesize quickly became a problem as what it creates more closely resembles video. I ended up simply capturing every screen I needed and now I am using AS tweening to move them around on the stage.

one more thought...when I first looked at your presentation I completely missed the scroller. you might want to make it a little more obvious, darker color, in a panel, whatever. and in my presentation I am including a Play button and a Pause button along with the scrubber. that seems necessary in case someone wants to stop during the presentation and then resume later.

nice job in putting it all together BTW!

[tphoto1]

Great idea to change the min and max ranges. That solved the slight glitch I was running into.

I did not write the script, but the workflow was: script; voiceover; then with the script printed out and large thumbnails of the artwork available, the client and I identified what spreads matched up with each script topic; I sized all the artwork and saved as a png (to let Flash compress it later); I added slight background music to the voiceover; embedded the final audio in Flash; then tween animations. (I used FlashEff 2 for the text animations.)

Would you mind sending me the code for your pause/play button? That was going to be my next forum post. Can I just use the PlayPauseButton from the video component for the button graphic?

[snorky]

glad to hear changing the min/max helped! as I said, AS is something of a trial and error exercise for me! I've been a programmer for 25 years but I never seem to find the time to just sit down and learn AS, instead, I'm always just trying to hack something together.

sure, I'd be glad to send you the play/pause buttons when I finish them. should be in a few days. I'm planning to take the built-in component, grab its skins and then use those on buttons I create.

thanks for the overview on your workflow. are you planning to distribute on CD? via the website?

[waterfall_zen]

Thank you for the example script. Can you do that with a custom slider? How would I approach if I want a pause, play again, current time, total time indicator on screen too?

[snorky]

not sure about a custom slider. you could always re-skin the slider; that's what I'm doing and it is looking pretty cool.

I'll post more in a few days with code for a play and pause button. I'm not sure if I will have anything on curent/total time.

[ChadThompson]

Awesome. Nicely done Snorky.

I'm trying to learn all about the enterFrame function so thanks for the very useful 'in action' example

[Nigel_Croucher]

Thanks a lot! been looking for this for a while. Great work keep it up

Nigel Croucher

[Ry_55555]

Help Please!

I have used the slider successfully to move between frames 43 and 60 in an individual scene:

stop()

function moveAlong_ff(evt:Event):void {

gotoAndStop(sl_ff.value);

}

sl_ff.minimum = 43;

sl_ff.maximum = 60;

sl_ff.liveDragging = true;

sl_ff.addEventListener(Event.CHANGE, moveAlong_ff);

this.addEventListener("enterFrame",onEnterFrame_ff);

function onEnterFrame_ff(e:Event) {

sl_ff.value = this.currentFrame;

}

And I have also managed to set up some buttons that navigate between scenes successfully:

ff_btn2.addEventListener(MouseEvent.CLICK, jump11);

function jump11(event:MouseEvent):void

{

          gotoAndPlay(1,"Scene2");

}

fb_btn2.addEventListener(MouseEvent.CLICK, jump12);

function jump12(event:MouseEvent):void

{

          gotoAndPlay(1,"Scene3");

}

bs_btn2.addEventListener(MouseEvent.CLICK, jump13);

function jump13(event:MouseEvent):void

{

          gotoAndPlay(1,"Scene4");

}

However, when the above scripts are present together there seems to be some kind of conflict and I get the error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.

          at trailfresh_demo_19_fla::MainTimeline/onEnterFrame_ff()

Can anyone help as I'd really like to be able to navigate between scenes using buttons and also have the slider work in individual scenes

[markGodriguez]

i used the code from above

function moveAlong(evt:Event):void {
gotoAndStop(sl.value);
}

sl.minimum = 1;
sl.maximum = this.totalFrames;
sl.liveDragging = true;
sl.addEventListener(Event.CHANGE, moveAlong);

this.addEventListener("enterFrame",onEnterFrame);
function onEnterFrame(e:Event) {
sl.value = this.currentFrame;
}

but when i release the mouse after dragging the thumb the presentation does not continue to run. did i leave a line of code out that makes it keep playing when you release the mouse?

this is a simple and clean solution for an issue that had been haunting me for awhile now, how to control the timeline of an SWF. thanks to Ned for steering me to this thread

[snorky]

change the second line from gotoAndStop to gotoAndPlay

[markGodriguez]

that makes it play after releasing the thumb but if  i quit mvoing the thumb and try to hold it in place it keeps wanting to move the playhead. i may need to figure out an onRelease handler to start it playing again. thanks though.

[ChadThompson]

adding a 'nextFrame' action to the function seems to send you to the next frame after release or mouse up, but I'm not sure how to tell it to play after the release.

function moveAlong(evt:Event):void {      gotoAndStop(sl.value); //when playhead is released movie stops      //gotoAndPlay(sl.value); //This doesn't work, needs an onRelease or something      nextFrame(); }

[markGodriguez]

i found a workaround for the issue.

here are the parts of it:

var mouseState:Boolean = false

stage.addEventListener(MouseEvent.MOUSE_UP, mouseStateUp_Handler);
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseStateDown_Handler);

function moveAlong(evt:Event):void {
if (mouseState==true) {
  clipholder.gotoAndStop(slid.sl.value);
}else{
  clipholder.gotoAndPlay(slid.sl.value)
trace("false");}
}

by tracing the original "moveAlong" function i found that after releasing the thumb on the slider it would still fire the "moveAlong" function one extra time which was cancelling the code i had in place to make it start the movie playing again.

by applying the MOUSE_UP and MOUSE_DOWN listeners to the entire stage i set the variable mouseState no matter what i was over. i then gave the  argument that had to be true for it to fire the first part of the "moveAlong" function. so once the mouse is released it can no longer fire the first part of the function anymore because on MOUSE_UP the mouseState becomes false.

a little unorthodox but effective and working perfectly and that is usually all that matters.

now if i could just find where they are limiting the overall size of the "thumb" on the slider so i can skin it differently i will be golden.

thanks again for the input

[snorky]

OK. so this is almost complete. now we need to get this to work like this,

if (currentStatus==moviePlaying){

     releasing the thumb lets the movie continue playing at that point

}

elseif (currentStatus==moviePaused)

{

     releasing the thumb causes the movie to stay paused at that point

}

[markGodriguez]

try this:

if (currentStatus==moviePlaying){

     clipholder.gotoAndPlay(slid.sl.value);

}

elseif (currentStatus==moviePaused)

{

     clipholder.gotoAndStop(slid.sl.value);

}

"clipholder" is a variable i created for the loader object that contains the loaded SWF.

in the function for the pause button change the value of "currentStatus" to "moviePaused"

in the function for the play button change the value of "currentStatus" to "moviePlaying"