Flash Tutorial

Creating the Motion Tween

Step 1 : Choose File > New.
Step 2 : Now select any shape tool from tools.
Step 3 : Click and drag on the workarea or on stage.
Step 4 : Choose Edit > Select All to select the whole shape.
Step 5 : Group it together using Ctrl + G, by doing so you are making an object of that shape.
Note : Any shape made in flash can be broken into any number of parts and needs to be grouped together to do the motion tweening.
Step 6 : Go to frame 20 in the Timeline, by clicking the gray field below 20. Then right click in this field. Choose Insert Keyframe. Keyframes appear as circles in a frame. This operation duplicates the image.
Step 7 : While the frame 20 is selected reposition your symbol to the desirous location on the workarea.
Step 8 : Right click anywhere on the Timeline and select Create Motion tween.
Step 9 : Press Ctrl + Enter to test the movie.

Click here to see how this will work

Creating the Shape Tween

Step 1 : Choose File > New.
Step 2 : Now select any shape tool from tools.
Step 3 : Click and drag on the workarea or on stage.
Note : In this example we did not group together the shape
Step 4 : Go to frame 20 in the Timeline, by clicking the gray field below 20. Then right click in this field. Choose Insert Keyframe. Keyframes appear as circles in a frame. This operation duplicates the image.
Step 5 : While the frame 20 is selected delete the existing shape using Ctrl + A and click delete.
Step 6 : Type on the frame 20 using the Text Tool from tools.
Step 7 : Click Ctrl + T to change the Text options like font type, font size, text color.
Step 8 : Break apart the text by Ctrl + B.
Step 9 : Right click anywhere on the Timeline and select Panels > Frame.
Step 10 : On the Frame window select tweening as shape from the list options. Green arrowed line on the timeline shows the correct shape tween.
Step 11 : Press Ctrl + enter to test the movie.

Click here to see how this will work

Open an URL using a button

Step 1 : Choose File > New.
Step 2 : Choose Insert > New Symbol and select button and assign a name to that button.
Step 3 : This button created is stored in the library of that flash file and can be viewed using Ctrl + L.
Step 4 : In the Library window double click on the button you have just created. Create the shape for up and over of the button like below.




Step 5 : Click on the Scene 1 and drag the button from the library to the stage.
Step 6 : Right Click on the button and select Action to write the actionscript.
Step 7 : On the Action box write the following script

on (release) {
getURL ("http:\\www.yahoo.com");
}

Step 8 : Click + Enter to test the movie.

Click here to see how this will work

Create a guide tween

Step 1 : Choose File > New.
Step 2 : Now select any shape tool from tools.
Step 3 : Click and drag on the workarea or on stage.
Step 4 : Choose Edit > Select All to select the whole shape.
Step 5 : Group it together using Ctrl + G, by doing so you are making an object of that shape.
Note (Any shape made in flash can be broken into any number of parts and needs to be grouped together to do the motion tweening.
Step 6 : Go to frame 20 in the Timeline. by clicking the gray field below 20. Then right click in this field. Choose Insert Keyframe. Keyframes appear as circles in a frame. This operation duplicates the image.
Step 7 : While the frame 20 is selected reposition your symbol to the desirous location on the workarea.
Step 8 : Right click anywhere on the Timeline and select Create Motion tween.
Step 9 : Add a Guide layer above the Layer 1.
Step 10 : On the frame 1 of the guide layer create any shape with the Pencil tool which start from the starting position of the shape and end on the end position of the shape being tweened.



Step 11 : On Frame 1 in the Timeline. Click on the Arrow tool in the left toolbox. Select the Snap to Objects button in the Options section of the left toolbox.
Step 12 : Press Ctrl + Enter to test the movie.

Click here to see how this will work

Masking

Step 1 : Choose File > New.
Step 2 : Now select the Text tool from tools and and Type any text on the stage.
Step 3 : Right Click the text and select Panels > Align to align the text to the center.
Step 4 : Change the color of the text using Ctrl + T to white.
Step 5 : Rename the layer as text1.
Step 6 : Go to the frame 30 and add a keyframe.
Step 7 : Add a new layer and name it text2 using Insert > Layer or the + sign on the layer panel.
Step 8 : Type the same text and align it to center.
Step 9 : Break apart the text and give gradient effect to the color from Fill Color tool of tools.
Step 10 : Go to frame 30 on text2 and insert a keyframe.
Step 11 : Add another layer on top and name it mask.
Step 12 : Create a circle on the mask layer by selecting Oval tool from tools. Click and drag on the stage.
Step 13 : While on the mask layer click on the frame 1 and group together the circle using Ctrl + G.
Step 14 : Go to frame 30 on mask and insert a keyframe.
Step 15 : Position the circle on the left side of the text in frame 1 and on the right side of the text on fame 30 on mask layer.
Step 16 : Right click on the timeline on layer mask and select Create Motion Tween.
Step 17 : Right click on the layer named mask and select Mask option.
Step 18 : Press Ctrl + Enter to test the movie.

Click here to see how this will work

Adding the two numbers

Step 1 : Choose File > New.
Step 2 : By selecting the Text tool from tools, type the text like below. For the buttons you can use the common library Windows > Common Library > Buttons.



Step 3 : The text Enter the number1, Enter the number2 and Click the button to see the result are the normal static text.
Step 4 : To create the three input boxes, select Text tool from the tools, click on the workarea, now to make the text as input type (where the user needs to enter the value), press Ctrl + T to open the Text Option window. On the Text Option window select Text Options tab and change it to dynamic text and check the BorderBg. In the text box under the caption variable give the name to the input box as "a".
Step 5 : Similarly create the other two input boxes. For number2 name it as b and for the result input box name the variable as c.



Step 6 : Right click on the button and select Action. Write the following script

on (release) {
c=Number(a)+Number(b);
}
Note : we need to explicitly convert the two input numbers to numbers using Number function.
Step 7 : Choose Ctrl + Enter to test the movie.

Click here to see how this will work

Back - Flash Tutorial : Introduction to Flash

Next - Tutorials