Colors of Authoring Class

Assalamualaikum & Good Day Everyone! ^_^

In the previous entries we have discussed on how to build simple animation in Flash. So, in this entry, we will be learning on how to build a simple application in Flash. There are 4 types of interaction that we will be creating that is Multiple Choice Question, Text Entry Question, Main Menu Application, and Drag & Drop.

Multiple Choice Question

Step 1 : Create a new Flash file. Rename your Layer 1 as question. In question layer, select Text Tool, and start typing your question. Don't forget to set the text type as Static Text in the Properties panel.

Step 2 : Create a new layer and name it as button layer. In the button layer, we want to create 4 buttons that is Button A, Button B, Button C, and Button D.

Step 3 : Select Oval Tool draw a circle. Select Text Tool and draw an A on the top of the circle. Select both circle and A, convert it to button symbol by pressing F8. Set the properties as below:

Step 4 : Repeat Step 3 for button B, C, and D. After you're done, you can see the buttons that you've just created in the Library panel.

Step 5 : Drag your buttons to the stage. Select Text Tool (set text type as Static Text) and type answer besides each button as follow:

Step 6 : Insert a new layer and name it as respond. Select Text Tool draw your text area in the stage. In the Properties panel set the text type as Dynamic Text. Adjust your text area. This is where you will tell the user whether their answer is correct or wrong.

Step 7 : Insert a new layer and name it as action. Right click on the 1st frame and select Actions. Type in the codes below:

Step 8 : Now, we want to add actionscript to each button. In this case, Button C is the correct answer. Right click on the Button C and select Actions. Type in the codes below:

The code shows that when users click on the C button, it will be display 'Congrats, your answer is correct!' in the Dynamic Text area that we created in Step 6

Step 9 : Repeat Step 8 to the other 3 buttons but change the respond that shows the answer is wrong or incorrect.

Test you movie. It should work.

Here are the Multiple Choice Question that I have created --> Multiple Choice Question

Text Entry Question

Step 1 : Create a Flash file. Type in your title.

Step 2 : Create a new layer and rename it as question. Select Text Tool and select Static Text in the Properties panel. Start typing your question.

Step 3 : Select the Rectangle Tool and create a box on your stage.

Step 4 : Select the Text Tool and reposition inside the box that you just created. Make sure that you change the text type to Input Text in the Properties panel.

Step 5 : Select the Text Tool again set the text type as Dynamic Text in the Properties panel. Place it below the box.

Step 6 : Create a new layer and name it as button. From the Library panel, choose a Play button and drag it to your stage.

Step 7 : Insert another layer and name it as stop. Right click at the 1^st frame and choose Actions. Type in the codes below:

Step 8 : Right click on the play button and choose Actions. Type in the codes below:

Step 9 : In your Input Text field, set the variable as answer and in your Dynamic Text field, set the variable as respon. Test your movie.

Here are the links to the Text Entry Question that I have created. Click Here.

Main Menu

Step 1 : Create a new Flash file. Design your homepage by drawing the buttons, names of the main menu and etc. Here is the interface of my homepage of my main menu.

Step 2 : Click on Home button, and in the Properties panel, change its Instance Name. Below is the Instance Name that I set for each button.

Step 3 : We want to create a page that is the food page (when user click on the Foods button, they will be directed to the Foods page). We want all the pages have the same design, so, we just duplicate the Scene 1. Go to Windows > Other Panels > Scene. The Scene window will appear.

At the bottom of the Scene window, click on the Duplicate scene button. Now you have two scenes.

Double click on your Scene 1 and rename it as Home and your Scene 1 copy as Foods.

Close your Scene window.

Step 4 : Select your Foods Scene and replace the text with a box and foods menu.

Don’t forget to assign your button an Instance Name.

Test your movie. You will see that these two scenes are kept on blinking.

Step 5 : Select your Home scene, right click on the 1^st frame of your buttons layer, and click on Actions. in the Actions – Frame window, type the following codes:

Test your movie again.

