A Flash Developer Resource Site

Results 1 to 17 of 17

Thread: Page Transitions (in and out)

  1. #1
    Member
    Join Date
    Mar 2006
    Posts
    66

    Page Transitions (in and out)

    I am trying to create a page transition that will play a movieCLip transition into a page. and then it stops then when another button is pressed, it will play that transition out while loading the appropriate one.

    In the attached FLA, if you click on the red button first, the blue transition plays,

    --red button code--
    mybutton1.onRelease=function(){
    _root.transitionClip.play();
    }



    and then stops on the stage.

    When you click the green button second,

    --green button code ---

    mybutton2.onRelease=function(){
    _root.transitionClip.play("out");
    _root.transitionClip2.play();
    }


    it works correctly/ Playing out of the blue Transition and into the Red transition. However if I click it again it does the opposite, and just keep alternating.

    If I add the

    _root.transitionClip2.play("out");

    to the first button then, nothing works right.

    Does anyone have any idea how to do something like this. I will eventually have more buttons, and may need to use a variable to control which "out" transitions is played, but how do I get the buttons to do this?

    I just want it to exit the current movie clip and play the "in" section of the desired clip.

    ANy ideas.

    I attached the FLA.
    Attached Files Attached Files

  2. #2
    Junior Member
    Join Date
    Jan 2010
    Posts
    27

    open FLA

    hey
    I would like to help but i couldn't open your FLA... Is it normal?

  3. #3
    Junior Member
    Join Date
    Jan 2010
    Posts
    27

    me again

    For me, when i need to control several MC i use global variable and i check then all the time, i put the variable i need to 1 or 0 and i use : if.... then

    _global.VariableName= ...

  4. #4
    Member
    Join Date
    Mar 2006
    Posts
    66
    Thanks for your response. I have attached a new FLA. Not sure what is wrong with the other, but let me know if you could open this.

    Let me know what you think would be a good way of getting this to work correctly. How would I set up the Global variables? (I know how to do the basics with variables)

    I saved this one as Flash CS3 format. Let me know if it works.

    Thanks for your time.
    Attached Files Attached Files

  5. #5
    Junior Member
    Join Date
    Jan 2010
    Posts
    27

    some change

    I made a little changes in yoour FLA... i hope that it what you wanted
    i used
    _global.jumpmc2 = 1 for checking if red box is in
    _global.jumpmc1 = 1 for checking if blue box is in

    i put all _global.jumpmc1 and _global.jumpmc2 to 0 when boxes are out

    I made a mask for each box for fun...

    i modified button release: for checking variables and go to page 1 o page 2 like
    mybutton1.onRelease = function() {
    if (_global.jumpmc2 == 1) { // check where is mc transition2
    transitionClip2.gotoAndPlay("out");
    }
    if (_global.jumpmc1 == 0) {
    //check where is mc transition1 and jump to page 1
    transitionClip1.gotoAndPlay("in");
    gotoAndStop("firstpage");
    }
    };

    good luck
    Attached Files Attached Files

  6. #6
    Junior Member
    Join Date
    Jan 2010
    Posts
    27

    me again

    I made this one in attachment... using mx.transition
    It 's so cool...
    Try these:
    //bibliothèque
    TransitionManager.start(mc,{type:Fade, direction:Transition.IN, duration:2, easing:None.easeNone});
    TransitionManager.start(mc,{type:Iris, direction:Transition.IN, duration:2, easing:Strong.easeOut, startPoint:8, shape:Iris.SQUARE});
    TransitionManager.start(mc,{type:Squeeze, direction:Transition.IN, duration:2, easing:Elastic.easeOut, dimension:1});
    TransitionManager.start(mc,{type:PixelDissolve, direction:Transition.IN, duration:2, easing:None.easeNone, xSections:50, ySections:50});
    TransitionManager.start(mc,{type:Zoom, direction:Transition.IN, duration:2, easing:Elastic.easeOut});
    //

    Good luck
    Attached Files Attached Files

  7. #7
    Member
    Join Date
    Mar 2006
    Posts
    66
    This is great! Thank you so much. I am just getting started messing around with this. But from the looks of it, it looks like it will work for what I am doing. However I do have one question. My final design will have about 8 buttons, so does that mean I can just add more if statements checking for the other buttons? It seems like that will work?

  8. #8
    Member
    Join Date
    Mar 2006
    Posts
    66
    Quote Originally Posted by bertrand2009 View Post
    I made this one in attachment... using mx.transition
    It 's so cool...
    Try these:
    //bibliothèque
    TransitionManager.start(mc,{type:Fade, direction:Transition.IN, duration:2, easing:None.easeNone});
    TransitionManager.start(mc,{type:Iris, direction:Transition.IN, duration:2, easing:Strong.easeOut, startPoint:8, shape:Iris.SQUARE});
    TransitionManager.start(mc,{type:Squeeze, direction:Transition.IN, duration:2, easing:Elastic.easeOut, dimension:1});
    TransitionManager.start(mc,{type:PixelDissolve, direction:Transition.IN, duration:2, easing:None.easeNone, xSections:50, ySections:50});
    TransitionManager.start(mc,{type:Zoom, direction:Transition.IN, duration:2, easing:Elastic.easeOut});
    //

    Good luck

    Thanks bertrand2009! Those are very cool. I didn't even know about those transitions. Thanks for the heads up. They aren't going to work for this specific thing I am trying to do. But I will definitely mess around with that and possibly use it in another project. Thanks!!!

  9. #9
    Member
    Join Date
    Mar 2006
    Posts
    66
    Hey Bertrand, I did end up using your transition idea for a different project . It works wonderfully. I have each page of my site using a different background color. However if I have more than two, then it starts doing some weird stuff. It seems to be playing all the transitions at once with an odd outcome.

    I just want it to fade from the currently loaded color to the next color of the button that is clicked. Take a look at the FLA and let me know if you have any ideas on how to do this? I am going to try it with conditional statements too.

    Do you know how to make this happen correctly. Any ideas would be helpful? here is the FLA.

    Thank you!
    Attached Files Attached Files

  10. #10
    Junior Member
    Join Date
    Jan 2010
    Posts
    27

    hey...

    I can't open your file...
    See you

  11. #11
    Member
    Join Date
    Mar 2006
    Posts
    66
    Oops. That was a CS4 file. Maybe this CS3 file will open for you. Let me know.

    Thanks again for your time.
    Attached Files Attached Files

  12. #12
    Junior Member
    Join Date
    Jan 2010
    Posts
    27

    solution...

    For me, i think that 's easy to use a variable where to tell the system which MC is open
    where=1 when you clic on bt1
    where=2 when you clic on bt2
    where=3 when you clic on bt3
    and make 3 functions for transition named transit1, transit2 and transit3 Each function loaded with the bt1, bt2 or bt3 and will check the variable where and activate the transition OUT only for the mctransition# opened.

    ex:
    If you come from green, where=3, if you clic on bt1, (Blue), the transit1 loaded, make the transition IN for mctransition1 and check the where variable so activate the transition OUT for mctransition3. At last, (and no before) the function put where to 1 (where=1) ... etc

    I hope that help you...
    Attached Files Attached Files

  13. #13
    Member
    Join Date
    Mar 2006
    Posts
    66
    How are your transitionmc's placed on the time line? Are they just placed one on top of the other? or are they embedded in one movieclip? I have mine stacked on top of each other on the stage. But when I do that, the upper most one that has been activaed will become dominant. For instance if red is the top transition, then all other transitions will go from red to the other color. the uppermost movieclip overrides the others? Am I doing something wrong?

  14. #14
    Junior Member
    Join Date
    Jan 2010
    Posts
    27

    ????

    Sincerely, i didn't understood your problem...
    If you need to activate one of your MC you need to put the actions in the first frame, in the begining

    To activate RED page:

    gotoAndStop("secondpage");
    mctransition2.gotoAndStop(2);
    transit2();
    Is it what you want to?

  15. #15
    Member
    Join Date
    Mar 2006
    Posts
    66
    Sorry if I was a little confusing. I just want to know where you have the actual movieclips on the stage? I have mine sitting on the stage, all on one layer called 'mc transitions'. I have about six transitions, all setup the same way yours are. I have the red movieclip on the top and no matter what button I push, it will play the correct transition to that color, but it will ALWAYS do it from the RED. Check out this FLA, and you will see what I mean. I can't figure out what I am doing wrong...
    Attached Files Attached Files

  16. #16
    Junior Member
    Join Date
    Jan 2010
    Posts
    27

    tips

    Careful with variables
    where=red different then where="red" (text format)
    You can do the first if you want to pass the values of red variable to the where variable

    Other thing:
    In the functions, you need to change the variables AFTER checking them in each function

    I did some modifications in your script i hope it works...
    Attached Files Attached Files

  17. #17
    Member
    Join Date
    Mar 2006
    Posts
    66

    Thumbs up

    Yes. That did it! It was the variable names. Thanks so much for your help!! Now it is working as it should. I really appreciate your time, and effort helping me with this. I was stumped. I will make sure to pay closer attention to details like this in the future.

    Thanks a million!

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