Click on the plus icon New flash file > “Flash file” > Change the name of project <Untitled File>.fla
Select the Selection Tool V
Go to Properties tab and press Edit button and set the width of your document to 400 pixels and the height to 100 pixels, set frame rate to 30 fps.
Select ” black” color as background .
Change the layer name to menu ( double click on it ).
Step 2
Draw a rectangle on the stage with the following properties.
width: 8px
height: 8px
stroke color: no stroke!
Fill color: #FF8800
Step 3
Convert the rectangle to a movie clip (select the rectangle and hit F8).
Change the Name to “Menu Rectangle” and set the registration point to the center.
Link the rectangle to a class named “MenuRectangle”.
Step 4
For each menu item we need to have multiple menu rectangles.
Drag 7 more menu rectangles to the stage (you should now have a total of 8 menu rectangles on stage).
Align them horizontally and space them evenly.
You can use the align functionality to help you out.
Note that you should not have the “To stage” button selected when you space the rectangles evenly.
Select all the eight (8) menu rectangles, hold down the Alt-key and and drag-and-drop the new menu rectangles below the first row.
Create a third row as well.
You should now have a rectangle matrix of sixe 8×3 (8 colums and 3 rows).
Step 5
To Create first button select all the menu rectangles and convert them to a single movie clip.
Name it “Home Button” and set the registration point to the center.
While inside the movie clip, select all the menu rectangles and set the alpha to 30%.
While still inside the home button movie clip, create a new layer named “text”.
In the text layer, create a static text field and type “Home” in it.
Position the text field on top of the menu rectangles and size it so that it covers most of the rectangles area.
Set the following properties.
font: Berlin Sans
size: 14 pt
color: white
format: center
While still inside the home button movie clip, create a new layer named “hit area”.
In the hit area layer, draw a white rectangle so that it covers all the menu rectangles.
Convert the rectangle to a movie clip.
Name it “Hit Area” and set the registration point to the center.
Give the hit area movie clip an instance name of “mouseArea”.
We don’t want the hit area to be visible, its only function is to catch mouse events via ActionScript.
Set the alpha to zero for the hit area (color effect).
While still inside the home button movie clip, create a new layer named “actions”.
Step 6
So in the actions layer, type the following.
//Import TweenMax import com.greensock.*;
//This array will contain all the rectangles var rectangles:Array = new Array();
//Loop through the items in this movie clip for (var i:uint = 0; i < this.numChildren; i++) {
//Get an object var object:* = this.getChildAt(i);
//Check to see if the object is a MenuRectangle if (object is MenuRectangle) {
//Save the rectangle’s coordinates (we need these later on) object.origX = object.x;
object.origY = object.y;
//Add the rectangle to the rectangles array rectangles.push(object);
}
}
//Add mouse listeners for the mouse area mouseArea.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
mouseArea.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
mouseArea.addEventListener(MouseEvent.CLICK, itemClicked);
//This function is called when the cursor is over the mouse area function mouseOverHandler(e:Event):void {
//Loop through the rectangle array for (var i:uint = 0; i < rectangles.length; i++) {
//Assign the rectangle to a local variable var rectangle:MenuRectangle = rectangles[i] as MenuRectangle;
//Calculate random target coordinates for the rectangle var randomX:Number = rectangle.x + 10 * Math.cos(Math.random() * Math.PI * 2);
var randomY:Number = rectangle.y + 10 * Math.sin(Math.random() * Math.PI * 2);
//Animate the rectangle to the random coordinates TweenMax.to(rectangle, 0.4, {x: randomX, y: randomY, alpha: 0.6, tint: Math.random() * 0xffffff});
}
//Add an ENTER_FRAME listener for the shake effect addEventListener(Event.ENTER_FRAME, shake);
}
//This function is called when the cursor moves out of the mouse area function mouseOutHandler(e:Event):void {
//Loop through the rectangle array for (var i:uint = 0; i < rectangles.length; i++) {
//Assign the rectangle to a local variable var rectangle:MenuRectangle = rectangles[i] as MenuRectangle;
//Tween the rectangle to the original position TweenMax.to(rectangle, 0.4, {x: rectangle.origX, y: rectangle.origY, rotation: 0, alpha: 0.3, tint: 0xff8800});
}
//Remove the ENTER_FRAME listener (we don’t want to shake the rectangle anymore) removeEventListener(Event.ENTER_FRAME, shake);
}
//This function is called when the mouse area is clicked function itemClicked(e:Event):void {
//Navigate to some URL var urlRequest:URLRequest = new URLRequest(“http://www.flashconf.com”);
navigateToURL(urlRequest);
}
//This function is called in each frame function shake(e:Event):void {
How to use Publish Settings feature in Flash. The Publish Settings dialog box provides an option to affect the WMODE setting. The options selected in the Publish Settings will be added to the HTML source code automatically:
Select the File menu
select Publish Settings ( Ctrl+Shift+F12)
Select the HTML (.html) option
Click the HTML tab
Select the Window Mode menu
Select Transparent Windowless (setting to make the Flash movie’s background disappear in browsers which support this feature.)
Click Publish
Click Ok.
Editing HTML code manually
To edit an existing HTML page, add the WMODE parameters to the HTML code.
New flash file > Document (shortcut key: Ctrl+J ). Set the width of your document to 300 pixels and the height to 180 pixels.
Select any color as background color and set your Flash movie’s frame rate to 25 fps.
Change the layer name to Image
Import your Photo: File > Import > Import to stage (Ctrl+R) and import any photo into a flash stage.
Create a new layer above the layer image and name it text .
Now Select the Text Tool (T) and type any text on flash stage.
While the Text is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
While the new made Movie Clip is still selected, go to the Properties Panel 0n the right side (up) and change the Instance name input field to flash_text
Step 2
Select the first frame of layer text and go to the AS panel (F9) and paste this code:
New flash file > Document (shortcut key: Ctrl+J ). Set the width of your document to 400 pixels and the height to 250 pixels.
Select any color as background color and set your Flash movie’s frame rate to 37 fps.
Change the layer name to Image
Import your Photo: File > Import > Import to stage (Ctrl+R) and import any photo into a flash stage. Ctrl+K and check this 3 steps.
Make sure that the Align/Distribute to Stage button is turned on,
Click on the Align horizontal center button and
Click the Align vertical center button.
While the image or object is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
Now click on frame 30,40,50 and 60 and press F6 key.
Step 2
Go to frame 60 and select the Free Transform Tool (Q) and drag it (decrease it) see the picture below.
Step 3
Select the Selection Tool (V) and click once on the image that you just decrease.
Go to: Properties Panel -> Filters tab -> Click on the add icon and select the Adjust Color filter. Make the adjustments as follow in the picture below.
Go back on the first frame and repeat Step 3 and Step 2.
Step 4
Go to frame 40, select the Free Transform Tool (Q) and enlarge the image like in the picture below.
Now on frame 40 select the Selection Tool (V) and click on the image
Go to: Properties Panel -> Filters tab -> Click on the add icon and select the Blur filter. Make the adjustments as follow in the picture below.
Step 5
Right-click on the gray area between frame 1 and 30, frame 30 and 40, frame 40 and 50 and frame 50 and 60 on the timeline and choose Create Motion Tween from the menu.
New flash file > Document (shortcut key: Ctrl+J ). Set the width of your document to 300 pixels and the height to 180 pixels.
Select any color as background color and set your Flash movie’s frame rate to 32 fps.
Change the layer name to Image
Import your Photo: File > Import > Import to stage (Ctrl+R) and import any photo into a flash stage.
While the image or object is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
While the new made Movie Clip is still selected, go to the Properties Panel 0n the right side (up) and change the Instance name input field to Image.
Step 2
Create a new layer above the layer image and name it button.
Now create a button, type on it Button and convert it into a button symbol.
While the new made Movie Clip is still selected, go to the Properties Panel 0n the right side (up) and change the Instance name input field to myButton.
Step 3
Create a new layer above the layer button and name it actionscript.
Select the first frame of layer action and go to the AS panel (F9) and paste this code:
New flash file > Document (shortcut key: Ctrl+J ). Set the width of your document to 300 pixels and the height to 180 pixels.
Select any color as background color and set your Flash movie’s frame rate to 88 fps.
Change the layer name to image
Import your Photo: File > Import > Import to stage (Ctrl+R) and import any photo into a flash stage.
While the image or object is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
While the new made Movie Clip is still selected, go to the Properties Panel 0n the right side (up) and change the Instance name input field to Image.
Step 2
Create a new layer above the layer image and name it button.
Now create a button, type on it Button and convert it into a button symbol.
While the new made Movie Clip is still selected, go to the Properties Panel 0n the right side (up) and change the Instance name input field to myButton.
Step 3
Create a new layer above the layer button and name it actionscript.
Select the first frame of layer action and go to the AS panel (F9) and paste this code:
New flash file > Document (shortcut key: Ctrl+J ). Set the width of your document to 400 pixels and the height to 300 pixels.
Select any color as background color and set your Flash movie’s frame rate to 34 fps.
Change the layer name to image
Import your Photo: File > Import > Import to stage (Ctrl+R) and import any photo into a flash stage.
While the image or object is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
While the new made Movie Clip is still selected, go to the Properties Panel 0n the right side (up) and change the Instance name input field to Image.
Step 2
Create a new layer above the layer image and name it rotate button.
Now create a button, type on it Button and convert it into a button symbol.
While the new made Movie Clip is still selected, go to the Properties Panel 0n the right side (up) and change the Instance name input field to myButton.
Step 3
Create a new layer above the layer rotate button and name it action.
Select the first frame of layer action and go to the AS panel (F9) and paste this code:
We will learn how to apply Bevel filter using actionscript 3.0
Step 1
Create a new flash Project ,
New flash file > Document (shortcut key: Ctrl+J ). Set the width of your document to 300 pixels and the height to 180 pixels.
Select any color as background color and set your Flash movie’s frame rate to 12 fps.
Change the layer name to photo
Import your Photo: File > Import > Import to stage (Ctrl+R) and import any photo into a flash stage.
While the image or object is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
While the new made Movie Clip is still selected, go to the Properties Panel 0n the right side (up) and change the Instance name input field to flash_photo.
Step 2
Select the first frame of layer photo and go to the AS panel (F9) and paste this code:
