|
|
|
|
|
Date: 10.2.2007, 19:43 Total views: 45906
This, step by step, detailed action script lesson, will show you how to create trendy and dynamic picture button. You can use this button for any web site. Using this lesson, you will also learn how to convert any image into a Movie Clip Symbol, how to apply blur filter and action script code on any image and much much more!
Example:
Step 1
Open a new Flash document. Click on Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 120 pixels and the height to 120 pixels. For background color select white, for Frame rate set 42fps (Frames per Second), and click ok.
Step 2
Find somewhere any picture that will represent our button and set its dimension to 100x100px in some of graphic programs (photoshop...). After that, go back in flash, choose File > Import > Import to Stage, and import that picture.
Step 3
While the picture is still selected, open the Align Panel ( shortcut key: Ctrl+K) and do the following in the Align panel:
a) Make sure that the Align/Distribute to Stage button is turned on.
b) Click on the Align horizontal center button.
c) Click the Align vertical center button.
Step 4
While the picture is still selected, press F8 key (Convert to Symbol) to convert this picture into a Movie Slip symbol.
Step 5
Double-click on the movie clip on stage with the Selection tool (V ). You should now be inside the movie clip.
Step 6
While the picture is still selected, press again F8 key (Convert to Symbol) to convert this image again into a Movie Slip symbol.
Step 7
Click on frame 10 and 20 and press F6 key.
Step 8
Go back on frame 10, take the Selection Tool (V), click once on the picture to select it, open the Properties Panel (Ctrl+F3), and click on Filters tab on the left side. Then, click on plus icon, choose Blur and set the options from the picture below.
Now, you get this:
Step 9
While you're still on frame 10, using the arrows key or by mouse, move the picture a little up.
Step 10
Right-click anywhere on the gray area between frame 1 and 10, and frame 10 and 20 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.
Step 11
Create a new layer and name it A.S.(Action Script). After that, click on the first frame, open the A.S.Panel (F9), and paste this script:
stop(); this.onEnterFrame = function(){
if(rewind == true){
prevFrame();
}
} this.onRollOver = function(){
rewind = false;
play();
}
this.onRollOut = function(){
rewind = true;
}
this.onRelease = function(){
getURL("http://www.flashfridge.com");
}
Step 12
Click on frame 15, press F6 key (Keyframe) and in A.S.Panel (F9), type this:
stop();
We're done!
Have a nice day!
Download source file (.fla)
|
|
