Flash Timeline Effects

Discussion in 'Web Design and Development' started by jasewhalen, Jul 17, 2009.

  1. jasewhalen macrumors newbie

    Joined:
    Jul 17, 2009
    #1
    Hi Guys,
    New to flash and trying to play around with it right now. I have put together a simple flash site using each page as a frame. I have 5 pages as of right now so my frames go 1-5.

    I wanted to used the blur effect from the Insert > Timeline effects > Blur. My question is if I wanted to set up the blur effect at 20 frames with a resolution of 0 and a scale of 0.25 how would i be able to insert it so that it would only work when clicked on a page button from my navigation bar?? I am basically just trying to use it as a page transition effect
     
  2. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #2
    With the way you have things set up at the moment, you can't.

    Split your "pages" up and give a few frames space between them. In that space, create the keyframes needed for your effect and apply it between the key frames. When you write your code, you have the movie jump to whatever frame the effect starts on prior to your destination page, have that play, then stop the movie on the destination page.

    I'll try my best to illustrate this.

    p = page
    k = keyframe
    --- = blank frames

    starting page | effect starts here| effect ends here| destination
    p ---------------------k------------------------k----------------------p


    I don't know how good you are at Actionscript, but using that to handle transitions would be better in terms of keeping your timeline neat, as well as help to open up what can be done.

    EDIT:
    I apologize, I don't know what I was thinking, when I first wrote this, but you can simply set up your effects a few frames down like a #20, have the movie jump to that frame and play the effect, then jump back to the destination. I still think though, what I first wrote is still worthwhile in terms of keeping your timeline neat, as, unless you can tell which effect is which from vaguely worded frame labels, it may be hard to keep track of things by simply tossing all your effects off to the side.


    so to try and clarify a little further:
    1.page one would have code like this:
    gotoAndPlay("effect1");

    2. Find where the effect ends and add this to the timeline
    gotoAndPlay("page2");

    3. On your destination page(in this case, page 2)
    stop();

    repeat for all links.



    I thought I should mention that from a design standpoint, the effect is not necessarily a good choice in my opinion, assuming you're doing the transition like i think you're doing.
    People will notice the strange shift in elements as you jump from page to page. To really create something interesting and not something as noticeable, I think you would have to shift the blur close to around 100%. That way, your general audience is less likely to notice something is off, and I think, it will make for something much more interesting.
     
  3. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #3
    Learn to use a good Tweening class, such as TweenMax.
    You'll need to create a custom classes directory in the AS3 preferences.
    Place the downloaded "gs" folder within this custom classes directory.
    1. Start by organizing all of your page content within a Movieclip on the stage.
      page1 is on frame1, page2 is on frame2, and so forth.
      Give this movieclip an instance name of "pages".
    2. Create a dynamic textfield on the stage, with fonts embedded.
      Give this dynamic textfield an instance name of "btnLabel".
    3. Select btnLabel, and press F8 to wrap it in a MovieClip.
      This movieclip does not require an instance name.
    4. Select the movieclip on the stage, and option-drag to create a new instance.
      Repeat the option-drag until you have as many buttons as you need.
    5. Select all of the button instances on the stage; press F8 to wrap them in a movieclip.
      Give this movieclip an instance name of "buttons".
    You should now have two (2) MovieClips on the stage on frame1 of the main timeline:
    "buttons", which contains all of your buttons.
    "pages" which contains all of your page content in a frame sequence.
    Create a new layer on frame1 of the main timeline.
    Name it "actions" and lock it.
    Open the Actions panel and enter the following Actionscript 3.0 code:
    PHP:
    // import greensock tweening classes
    import gs.*;
    // stop the pages movieclip from looping.
    pages.stop();

    // this is a list of labels for the buttons
    var btnLabels:Array = 
    [
    "button 1",
    "button 2",
    "button 3",
    "button 4",
    "button 5"
    ];
    // references to the buttons will be pushed into this array
    var buttonArray:Array = new Array();
    // this variable will capture the number of buttons within the movieclip "buttons"
    var n:int buttons.numChildren;
    // this variable will capture the id number of any button that is clicked
    var targetID:int;
    // calling the buildNav function
    buildNav();
    // this function uses a for..loop to assign properties and listeners to each of the buttons,
    // then pushes them into the buttonArray.
    function buildNav():void
    {
        for (var 
    i:int 0ni++)
        {
            var 
    _btn:MovieClip MovieClip(buttons.getChildAt(i));
            
    _btn.buttonMode true;
            
    _btn.mouseChildren false;
            
    // the key to this navigation script: each button is assigned an id number
            
    _btn.id i;
            
    // btnLabel is assigned a String from the btnLabels array.
            
    _btn.btnLabel.text String(btnLabels[i]);
            
    _btn.addEventListener(MouseEvent.CLICKonClickfalse0true);
            
    buttonArray.push(_btn);
        }
        
    // this Tweens the buttons in buttonArray in sequence from alpha 0;
        
    TweenGroup.allFrom(buttonArray1, {alpha:0stagger:.2});
    }

    function 
    onClick(e:MouseEvent):void
    {
        
    // the targetID variable is assigned a value
        
    targetID e.target.id;
        
    // pages movieclip is tweened to alpha 0 with a blur filter, on complete, the newPage fucntion is called.
        
    TweenMax.to(pages.5, {alpha:0blurFilter:{blurX:16blurY:16}, onComplete:newPage});
    }

    function 
    newPage():void
    {
        
    // pages movieclip is sent to the frame number that matches targetID + 1;
        
    pages.gotoAndStop(targetID 1);
        
    // pages is tweened in to alpha 1 and the blur filter is set to 0.
        
    TweenMax.to(pages.5, {delay:.1alpha:1blurFilter:{blurX:0blurY:0}});
    }
     
  4. jasewhalen thread starter macrumors newbie

    Joined:
    Jul 17, 2009
    #4
    that is exactly what I was looking for. Thanks so much :D

    One more question, I have multiple layers right now, music player broken up into individual layers, background, pages, actions, etc. If I am spreading out the frames can I just insert frames to the pages layer? Or do I have to to do it to every layer on the timeline? Sorry if that's a dumb question. I was thinking I would just need to do it to the layers that it only applies to.
     
  5. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #5
    Generally speaking, the main timeline should only have one keyframe.
    Spreading objects and code along the main timeline is an invitation for null reference errors.
     
  6. jasewhalen thread starter macrumors newbie

    Joined:
    Jul 17, 2009
    #6
    can you walk me through the process of creating a new custom classes directory? Im a little confused on this section of it.
     
  7. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #7
    Agreed... and if one wants to learn to write "actionsscript only" SWFs, sooner or later they will dump the flash interface altogether and move to a text-editor like Flex or Eclipse.
     

Share This Page