1. Advertise Here
Home 3D (2) Actionscripting (66) Animation (101) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (54) Text Effects (38)
Flash tutorials - Animation
High-tech city animation
13Like
4.3.2007, 0:32 Total views: 158879
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 to 250 pixels and the height to 300 pixels. Select
#A0A0A0 as background color. Set your Flash frame rate to 28 fps.
Home
Flashvault blog
Flash books
Advertise on FlashVault.net
Top tutorials
1. Advanced full flash site -
Part 1
Total views: 230424
2. Water effect
Total views: 173592
3. Photo slide show
Total views: 162051
4. High-tech city animation
Total views: 158880
5. Special Picture Effect
Total views: 151126
Related links
Free desktop wallpapers
Izrada web stranica
Robert Pattinson Fan Site
Free Magazine Subscriptions
Megan Fox
Taylor Lautner
Ads by Google Flash Tutorials Flash Effects Blur Effect Image Effects Flash Animation
YourTeacher.com Ads by Google
document
movie's
Page 1 of 5Flash - High-tech city animation - Animation - FlashValue.net
10/27/2010http://www.flashvault.net/tutorial.asp?ID=122

2. 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.
Ads by Google
CDMA Tutorial
Text Animation
After Tutorial
Animated Tutorial
Programming Tutorial
Page 2 of 5Flash - High-tech city animation - Animation - FlashValue.net
10/27/2010http://www.flashvault.net/tutorial.asp?ID=122

3. 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 .
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 (V) and select any "cloud". Then, open the Action Script Panel
(F9) and enter the following action script code inside the panel:
onClipEvent(load){
flagX=random(800)+50;
flagY=random(60)+10;
a=random(3)+1;
this._x=flagX;
this._y=fleagY;
Clip
Selection Tool
actions
Page 3 of 5Flash - High-tech city animation - Animation - FlashValue.net
10/27/2010http://www.flashvault.net/tutorial.asp?ID=122

4. 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.
Page 4 of 5Flash - High-tech city animation - Animation - FlashValue.net
10/27/2010http://www.flashvault.net/tutorial.asp?ID=122

5. Now we have designed a "light".
Next: part 2
Have questions about this ?
Visit our friendly Community Forums!
Copyright FlashVault.net (c) 2006 - Privacy Policy - Advertise - Contact us
tutorial
Page 5 of 5Flash - High-tech city animation - Animation - FlashValue.net
10/27/2010http://www.flashvault.net/tutorial.asp?ID=122