February 8th, 2003, 12:00 PM
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.
February 8th, 2003, 12:19 PM
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 )
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.
February 8th, 2003, 07:33 PM
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 =)
March 4th, 2003, 12:18 PM
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.
March 11th, 2003, 01:26 PM
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).
March 12th, 2003, 04:47 PM
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.