Toxiclab.org

Stars animation above the city

23.6.2008, 18:45
Submited in: Flash | Total Views: 49311

This thoroughly explained, detailed tutorial will show you how to create full stars animation above the city using a mouse. You also have to use a lot action script code to make this tutorial. You can use this animation for any presentation, flash banner. You will also learn, using this tutorial, how to create instance name, how to convert star into a Movie Clip Symbol and much more. Let's go!

Move your mouse cursor over the sky!



Step 1

First of all Save my picture below, or find any other picture of city.





Step 2


Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 430 pixels and the height to 264 pixels (as the dimensions of picture). Select any color as background color. Set your Flash movie's frame rate to 44 and click ok. See the picture below.



Step 3

Choose now, file > Import > Import to stage (Shortcut key: Ctrl+R) and import my picture into a flash stage.

Step 4

While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 5

Double click now on layer 1 with Selection Tool (V) and name it background. After that, create a new layer above the layer background and name it stars.

Step 6

Select layer stars, take the Flash Tools for drawing and draw a little yellow star like it is shown on the picture.



Step 7

While the star is still selected, press F8 key (Convert to Symbol) to convert this star into a Movie Clip Symbol



Step 8

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



Step 9

Create a new layer above the layer stars and name it action. See the picture below.



Step 10

Take the Selection Tool (V) and click once on the first frame. After that, go to the Action Script Panel (F9) and enter this code inside the actions panel:

stop();
import mx.transitions.Tween;
import mx.transitions.easing.*;
star_mc._visible = false;
var i:Number = 1;
var total:Number = 1000;
var effect_duration:Number = 1.4;

onMouseMove = function()
{
var fm = star_mc.duplicateMovieClip("fm" + i, i );
fm.gotoAndStop( random(fm._totalframes) + 1 );
position_x = _xmouse + random(100) - 50;
position_y = _ymouse + random(100) - 50;

new Tween(fm, "_xscale", Strong.easeOut, 60, 30, effect_duration, true);
new Tween(fm, "_yscale", Strong.easeOut, 60, 30, effect_duration, true);
new Tween(fm, "_alpha", Strong.easeInOut, 100, 0, effect_duration, true);
new Tween(fm, "_x", Strong.easeOut, _xmouse, position_x, effect_duration, true);
fm_tween = new Tween(fm, "_y", Strong.easeOut, _ymouse, position_y, effect_duration, true);

fm_tween.onMotionFinished = function()
{
removeMovieClip(fm);
}
if(i >= total)
{
i = 1;
}
i++;
}

var fm_menu:ContextMenu = new ContextMenu();
fm_menu.hideBuiltInItems(); _root.menu = fm_menu;
var item:ContextMenuItem = new ContextMenuItem("Created by www.toxiclab.org", toxiclab);
fm_menu.customItems[0] = item;
function toxiclab() { getURL("http://www.toxiclab.org"); }

We're done!

Test your Movie and enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category




Most popular tutorials


Resources Worth visiting


Friends