Flash shopping list

This tutorial will teach you how to create flash shopping list in flash 8, with very,very little scripting.



Step 1

Start Flash. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 200 pixels and the height to 250 pixels. Select #F3F3F3 as background color, for Frame rate choose 22 fps (Frames per Second) and click ok.



Step 2

Take the Text Tool (T).In the Properties Panel (Ctrl+F3) below the scene, select the following options:

a) Select a StaticText field.
b) Select a Courier font.
c) Choose 20 as font size.
d) Select #8AC112 as color.
e) Choose bold style.



Then, type somewhere on the top of list "SHOPPING LIST". See the picture below.



Step 3

Take the Rectangle Tool (R).In the Colors portion of the Tool panel, block the Stroke color by clicking on the little paint bucket icon and then on the small square with the red diagonal line. For Fill color set #D4D4D4, and draw a "line" below the "SHOPPING LIST". See the picture below.



Step 4

Take again the Text Tool (T). In the Properties Panel (Ctrl+F3) below the scene, select the following options:

a) Select a StaticText field.
b) Select a Verdana font.
c) Choose 9 as font size.
d) Select #827E7E as color.
e) Choose bold style.



After that, write the provision like it is shown on the picture below.



Step 5

Take the Oval Tool (O).In the Colors portion of the Tool panel, block the Stroke color by clicking on the little paint bucket icon and then on the small square with the red diagonal line. For Fill color set #FF7800,and draw a "circle" from the left side for each provision. See the picture below.





Step 6

Take the Selection Tool (V) and select the first provision, press F8 key (Convert to Symbol), to convert the first provision into a Button. See the picture below.



Step 7

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



The Up frame (or state of the button) is present when there isn't any interaction with the button going on.

The Over state becomes active when a user rolls her mouse over the button.

The Down state shows when the user clicks the button.

The Hit state is different from all the previous ones: it isn't visible at all. This state, or better, the contents of this frame define the clickable area of the button.

Step 8

Right-click on this layer's Over frame and select Insert KeyFrame from the menu that shows up.See the picture below.



Step 9

Select only the "circle", press F8 key (Convert to Symbol) to convert this "circle" into a Movie Clip Symobl.



Step 10

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



Step 11

Click on frame 6 and press F6 key. After that, take the Free Transform Tool (Q), and increase the "circle" a little. See the picture below.



Step 12

Go back on frame 1, open the Properties Panel (Ctrl+F3), and for Tween choose Shape.





Step 13

Click on frame 6, press F9 or select Window > Actions to open the Actions panel. Then, enter the following ActionScript code inside the Actions panel:

stop();

We're done for the first button on list. Repeat the previous steps for every other button on list.

Have a nice day!

Download source file (.fla)