Monday, December 17, 2012

::WEEKS 14:: APPS 4 Types of interaction


Salam and Hi ~
Minggu ini, dalam kelas kami diberi tugasan untuk membuat 4 activities dalam kelas...

Activity 1: Develop a motion tween animation of pendulum~


Activity 2: Upload a morphing animation of butterfly life cycle .. start from larva to butterfly..

Activity 3: Implementing frame-by-frame skill, sketch a cartoon and animate it..

Activity 4: Animate the process of pollination agent..

Selain task-task ini kami juga diberi tugasan lain~ di mana kami perlu explore apps 4 ini dan lakukan beberapa activities untuk setipa interaction seperti di bawah~

 Terdapat empat jenis interaction iaitu 

1. Creating Main Menu
Creating main menu buttons is essential for interactive website to navigate from one page to another.

2. Multiple Choice Questions
This type of applications allow students to get interactive feedbacks from the content. Users could also could create flash-based quizzes with multimedia elements, such as images, sounds, narrations, movies and so on.

3. Text Entry Questions
Allow users to develop quizzes and allow interactive communication between the user and the content. 

4. Drag and Drop
It is another applications that users could build in flash to make learning activities more fun and interesting.


Ini adalah soalan untuk aktiviti 4..


1. Create a multiple choice questions that will provide a correct or incorrect response upon your answer.
2. Create one application that allows users to type an input of question provided.
3. Create a Main Menu that contain following actions:
  •  A button that navigate from one page to another.
  •  A button that navigate from one scene to particular frame of different scene
  •  A button that navigate users to other webpage

4. Based on your own creativity, create a simple flash application that involves drag and drop function.


Untuk lihat semua aktiviti ni yang telah saya buat, sila lawat ke site ini~ :)


Here the steps untuk setiap aktiviti~ :)




TASK 1. Create a multiple choice questions that will provide a correct or incorrect response upon your answer.



1. For the first layer, rename it as background and create the background, text for the stage.
2. Insert a new layer and rename it as question.
3. Then, choose the text tool and choose the static text at the properties panel and start typing the questions.
4. Create an oval button and changes the colour and resizes~
5. Using text tool type A on the button.
6. Convert the button to symbol (button type).
7. Repeat the same steps to create B,C and D buttons.
8. Insert new layer and rename as respon..
9. Then, choose text tool and choose the dynamic text in the properties panel.
10. Rename the variable as respon.
11. Insert another layer and rename as Action.
12. Put the action script (right click>action)
            stop();
            var respon;
            respon = " "
13. For the right answer which is A put this action script on the button~
on (release) {
            respon = "Congrats, your answer is correct";
            }
14. For the wrong answer which is B,C,D put this action script on the button
on (release) {
            respon = "Congrates, Your answer is correct!";
           }
15. Test Movie (Ctrl+Enter)


TADAAA~ 

This is the example when I click A which is the right answer~





This is the example when I Click the wrong answer~





TASK 2 Create one application that allows users to type an input of question provided.

1. For Layer 1, create the background using multiple colors of rectangles and type the text for the topic. (choose the static text in properties panel)
2. Insert a layer and rename the layer as question and start type the questions. (Choose the static text in properties panel)
3. Then, create rectangle below the question and insert a text in it using text tool. For this text,
5. After that, choose text tool again and this time choose dynamic text.
6. Insert a new layer and rename it as button.
7. Drag the play button from the library.
8. Insert a new layer name as stop.
9. Right Click on keyframe and choose actions. Type the actionscript below.
stp();
var answer;
var respon;
answer=""
respon=""o
10. Then, select the button and right click and insert actionscript as below..

 on(release) {if (answer == "print client") { respon= "Correct!";}
                                
          else {
         respon = "Incorrect, Your answer "+answer+"is wrong";
                   }
                 }

on(release, keyPress "<Enter>") {if (answer == "print client") { respon="Correct!";}             
                                
         else {
         respon = "Incorrect, Your answer "+answer+"is wrong";
                   }
                   }
