A Flash Developer Resource Site

Results 1 to 5 of 5

Thread: Seekbar Component - Flash CC 2014

  1. #1
    Junior Member
    Join Date
    Feb 2015
    Posts
    3

    Seekbar Component - Flash CC 2014

    I'm using the seekbar component to scrub the main timeline and it works really well, but there are a couple of things I would like to change and I'm sort of at a standstill.

    -after scrubbing the timeline, the animation is paused (I would prefer it to keep playing if the animation was playing when the scrub happened OR pause if the animation was paused when the scrub happened)
    -i'm toggling between a play/ pause button which work well, until you scrub. Which pauses the animation but doesn't toggle my variable.

    I don't use components very often, so I apologize if this is a dumb question.

    Thanks in advance!

    Code:
    var animPlaying : Boolean = true;
    var ccShowing : Boolean = false;
    cc.visible = false;
    //pauseBtn.visible = false;
    
    ccBtn.addEventListener(MouseEvent.CLICK, toggleCc);
    playBtn.addEventListener(MouseEvent.CLICK, togglePlay);
    pauseBtn.addEventListener(MouseEvent.CLICK, togglePlay);
    
    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;
    cc.gotoAndStop(this.currentFrame);
    }
    
    function toggleCc(evt:MouseEvent):void
    {
    	if (!ccShowing) {
    		cc.visible = true;
    		ccShowing = true;
    	} else {
    		cc.visible = false;
    		ccShowing = false;
    	}
    }
    
    function togglePlay(evt:MouseEvent):void
    {
    	if (!animPlaying) {
    		this.gotoAndPlay(currentFrame);
    		cc.gotoAndPlay(currentFrame);
    		playBtn.visible = true;
    		pauseBtn.visible = false;
    		animPlaying = true;
    	} else {
    		this.gotoAndStop(currentFrame);
    		cc.gotoAndStop(currentFrame);
    		pauseBtn.visible = true;
    		playBtn.visible = false;
    		animPlaying = false;
    	}
    }

  2. #2
    Junior Member
    Join Date
    Feb 2015
    Posts
    3
    UPDATE: you can download the file here http://client.flintls.com/forum.fla

  3. #3
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Hi,

    Could you upload your FLA file at TinyUpload and post the link here? That would help tremendously
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  4. #4

  5. #5
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Hi,

    I knew something was wrong when you mentione Seekbar component, as I tried myself experimenting with the FLV Seekbar component with no results. The component you're using is called a Slider -- please consider using that for future reference

    After a lot of experimenting and trying many different techniques, I ended up with this final code (the changes are highlighted in red):

    Code:
    import fl.events.SliderEvent;
    
    var animPlaying : Boolean = true;
    var ccShowing : Boolean = false;
    cc.visible = false;
    var down : Boolean = false;
    var hold : Boolean = false;
    //pauseBtn.visible = false;
    
    ccBtn.addEventListener(MouseEvent.CLICK, toggleCc);
    playBtn.addEventListener(MouseEvent.CLICK, togglePlay);
    pauseBtn.addEventListener(MouseEvent.CLICK, togglePlay);
    
    function moveAlong(evt:Event):void {
    	if(hold){
    		if(animPlaying){
    			gotoAndPlay(sl.value);
    		} else {
    			gotoAndStop(sl.value);
    		}
    	} else {
    		gotoAndStop(sl.value);
    	}
    	hold = false;
    }
    
    sl.minimum = 1;
    sl.maximum = this.totalFrames;
    sl.liveDragging = true;
    sl.addEventListener(Event.CHANGE, moveAlong);
    sl.addEventListener(MouseEvent.MOUSE_DOWN, changeMouseDown);
    stage.addEventListener(MouseEvent.MOUSE_UP, changeMouseUp);
    
    function changeMouseDown(e:MouseEvent){
    	down = true;
    }
    
    function changeMouseUp(e:MouseEvent){
    	if(down){
    		hold = true;
    	}
    	down = false;
    }
     
    this.addEventListener("enterFrame",onEnterFrame);
    function onEnterFrame(e:Event) {
    	sl.value = this.currentFrame;
    	cc.gotoAndStop(this.currentFrame);
    }
    
    function toggleCc(evt:MouseEvent):void
    {
    	if (!ccShowing) {
    		cc.visible = true;
    		ccShowing = true;
    	} else {
    		cc.visible = false;
    		ccShowing = false;
    	}
    }
    
    function togglePlay(evt:MouseEvent):void
    {
    	if (!animPlaying) {
    		this.gotoAndPlay(currentFrame);
    		cc.gotoAndPlay(currentFrame);
    		playBtn.visible = true;
    		pauseBtn.visible = false;
    		animPlaying = true;
    	} else {
    		this.gotoAndStop(currentFrame);
    		cc.gotoAndStop(currentFrame);
    		pauseBtn.visible = true;
    		playBtn.visible = false;
    		animPlaying = false;
    	}
    }
    I know, it's a weird fix and it probably doesn't make much sense to you, but I tried adapting a solution which kept your original coding in tact -- otherwise I would have to start from scratch and basically change your whole code.

    There are 2 things to consider when trying to detect WHEN the Slider has changed. The first one is when someone presses on any part of the Slider, and the Thumb automatically goes to that position and starts playing from there. The other situation is that you can grab a hold of the Thumb while the Slider is playing -- and when the user lets go, the Slider should continue. To take both of these situations into account, I made 2 new Action Listeners which detect when the Mouse is pressed Down ON the Slider (MouseEvent.MOUSE_DOWN) and when it's been released (MouseEvent.MOUSE_UP) (it only fires if you press down ON the Slider, but the Mouse_UP event is fired regardless of this, so where you release your mouse is irrelevant). After experimenting for a bit, I came up with the solution above -- that I make 2 Boolean variables (down and hold), and set both of their initial values to false. When you press the Mouse button DOWN, down is set to true -- and when you release the mouse button, down is set to false. But, on the MOUSE_UP event, we check if down is true, and if it is, it means that we've pressed somewhere on the Slider, and thus we set hold to true. On the moveAlong function, we check if hold is true, and if it is, it means that we pressed somewhere on the Slider other than the Thumb (like, on any part of the Slider except for the moving thing). In this case, we first check if animPlaying is true, and if it is, that means the Slider was playing before we stopped it, and thus we should continue the playing. On the other hand, if animPlaying is false, we simply stop the Slider from playing. Also, if hold is false, but the moveAlong function was executed, that means the Slider Thumb has been grabbed and is being moved by the player, in that case, we simply change the frame to where the Slider Thumb is (like it was originally in your file). And lastly, we set hold variable to false at the end of the moveAlong function.

    Yeah, this should take care of all the possibilites and hopefully work for you as well

    Also, as a side-note, the toggleCc function of yours can be simplified to this:

    PHP Code:
    function toggleCc(evt:MouseEvent):void
    {
        
    cc.visible = !cc.visible;
        
    ccShowing = !ccShowing;

    We simply set cc.visible's value to it's opposite value, and the same goes for ccShowing. If it's true, then it's set to its opposite value, which is false, and when it's false, it will be set to true.

    I'm posting the FLA file as well: LINK TO DOWNLOAD FLA FILE

    Hope this helps, and if you have any further questions, feel free to ask
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center