Donate
 
Has KnowFlash helped you?

Donate towards running costs:


Why donate?

Newsletter
Sign up to our newsletter:
 
Enter your email address:
 
flash menu
Tutorials
Video Tutorials
Store
Main Menu
Home
News
Forum
Help/FAQ's
Contact Us
Search
Register
Advertise
Links
Webmasters

Pulse Tween Print E-mail
Written by Rawpulse   
Friday, 17 February 2006
Learn how to make the famous pulse line.
 


While thinking of a cool basic project to turn into a tutorial, I decided to look at a way of making the famous pulse line. If you want to take a look at the finished product, check it out here.

This is a great effect for beginners to achieve, as it's so simple. It requires just a little bit of motion tweening to complete, and is possible in most versions of Flash. So without any more delay, open Flash. On layer 1, set the size of the stage to 200x100 via the Properties menu. Set the background color to black also. Select the line tool from the tools menu on the left hand side, or press N as a shortcut.

Use the tool to draw a light green line. You should aim to have it look something like this:





As a beginner you should not have trouble doing this, but if it makes it easier, draw five different lines instead of shaping one line. Next you need to add a second layer. Do this by clicking the Insert Layer button on the timeline, or by selecting Insert > Timeline > Layer. It's not particularly necessary to rename the layers, as we only need two. On layer 2, select the rectangle tool, draw a rectangle that covers the line so you can no longer see it. Make sure to set the color of the rectangle to black, same as the background on layer 1. Convert your rectangle to a symbol by right clicking and selecting "Convert To Symbol...". Select movie clip from the choices, and name it rectangle. Making it a movie clip means we can animate it.





Ensure at frame 1 that the rectangle is fully covering the green line, like so:





It does not matter if the rectangle is longer than the stage. Now insert a keyframe at frame 40 of layer 2. To insert a keyframe, right click the frame and select "Insert Keyframe". Keyframes denote where changes take place in the animation. On frame 40, select your rectangle, hold shift, and tap the right arrow on your keyboard to move it along to the right. Holding shift makes the process faster. Aim to have the rectangle positioned like mine is:





Now, add another keyframe to frame 41, straight after the last one. On this keyframe, slide your rectangle over so it is on the left hand side of the pulse. Again, here is my version:





It's time to add your last keyframe. Head over to frame 80 and insert it by right clicking and selecting "Insert Keyframe" again. This time, position your black rectangle back in the middle, covering the entire pulse line, just like we did initially. It should look like this on frame 80:





Now go back to frame 20, right click, and select "Create Motion Tween". You'll notice the frames betwen 1 and 40 turn blue, with a large arrow through them. Add a motion tween between frames 41 and 80 too. Again you will see the blue frames.

It is important to remember to add frames to both layers. If you have 10 frames on one layer, and 5 on a second layer, you will only see whatever is on your second layer for five frames, and then it will disappear for the remaining five. Make sure you have 80 frames on both layers.

The final thing to do is increase the frame rate. We have used a lot of frames, so it will take a long time to complete with the default frame rate. To change it, click the stage and change the frame rate to 30, from the Properties window. Now test your movie by pressing Control + Enter. Hopefully your Flash movie will look exactly like this. You could also add a blur to the line, with a green tint, in which case, your movie will look like this.

If your project hasn't turned out right or you have a problem with the tutorial, tell us about it on the forum.
Last Updated ( Friday, 17 March 2006 )
< Prev   Next >

In association with Coursework Essays , Free Essays , Phishing Scams and Big Red Directory

Copyright Oxford Information Services Ltd 2007