flash question

Discussion in 'Web Design and Development' started by njmitchel0, May 27, 2010.

  1. njmitchel0 macrumors member

    Joined:
    May 21, 2008
    #1
    new question:
    very new to flash and im trying to make this intro and ive searched a bunch of tutorials, but i cant seem to find what im looking for..maybe im not searching the correct term, this is what im trying to do...
    i have a map and i want the dashes to appear one after another in sequential order so it shows movement. it seems like it would be extremely simple, but i cant seem to figure it out. please help and thanks

    ------------------------------------------------

    Im trying to create a flash banner for a site. I am not at all familiar with flash so I really dont know what kind of tutorial I should be looking for. Im trying to make a banner with images rising from the bottom and what not...nothing too over the top. Can tell me what this is called so I can find a suitable tutorial....thanks
     
  2. deadmix macrumors newbie

    Joined:
    May 27, 2010
    #3
  3. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #4
    FlashEFF is a nice plugin for Flash.
    It's very simple to create impressive animation effects with little or no coding.
    I believe it is AS3 only (Flash CS3 or later)
     
  4. njmitchel0 thread starter macrumors member

    Joined:
    May 21, 2008
  5. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
  6. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #7
    Did you look through any tutorials on Tweening?
    It sounds like thats what you want, but could you describe in a little more detail as what exactly it is you're trying to do? Maybe a picture or example?

    is still kinda vague.
     
  7. njmitchel0 thread starter macrumors member

    Joined:
    May 21, 2008
    #8
    i want to make it to that each individual dash is appearing one after another...to show movement
    [​IMG]
     
  8. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #9
    Ah! I think I see what your getting at.

    Well, this is probably not the best way, but just off the top of my head, its looking like you'll have to do things frame by frame.

    Basically the idea is

    Frame 1: draw first dash
    Frame 2: draw second dash, maybe scoot both dashes a bit in the direction you're trying to show movement....

    and so on and so on. You don't have to go by each individual frame necessarily, the time format on the timeline is in milliseconds, which may make things a bit quick going from
    frame 1->2->3, so its really up to you when you want dashes to appear.

    I'd google "frame-by-frame animation"

    Keep in mind this technique isn't exclusive to Flash, so you'll likely get some seemingly irrelevant information but the idea behind it is the same across all media.
     
  9. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #10
    Frame by frame sequences on the timeline are fairly simple to construct:
    draw the animation one frame at a time.
    Unfortunately, this usually results in some difficulty with regard to the duration of the animation, and drawing it frame by frame can be very tedious.

    One methiod is to draw the animation in Illustrator, with the object for each frame on its own layer.
    ie: if there are 26 dashes, you would have 26 layers.
    Import the AI file into Flash as keyframes (frames 1-26), and you have your sequence.

    Another method is to draw the animation as a flat AI file, or png file with transparency and no background.
    Import the file into a movieclip in Flash and use the eraser tool to create the animation one frame at a time, working backwards from the last frame.
    ie: place the vector file on frame60, erase the last dash, option-drag the keyframe backwards to frame59, and repeat this process until the entire drawing is erased.
    Remove the leftover blank keyframes.

    Another method is to animate a mask to reveal the dashes over time.

    Another method is to use actionscript to push the each dash into an array, then use a Tweening class to animate the array.
    (the layered AI file imported into a MovieClip as keyframes would be used in this case)
    This would give you the most control over the appearance and duration of the animation.
    http://blog.greensock.com/v11/
    Here's an example:
    PHP:
    // import the classes for this project
    // greensock tweening platform is commonly used fro actionscript animation
    // you can download it for free.
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import com.greensock.*;

    // create a container for the animation
    var mcContainer:Sprite = new Sprite();

    // "MC" is the class name for a MovieClip in the library that contains the imported frame sequence
    // create a temporary instance of the class in order to find the total number of frames.
    var temp:MC = new MC();

    // each frame will be pushed into the dashArray
    var dashArray:Array = new Array();

    // call a function that populates the array, then tweens the dashes
    // pass in the totalFrames property of MC
    buildArray(temp.totalFrames);

    // first, loop through the frames of MC, instantiating a new copy each time.
    // playhead is advanced 1 frame on each pass.
    // object is pushed into the array
    // object is added to the container
    function buildArray(n:int):void
    {
        var 
    d:MC;
        for (var 
    i:int 0ni++)
        {
            
    = new MC();
            
    d.gotoAndStop(i+1);
            
    dashArray.push(d);
            
    mcContainer.addChild(d);
        }
        
    // we no longer need mc; set it to null for GC;
        
    temp null;

        
    // add the container to the stage
        
    addChild(mcContainer);

        
    // tween the contents of the array
        // in this case, each dash animates from alpha 0, with a duration of .1 seconds,
        // with .2 seconds between each dash animation
        
    TweenMax.allFrom(dashArray.1, {alpha:0}, .2);
    }
     
  10. decksnap macrumors 68040

    decksnap

    Joined:
    Apr 11, 2003
    #11
    I'm going to guess that for a flash newbie this is the easiest plan of attack. Just look up how to create a mask and you're good. I don't remember if you can make a mask layer animation follow a path like a regular object can, but if so that would make the effect pretty believable.
     
  11. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #12
    Masks are a simple way to simulate animations.
    One thing to be aware of is that Flash Player does not handle masks very efficiently, so keep the overall mask area as small as possible.
    (objects hidden by a mask are still rendered by Flash Player)

    Personally, I prefer the frame by frame erasure method.
    It's simple enough for a beginner, and the resulting sequence is very versatile.
    For example, a timer can be used to advance the playhead one frame at a time, which would work nicely for controlling the duration of this type of animation.
    To change the speed of the animation, simply change the value of the speed variable.(AS3 Timers are in milliseconds, so a value of 500 is equal to a half second)
    PHP:
    mc.gotoAndStop(1);

    var 
    speed:Number 500;
    var 
    timer:Timer = new Timer(speed);
    timer.addEventListener(TimerEvent.TIMERgo);
    timer.start();

    function 
    go(e:TimerEvent):void
    {
        if (
    mc.currentFrame mc.totalFrames)
        {
            
    mc.nextFrame();
            
    trace("timer running");
        }
        else
        {
            
    timer.stop();
            
    trace("timer stopped");
        }
    }
     

Share This Page