13 Replies Latest reply on Nov 20, 2009 7:24 AM by kglad

    Cycling images using slider.

    MatAut

      Hi, I am a complete newbie at flash(it took me 10 minutes just to figure out where to put actionscript code lol). Anyway I'm trying to make a flash where you can cycle through images using a slider bar. They are images of a persons face from 13 angles starting from looking 90 degress left, to center, to 90 degrees right. I want to be able to rotate the face using the slider. What I'm trying to do is similar to another thread I was reading(though not exactly the same goal) so I took the code from there just to start myself off. Currently when I test the movie the face is moving back and forth(in loop play) and the slider bar does not interact with the images/frames at all. This is the code I have in Layer 1 Frame 1. I'm aware this code might be completely wrong for what I want to do since I pulled it from someone elses project.

       

      function f(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number){

       

      mc.m=(y1-y2)/(x1-x2);

       

      mc.b=y1-mc.m*x1;

       

      }

       

       

       

      f(mc_slider.mc_handle,mc_slider.mc_rail._x,1,mc_slider.mc_rail._x+mc_slider.mc_rail._width -mc_slider.mc_handle._width,mc_frame000._totalframes);

       

      mc_slider.mc_handle.onPress=function(){

       

      this.startDrag(false,mc_slider.mc_rail._x,this._y,mc_slider.mc_rail._x+mc_slider.mc_rail._ width-mc_slider.mc_handle._width,this._y);

       

      clearInterval(dragI);

       

      dragI=setInterval(dragF,50);

       

      }

       

      mc_slider.mc_handle.onRelease=mc_slider.mc_handle.onReleaseOutside=function(){

       

      this.stopDrag();

       

      clearInterval(dragI);

       

      }

       

      function dragF(){

       

      frameNum = Math.round(mc_slider.mc_handle.m*mc_slider.mc_handle._x+mc_slider.mc_handle.b)

       

      trace(mc_frame000+" "+mc_slider.mc_handle.m+" "+mc_slider.mc_handle.b+" "+frameNum)

       

      mc_frame000.gotoAndStop(frameNum);

       

      }

       

       

       

       

       

       

      And this is the code I put in the symbol for the slider-

       

      this.perc=0 ;

      handle.onPress=function(){

      this.startDrag(true,0,0,rail._width,0);

      this.onEnterFrame=function(){

        perc=Math.round(this._x*100/rail._width) ;

      }

      }

      handle.onRelease=stopDrag;

      handle.onReleaseOutside=stopDrag;

       

       

       

       

      Any help would be appreciated, thanks!

        • 1. Re: Cycling images using slider.
          kglad Adobe Community Professional & MVP

          1.  remove the code you added.

           

          2.  you need a movieclip with path/name mc_slider.mc_handle on the timeline that contains that code.

           

          3.  your faces need to be in frame 1,2 etc of mc_frame000 that also needs to be on the timeline that contains that code.

          1 person found this helpful
          • 2. Re: Cycling images using slider.
            MatAut Level 1

            Ok, so I removed that little bit of code. For the mc_slider.mc_handle, what should I be converting into the movieclip(or should I just make a new blank symbol with that name)? Also how do I turn multiple frames into 1 movieclip for the faces? It only lets me turn 1 frame into 1 symbol. Sorry for the newbie questions.

            • 3. Re: Cycling images using slider.
              kglad Adobe Community Professional & MVP

              you need to create a slider graphic.  it should slide along a track graphic.  convert the slider to a movieclip and convert the track with sliderMC into a movieclip.

               

              edit the track movieclip and click on the slider movieclip and assign an instance name in the properties panel, say sliderMC.  drag your track movieclip from the library to the main timeline and in the properties panel assign an instance name, say trackMC.  you can then use exactly the code i gave in the message you checked to obtain that code.

               

              if you have those faces already arranged along a sequence of keyframes on a timeline, left-shift and drag across those frames to highlight all the frames that contain faces and right click and click copy or cut.  click insert, symbol, movieclip,ok.  on that new movieclip's frame 1 timeline right click and click paste.  all the face frames should be copied and the faces should be on-stage with one face per keyframe just like you had it arranged before.

               

              drag that movieclip (with the faces) to the main timeline and give it an instance name, say facesMC.  you can then change mc_content in the copied code to facesMC and test.

              1 person found this helpful
              • 4. Re: Cycling images using slider.
                MatAut Level 1

                Ok, so I did all those things(I think) and now when I test it it cycles through the faces automatically without me doing anything and I can move the slider back and forth and it doesn't affect anything(I get the 'undefined NaN NaN NaN' error whenever I click on the slider). I have the faces movieclip in frame 1 of layer 1 and the slider movieclip in frame 1 of layer 2, when I try to put the slider on layer 1 the faces disappear. Also, when I made the 'faces' symbol it also automatically made a 'frame000' symbol which is the name of the first face PNG file, dunno why it did that. This is what my code looks like now. I used 'faces' for the faces, 'rail' for the track, 'handle' for the slider handle, and 'slider' for the complete handle with rail. I assume the MC you put at the end of the names was just for organizational purposes.

                 

                function f(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number){

                 

                mc.m=(y1-y2)/(x1-x2);

                 

                mc.b=y1-mc.m*x1;

                 

                }

                 

                 

                 

                f(slider.handle,slider.rail._x,1,slider.rail._x+slider.rail._width-slider.handle._width,fa ces._totalframes);

                 

                slider.handle.onPress=function(){

                 

                this.startDrag(false,slider.rail._x,this._y,slider.rail._x+slider.rail._width-slider.handl e._width,this._y);

                 

                clearInterval(dragI);

                 

                dragI=setInterval(dragF,50);

                 

                }

                 

                slider.handle.onRelease=slider.handle.onReleaseOutside=function(){

                 

                this.stopDrag();

                 

                clearInterval(dragI);

                 

                }

                 

                function dragF(){

                 

                frameNum = Math.round(slider.handle.m*slider.handle._x+slider.handle.b)

                 

                trace(faces+" "+slider.handle.m+" "+slider.handle.b+" "+frameNum)

                 

                faces.gotoAndStop(frameNum);

                 

                }

                 

                 

                 

                 

                Btw, thanks for all your help so far, you are part of what makes the internet helpful. I've learned a lot today between ur help and messing around with stuff.

                • 5. Re: Cycling images using slider.
                  kglad Adobe Community Professional & MVP

                  so, faces is not defined on the timeline that contains that code (at the time that trace() function executes).

                   

                  click on an empty part of the stage (or off-stage) and then click on your on-stage faces movieclip.  in the properties panel, on the left side, type "faces" without the quotes.

                  • 6. Re: Cycling images using slider.
                    MatAut Level 1

                    EDIT:Nevermind this post, I figured it out. I just took out the part I put in bold italics.

                     

                    Thanks so much! I have it working now and I also figured out how to have two images going at the same time for a before and after thing and everything is working fine. There's just one aesthetic problem I have, the handle on the slider doesn't go all the way to the end of the rail, there's one more notch of space at the end. Is there anyway to fix this? Here's my code now, slightly updated from my last post.

                     

                    function f(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number){

                     

                    mc.m=((y1-y2)/(x1-x2))/2;

                     

                    mc.b=y1-mc.m*x1;

                     

                    }

                     

                     

                     

                    f(slider.handle,slider.rail._x,1,slider.rail._x+slider.rail._width-slider.handle._width,fa ces._totalframes,faces2._totalframes);

                     

                    slider.handle.onPress=function(){

                     

                    this.startDrag(false,slider.rail._x,this._y,slider.rail._x+slider.rail._width-slider.handle._width,this._y);

                     

                    clearInterval(dragI);

                     

                    dragI=setInterval(dragF,50);

                     

                    }

                     

                    slider.handle.onRelease=slider.handle.onReleaseOutside=function(){

                     

                    this.stopDrag();

                     

                    clearInterval(dragI);

                     

                    }

                     

                    function dragF(){

                     

                    frameNum = Math.round(slider.handle.m*slider.handle._x+slider.handle.b)

                     

                    trace(faces+" "+faces2+" "+slider.handle.m+" "+slider.handle.b+" "+frameNum)

                     

                    faces.gotoAndStop(frameNum);

                    faces2.gotoAndStop(frameNum);

                     

                    }

                     

                     

                     

                     

                    • 7. Re: Cycling images using slider.
                      kglad Adobe Community Professional & MVP

                      you're welcome.

                       

                      and yes, the code i gave assumed your movieclips had reg point along  their left-side.  if slider.handle has reg point along its right-edge, removing its _width from the call to f() and from the startDrag() parameters is appropriate.

                      • 8. Re: Cycling images using slider.
                        MatAut Level 1

                        Now I need something else in this flash. Right now in the flash I can rotate two faces(a before and after) using a horizontal slider, I now need to be able to change the after face thats being rotated on the right to a different after face using a vertical slider and be able to rotate that face along with the before face. I have already made the movieclips for the vertical slider and a moveclip for the third set of faces. I have no idea where to start with this part of the code, here's my current code.

                         

                        function f(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number){

                         

                        mc.m=((y1-y2)/(x1-x2))/2;

                         

                        mc.b=y1-mc.m*x1;

                         

                        }

                         

                         

                         

                        f(slider.handle,slider.rail._x,1,slider.rail._x+slider.rail._width-slider.handle ._width,faces._totalframes,faces2._totalframes,faces3_totalframes);

                         

                        slider.handle.onPress=function(){

                         

                        this.startDrag(false,slider.rail._x,this._y,slider.rail._x+slider.rail._width,this._y);

                         

                        clearInterval(dragI);

                         

                        dragI=setInterval(dragF,50);

                         

                        }

                         

                        slider.handle.onRelease=slider.handle.onReleaseOutside=function(){

                         

                        this.stopDrag();

                         

                        clearInterval(dragI);

                         

                        }

                         

                        function dragF(){

                         

                        frameNum = Math.round(slider.handle.m*slider.handle._x+slider.handle.b)

                         

                        trace(faces+" "+faces2+" "+faces3+' "+slider.handle.m+" "+slider.handle.b+" "+frameNum)

                         

                        faces.gotoAndStop(frameNum);

                        faces2.gotoAndStop(frameNum);

                        faces3.gotoAndStop(frameNum);

                         

                        }

                         

                         

                        I was able to successfully do this using buttons that changed the alpha settings for the faces making one disappear and one reappear, but I need it to be a vertical slider not buttons.

                        • 9. Re: Cycling images using slider.
                          kglad Adobe Community Professional & MVP

                          if all the face movieclips contain the same number of frames and all have the same face rotation on the same frame number, your vertical slider can select for the various face movieclips and send the selected face movieclip to the horizonal slider to be played.

                          • 10. Re: Cycling images using slider.
                            MatAut Level 1

                            I can't even get the vertical slider to work right, it moves left and right and if I move it left or right then click on it it moves up or down to the height it would be at if it worked properly. I've just been trying to get it to rotate the images like my other slider before I start trying to get it to do other things, this is my code for the vertical slider, I took the code from the horizontal slider and switched all the Xs with Ys and all the Ys with Xs and all the _widths with _heights-

                             

                            function a(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number){

                            mc.m=((y1-y2)/(x1-x2))/2.1;

                            mc.b=y1-mc.m*x1;

                             

                            }

                             

                            a(slider2.handle2,slider2.rail2._y,1,slider2.rail2._y+slider2.rail2._height-slider2.handle 2._height,faces._totalframes,faces2._totalframes,faces3._totalframes);

                             

                            slider2.handle2.onPress=function(){

                            this.startDrag(false,slider2.rail2._y,this._x,slider2.rail2._y+slider2.rail2._height,this. _x);

                            clearInterval(dragB);

                            dragB=setInterval(dragA,50);

                             

                            }

                             

                            slider2.handle2.onRelease=slider2.handle2.onReleaseOutside=function(){

                            this.stopDrag();

                            clearInterval(dragB);

                             

                            }

                             

                            function dragA(){

                            frameNum = Math.round(slider2.handle2.m*slider2.handle2._y+slider2.handle2.b)

                            trace(faces+" "+faces2+" "+faces3+" "+slider2.handle2.m+" "+slider2.handle2.b+" "+frameNum)

                            faces.gotoAndStop(frameNum);

                            faces2.gotoAndStop(frameNum);

                            faces3.gotoAndStop(frameNum);

                             

                            }

                            • 11. Re: Cycling images using slider.
                              MatAut Level 1

                              any idea why I can't get the vertical slider to work right?


                              • 12. Re: Cycling images using slider.
                                MatAut Level 1

                                Pleassssse! Can anyone help me?? I've been trying for the past couple days to get this vertical slider to work right but I can't figure it out.

                                • 13. Re: Cycling images using slider.
                                  kglad Adobe Community Professional & MVP

                                  if your slider's not moving in the correct rectangle it's because you defined its rectangle parameter incorrectly.