Step 6 : Select you Home scene. Now, we want to activate the Foods button so that when users click on it, they will be directed to the Foods Scene. Now, insert new frame in each layer on the 15^th frame.

Do the same on the Foods scene.

Step 7 : Now, we will insert a new layer at Foods scene. Rename the layer as foods and on the Properties panel, set your Frame Label as food_page.

Step 8 : We will insert a stop action so it won’t play along the timeline. Insert a new layer and rename it as ‘stop’. Right click on the 1^st frame of the stop layer, and click Actions and type the codes below:

Step 9 : Go to Home scene, right click on the Foods button, and click Actions. Type in the codes below:

Test your movie. You can now click on the Foods button and it directs you to the Foods page. Now we will activate Home button in the Foods page.

Step 10 : In Foods scene, right click on the Home button, and choose Actions. Type in the codes below:

Test your movie.

Step 11 : Now, we want to activate the button in the Foods scene. These buttons will navigate to this scene but in different frame. Select the foods layer. Right click on the 5^th frame and insert a new keyframe. In the Properties panel, name the frame as ‘rice’ on Frame Label.

Step 12 : Select Text Tool and write the name of the rice menu as below:

Set your button Instance Name as riceBtn. Right click on the Rice button and select Actions. Type in the codes below:

Test your movie. It should be working.

Step 13 : Repeat the Step 3 until Step 12 to create the Beverages page and test your movie to see if they are all working as you want them to be.

Step 14 : Now we want to navigate the About Us button to a website. Go to Home Scene, right click on the About Us button, and click Actions. Type in the codes below:

Test your movie. Here are the Main Menu that I've created --> Main Menu

Drag & Drop

Step 1 : Create a new Flash file. Draw a tree or you can import tree picture by selecting File > Import > Import to Library. Rename your Layer 1 as tree.

Step 2 : Convert you tree to movie symbol by pressing F8. A Convert to Symbol window will appear and set the properties as below:

Step 3 : Insert a new layer and rename it as apple. Draw your apple or alternatively, import an apple image into your Library. Convert your apple to movie symbol and set the properties as below:

Step 4 : Right click on the tree on the stage and select Actions. Insert the codes below:

Step 5 : Repeat Step 4 for the apple.

Test your movie by pressing 'Ctrl+Enter'. Here is the Drag & Drop that I've created --> Drag & Drop

That's it for Interaction in Flash.. ^_^

Assalamualaikum dan Good Day Everyone..

In the previous entry, I have explained on how to draw in Flash. Now, we will learn on how to create simple yet interesting animations using Flash. There are four types of animation that we have learned in this class, Motion Tweening, Shape Tweening, Motion Guide, and Frame by Frame.

MOTION TWEENING

The first animation exercise that we have done is how to animate a bouncing ball. Here are the steps in animating a bouncing ball:

Step 1 : Create a new Flash file. Select the Oval Tool and draw a circle. You can choose any colour that you want. For this exercise, I choose pink colour.

Step 2 : Now, we will convert the circle into graphic symbol. Select the circle and go to Modify > Convert to Symbol or alternatively, you can just press F8. A ‘Convert to Symbol’ window will appear and set the properties as below :

Step 3 : Right click at the 10^th frame and click on Insert Keyframe. Select the 10^th frame, and drag the circle to another position. Right click in between first and 10^th keyframe, and select Create Motion Tween. Now, go to Control > Test Movie or alternatively you can press 'Ctrl+Enter' to preview your animation. You can see that your circle have move from initial position to the second position.

Step 4 : Now, you can add more keyframes to make the circle bounce many times. Repeat step 3 by adding 10 frames in each bouncing (10^th, 20^th, 30^th, and so on). Actually, you can choose how many frame per bounce. The more frame length you use, the slower the movement of your circle/ object and the shorter your frame length, the faster your object will move or you can adjust the frame rate under the frame timeline.

Step 4 : You can save your work selecting File > Export > Export Movie and choose your file type. You can save it in .avi format or .gif format.

