#1
  1. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,353
    Rep Power
    62

    Ideas on creating writing simulation with flash


    Hi guys. I'm not a flash guy and do mainly programming. However, I need to come up with a way to make three big letters look like they're being written and need ideas on how to accomplish this. Currently I have a jpg that contains the words in white on a purple background. I was thinking of putting that jpg on one layer and placing a purple layer right above it. Then I'd slowly make the top layer disappear over the letters, thus making it look like the letters are being drawn. My questions are:

    1. How do a make the top layer disappear a little at a time to show the letters below?
    2. Is this even the way to go?

    Any help or advice that you could give me would be greatly appreciated.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    Oct 2000
    Location
    Back in the real world.
    Posts
    5,966
    Rep Power
    191
    As jpegs are big (speaking about bytes), not scaleable, and flash has built-in font functions, you should use these.

    Make a text on one frame. vectorize it (to avoid having to embed the font).
    Put a white (or purple, does not matter) rectangle over one letter on a new layer, make this rectangle a symbol (F8). Add some frames (F5) and make the last frame a key-frame (right-click menu).

    Then you can tween it, aka right-click, "tween", select first picture, "effects/alpha" should be 100%, select the last frame and set "effects/alpha" to 0%. this would fade-out the rectangle - the letter would fade in

    (you could also go the other way, make each letter one symbol and tween from 0% to 100% if this seems more logical to you )

    [edit]
    i think i misunderstood the effect you want to create. move the rectangles instead of changing alpha in the tween to get what you described.
    [/edit]
  4. #3
  5. No Profile Picture
    =) wannabe?
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jul 2002
    Location
    florida
    Posts
    2,153
    Rep Power
    15
    like this? it may not be the best way to do it, plus you have to have flash 6 plugin to view the .swf. still =)
    Attached Files
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    Ottawa
    Posts
    23
    Rep Power
    0
    That works,

    However, another way to do it that might be easier depending on what you're doing. If you're using typed fonts the way you did it works but I think it would be a lot of work for each letter. If you're using handwritten fonts you could: 1) create the layer with the entire word on it 2) use another layer above the type as a mask that reveals the letters as they're "being written" to make it look like a pen is writing them on screen. You might have to look into masks in the help section to see how its done.

    Don't know if that suggestion helps or not.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    12
    Rep Power
    0
    The best looking way to achieve this in my opinion is by good old fashioned frame by frame animation. It won't be easy to edit later, so get the text agreed first.

    (although if you did bother to make each letter separately, you could make a handwriting "component"...).

    Start by writing out the whole text you want using flash's drawing tools, or by vectorising a handwriting font like comic sans. Then, create a keyframe in the next frame and delete bits back through the order they would've been written. Keep going till you're left with no text, then reverse all the keyframes.

    It's pretty labourious, that's why it's rarely seen (unlike the matrix style typing effect and swirling in letters you see all over the web these days).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    houston
    Posts
    94
    Rep Power
    12
    Try something like this. To really make it look convincing I would break up the letters so that you could draw them a piece at a time like people actually write. You know, one leg of the “A” and then the next leg and then the cross bar. For the circular parts you could use a pie shaped mask and if you have the math write the code to make it grow in a circular path. See the “Math” object in the help files for the properties and methods of the Math object.

    The mask can be a movieclip which means you can attach code to it (on stage select the mask and look at the code in the actions window) Remember to work on an object it has to have a name (instance name) By using an onClipEvent (enterFrame) you can cause an action to be repeated over and over at whatever the frame rate is for example causing an object to grow by 3 pixels 12 time a second. And also remember it grows from the “0” position. In the case of a movieclip that is the “0” position inside of the movieclip.

IMN logo majestic logo threadwatch logo seochat tools logo