Assignment 1 Flash

Hi,

Hari ini saya ingin share sesuatu yang saya dan Zahirin buat untuk asignment 1 flash. Tugasan ini diberikan oleh Dr Zaidatun sebagai kelas penggubahan ( Authoring System). Sebenarnya agak kompleks tugasan ini jika dibuat seorang, Alhamdulillah kumpulan kami berjaya juga menghasilkan flash untuk subjek sains sekolah rendah. Sebenarnya murid sekolah rendah tidak berminat untuk pelajari sains disebabkan kena menghafal istilah dalam bahasa English. Jadi kami jadikan Flash ini dalam bahasa English dan menggabungkan sedikit unsur-unsur muzik dan tutorial supaya murid-murid lebih berminat untuk belajar.

Hasil Akhir

Muka Depan Project

This is our flash assignment that has been done by us: Asrul & Zahirin

In this project, we have combined multiple techniques that we had learnt during classes.
For instance:

• Text entry
• Drag & Drop
• Import Sound
• Multiple Choice Question
• Main menu

We have learned a lot of things when we are doing this assignment.

Try this at home...

ASP vs PHP

What is ASP and PHP?

ASP is stand for Active Sever Pages while PHP is Hypertext Preprocessor

There are a lot of differences between ASP and PHP.

Cost

To run ASP programs one needs IIS installed on a Windows platform server, which is not free. PHP programs run on Linux, which is free. Even the connectivity of the database is expensive in the case of ASP as MS-SQL is a product of Microsoft that needs to be purchased. PHP generally uses MySQL, which is freely available.

Speed

If we compare the speed of ASP and PHP then PHP has an upper hand. PHP code runs faster than ASP. ASP is built on COM based architecture, which is an overhead for the server whereas PHP code runs in its own memory space.

Platform Compatibility

PHP programs can run on various platforms like Linux, Unix, Windows and Solaris whereas ASP is mainly associated with Windows platforms. However, ASP can run on a Linux platform with ASP-Apache installed on the server.

Additional Costs

Many of the tools used in PHP are free of cost and since PHP is open source a lot of code can be found in open source forums. PHP has inbuilt features like ftp, email from a web page or even encryption mechanisms but in ASP such features are not built in and some additional components are required. Therefore an additional cost is incurred for such components.

Base Language

PHP is based on C++ language and the syntax used in PHP is quite similar to C/C++. C/C++ is still considered the best programming language by many programmers and people who love this language would surely feel more comfortable with the syntax of PHP. ASP on the other hand has a more Visual Basic kind of syntax that again is closely related to only Microsoft products. So, it depends on a person-to-person which language he or she is comfortable

Database Connectivity

PHP, being extremely flexible, can connect to various databases, the most popular being MySQL. ASP mainly uses MS-SQL.

Source: Here

Learning Activity 4

Learning Activity 4 : Types of Interaction

Apa itu types of interaction? Selalunya interaction ini kita guna untuk buat aktiviti seperti tutorial, latihan dan soalan2 yang memerlukan user untuk menjawab. Sebenarnya aktiviti ini merupakan cara yang paling sesuai untuk mendapat feedback atau maklum balas terhadap kefahaman atau respon kepada ape yang kita paparkan. 

Untuk aktiviti kali ini saya akan buat aplikasi yang melibatkan user menjawab multiple choice question, input question, create interface menu dan Drag & Drop.

Question 1: Multiple Choice Question

Step for create MCQ:

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 button A > 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 respon.
9. Choose text tool > choose dynamic text > put respon as it variable
10. Insert another layer > name as action > put action script by right click and choose actions.The action script:

stop();

var respon;

respon = " "

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

The action  script:

on(release){

respon = "Congrats your answer is correct!";

}

    12. Do the same step for buttonA,B 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.

Question 2: Input Question

Steps to create input text question:

1. Create layer as Background and design your background by follow your desire.
2. Create another layer as Question and type your question here.
3. In this layer, draw a rectangle and name as input text (this is where you type the answer), there are properties you must set, at variable box, please name it as 'Answer'.
4. Create dynamic text below the input text, here is to put the result after your type the answer. Variable must be name as 'respon'
5. Create your play button and put below action script;

