18 Replies Latest reply on Feb 13, 2010 9:24 AM by kglad

    Slide Effect

    el pescado

      Hello,


      I was wondering what was the best way to complete this sliding effect (link below).  What I am stuck on is the how the existing page slides out. Meaning, when you click the top menu (Gear, Faces, Shop, etc.), one page slides out as the new page slides in.  Are they doing this by loading external swfs? Do you build and external swf for every combination.  I know you can have the new page overlap or build one large image (jpg) that slides.  But, this seems more complex.


      Example:

      http://oetzi3300.com/site.html#/Gear/OTZ-1Suede/

       

      Any help is appreciated.


      Thank you.

        • 1. Re: Slide Effect
          kglad Adobe Community Professional & MVP

          there are no combinations to deal with.  the current page slides out (or should slide out -  there are some problems with that site) and the next page slides-in.

          • 2. Re: Slide Effect
            jscamposcr

            well you can just create one movieclips for each part of your site and then animate that movieclip with tweener or tweelite, those are pretty easy to use and you can get the same result

            • 3. Re: Slide Effect
              el pescado Level 1

              OK, so at a high level how is it working?  If I am on the Gear page, and click the Faces page........Face slides in, Gear slides out.  But, if I am clicking on the Contact page, Gear slides out..........Contact slides in.  I have seen where the pages slide over each other.  I have also seen where it's one long image and you control the movie by adding stops at each page. 

               

              I just can't get my head around how they are doing this on the timeline.  Maybe it's so simple and I am missing it.  Maybe it's more advanced coding?


              Thanks,
              Gabe

              • 4. Re: Slide Effect
                el pescado Level 1

                OK, so create individual swfs/movie clips for each combo?

                 

                1. Gear to Faces

                2. Gear to Stocklist

                3. Gear to More

                 

                etc.

                 

                etc.

                • 5. Re: Slide Effect
                  jscamposcr Level 1

                  actually it is coding, but really easy coding, even if you don't know as3 you can get what you want by reading the documentation of those libraries, it's pretty easy you should try, 'cause for this, timeline is not your friend.....

                   

                  Regards from Costa Rica

                  • 6. Re: Slide Effect
                    kglad Adobe Community Professional & MVP

                    doing that with the timeline would be an unholy mess and, you're correct, would require all combinations to be accounted for.

                     

                    but if you use actionscript, this is a simple effect.  tween the current out (with actionscript) and tween the next one in (from just off-stage).

                    • 7. Re: Slide Effect
                      el pescado Level 1

                      Thanks, I am familiar with importing tween and easing classes in AS3.  I can put that code on the timeline (in a keyframe) but I still can't visualize the combo of each page.  Sorry.

                       

                      Say I code on frame 2 to have the page 1 tween in and stop.  Do I put code on frame 3 that says you tween page 1 out and page 2 in?  Then code on frame 4 that says tween page 1 out and page 3 in?  Etc.

                       

                      This is what I am not getting.

                       

                      Thanks for you quick responses on a Friday.

                      • 8. Re: Slide Effect
                        jscamposcr Level 1

                        no, lets just make it look pretty, create your movieclips drag them to the stage and assign them a name that you can use in your script, now lets create a variable

                         

                        var _currentPage:MovieClip = new MovieClip();  //here is going to be the page that is already on the stage

                         

                        then with the tweener just write

                         

                        Tweener.addTween(_currentPage, {x:-1000, time: 2});     //this will movie it out of the stage

                        Tweener.addTween(_theMovieClipThatYouWantToMoveIn, {x:0, time: 2});     //this will move the movieclip that you want

                        _currentPage = _theMovieClipThatYouJustMovedIn;     //this will change the _currentPage so next time that u move it, it will move the one in the stage

                        • 9. Re: Slide Effect
                          kglad Adobe Community Professional & MVP

                          all your code will be in frame 1.  that's a 1 frame app.

                           

                          are you using as2 or as3?

                          • 10. Re: Slide Effect
                            el pescado Level 1

                            AS3.  Still learning.  But, that is what I have been using.

                             

                            I get how to tween a mc in or out.  Just not getting a one frame app with button control.

                            • 11. Re: Slide Effect
                              kglad Adobe Community Professional & MVP

                              create movieclip buttons, say gearBtn, facesBtn, shopBtn and place them on-stage where they are visible.  create movieclips for what you want displayed on-stage with those buttons are clicked, say gearMC, facesMC and shopMC, assign reg points to the upper left and add them all off-stage.

                               

                               

                              //import the needed tween and easing classes

                              gearBtn.mc=gearMC;

                              facesBtn.mc = facesMC;

                              shopBtn.mc=shopMC;


                              gearMC.x=0;

                              gearMC.y=0;


                              var currentMC:MovieClip = gearMC;

                              gearBtn.addEventListener(MouseEvent.CLICK,f);

                              facesBtn.addEventListener(MouseEvent.CLICK,f);

                              shopBtn.addEventListener(MouseEvent.CLICK,f);


                              var tweenOut:Tween;

                              var tweenIn:Tween;


                              function f(e:MouseEvent){

                              tweenOut=new Tween(currentMC,"x",Elastic.easeIn,currentMC.x,stage.stageWidth,2,true);

                              currentMC=e.currentTarget.mc;

                              currentMC.x=-currentMC.width;

                              tweenIn=new Tween(currentMC,"x",Elastic.easeIn,currentMC.x,0,2,true);

                              }

                              • 12. Re: Slide Effect
                                el pescado Level 1

                                Hey,

                                 

                                Thanks so much for the code. Really cool of you. I can kinda understand what you are doing.  I have my AS3 book in hand.  I created the attached .fla file (super quick) and added the code you sent.  I also added 2 lines for importing the tween and ease class. 

                                 

                                I then set up three mc buttons (had to make them movie clips as I was getting a simplebutton error 1119).  I created 3 movie clips named gearMC, facesMC and shopMC.  I put all registration points to the upper left.  I drug them off to the side of the stage.


                                Movie doesn't seem to be working correctly.  I imagine gearMC should start in the upper left from your code.  Then when you click on the Face button, the gearMC would slide out and faceMC would slide to the upper left. 


                                Not getting this effect.

                                 

                                Thanks for your help.

                                • 13. Re: Slide Effect
                                  kglad Adobe Community Professional & MVP

                                  that code works fine for me.  that easing may not be what you want, though.  check the attached.

                                  • 14. Re: Slide Effect
                                    el pescado Level 1

                                    Now, that is nice!

                                     

                                    Thank you for your help.  I am decent in Flash but the AS3 is still coming. 


                                    Only question I have is what is with the buttons?  Why do they have to be MCs?  When you publish your file and put the mouse over the buttons, they become a cursor. 


                                    Thank you. 

                                    • 15. Re: Slide Effect
                                      kglad Adobe Community Professional & MVP

                                      they have to be movieclips so you can assign a property (mc) to each.  that's convenient.  to make the cursor respond like they're buttons use:

                                       

                                      faceBtn.mouseChildren=false;

                                      faceBtn.buttonMode=true;  // likewise for the other two movieclip buttons.

                                      • 16. Re: Slide Effect
                                        eliteflyers_com Level 1

                                        It's coding but so easy  if you don't know as3 you can get what you want by reading the documentation in the libraries.

                                        • 17. Re: Slide Effect
                                          el pescado Level 1

                                          So, I think it all works now.  I really appreciate you helping me.  I love this effect. 

                                           

                                          I don't get why the MC buttons are more convenient, but adding the extra code works to make is seem like a button.

                                           

                                          Thanks again.

                                          • 18. Re: Slide Effect
                                            kglad Adobe Community Professional & MVP

                                            you're welcome.

                                             

                                            i don't think any experienced flash developers use simple buttons.  we all use movieclip buttons.  there's a little bit more coding required for a movieclip button but they are so much more flexible the extra coding is worthwhile.