11. Input textfield name as answer and dynamic textfield as respon on the variables at properties panel.
12. Test Movie (Ctrl+Enter)




And here the RESULTS~

When type the correct answer it will show "Correct"


When type the wrong answer it will show as below..



TASK 3 Create a Main Menu that contain following actions:
  • A button that navigate from one page to another.
  • A button that navigate from one scene to particular frame of different scene
  • A button that navigate users to other webpage.

1. First, design the background on layer 1 and rename it to background.
2. For the button HOME, PRODUCTS and ABOUT, type the name in the instance name as example HOME as home and so on.
3. Create the other scene that the same as Scene 1 by click Windows>Other panels>Scene and scene windows will appear. Click duplicate symbol to copy a new scene.Rename the scene as Scene 2.
4. Type anything in both scenes to differentiate between the scene.
5. Test the movie and we will see the page is like blinking. This happened because it's nonstop.
6. So, we have to insert action script on button layer to make it stop.
stop();
7. Test again and the page is not blinking anymore.
8. Then, insert key frame for all the layers in both scenes (eg. frame 20).
9. In Scene 2, create new layer name as "product" and productpage.
10. Create other layer to stop command in the actionscript.
11. To make the product button works, each time user click it. Right click on the product button and insert this below actionscript.
on(release) {
    gotoAndPlay("Scene 2",1);
                  )
12. While for the home button,  Right click on the home button and insert this below actionscript..

on(release) {
    gotoAndPlay("Scene 1",1);
                  )
13. Test movie. Then, when click the home or product button, it will navigate to the specified page.
14. To navigate to the different frame but the same scene. As example, in my task I put a hot product button. So, when click the button the info about the product will appear at the same scene. Insert frame in between the keyframe as example frame 10 on the product layer. Name it as hotproduct.
15. Insert button for the HOT PRODUCT in scene 2..
16. Then use text tool to create a dynamic text for the information of the hot product.
17. Type this below actionscript to make the button works..
on(release) {
    gotoAndPlay("Scene 2","hotproduct");
                  )

18. For the about button, it's funtion to link to the webpage..So, type this below actionscript..

on(release) {
    getURL("http://cakeshouse.com/");
                  )
19.Test Movie (Ctrl+Enter)
  


The HOME page~


The PRODUCT page before click the hot product button~


PRODUCT page where the info of the hot product appear~




TASK 4 Based on your own creativity, create a simple flash application that involves drag and drop function.

1. First, import a picture as background and rename the layer as background.
2. Insert text using text tool which will ask the user to drag and drop the puzzle at the right place.
3. Insert picture and use rectangle to make the border.
4. Then drag the picture out of the border.
5. To make the picture separated, so it can become pieces of puzzle, breakapart the picture and use free transform tool to separate it.
6. Then, convert the rectangle to symbol as movie clip.
7. Next, right click on the piece of puzzle and insert this below actionscript.
on(press) {
startDrag(this,true);
}

on(release){
stopDrag();
}
8. Test Movie (Ctrl+Enter)

Before drag the pieces of puzzle~

Complete puzzle~ :)







Monday, December 10, 2012

::WEEK 13:: ANIMATION

Salam and Hi.. 
Untuk minggu ni~ Belajar mengenai apps 3 iaitu animation...
Animation ade 4 jenis iaitu..
1. Motion Tweening - allows object to change position.
2. Shape Tweeining - can change shape object to object, text to object and image to image.
3. Motion Guide - allows users to move an object on predefined path, such as in circles or curve.
4. Frame by frame - similar with traditional cel-styles in animating a cartoon by drawing different movement in each frame.

Kami diberi satu tugasan.. yanguntuk setiap animation ni..
dan ini hasilnye~ selepas upload di u tube~ hehe


1. Bouncing Ball- motion tweening (TASK 1)


