Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Flash Tutorials Fun With Lines

Fun With Lines


Create a new document in flash what ever size your image is, I'm using 640x480 pixels with a white background. Once you have set your background up lets import our image, go to "file > import > import to stage".

image 1

Your image should now be in front of you. At the top of your screen you should see "layer1" rename this layer to "main image", if there's one thing I've learned and that's keep organised then later down the line you wont get lost

image 2

Now click your image once so you get a grey rectangle round it (meaning you've selected the image.) press F8, this will open a window called "convert to symbol" here we will convert our image to a "movie clip". We don't need to change any settings in this window just stick a name in for your image at the top.

image 3

Once we've press okay "double click" our image, this will take us within the movie clip. You will notice when we double click that our timeline at the top changes.

image 4

It should say "scene 1" and then the name we specified as our movie clip, in my case "vwgolf"

Create a new layer above "layer1" label it "lines" then stick a padlock onto layer1 to lock it.

image 5

Select the "line tool" HOTKEY (n) and draw round part of your image I'm going to start with my alloys. (see animation below)

When you have traced over most or all of the object(s) in your image you'll have something like this. (Main image hidden from view)

image 6
You can go into as much detail as possible, for this tutorial il stick with the image above. Create a new layer above the lines layer and label it mask, select the brush tool HOTKEY (B) and the color red and a small to medium size brush.

image 7

Now with our brush tool draw over a bit of the lines, then press F6, draw over a bit more of the lines and press F6. Every time we press F6 we create a new key frame. (see animation below)

You will notice at the top of the timeline on the animation above the key frames being created that's me pressing F6. Also to turn the background white like mine just hide layer1. Once you have finished doing part of your image right click the "mask" layer and go to "mask".

image 8

Nearly done. Create a new layer above the mask layer label it "lines 2", click on the lines layer and take the little padlock to unlock it, select the 1st key frame on the lines layer then press "ctrl + c" to copy it, then click on the 1st key frame on your lines 2 layer that you just created and press "shift + ctrl + v" to paste in place. Create yet again another layer and label it "mask2". Your layers should look like this.

image 9

Select the brush tool again and brush red over another part of your image that you haven't already done remember to press F6 after every little line you make and don't forget to right-click the mask2 layer and click mask. Here's my timeline after the 2nd part of painting in red.

image 10

Ignore the purple bit on layer 1, il explain what that is in a bit.

This is how your Layer1 looks.

image 11

Select the 1st key frame on layer 1 and drag to about half way through your animation.

image 12

Now select any number past your animation, I'm going to select the 60th key frame, press F6.

image 13
Click to enlarge

Click back on the beginning of layer 1 which is Key frame 25 in my case. (the point you dragged it to) Select the "selection tool" HOTKEY (V) and click on your main image. In the properties box at the bottom under color select advanced then click the settings button.

image 14

When you click the settings button another window will open, use these settings below.

image 15

Once you've entered the settings above right-click the grey area on layer 1 and go to "create motion tween"

image 16

Now highlight all the layers apart from layer 1, select the key frames about 5 key frames from the end, right click on the high lighted areas and go to insert frame, doing this will make sure the lines disappear just before the whole image loads up.

Fun With Lines
Click to enlarge

That's it all done, hope you enjoyed the tutorial, sorry its so long. you end result should look like this.



Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website. More Flash Tutorials: Featured Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com

No comments yet...
Add comments to "Fun With Lines"

Captcha