Project 2: Learning Courseware

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَن اارحِيم

Assalamualaikum w.b.t

Entry kali ini hendak sentuh sedikit mengenai Project 2 yang kami sudah siapkan.
Untuk projek ini, kumpulan saya (jannah, kak wan) telah sepakat untuk membina satu bahan pengajaran bagi subjek English atau lebih tepat English for preposition.
Untuk projek ini kami telah menggunakan semua sumber dan ilmu flash yang kami belajar dalam kelas untuk diaplikasi dalam menyediakan bahan ini.  Antaranya untuk membuat main menu, type in question, dan drag and drop funtion.

Untuk rajah atas ini, saya gunakan kaedah type in question.  User masukkan nama dan enter ke halaman seterusnya. 
Cara-cara nak buat type in question pula boleh rujuk DI SINI 

Halaman ini pula memerlukan saya menghasilkan beberapa button.  Untuk buat button boleh rujuk SINI 

Contoh lain: guna button juga.

Manakala cara-cara nak buat main menu boleh rujuk DI SINI 
Cara-cara nak buat drag and drop pula DI SINI
Keseluruhannya, latihan ini memerlukan kami menggunakan kesemua latihan yang kami pelajari dalam kelas.

Terima kasih kepada kak wan dan jannah dalam memberikan kerjasama yang tidak terhingga.  

Sekian, Wassalam.

Last Day Authoring Class

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَن اارحِيم

Assalamualaikum semua ^_^
Harapnya ceria-ceria selalu.

Minggu ini adalah minggu terakhir bagi kelas Authoring System.  Sebelum kelas berakhir, kami diberi tugasan untuk menyiapkan satu lagi aktiviti.  Aktiviti tersebut boleh rujuk sini. 

Saya ingin mengucapkan seinfiniti terima kasih kepada Dr Zaidatun, Kak Farhana, juga rakan-rakan sekelas yang banyak membantu sepanjang tempoh kelas ini.  Banyak pengalaman dan ilmu yang saya perolehi sepanjang belajar subjek ini.

Juga, terima kasih lagi sekali pada Dr, kerana menjamu kami dengan kuih-muih (jamuan ringkas).  Walaupun selepas itu kami perlu jawab test yang diberikan. huhu..

Apa pun, kelas ini memang best dan saya rasakan pembelajaran bagi kelas ini sangat menarik dengan pelbagai keperluan dan kemudahan yang disediakan.

Dengan itu, saya sudahi post saya dengan kalimah Alhamdulillah dan ucapan terima kasih lagi sekali.

Kepada rakan-rakan semua, Semoga berjaya dalam Peperiksaan yang bakal menjelang.

Maafkan saya jikalau ada salah dan silap. Sesungguhnya yang baik itu datangnya dari Allah, dan yang kurang elok itu datangnya dari diri saya sendiri. 

Sekian, Wassalam. 

MASARRAH

Drag and Drop Activity

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَن اارحِيم

Assalamualaikum semua ^_^

Minggu terakhir ini, kami diberi lagi satu aktiviti iaitu "drag and drop activity".  Aktiviti ini adalah lanjutan dari aktiviti minggu lepas, bezanya, kali ini kami belajar extra untuk action script.

So, rakan-rakan boleh melawat sites saya ini untuk cuba aktiviti drag and drop ini.

https://sites.google.com/site/masarrah275/drag-and-drop

Di bawah ini adalah contoh page drag and drop saya.

Contoh action script yang digunakan adalah:

1. Bagi action script behind the Circle:

on(press){
startDrag(this);
}
on(release){
stopDrag();
if((this._x>=293)&(this._x<=437)&(this._y>=74)&(this._y<=114))
{
_root.box1.gotoAndStop (2);
}else{
_root.box1.gotoAndStop (1);
this._x=93;
this._y=82;
}
}

2. Bagi action script behind the Rectangle:


