TUTORIAL - ANIMATION (Frame by Frame)

Step 1:

Open a new flash file.

Step 2:

Draw any character in the stage.

Step 3:

Change the layer name to layer ‘cat’ by double-clicking on the word Layer 1.

Step 4:

Click on Frame 2 of the timeline. Select Insert > Timeline > Keyframe from the menu. This will put a new keyframe in Frame 2.

Step 5:

To create the animation, change the image in Frame 2, by adjusting the animal mouth by selecting the black arrow tool and moving it close to the mouth or other facial feature. It will change and you will be able to alter mouth or feature’s shape.

Step 6:

To check out the result of the animation, select Control > Test Movie.

The Result:

#   You can watch the tutorial of Animation (frame by frame) in here.

TUTORIAL - MOTION GUIDE (Ant Moving in The Tunnel)

Step 1:

Open a new flash file.

Step 2:

Select light brown colour for the background in the properties section.

Step 3:

Rename Layer 1 with the name: Background, by double-clicking on the text Layer 1.

Step 4:

Then, draw a large dark brown rectangle over the whole stage area by using the rectangle tool.

Step 5:

To make the tunnels in the nest, set the eraser to the largest size in the tool modifiers and rub out parts of the rectangle which will create a tunnel-like look similar to the image below:

Step 6:

Make a new layer on the timeline using the add layer button or by selecting Insert > Timeline > Layer. Name the new layer ‘Ant’.

Step 7:

On the ant layer, draw an ant. Then, select the ant and make it into a symbol in the library by choosing Modify > Convert to Symbol.

(7.1)

Name the ant symbol ‘ant’ and select the graphic option from the type options. Select the centre square in the Registration option.

(7.2)

Step 8:

To give guide to the ant, create a guide layer, then, select the ant layer on the timeline to add the guide layer. The timeline will look like this:

Step 9:

Using the pencil tool, draw the path for the ant to follow through the ant nest as the below example (the white line is the guide for the ant to follow, which referred as 'Motion Path' ):

Step 10:

Now, snap the ant to the guide by following these steps:
a)  Make sure the magnet icon in the tools options is pressed on.
b)  Select the ant on the frame 1 of the ant layer. Position the mouse on the centre of the ant where you will see a crosshair. Move the ant using the crosshair to the starting point of the guide.
c)  The ant is already positioned at the start of the guide. Now, position the ant at the end of the guide by Insert a Keyframe at the timeline (I positioned mine at frame 70 as below):

(10.1)

d) Click on frame 70 of the ant layer and drag the ant to the end of the guide. 

(10.2)

e) To make the ant move along the line, we need to add a motion tween. This can be done by; clicking between the two keyframes on the ant layer and select motion from the tween dropdown menu.

The result:

(The ant will move along the tunnel@white line.)

# You can watch the tutorial of Motion Guide in here.

TUTORIAL - SHAPE TWEEN (Text Form to Star Shape)

Step 1:

Open a new flash file.

Step 2:

Start by selecting Text Tool and then, type the text in it.

Step 3:

Break the text apart by selecting the text and choose Modify > Break Apart (this process will only break the word into individual letters. Therefore, you need to repeat the breaking apart process by once again selecting Modify > Break Apart).

(3.1)

(3.2)

Step 4:

Insert keyframe at the new frame that you selected (e.g. frame 50). At this new key frame, delete the letters that you made before and add new shape such as star.

After clicking at Polystar Tool at the properties panel, click Option > Style > Star > 

Number of Slide : 5 > OK. You can also choose different colour of the fill by clicking at 

Fill Colour.

 

Step 5:

If the shape has an outline, double click on the outline and remove it. It will make the 

Shape Tween look smoother.

Step 6:

Now, create the Shape Tween to morph the letters ‘FLASH’ into the star.

Click at any Frame between 1 and 50 and in the Properties panel at the bottom change Tween option from None to Shape.

#   You can watch the tutorial of Motion Tween in here.

REFLECTION ON MEETING 2 (27th SEPTEMBER 2014)

TUTORIAL - MOTION TWEEN (BALL)

Step 1:

Open a new flash file.

Step 2:

Draw a ball on the stage and convert it into a symbol. 

(2.1)

(2.2)

Leave the Behaviour checked as Movie Clip.

(2.3)

Step 3:

To create animation, insert a second keyframe along the timeline in frame 1 by clicking on any Frame that you prefer (here I choose Frame 30). At this Frame, create the second ball (e.g blue ball) using Step 2's step and then, move the ball to another location on the stage (you can enlarge or reduce the size of the ball).

(3.1)

Then, repeat Step 3 to create another ball (Ball 3) at other Frame (here I choose Frame 60).

Step 4:

To animate the ball so that it moves from frame 1 to frame 30 and finally to frame 60 gradually, click in the timeline between the two keyframes (between the frame 1 and frame 30) and select Motion from the Tween drop down menu in the Properties panel .

Then, repeat the same step for Motion Tween from ball 2(blue) to ball 3(black).

Step 5:

Now, select Control > Test Movie to see the ball moving gradually from the first position to the second position until the last position.

Here is the result:

#   You can watch the tutorial of Motion Tween in here.

TOPIC 3–CREATING ANIMATION

LEARNING ACTIVITY 3

Name:             NUR AMALINA BINTI ANUAR

Matric No:       MPP141188

1.     Create an animated bouncing ball that could change its positions, colour and size along the preferred timeline.

            #   You can view the tutorial for this activity in here....

2.      Create a new flash file and change a text form into a star shape as per example below.

          #   You can view the tutorial for this activity in here....

3.    Use a motion guide technique to guide the ant move along the tunnel as per below example.

            #   You can view the tutorial for this activity in here....

4.     Try to animate this cartoon's mouth by applying frame-by-frame technique in Adobe Flash.

           #   You can view the tutorial for this activity in here....

ABOUT ME

Assalamualaikum wbt...Hellooooo....

After more than 4 years since I graduated, I've finally gathered up my courage to go back to school. I've always had this plan in mind (furthering my studies) ever since I graduated and I've always looked for the opportunities to do so. Finally, the chance has come and thank you Allah for making it happen. I feel blessed yet nervous at the same time.

6th of September 2014 was the historical date for me as on that day, I officially become an UTM's postgraduate student. There were many reasons why I choose this university and why I selected this course (Educational Technology). First, I have always been interested in new technology. Moreover, I teach ICT's subject at school. I'm always have passion for making my lesson exciting and engaging and I'm always looking to improve my teaching and learning. Therefore, I believe this course will really help me not only improving myself but also my teaching method. But why UTM? Why not other university? The main reason I choose UTM was because; not only it offered this course, but the external program (part time@offshore programme) for this course conducted at various locations (in Malacca particularly). So, it is very convenience for me who works in Muar and who always travel back to my hometown in Seremban. Besides, this university is very well established and world wide-known university.

Finally, I want to express my gratitude for those who are always supporting me especially my parents, colleagues (my headmaster especially), friends and families. Hopefully, I'll be able to graduate on time and pass with flying colours.

P/s : I'm really not good with words and please forgive me with my poor English. I'm trying to improve myself and always need your help, guidance and comment. Good Comments are appreciated, Bad Comment were not needed. TQ.

Are you surprised to find that there is no post @ any entry here??

Don't worried..It's just that I don't like to see those post@entry being pop up here everytime I uploaded new post@entry...

Therefore, below are the short cut link to those posts@entries that I've uploaded which I've actually put it in different pages to which it's related...You can either click the links below to view the post@ entry or you can simply click the "TAB MENU" above..Feel free to click, explore and read..Positive comments are welcomed..=)

1)     ABOUT ME

2)     INTRODUCTION TO MPT 1193

3)     REFLECTIONS (from Meeting 1 and more..)

4)     LAB WORKS 1 (FLASH LEARNING ACTIVITY)-which include Learning Activity 1 and more..)

REFLECTION ON MEETING 1 (26th SEPTEMBER 2014)

On this meeting, we have been briefed by Dr. Jamaluddin Harun, on the course’s outline as well as been introduced to the Authoring and Programming Concepts, Multimedia/ Web Development Concepts, Flash and Apps Development Software especially working with the Adobe Flash and some Motion and Simple Animation.

TOPIC 2-DRAWING IN FLASH

LEARNING ACTIVITY 2

Name:             NUR AMALINA BINTI ANUAR

Matric No:       MPP141188

1.   Draw a view of the beach as in example.

      The tools that I have used during this activity:

• Line Tool 
• Selection Tool

#   You can view the tutorial for this activity in here.

2.   Once you are done, colour you drawn image with an appropriate tool in Flash. Describe the tools that you are using.

    Tools that I used in colouring the above drawn image are:

• Brush Tool (watch tutorial of using brush tool in here)
• Paint Bucket Tool (watch tutorial of using paint bucket tool in here)
• Ink Bottle Tool (watch tutorial of using ink bottle tool in here)
• Selection Tool (watch tutorial of using line tool and selection tool in here)

3.  Create a new flash file and draw a cartoon image of your choice by using Onion Skin Tools, and then, convert it to graphic symbol.

With onion skin tool, we will be able to trace image from original/existing image to a new graphic.

From this:

To this:

# You can view the tutorial of this in here.

  

TOPIC 1-INTRODUCTION TO FLASH

LEARNING ACTIVITY 1

Name:             NUR AMALINA BINTI ANUAR

Matric No:       MPP141188

1.        What is the function of Shape Tool in Adobe Flash?

          

           To draw or create basic geometric shape likes rectangle, oval and polystar (polygon    or star.

2.        Provide your own reflections on types of applications that can be develop with Adobe Flash CS3.

       

           In my opinion, by using Adobe Flash CS3, we can develop various types of applications such as interactive websites, educational courseware, online games or flash videos.

3.        How many types of text boxes that Flash has? Explain and differentiate each of the text boxes with an appropriate example of its usage. You can provide any sketches if required.

           

           There are 3 types of textboxes, which are;