Sparkl photo effect using the AS

Date: 7.1.2010, 15:59    Total views: 30695

Read this thoroughly explained, detailed flash lesson and see how to create advanced sparkl photo effect using the action script code and some special flash tips and tricks. Using this lesson, you will also learn how to draw sparkl, how to convert it into a movie clip symbol, how to duplicate it, create instance name and much much more. Let's start!

Example:



Step 1

First, save the photo below that we will use for this lesson as background.





Step 2


Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as the dimensions of photo (400x381 px). Select any color as background color. Set your Flash movie's frame rate to 34 and click ok.

Step 3

Call the current layer background. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import a photo that you just saved in step 1 into a flash stage. 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

Create a new layer above the layer background and name it sparkl.

Step 6

Select the sparkle layer and 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 #1B3F6F color and draw a circle shape about 15x15 px. See the picture below!



Step 7

While the circle shape is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol. See the picture below!



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 sparkl. See the picture below.



Step 9

Select now Filters tab from the left side. Click on the plus icon and select the Blur filter. Make the adjustments as follows:



Step 10

Select the Selection Tool (V) and click once on the sparkl to select it. Afte that, go to the action script panel (F9) and enter the following action script code inside the panel:

onClipEvent (load) {
 height = 350;
 width = 300;
 this._x = Math.round(Math.random()*width);
 this._y = Math.round(Math.random()*height);
 var temp = this._alpha=Math.random()*80;
 this._xscale = this._yscale=temp;
 cx = this._x;
 cy = this._y;
}
onClipEvent (enterFrame) {
 this._x = cx+(1+Math.random()*7);
 this._y = cy+(Math.random()*7);
}

Step 11

After that, click on the first frame of layer sparkl and go again to the action script panel. Then, enter this code inside the actions panel:

for (var i = 0; i<25; i++) {
 sparkl.duplicateMovieClip(i, i);
}

We're done now!

Test your movie and enjoy!

Download source file (.fla)

  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!
Share
ShareSidebar