on(release) { if (answer == "usb port") {respon = "Correct!";
}

 else

 {
respon = "Incorrect!. Your answer "+answer+" is incorrect." ;
}
}
on(release, keyPress "") { if(answer == "usb port"){respon = "Correct!";
} else {
respon = "Incorrect!. Your answer "+answer+" is incorrect." ;
}
}

Now play your movie (Control>Test Movie)

Question 3: Menu

Steps to create menu:

What we want to create.

• 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.

Scene 1

1. Create the background layer and design the background.
2. Create layer stop and write below action script;

stop();

   3. Create new layer and name it as button layer. Here you need to create 3 different buttons that are have different functions.

• Home - Is the home button after we jump to another scene.
• Setting - this button will jump to another scene.

Setting - Action script:

on(release){
gotoAndPlay ("Scene 2",1);
}

• Play Games - this button will jump to the website.

Play Games - Action Script:

on(release){
getURL ("http://marvelkids.marvel.com/games/play/78/ultimate_spider-man_iron_spider");
}

Scene 2

1. Duplicate Scene 1 to Scene 2 (Windows > Other Panel > Scene)
2. 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 ();

3. Remove other button from Scene 1 and left 2 buttons (Setting Button and Home Button) to navigate to Scene 1.

• Home Button - action script

on (release){
gotoAndStop ("Scene 1",1);
}

4. Create another layer and name it as button layer and create/name it as Choose Player button. Type below action script:

on (release){
gotoAndStop ("Scene 2", "choosePlayer");
}

Scene 2 is scene and choose player is frame number/name

5. At layer setting, insert a keyframe at frame no 7. Label the first frame with settingPage while the second frame name it as choosePlayer

Now play your movie (Control>Test Movie)

Question 4: Drag & Drop

1. It is simple application.
2. You need to create tree in tree layer, apple fruit is place on apple layer, and type the instruction by using static text on background layer. 
3. That's three pieces of apple is a symbol in the form of movie clip.
4.  Just click on the apple tu, enter this script action to all apple,

on(press) {
startDrag(this,true);
}
on(release){
stopDrag ();
}

Learning Activity 3

Learning Activity 3 : Animation

Kelas minggu ini, kami diajar untuk menggunakan Apps 3 : Creating Animation. 

Sebelum ke applikasi, kita mesti memahami ape itu symbol di dalam FLASH. Terdapat 3 jenis symbol didalam FLASH:

a) Graphic - imej statik yang dicipta/direka untuk diguna berulang kali 

b) Movie Clip - digunakan untuk mencipta animasi flash

c) Button - digunakan sebagai navigasi untuk timeline

Terdapat juga library didalam flash. Ape itu library? (windows>library)

"Library is use to store media that you want to use again in Flash. The object that we dragged to stage from the library is not the original, it is a copy called an instance. if we drag second copy of a graphic from the library, we add a second instance in stage. we can drag a many as we like onto the stage. As we do this, we DO NOT increase the overall file size of the movie".

Ok. Setakat ini ape yang anda paham? Senang je Flash ini jika dibuat berulang kali mesti boleh ingat konsepnya. Sekarang kita fahamkan jenis2 animasi didalam Flash.

Terdapat 4 animasi di dalam Flash:

a) Frame-by-frame animation - ini kaedah lama dalam pembuatan animasi dimana setiap scene untuk setiap saat. Apabila disusun untuk satu turutan maka kita akan saksikan pergerakan objek yang seakan-akan hidup. Di dalam pembuatan animasi, pereka akan menggunakan objek yang sama berulang kali dengan untuk menjimatkan masa dan hanya membetulkan beberapa scen untuk kelihatan hidup.

b) motion tweening - untuk animasi jenis ini, terdapat pergerakan objek static dengan jarak didalam scene. untuk mengguna kaedah ini, pereka mesti meletakkan objek pada kedudukan mula dan kedudukan akhir. untuk menjadikan pergerakan lebih lancar, objek akan di ubah bentuk mengikut scene yang tertentu.

c) Shape tween -  animasi ini dilakukan dengan mengubah bentuk objek mengikut siri frames yang ditetapkan.