1. Draw Circle (A ball)
2. Then convert the symbol (circle) to graphic.
3. Insert Key Frame (eg. at keyframe no.25)
4. Right Click between the Key Frame and Create Motion Tween
5. Move the ball to the position we want for certain key frame.
6. We also can change brightness and the size of the ball..
7. Create Motion Tween
8. Test Movie
9. Save (Export Movie)

*You can create the environment on the other layer~ :)



2. FLASH word to Shape (star) - Shape Tweening TASK 2

1. Create Text (change font,size, style)
2. Remove Outline
3. Break Apart (Repeat Again)
4. Insert Key Frame (eg. at keyframe no.25)
5. Delete Text
6. Draw Shape
7. Create Shape Tweening
8. Save (Export Movie)

:)


3. Ants- Motion Guide TASK 3


1. Draw the ant.
2. Convert the ant to movie clip.
3. Choose a key frame (eg. keyframe no.50)
4. Place the and at the new position at keyframe 50.
5. Right click between the keyframe and create motion tween.
6. Rename the layer as ant.
7. Create motion guide.
8. Use pencil to draw the guide
9. Select first key frame and click the ant at the cente and move it at the starting point of the guide.
10. For the last key frame, move it at the last point of the guide.
11. Use transform tool to adjust the position for certain keyframe,
12. Tick the orient to path at the first key frame.
13. Test movie.
14. Save (Export Movie)




4.  Bear- Frame by frame - TASK 4

 1. Design the cartoon (same cartoon) with different expression..
2. Save every image in the library by convert it to symbol.
3. Put the first image in keyframe 1..
4. For next keyframe which are keyframe 2 and so on, insert another image.
5. Test movie
6. Save (export movie)






Sunday, December 2, 2012

::WEEK 12:: Using Drawing Tablet

Salam and Hi~
Untuk week 12 ni seperti yang dijanjikan Dr. Zaida akan berikan sorang satu drawing tablet untuk memudahkan kami melukis dalam flash~ 
Tp, not as expected~ *susah jugak ye*
Biasala bile kite cube sesuatu yang baru, mesti susah kan~
Tapi once dah biase msti mudah je.. :)
macam mule2 kite gune mouse la kecik2 dulu la kan~
*THINK POSITIVE* yeah~

hehe~ Ini cubaan pertama~
*try tiru gambar untuk theme blog ni~ * haha






akan cube practis untuk hasil yang lebih baek~ caiyok3~ :D

::WEEK 11:: Onion Skin Tool

Salan and Hi again~
Selain dari asignment melukis gambar yang diberi menggunakan flash, kami juga diberi satu tugasan untuk explore penggunaan Onion skin tools..

Onion skills tools ini berguna untuk create new graphic dari graphic yang sedia ada.. selain itu juga onion skin tools ini membolehkan proses membuat animasi lebih mudah kerana pelukis animasi dapat melihat banyak frame dalam satu masa~

Steps~

1. Open New Flash File
2. Import picture yang nak di trace
3. Resize image gune free transform tool (optional)
4. Image yang dimiport sekarang berada di layer1, keyframe1.. Then, add another keyframe...
Sekarang timeline dah ada 2 keyframe..
5. Pergi ke 2,d keyframe and delete the image..Then click onion skin tools..
6. Trace gambar yang diimport yang dah transparent kesan menggunakan onion skin tools..
7. Bile dah selesai trace and colour, delete keyframe untuk gambar yang original..
8. Turn off onion skin tool..
9. convert graphic to symbol untuk membolehkan kite menggunakan gambar yang sama untuk banyak kali lepas ni~ kerana grphic yang telah di convert ke symbol akan disimpan di dlm library~ :)


TADAA~ 
Original


After tracing using onion skin tools~ :D


::WEEK 11:: Basic Flash