on(press){
startDrag(this);
}
on(release){
stopDrag();
if((this._x>=298)&(this._x<=421)&(this._y>=234)&(this._y<=278))
{
_root.box2.gotoAndStop (2);
}else{
_root.box2.gotoAndStop (1);
this._x=77;
this._y=246;
}
}

3. Untuk NEXT button:


on (release) {loadMovieNum ("dragndrop.swf", 0);
}

Setiap langkah untuk menghasilkannya, boleh rujuk dalam notes yang diberikan oleh Dr.

Untuk itu, sekian sahaja reflection minggu ini.


Sekian, Wassalam ^_^

Apps 4: Activity on Types of Interaction

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَن اارحِيم

Assalamualaikum w.b.t semua ^_^

Baiklah seperti yang ditulis pada entry lepas, kali ini saya ini menjelaskan proses/steps untuk menghasilkan dan menyiapkan keempat-empat task yang diberikan.

Untuk itu, di sini saya beri link google sites yang menunjukkan aktiviti-aktiviti yang dihasilkan. 

Langkah-langkahnya:

Task 1: Create a multiple choices questions that will provide a correct or incorrect response upon your answer.

Steps:

1. Name layer as Question.
2. Choose text tool -->choose static text -->start typing the question
3. Insert new layer --> name layer as buttons
4. Create button using oval tool --> drag it on stage --> choose appropriate color--> resize the button
5. Choose text tool --> Put 'A' on top of the button
6. Select whole button --> click modify --> convert it to symbol --> name the button as buttonA --> choose button type --> OK 
7. Same goes to others 3 button (buttonB, buttonC, buttonD) --> choose appropriate color and resize each button (same size as buttonA) -->Convert all the buttons to symbol and choose button type.
8. Insert new layer --> name as response
9. Choose text tool -->choose dynamic text --> put response as it variable
10. Insert another layer --> name it as action --> put action script by right click and choose Actions.

The action script:

stop();

var respon;

respon = " "

   11.  Since the answer is A --> right click -->choose actions --> type in the action script below:

The action script: 

on (release) {

respon = "Congrates, Your answer is correct!";

}

     12. Do the same step for button B, C, and D (repeat right click -->choose actions --> type in the action script) --> just edit the respon according what you want it to be.

     13.  Control --> Test movie --> Done

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

Steps:

1. Prepare your background
2. Choose rectangle tool --> fill it with color --> drag on to the stage
3. Choose text tool to type in topic Question by make sure it is STATIC TYPE --> name layer as background
4. Insert new layer --> name as question
5. Choose text tool --> choose STATIC TYPE --> type in the questions.
6. Then, select rectangle tool and create box on stage
7. Select text tool --> preposition it and make sure selecting INPUT TEXT in the properties
8. Select text tool again --> but now choose DYNAMIC TEXT.
9. Insert new layer --> name as buttons
10. From library panel -->choose play button --> drag to stage --> resize the button
11. Insert new layer and name it as stop
12. Right click on first keyframe and choose actions.  Type in the action script below.

The action script:

stop();

var answer;

var respon; 

answer = " "

respon = " "

(We need to call all of this function so that when user insert an answer, the answer will appear, and when user click enter, var response function will be working and response whether the answer correct or not.) 

      13.  Select button --> right click --> choose actions.  Type in the action script below.

The action script:

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";

}

}

    14.  In the INPUT text field --> type in 'answer' for it variable

    15.  In the DYNAMIC text field --> type in 'respon' for it variable

    16.  Control --> test movie --> Done

Task 3: Create Main Menu that contain following actions:

•   A button that navigate from 1 page to another.
•   A button that navigate from 1 scene to particular frame of different scene.
•   A button that navigate users to other webpage.

Steps:

1. Firstly, design the background 
2. Next, click on the 'Home' button --> go properties --> Type in 'home' in the Instance name field
3. Repeat step 2 for the other two button, but do change the instance name according to the button name.
4. Duplicate scene.  To do this, go to window --> Other panels --> Scene -->Rename it from Scene 1 to Scene 2
5. Now we have 2 Scene.
6. Select Scene 2 -->Choose text tool --> Type in the description
7. Do the same as step 6 for Scene 1.
8. Test the movie.  Here we can see that the description that we create are keep repeating non-stop.  Hence, we insert action script at the button frame. Action script : stop ();
9. Testing again.  
10. Before we do that, we insert frame for all the layer (until frame no 15) in Scene 1.  Same goes to Scene 2.
11. In Scene 2, insert new layer --> name as about --> go to properties --> in the frame field, type 'about'. On the about layer, it shows the name of frame that we type in.
12. Still in the Scene 2, insert new layer -->name as stop --> right click on the first frame -->choose actions --> Type action script 'stop ();'.
13. Now, change to Scene 1, right click on the 'About' button -->choose actions. Type in the action script.

The action script:

on (release) {

gotoAndPlay("Scene 2", 1);

}

    14.  Test the movie --> click on the 'about' button, it will show about page.  But when click on the Home button, nothing happen.  It is because we not insert the action script yet.

     15.  To do this, we change from Scene 1 to Scene 2, then we right click the 'Home' button -->choose actions.  Type in the action script.

The action script:

on (release) {

gotoAndStop("Scene 1", 1);

}

    16.  Testing the movies again.  Now try click on the home button and about button.  It will show the pages.

    17.  To activate button 'Contact', in Scene 1 --> right click the contact button -->choose action. Type in the action script.

The action script:

on (release) {

getURL("http://www.pintarbistari.edu.my");

}

    18.  Same goes in Scene 2 --> right click the contact button -->choose action. Type in

             the action script as above.

    19.  Control --> test movie --> Click on the menu button ans see what happen. ^_^  

            Done

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

Steps:

1. Draw  tree image
2. Select tree image --> click modify --> convert it to symbol --> name as tree --> choose MOVIE CLIP type --> OK
3. Insert new layer --> name as apples
4. Draw an apple image --> select the image --> convert it to symbol --> name as apple1 (apple2, apple3) --> choose MOVIE CLIP -->OK
5. Since we want to drag the apples on to the tree, then, right click on the apple image --> choose actions. Type in the action script below.

The action script:

on (press) {

startDrag(this, true);

}

on (release) {

stopDrag();

}

    6.  Repeat step 5 and apply to apple2 and apple3.

    7.  Control --> test movie --> Done

Latihan sebegini memberi peluang kepada saya untuk mempelajari pelbagai ilmu baru.  Saya tahu dan faham bagaimana untuk menggunakan action script yang diberikan.

Saya dapati latihan ini sungguh menarik dan tidak membosankan.  Ia membantu dalam memberi lebih kefahaman berbanding dengan hanya teori sahaja.

Flash is INTERESTING!!

Sekian sahaja.

Wassalam ^_^

Apps 4: Types of Interaction

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَن اارحِيم

Assalamualaikum w.b.t semua ^_^
Minggu ini adalah minggu ke-2 terakhir sebelum study week. (uhhh FINAL da dekat dah!!)

Untuk itu, tanpa melengahkan masa yang ada, Dr memulakan kelas dengan meminta kami menyerahkan ipad bagi tujuan peng'installation' Apps 4 iaitu Type of Interaction.

Flash membolehkan pengguna untuk menghasilkan beberapa aplikasi yang menarik samada untuk komputer mahupun website.  Di dalam Apps 4 ini turut dikongsikan beberapa tutorial yang sangat membina dan membantu untuk:

1. Create main menu

• Salah satu cara yang disediakan oleh flash untuk menghasilkan main menu button untuk websites.

    2.  Create multiple choice Questions

• This type of applications allow students to get interactive feedbacks from the content.

    3.  Create text entry questions

• Sesuai untuk tujuan pembelajaran, di mana, guru menyediakan kuiz dan latihan dalam bentuk yang menarik dan membina.

    4.  Create drag and drop application

