Interactive flash content box

Date: 21.4.2007, 13:32    Total views: 106564

Using this detailed tutorial, you will learn how to create interactivity flash content box using the action script. You can use this content box for any web site.You will also learn:

1. How to design a flash content box,
2. How to import an image in Flash,
3. How to convert a bitmap image into a symbol,
4. How to apply Glow filter on image,
5. How to apply action script on image and more.



Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Modify > Document) and set the width of your document to 380 pixels and the height to 220 pixels. Select #9C9C9C as background color and click. After that, set your Flash movie's frame rate to 30 fps and click ok. See the picture below.





Step 2


Find on internet or somewhere any image and set its dimension in photoshop or some other graphic program to 150x130px. You can also download my image See the picture below.



Step 3

Go back in flash, choose File > Import > Import to Library and import that picture in flash library.

Step 4

Open now your flash library - Window > Library (shortcut key: Ctrl+L). After that, take the Selection Tool (V), and move your image from the library on the stage, using the "drag and drop" technique and place it on the position like it is shown on the picture below.



Step 5

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



Step 6

While the new made Movie Clip (image) is still selected, go to the Properties Panel (Ctrl+F3) again. On the left side, You will find the Instance name input field there. Call this image: "image_mc". See the picture below.



Step 7

Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip.



Step 8

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



Step 9

Click on frame 15 and press F6 key. While you're still on frame 15, take the Selection Tool (V), click once on the image to select it and go to the Properties Panel (Ctrl+F3) below the stage.

Step 10

Click on the Filters tab in the Properties panel. Click on the plus icon and select the Glow filter. Make the adjustements as follows:





Now you have this:



Step 11

While you're still on frame 15, press F6 key then times. See the picture below.



Step 12

Click on every second frame (16.18,20...) take the Selection Tool (V), click once on the image to select it and go again on the Properties Panel below the stage. Then, click again on Filters and for Glow filter for Strength set 0%. See the picture below.



Step 13

Right-click anywhere on the gray area between the frame 1 and 15 on the timeline and choose Create Motion Tween from the menu that appears.



Step 14

Go back on the main scene (Scene 1).



Step 15

Take the Selection Tool (V), click once on the image to select it and go to the Action Script Panel (F9). After that, enter the following action scrpt code inside the Action Script Panel:

on (rollOver) {
_root.mouse_over_image_mc = true;
}
on (rollOut) {
_root.mouse_over_image_mc = fstartlse;
}


on (release){
getURL("http://www.flashfridge.com/", "blank");

}

Step 16

Double click on layer 1 to rename its name image. After that, create a new layer above the image layer and name it border.

Step 17

Select a border layer and take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the fill color by clicking on the little paint bucket icon and then on the small square with the red diagonal line. For Stroke color choose #E2E2E2.

Step 18

After that click on Set Corner Radius icon and for Conrer Radius set 4 points. See the picture below.





Step 19

Then, go to the Properties Panel again (Ctrl+F3) ans select Solid as the type of outline, with the line thickness set to 2.



After that, draw a border aroand the image like it is shown on the picture below.



Step 20

Create a new layer above the border layer and name it text.

Step 21

Select the text layer, take the Text Tool (A) and go to the Properties Panel below the stage. Then, choose the following options:

1.Select a Static Text field,
2. Select a Trebuchet MS font,
3. Choose 12 as font size and bold it,
4. Select white as color,
5. As the rendering option, select Anti-alias for readability.



Then, type some header of text from the right side of image. See the picture below.



After that, Choose 10 as font size and type some text below the header. See the picture below.



Step 22

Create a new layer above the all layer and name it action.

Step 23

Click on the first frame of layer action and go to the Action Script Panel (F9). Then, eneter the follwoing action script code inside the actions panel:

_root.image_mc.onEnterFrame = function() {
if (mouse_over_image_mc) {
_root.image_mc.nextFrame();
} else {
_root.image_mc.prevFrame();
}
};

Test your movie (Ctrl+Enter).

We're done!

Have a nice day!

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