Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

High-tech city animation

4.3.2007, 0:32    Total views: 249240
Page:  1  2  3

This detailed lesson made for Flash 8 will teach you how to create a really cool and advanced light city animation. You will also learn:

- How to design a city using the Line Tool.
- How to use Flash 8 filters.
- How to design a little military aircraft and animate it
- How to design city lights
- How to design a clouds and animate it.
- How to create thunder and more....



Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 250 pixels and the height to 300 pixels. Select #A0A0A0 as background color. Set your Flash movie's frame rate to 28 fps.



Step 2

Take the Line Tool and draw the city outlines like it is shown on the picture below.



Step 3

While the city outilines is still selected, change the Stroke Color in black.



Step 4

Take the Paint Bucket Tool (K), for Fill Color choose black and paint the city. See the picture below.



Now we have designed the city. Simple and effective.

Step 5

Double click on layer 1 to rename its name in city.

Step 6

Create a new layer above layer city and name it clouds.

Step 7

Take the Oval Tool (O). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #313131, and draw a "cloud" like it is shown on the picture below.



Step 8

Take the Selection Tool (V) and click once on the "cloud" to select it. Then, press F8 key (Convert to Symbol) to convert this "cloud" into a Movie Clip.



Step 9

While the new made Movie Clip is still selected, go to the Properties Panel (Ctrl+F3) below the stage.On the left side, You will find the Instance name input field there.Call this Movie Clip cloud. See the picture below.



Step 10

While the "cloud" is still selected, duplicate it, by pressing Ctrl+D key few times.

Step 11

After that, change the size of "clouds" and place it on the position wherever you like. See the picture below.




Step 12

Take the Selection Tool (V) and select any "cloud". Then, open the Action Script Panel (F9) and enter the following action script code inside the actions panel:

onClipEvent(load){
flagX=random(800)+50;
flagY=random(60)+10;
a=random(3)+1;


this._x=flagX;
this._y=fleagY;
speed=random(2)+0.5;
}

onClipEvent(enterFrame){
if(this._x>0){
this._x=this._x-speed;
} else{
this._x= 880;
}
}

Step 13

Repeat step 11 for every other "cloud".

Step 14

Using the "drag and drop" technique, move the clouds layer below the city layer. See the picture below.



Step 15

Create a new layer above layer clouds and name it light city. See the picture below.



Step 16

Select light city layer and take the Rectangle Too (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose white and draw a rectangle (that will represent light) about 13x215px. See the picture below.



Then, take again Selection Tool (V), and do like the picture below shows you.



Now we have designed a "light".

Next:  part 2
Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 298631

2. High-tech city animation
Total views: 249241

3. Water effect
Total views: 227585

4. Photo slide show
Total views: 209729

5. Special Picture Effect
Total views: 185307



Related links