d) Guide Motion -  animasi ini lebih mudah dimana laluan objek ditetapkan. 

Contoh-contoh hasil kerja seni yg xberapa nak seni

Bouncing Ball

Steps to create:

1. Create a layer, draw a Circle (a ball)
2. Then convert the symbol (a ball) to graphic. Modify > Convert to Symbol > Graphic
3. Insert Key Frame (Example at key frame no. 10)
4. Right Click between the Key Frame and create Motion Tween 
5. Then, move the ball to the position that we want for certain key frame.
6. Besides that, we also can change brightness and the size of the ball.
7. Control > Test Movie

Star Shape 

Steps to create:

1. First, create Text (change font,size, color, style)
2. Next, modify to Break Apart (repeat again)
3. Insert Key Frame (Example at key frame no.30)
4. Delete the Text
5. Draw Shape- star shape
6. In properties below, choose tween: Shape
7. Control > Test Movie

Motion guide exercise The ant nest 
>

Steps to create:

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

Frame by frame technique - Cat Expression 
>

Steps to create:

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

Learning Activity 2

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

Explain the tools that you are using during this activity.

I use pencil tool to draw above picture. to make a curve line, i've clicked on the subselection tool and drag the cursor to middle of the line until the icon curve appears, that means the line ready to drag to make curve.

2. Once you are done, color your drawn image with an appropriate tool in Flash. Describe the tools that you are using.
i was used paint bucket tool to color the closed loop area. i used ink bottle tool to color the outlines. for your information, the flash also got gradient color which consist the 2 types of gradient, gradial color and linear color.

Create a new flash file and draw the cartoon image by using Onion Skin tool and convert it into graphic symbol.

Original Photo

The result after using Onion skin Tool

Another tracing picture by using Union Skin Tool

What i've learn from this activity?

Wacom Tablet

1. We've provided by Prof Zaidatun with Wacom Tablet for drawing purposes. This tablet function as a tool to make the drawing easier and faster. This table is useful for the beginner/amateur developer who a trying to make the flash image attractive as much as possible. 
2. I've learn how to draw with flash by using pencil tool and how the subselection tool can help to create the shape from the single line.
3. I was learned the function of paint bucket tool  to paint the closed loop area and use of ink bottle tool to color the outline.

Tutorial: Upload .swf file in your blog

1) Go to webpage: SwfCabin to upload your flash file.

2) Write up your Flash title, choose and upload your selected flash file. After that, click Publish Swf.

 3) Your flash has been published and you will get it's respective URL.

4) On that URL, change word 'open' to 'swf-files' and add '.swf ' after the number.

eg: 
Before change: http://www.swfcabin.com/open/1364709846

After change:   http://www.swfcabin.com/swf-files/1364709846.swf < ---- This is your new URL

5) Lastly, copy this embedded code to your blog.

6) Replace the red words with your NEW URL.

This is what you will get...Happy trying!~

Flash introduction

What I understand on our 1st class of Authoring System  were;

1. What is authoring system?

• flash is not a heavy application, where non programmer can easily develop the multimedia -oriented application such as animation, games and video.
• the flash interface is what you see, is what you get. you only able to click on the appearance button

    2. Multimedia courseware vs Web page development? 

• multimedia - stand alone application (offline), can load heavy video/animation/ high bandwidth streaming
• web page - need to connect to internet, consist of information/ small video.
  
  
  
  

Introducing me :)

Nama diberi Mohd Asrul Azri. Berumur 25 tahun.Asal dari Taiping,Perak.Sudah berumahtangga..orang rumah sedang buat phD di FKE,UTM...

Master degree kali ini sy menyimpang jauh dari bidang asal...Bachelor saya adalah dalam bidang Mikroelektronik di Fakulti Kejuruteraan Elektrik,UTM... I love designing and animation..I love something moving...not static...

Saya mempunyai pengalaman sebagai Test Engineer selama 2 tahun di dua electronic industries...This 2 years experience built up my confidence level,teamworking skill and communication skill...

I am really hope that I can get some fruitful knowledge from the lecturer,trainers and fellow friends :)