Methodology

1. Creating your first Flash CS6

a. Run the Flash CS6.
b. Window as shown above will appear. Select “ActionScript 2.0” from the list

2. Inserting a picture to be a background image. (For main page)

a. On the menu bar, select File > Import > Import to library.

b. The image selected will be shown in the library section.

c. By right click on the image in the library, select “Properties”.
d. Properties will allow you to edit the type of compression that you want. It will allow you to do smoothing, up to 100% scale. The image can also be converted to the other file type.

3. Add new layer and rename it
a. To add text, a button or even a shape, add a new layer and rename it.

b. When the main page has been completed, add another layer to make the page “STOP”.
c. By adding a “STOP” layer, an action is needed to finish it. Select Windows > Actions, or you can simply press F9 for the shortcut. d. After pressing F9, an action windows will popup. Therefore, a proper coding is needed to complete the operation. e. Inside the windows, type “stop();”. Make sure everything is correct including the small letter and the same bracket. Even if a small grammatical, can cause error.

4. Insert new scene and make a button that can switch scene.
a. To convert the picture as a symbol, right click on the image and choose “convert to symbol…” b. In the box, enter a new name for the button. Make sure the type is button and press OK. This image is no longer a picture, it will act as a button and it can be used to switch scene.
d. To add scene, press Insert > Scene. A blank screen will appear. To rename the scene, to add, to remove, one can simply press “Shift + F2”. Scene can be easily manage from the scene toolbar. e. First, go back to scene 1, and double click on the button. Follow the above instruction and make sure all the frame has a keyframe. This will enable the animation when we move the cursor over, up and when we want to click the button. If you wish to zoom the picture when the cursor is over it, in the “Over” frame, you have to expand the picture.
f. In order to switch between scenes, one must know a proper coding. Follow the instuctions in the picture shown below. g. Click on the picture. Make sure it is clicked, or the button will not work. After you click the button, click Windows > Actions.
i. In the box, write a coding with a proper grammar. j. “release” indicates the mouse activities, and “gotoAndPlay” is the instruction used to switch the scene. On scene 2, make sure you make a “STOP” layer so that it will wait until a button is clicked before it changes the scene.
5. To make multiple layers to allow zooming animation.
a. First, add a background to the first layer. Name the layer as “Background”.
b. Find a clipart of an animal that you want to zoom later on and put it to the second layer and name it. This will allow the zooming animation whenever the cursor is over the image.
c. When you have align the second layer to the first layer, make sure to lock the first layer so that it will be easier to edit the second layer.
d. To make the zooming animation, you must first convert the image to symbol.
e. Follow step 4.e for the source code and make sure you save (Ctrl + s) whenever you finish each step. f. Figure shown above is the screenshot of Scene 2, where few animals have been added to layer by layer and each of them have the zooming effect whenever we try to move the cursor over it.

6. To make layer for each animal’s specification a. The figure shown above is the screenshot of a scene that explains about each of the animals.
b. Make a “STOP” layer. c. Make another layer, to insert “TEXT”. d. The name of the animal, as well as the description will be at this level. It will be easier to make sure that it is group to its type.
e. To make a button, select Windows > Common libraries > Buttons. f. Since this button is selected from the library, we do not have to convert it to symbol. Double click on it, and edit the effect when cursor is “Up”, “Over” and “Down”.
g. To enable the “BACK” process, it is the same as switch between scenes. I named this scene as “MONKEY” and the button “BACK” will take me to Scene 2 where there’s a picture of all animals. h. Above is the coding for the “BACK” process. For Scene 2, I have labelled it as “PAGE TWO”.
i. As you can see, it is the coding for the BACK_BUTTON.

7. To add Sound.
a. As for this project, in order to hear the animal’s sound, you have to click the picture and it will make a sound.
b. To insert Sound, select File > Import > Import to Library…
c. When the sound is already in the library, right click on it, and select Properties.
d. From the Properties, you can edit its compression method.
e. When you have done will all the steps, make the picture of that particular animal as the symbol. This step is the same as the step shown above on how to convert a picture to a symbol. f. Based on the picture shown above, double click on the picture that has already been converted into symbol, and it will show the frame “Up”, “Over” and “Down”.
g. Click on “Down” Button and Properties will be shown on the right side of the windows.
h. The sound that has been imported from the computer to the library will be shown in the list.
i. Choose “Monkey Sound” and save (Ctrl + s).

j. The picture will now act as a button. The picture will be expand when the cursor is over it and it will make a sound when you click it.