• Function drag dan drop ini menjadikan sesuatu aktiviti itu menarik dan enjoy

Oleh yang demikian, sebelum kelas berakhir, kami diberi tugasan latihan bagi Apps 4 ini.  4 task keseluruhannya yang memerlukan kami create multiple choice, text entry question, create main menu dan create drag and drop function.

Untuk itu, entry seterusnya akan menjelaskan proses bagaimana setiap task ini disiapkan.

Sekian sahaja.

Wassalam ^_^.

Assignment 1: Web

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَن اارحِيم

Assalamualaikum w.b.t

Entry kali ini hendak sentuh sedikit mengenai Assignment 1 yang kami perlu siapkan. 

Assignment 1: Referring to development of a dynamic page using Dreamweaver.  The web page that will be developed should have following aspects:

1. Several links
2. Use frames
3. Integrate multimedia elements
4. Guest book
5. Online discussion/survey and others.

Maka group kami bercadang untuk membuat website tadika.  Website ini membolehkan ibu bapa membuat pendaftaran secara online bagi pihak anak mereka.

Seperti web-web lain, web ini juga terdapat function button, login, logout.

Dalam home page ini, terdapat beberapa frames yang digunakan.  Terdapat frame untuk header, main content, side bar, menu bar dan juga footer.
Terdapat beberapa link antaranya, Home, About, Registration dan juga servey.  Kami juga meletakkan sedikit elemen multimedia dalam web page ini.

Registration page

Di sini ibu bapa perlu melengkapkan borang permohonan dan submit supaya kami boleh memprosesnya. Di sinilah function insert record diaplikasikan dan masuk ke dalam database.

Survey Page

Survey ini bertujuan untuk penambah baikan hasil dari pandangan/feedback daripada ibu bapa.  Jika di lihat di sini, terdapat beberapa radio button digunakan untuk membuat soalan survey ini.

View Maklumat Pelajar

Page ini hanya boleh di akses oleh admin sahaja. Di mana admin boleh view senarai pelajar yang berdaftar.  Di sini recordset perlu, kerana ia akan baca data daripada database.

Update/ Delete data

Page ini juga hanya untuk admin sahaja.  Di mana admin boleh edit dan juga delete maklumat pelajar.

Kekangan semasa menyiapkan projek ini adalah Kami menghadapi masalah untuk update data dan juga delete data.  Namun hasil dari kami berbincang dan juga bertanya rakan-rakan yang lain, masalah tersebut dapat di selesaikan.

Ini sahaja sedikit sebanyak yang dapat saya kongsikan untuk Assignment 1 kami.
Group: Kak Wani dan Jannah. ^_^


Sekian sahaja.
Wassalam.

Apps 3: Creating Animation

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَن اارحِيم

Assalamualaikum semua ^_^

Minggu ini adalah minggu ke-13 untuk kelas Authoring ini.  Cepat sungguh masa berlalu.  Ya, benar, masa tidak menunggu kita bahkan kita yang perlu mengejar masa.

Maka, tanpa melengahkan masa lagi, rumusan untuk pembelajaran kali ini adalah:

Terdapat 3 jenis simbol dalam menghasilkan animasi antaranya adalah movie clip, button dan juga graphic.

1. Movie clip are reusable pieces of animation.  It consist of one or more graphic/button symbols, they are flash movie inside our flash project.

Langkah-langkah:

1. Insert new symbol - name as butterfly - choose movie clip type - OK.

2. Name first layer as body

3. Choose oval type -  draw body of the butterfly and fill with color

4. Insert new layer name as left wing.

5. Choose rectangle shape and oval shape to draw a left wing - fill with color

6. Select the left wing and convert it to symbol - name as left wing - choose graphis symbol type.

7. Transform the image - drag the center point of left wing to the butterfly body

8. In body layer, Insert frame at frame no 60.

9. Do same for the left wing layer.

10. In the layer left wing, copy first frame and paste it to frame no 10, 20, 40 and 60

