5 Replies Latest reply on Jun 3, 2007 5:01 PM by Thumbslinger

    Photo Gallery - Next or Previous Button

    Iron_Mike Level 1
      Hi,

      I am new to Action Script and I have a small issue that I can't seem to figure out...

      Probably very easy for you guys... ;)

      (1)
      I have a Photo Gallery here, kinda like a Photo show and under the picture is a 'Next' and 'Previous' button.

      Now when the user will click on e.g. the 'Next' button I want the pic shown to change into the next picture.

      I have all my pics in a movieclip all with labels s1, s2, s3 etc. ....

      I already have the code setup to go to the appropriate movieclip but I don't know how to tell Flash via Action Script to go to label "s" + 1.... meaning:

      if the picture with the label "s2" is shown right now and the user clicks on the 'Next' button Flash need to go to the mc with my pics in it and then to the label "s3" --> "s2" + 1

      How do I do that ?

      (2)

      Another thing I was thinking about:

      Let's say I have 7 pics in the photo gallery and user is seeing pic # 7 right now (label "s7") and he clicks the 'Next' button I need to tell Flash to jump to label "s1" (to the first pic) because there is no eigth picture...

      How is that done ?

      Note: I am using Flash 9 CS3 so either AS2 or AS3 is welcome...

      Any help is appreciated and I thank you in advance for that !!! ;)

      Mike
        • 1. Re: Photo Gallery - Next or Previous Button
          Thumbslinger Level 1
          if you go to here:
          http://www.sapphiremonkey.com/picDemo.zip

          you can download a simple Flash 8 document I made to show you the code.
          Kelly
          • 2. Photo Gallery - Next or Previous Button
            Iron_Mike Level 1
            quote:

            Originally posted by: CanonBoy
            if you go to here:
            http://www.sapphiremonkey.com/picDemo.zip

            you can download a simple Flash 8 document I made to show you the code.
            Kelly


            Kelly,

            thanx for your reply....

            I think we're very close but here's some more info - I probably should have stated that earlier... sorry ! ;)

            the thing is a little more complicated and I just wanna make sure I use ur code at the right spots:

            So here are the three main objects we're dealing with:

            (1) movieclip next_btn --> contains rollover and rollout effects for the Next button as well as an invisible button holding the action script for that button
            (2) movieclip 'rollover_mc' --> which will bring a nice rollover effect between the pics
            (3) movieclip 'pics_mc' --> contains my pictures in a simple timeline with labels s1, s2, s3 etc. and stop actions at each frame for each pic

            --> (1) and (2) are on the same level, (3) is nested inside of (2)

            when the user clicks (1) the 'Next' button (label: next_btn) the cursor in the timeline of (2) the 'rollover_mc' movieclip will proceed and produce nice rollover animation from one pic to the next pic, having (3) in the midst of the animation go from one pic to the next.... at least that's the idea.... ;)

            so the action script for the 'Next' button (label: next_btn) right now is:

            on(rollOver){
            gotoAndPlay("m1"); --> rollover effect for the next button
            }
            on(releaseOutside, rollOut){ --> rollout effect of the next button
            gotoAndPlay("m2");
            }
            on(release){
            this.pics_rollover_mc.gotoAndPlay("p1");
            }

            --> p1 is the label of the frame where the cursor will jump to and start the rollover animation --> that works ;) haha

            while the animation is rolling over to the next pic and it is just covering the actual picture that was just shown, the cursor (runnning through the timeline in the (2) 'rollover_mc' movieclip) will hit a key frame with an action script in it...

            and in that action script I need to tell Flash to go to (3) the movieclip with my pics in it (label: pics_mc which is nested in that timeline) and go from let's say "s2" PLUS ONE to label "s3" (the next pic in the series)...

            right now the code in that keyframe is:

            this.pics_mc.gotoAndPlay("s2")

            which means it only shows (after the animation) Pic2 (label: s2)

            now the code that you gave does make sense to me but where do I need to put which parts ?

            here's your code again:

            stop();
            _global.n = 1;
            _root.next_mc.onRelease = function() {
            n = n+1;
            if (n == 5) {
            n = 1;
            }
            _root.pics_mc.gotoAndStop("s"+n);
            };

            For example, the establishing code for the variable n.... where do I need to put this code so it is globally valid ?

            I pasted it into the action keyframe of my next_btn, so the code looked like this:

            on(rollOver){
            gotoAndPlay("m1");
            }
            on(releaseOutside, rollOut){
            gotoAndPlay("m2");
            }
            _global.n = 1;
            _root.next_btn.onRelease = function() {
            n = n+1;
            if (n == 5) {
            n = 1;
            }
            _root.pics_mc.gotoAndStop("s"+n);
            };

            and it gave me the following error message:

            **Error** Symbol=1.2 next_btn, layer=invisible_btn, frame=1:Line 7: Statement must appear within on handler
            _global.n = 1;

            **Error** Symbol=1.2 next_btn, layer=invisible_btn, frame=1:Line 8: Statement must appear within on handler
            _root.next_btn.onRelease = function()

            my (amateurish) opinion is that the part

            _root.pics_mc.gotoAndStop("s"+n); has to go into the action script keyframe that the cursor will hit when running through the timeline in the (2) rollover_mc movieclip

            therefore if u wanna start the animation when u click the button u would have to change your code that u paste into the next_btn keyframe:

            on(rollOver){
            gotoAndPlay("m1");
            }
            on(releaseOutside, rollOut){
            gotoAndPlay("m2");
            }
            _global.n = 1;
            _root.next_btn.onRelease = function() {
            n = n+1;
            if (n == 5) {
            n = 1;
            }
            _root.pics_rollover_mc.gotoAndPlay("p1");
            };

            I did that but it still gives me the above error message....

            Thanx for your help in advance ! ;)



            • 3. Re: Photo Gallery - Next or Previous Button
              Thumbslinger Level 1
              Mike-
              This code:
              stop();
              _global.n = 1;
              _root.next_mc.onRelease = function() {
              n = n+1;
              if (n == 5) {
              n = 1;
              }
              _root.rollover_mc.pics_mc.gotoAndStop("s"+n);
              };

              Should go on the Main Timeline on Frame 1.

              In your code, I noticed the pics_mc was referred to as "pics":

              your code:
              on(release){
              this.pics_rollover_mc.gotoAndPlay("p1");
              }

              make sure that is properly named.

              Also, the code I did assumed next_mc was a movie clip, not a button. You would have to use labels in the actual timeline of the button that refer to the animation. Then, convert that button to a movieclip and use the labels to direct flash where to go.

              But, if it is a button and it's all working except the counter and return to 1 after 9 or whatever, then in this line:

              on(release){
              this.pics_mc.rollover_mc.gotoAndPlay("p1"); //need a dot (.) between each name
              }
              |||| I'm leaving the below in because I may be a little confused and late nights are scrambling my head....but see below as well ||||

              put the if statement inside that so that when the release happens (they've actually clicked) the count is moved like this:

              on(release){
              n = n+1;
              if (n == 5) {
              n = 1;
              }
              _root.rollover_mc.pics_mc.gotoAndPlay("s"+n);
              }

              Note that the proper path should be _root.rollover_mc.pics_mc if indeed Next_btn is on the stage. "This" is for referring to that specific clip so the code was saying look in here (next_btn) for the rollover movie clip inside of the pics clip.

              Does that help? I'm calling it a night now but if it doesn't work, shoot me a .fla and I'll take a look. kelly at sapphiremonkey dot com will be fine.

              put the global declaration on the first frame of the main timeline. That will get rid of the first Error message.. appearing in an on handler



              Then,
              • 4. Re: Photo Gallery - Next or Previous Button
                Iron_Mike Level 1
                Kelly,

                thank you so much !!!!

                I finally figured it out, the key was to set the global n=1 rule in the main timeline either in frame 1 or at least before the buttons appear on stage...

                After I did that I adjusted the rest of your code and it works perfectly....

                Thanx again !!! ;)

                Can you recommend me some books or video tutorials to enhance my knowledge of action script 2 & 3 ?

                I watched the AS3 tutorial on lynda.com but it wasn't that helpful....

                Mike
                • 5. Re: Photo Gallery - Next or Previous Button
                  Thumbslinger Level 1
                  Hey Mike-
                  That's great you got it working!

                  I'm still in AS2 and Flash8 but the Total Training series and Advanced ActionScript is really good for a little more than just the basics.

                  www.gotoandlearn.com has good tutorials as does actionscript.org. You might also try kirupa.com.

                  Those should set you up for some stuff. ActionScript Bible is a good book to have but some say if you don't have a comfortable feeling for general code, it might be overwhelming. Check out your local library in the 001 sections. You'll be surprised at what books you can find!