One more thing, in every keyframe that you inserted, you can modify the object size and colour brightness. To resize your object, select your object and choose Free Transform Tool. For each bouncing, you can change your circle size. As for adjusting the colour brightness, select your object, at the Properties panel, in the Colour section, choose Brightness. You can change the brightness percentage of your object. You may want it to be darker or lighter. And lastly, don’t forget to save your work every time you make changes. ^_^

Here are my animated bouncing ball that I’ve create using Motion Tween.

SHAPE TWEENING

Next animation is how to convert a text into an object. Actually, there are three types of shape tweening that is ‘Object to Object’, ‘Text to Object’, and ‘Image to Image’. In this activity, I will explain on how to convert the ‘FLASH’ word into the ‘STAR SHAPE’. Here are the steps:

Step 1 : Create a new Flash file. Select Text Tool and type ‘FLASH’.

Step 2 : Now, we want to break the text apart so that it can change to object later. Select Modify > Break Apart to break the words into individual letters. Again, we break the individual letters by selecting Modify > Break Apart.

Step 3 : Next, right click on frame 25^th and select Insert Keyframe. Select frame 25^th, delete the text. We will now draw a star shape. Select PolyStar Tool. In the Properties panel, click on the Options button and a Tool Settings window will appear. Change the properties as follow :

You can also change the colour if you want.

Step 4 : Click anywhere between frame 1 and 25, and in the Properties panel, change the ‘Tween’ value into ‘Shape’. Press ‘Enter’ to see your text change into star shape.

Step 5 : Save your file as .avi or animated .gif format.

Here are the Shape Tweening that I’ve done.

MOTION GUIDE

Motion guide animation allows users to move an object on predefined path. In other words, in motion guide, your objects will move according to the path that you have been set. Here are the steps on how to help an ant to find its way out:

Step 1 : Create a Flash file. Draw the path as below picture:

Step 2 : Add a new layer and rename it as ‘semut’ or any other name that you like. Draw an ant or alternatively, you can just import an ant image into the library.

Step 3 : Right click on the 155^th frame and select Insert Keyframe. Since the path is long, I add a longer frame. But you can determined you own frame length considering your path length and how fast your ant will walk along the path.

Step 4 : Right click between the two keyframe and click on Create Motion Tween.

Step 5 : While you a selecting the ‘semut’ layer, click on Add Motion Guide under the layers. We can see that it add a new layer called ‘Guide: semut’ which it will now guide the ‘semut’ layer.

Step 6 : Select the Pencil Tool and select ‘Smooth’ options for drawing. Draw the path that the ant will go through later on. It doesn’t matter if your line drawing is not smooth/clean, because later on, it will not be seen. It is just as a guide for the ant to move.

Step 7 : Click on your 1^st frame of ‘semut’ layer, and point your mouse into the center of the ant. Drag the ant into the initial line that you just draw using Pencil Tool. Make sure that the cross at the center of the ant is exactly in the initial of the guide line. Click the last keyframe of your ‘semut’ layer and placed your ant in the end point of the guide line, also make sure that the cross at the center of the ant is exactly at the end of the guide line, or else, it will not work.

Step 8 : You can preview your animation by selecting Control > Test Movie or alternatively press Ctrl+Enter. You can see that the ant was moving along the guide line. But, you will notice some weird movement of the ant.

Step 9 : To make the ant movement more realistic, select the Free Transform Tool and to rotate your ant according to the path direction. In the Properties panel, tick the ‘Orient to path’ option. You can test your movie by pressing Ctrl+Enter.

Step 10 : Save your work as .avi format or animated .gif format.

For your information, you can also increase/decrease the movement of your objects in flash by changing the Frame Rate at the Document Properties window. Double click on the Frame Rate below the frame timeline and change the frame rate value. Here are the motion guide that I’ve been done :

FRAME BY FRAME

The last type of animation is frame by frame animation. This type of animation allows you to create animation in easiest way. In this activity, I will try to animate the cartoon mouth. Here are the steps :

Step 1 : Create a new Flash file. Draw a cartoon image that you want to animate.