11. Next, in frame no 10, we transform the wing, make it small compared with the original

12. Create motion tween between frame no 1-10.

13. Copy frame no 10 and paste it to frame no 30 and 50 - create motion tween between it.

14. Insert new layer name as right wing

15. Drag from the library the left wing image and transform to look like right wing

16. Attach the wing to the body and drag the center point of the wing to the body.

17. Do repeat the step like no 10-13 for the right wing

18. Click scene 1 and drag the butterfly movie to stage.

19. Control - test movie.

20. Save it.

   2.  Button is the only interactive symbol that can detect mouse events in flash.  Button symbol are used for timeline navigation.

Langkah-langkah: 

1. Insert new symbol - name as button - click button type - OK.

2. There will appear 4 type of button, (up, over, down and hit)

3. On Up keyframe, Choose rectangle shape tool - drag on stage

4. Choose text tool and put on top of the rectangle - type in 'HOME'

5. Copy frame 'up' and paste it to other 3 (over, down, hit)

6. Test movie

*You can color rectangle and text with color you want.

  3. While, graphic symbols are reusable static images that are used mainly to create animations.  They have only one frame in their timeline.

Convert object to graphic symbol:

Langkah-langkah:

1. Import image to stage.

2. Modify - covert to symbol - name as graphic - click graphic type and OK

Terdapat 4 jenis animasi antaranya, motion tweening, shape tweening, motion guide dan juga frame by frame.

1. Motion tweening -  Object motion position, method in motion tweening that allows objects to be change to different position also can change the brightness and color of tweened objects, and manipulate size of the tweened objects.
2. Shape tweening -  Can change objects from its original shape to a new shape, also allow text to be transform to an object and also apply in transforming 1 image to another image.
3. Motion guide - Allow user to move an objects on predefined path, such as circles or curves.
4. Frame by frame -  Animate a cartoon by drawing different movements in each frame.

What we call it as tweening?

Tweening is refer to animating a sliding movements of object in flash,  It call tweening because in between 2 frames, we can create a motion.

Di bawah ini saya sertakan sekali hasil aktivti menggunakan keempat-empat jenis animasi ini.

Task 1: Motion tweening

1. First layer, draw a wall.

2. Second layer, draw a Circle (ball)

3. Then convert the symbol (circle) to graphic.

4. Insert Key Frame (Example at key frame no. 10)

5. Right Click between the Key Frame and create Motion Tween 

6. Then, move the ball to the position that we want for certain key frame.

7. Besides that, we also can change brightness and the size of the ball..

8. Control-Test Movie

9. Save (Export Movie save to .avi)

Task 2: Shape tweening

1. First, create Text (change font,size, color, style)

3. Next, modify to Break Apart (repeat again)

4. Insert Key Frame (Example at key frame no.30)

5. Delete the Text

6. Draw Shape- star shape

7. In properties below, choose tween: Shape

8. Save (Export Movie and save to .avi)

Task 3: Motion Guide

1. First layer, draw the way for ant

2. Then, second layer,draw the ant.

3. Convert to symbol (ant) to movie clip.

4. Choose a key frame (Example key frame no.30)

5. Place the ant at the new position at key frame 30.

6. Right click between the key frame and create motion tween.

7. Next, create motion guide.

8. Use pencil to draw the guide

9. Select first key frame and click the ant 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 of ant for certain key frame,

12. Tick the orient to path at the first key frame.

13. Control-Test movie.

14. Save (Export movie and save to .avi )

Task 4: Frame by frame

1. First, create a cartoon design with different expression..

2. Then, convert every image to symbol (graphic) and save the image in the library.

3. After that, put the first cartoon image in key frame no. 1.

4. For next key frame which are key frame 2 and so on, insert another image.

5. Control - Test movie

6. Save (Export movie and save to .avi).

InsyaAllah akan saya perbaiki lagi skill flash ini.

Sekian sahaja celoteh minggu ini. (Mix language pulak..hehe..)

Wassalam..