Flash masking question

  • Started
  • Last post
  • 14 Responses
  • CygnusZero4

    If you have an & symbol, and it needs to look like someone is actually drawing it, how would you pull this off with masks, or is there another way to do it?

  • bored2death0

    I'd draw every frame of the mask. It won't take that long.

  • CygnusZero40

    What if they come back making changes, want to speed it up or slow it down?

  • bored2death0

    speed it up: remove frames.

    slow it down: add frames.

    One way you could do it is copy the "&" and use that as the mask. Start from the end and work backwards erasing it.

    • I know, just seems like a ton of work to to add and remove frames.CygnusZero4
    • This isnt just for an & symbol, its an entire sentence. I was just asking about the &.CygnusZero4
    • Code the playhead to skip frames.instrmntl
  • lvl_130

    just rasterize the & symbol and blank keyframe it into say 10 frames. erase part. copy/paste into new keyframe and repeat. select frames and right click > reverse frames

    • damn 2 seconds too late. what bored said.lvl_13
  • CygnusZero40

    The erasing method seems like its going to end up looking choppy though.

    • Yeah, some of it should be frame by frame, but about half could be keyframed.CyBrainX
  • dbloc0

    yep

    1st frame full graphic
    2nd frame a little piece erased from graphic
    3rd frame another little piece erased from graphic
    and so on

    make sure you start the erasing where you want the animation to end since you will be reversing the frames.

    I've done this method many many times. works great.

    when you are done, reverse frames

  • CygnusZero40

    Does it look very smooth that way? Seems like doing it that way each letter will need a lot frames to make it look very smooth and not choppy.

  • CygnusZero40

    Im trying the erasing method. This is tough, Im not sure Im doing this right. Especially at the parts where lines intersect. Im erasing with the circle tool and it just looks terrible.

    • draw a line over the symbol and it will cut where you drew, then delete the line and the piece you want to deletefeel
    • <dbloc
  • feel0

    theres a way that I've invented a while ago.

    make the & the mask and go about rotating and scaling colored squares below it.

    In flash you can have many layers masked by the same symbol.

    this is the smoothest way you can go about doing it.

    just got to be careful about crossing lines, like in &, you could separate it in many masks.

    either way it will be painfull, and it can end up being a long animation if you're doing letter by letter of a full sentence.

    so do an animatic first, guessing how much time it would take for each letter to draw, try to get some approval on the timing, and then go and animate drawing.

  • monNom0

    ^ this is the right approach. Try to keep your squares as few as possible so that everything is tweens. Do these in movie clips so you can easily retime if needed (and you won't double-up work).

    ..but try to do a plain old masked wipe and see if that flies to maybe save yourself a ton of labour!

  • CygnusZero40

    Yeah doing a standard mask wipe doesnt work, it really doesnt look like its being drawn. I like the objects below the & mask idea. I guess thats the cleanest way. I was really hoping to avoid frame by frame animation with this because you know how clients are. Speed it up, slow it down, na lets speed it up some more again.

    • "Wait! Someone you didnt know was involved in the review process says it should be slower!"CygnusZero4
    • =/CygnusZero4
    • I don't really fuck with Flash, but can't you have something grow along a path?monospaced
    • @monospaced - nope! just move things along a path, not growfeel
  • mikotondria30

    Just do it manually - frame by frame - honestly, it won't take as long as you think...
    Just have your mask layer selected, and one hand on "." and F6, and the other on the mouse, nice fat brush selected, adding to the mask each time. Animated writing goes so fast that an upstroke or a crossed T is one frame, no more.

    It does a body good to fully connect with how quickly a frame goes by - forget tweens and ways to 'automate' it, do it longhand - you'll get a much better feel for it.

  • fyoucher10

    Ok. This is how I do it. I do this a lot actually. It'll be as smooth as you want it to be.

    It requires a reference and a keyframe sequence.

    First, you need to make a reference. Something to determine the speed and distance/spacing of your mask frames.

    So, take a small horizontal line or anything, even a dot. Something that you can put along a motion guide or path if you're not using classic tweening.

    Then draw multiple paths for your "&". I would start with a straight line from the bottom right. Then another path/guide for the top curve. Then another path/guide for the diagonal line going downwards. And finally, a separate path/guide for the bottom curve.

    Now, animate your reference object animate through each of these paths as a motion guide, going from one to the next. I typically hit SNAP to OBJECTS, and then place my reference object on each end of the path. Then I switch the path to a motion guide layer and then snap the object layer to the motion guide layer.

    Adjust the easing and speed of each of the tweens until you feel it's just right.

    Now, you'll use this animation as a reference to draw your masks, frame by frame.

    So now, duplicate your "&" symbol onto a new layer.

    Break the symbol apart so it's just a fill. Now add a black hairline stroke to the fill and delete the fill. So you're just left with the outline of the "&" shape.

    Now, you'll need to duplicate this stroked & shape for however many keyframes your reference animation is. So, if your reference animation spans 30 frames, create 30 frames of the "&" stroke shape keyframe that you just made.

    Now, using the reference animation you previously created. You'll now begin creating the separate keyframes for the mask, frame by frame.

    Lock all layers, except for the layer with all of the stroked & keyframes. Select your line tool. So, in frame 1, wherever your reference object is along the path, draw a line across that area of the "&" stroke shape. Make sure the line tool crosses against both sides of the "&" shape so you can use the paint bucket tool and fill it correctly (but don't add a fill just yet).

    Repeat for all frames, using the reference animation to determine how the mask is forming and the speed.

    Now going in with the paint bucket tool and fill in that stroked area that you just created.

    Delete all of the strokes in every frame, leaving behind the fill.

    Now you're left with a frame by frame animation of the & building in.

    Now, you can use this as a hard edged mask if you'd like.

    However, you can also use it as a frame by frame animation sequence, just as long as the shape sequence is flat colored and is the same color as the & symbol. So long as the last frame swaps out with the final symbol.

    Now, if you don't want the animation to have a hard edge as its building in, you can select a small portion of the end of each shape keyframe and use a linear gradient to soften the edges.

    Take a look at this example. The word "Real" in the logo at the end, uses this technique.

    http://www.davi-t.com/folio/kett…

  • omg0

    film it and import video.... done!