Salam and Hi everyone~ :) 
Minggu ni adalah minggu pertama menggunakan Flash.. Before start kelas, Dr bagi ipad untuk kitorang blaja Flash menggunakan Apps yang telah disediakan dalam tu~ :)
Thanks Dr. Zaida~ :)
Disamping itu, kami diberi satu test untuk uji pengetahuan sedia ada tentang Flash ni~
Menggelabah jugak jawab.. selama ni x igt name tool.. igt gambar je~ haha :D

Apps 1 yang perlu kami guna kan ialah Apps Knowing Flash yang  menerangkan dan memperkenalkan tentang fungsi flash ni serta tools2 yang terdapat dalamnya..

Apps 1 Interface

Atas ni adalah interface untuk Apps 1 di mana terdapat 4 menu tentang Flash ni... Iaitu Flash Interface, Application of Flash, Types of Interaction dan What do I need?

Flash Interface : 

Ini adalah interface untuk flash dimana terdapatnya, toolbar/tool panel untuk membolehkan kite lukis ape yang kite nak dalam stage. Selain itu terdapat juga properties panel iaitu panel dimana kita boleh pilih mengikut apa yang  kita nak bergantung pada tool yang kita gunakan.. Layer, Frame, Timeline serta library juga terdapat dalam Flash ini..

Untuk Tool Panel terdapat pelbgai tool yang disediakan iaitu:

 subselection tool- selecting,editing vector points pada object..cthnye nak curve kan straight point~
free transform tool- untuk select object on stage dan tukar size or anything freely..
lasso tool- untuk select shape yang sgt dekat dgn shape yang kite x nak select,
 selection tool- select part of object atau drag untuk create rectangle..
pen tool- ada provide banyak cara untuk lukis dan edit objek
 text tool- (static,dynamic dan input text) *terangkan nnti*
line tool- untuk draw straigt lines.
 shape tool-  untuk create shape rectangle,oval and etc.
pencil tool- fungsi macam real pencil
brush tool- draws brushlike stroke
ink bottle tool- change stroke colour,line,width,style of lines or shape outlines
paint bucket tool- untuk fill enclosed areas
eyedropper tool- untuk pick color dari scene supaya color yang sama dapat digunakan
eraser tool- pemadam
hand tool- untuk click and drag pada scene tanpa guna kan scrollbars.
zoom tool- zoom in and zoom out stage..
stroke color- tukar stroke color,style dan weight untuk object.
fill color- nak pilih untuk solid color fill
black n white- change stroke kaler pada black and white utk fill color
swap color- swap color pada stroke colour kepada fill color.. ataupun sebaliknya..
no color- tukar stroke color pada transparent

Antara application yang boleh dihasilkan menggunakan flash ialah web banner, animation, games dan courseware..penerangan tentang application ini ada dalam apps 1.. :)

Untuk menu yang ketiga iaitu types of interaction, ade 3 jenis yang diperkenalkan dalam apps ini iaitu button & hotspot, text dan drag and drop..

Button - button digunakan untuk timeline navigation..
Up - appearance of the button when pointer is not over it
Over-appearance of the button when pointer is over it
Down - appearance of the button when click on it
Hit- defines area respond to click of the mouse

Text - (static,dynamic dan input text)
static text - title and label

dynamic text- display text that changes dynamically at the run time 

input text- for user activity like getting username and password

Sebelum habis kelas kami diberi satu asignment untuk mempraktikkan pengetahuan kami dalam menggunakan tools di dalam flash ini~ 
Ini HASILNYA~ :D


Untuk hasil kan gambar dia atas.. Saya menggunakan line tool, oval primitive tool, subselection tool, free transform tool.. stroke color~
Untuk payung, kerusi, sampan dan brung saya menggunakan line tool..
kemudian saya gunakan subselection tool untuk buat curve..
Untuk pantai dan gunung saya gunakan oval primitive tool~ :)
Gunung saya guna kan stroke color gradient untuk bagi effect macam tu~ :D


untuk tugasan seterusnya~ jumpa di post yang lain~ hee

Powered by Blogger.