Skills Learned in Flash

Well everyone.. these are what I've learned so far in Flash during the past weeks...of course using Flash CS3 and also Flash CS5

1) Drawing and coloring objects using pencil tool, line tool, rectangle tool and so on

2) Create the various forms of text: static, dynamic and input

3) Work with the 3 kinds of symbol : button, graphic and movie clips

4) Work with different layers and different frames

5) Create auto animation by jumping frame to frame or frame to a frame in another layer, scene to scene..

6) Create animation based on user response

7) Run simple action scripts to control how our animation behave: GoToandStop, GotoandPlay, StartDrag, etc...

8)Animation: Frame by Frame, Motion Tween, Shape Tween, Motion Guides, etc,...

9) Various type of interactivity: based on button click, <Enter>, text entry , drag and drop, etc....

Maybe the only part we haven't covered is the Behavior and Component..

(According to the book Haslinda and I borrowed from the library, these are all the basics that we need to learn in flash. The rest should be explored along the way..)

Dragging apple fruit to apple tree - Apps 4 (4)

Ha!  One of the easiest part of flash animation has just been completed... after copying the previous drag and drop exercise from the iPad..

(click on the image above to start the exercise)

Ok! Here we go! We will be working with 3 layers in this animation

Layer 1 - tree

Layer 2 - apples

Layer 3 - instruction

1) First, put a tree into the stage.. (Sorry doc, this part i just import from internet.. he he.).  Rename the layer as "tree"

2) Insert a new layer and rename it as "apple". 

3) Draw an apple using pencil tool and colour it. (actually I tried to import an apple from the internet but could not find a beautiful one... so I guess my drawing skills is needed here..)

4) Convert this apple to a movie object. After that, duplicate the apples

5) Put Action Script behind each apple..

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

on(release){
 stopDrag();
}

6) Insert another layer and rename it as "instruction".  Put the instruction on the scene.

There you go... Ctrl-Enter and ask your kid to follow the instruction :)

Check out the result here

Interactive Menu Buttons - Apps 4 (3)

Now, one of the most tedious part is creating the interactive menu buttons. Well, you would think that the menu page is one page only. Actual situation... it has to consist of several pages that the buttons in the menu point to.. that is if we have 5 buttons in the menu, we will have to create 5 similar page layout that will highlight the content of each of the button. There will be action script behind each button that will point to scene containing the page holding the information of the button.

You can test the application by clicking the image above

The pages in flash can be differentiated by scenes.  That is if we have 5 pages, then we will need to create 5 different scenes.

In this application, I created a 3 page application, yes, with 3 different scenes

1) home
2) pengenalan
3) rukun

1) Scene 1 - renamed as "home"

    This holds introduction to the application.  I created several layers here. From top to bottom
    a) stop
    b) buttons
    c) title
    d) background

   Firstly create the "background" layer. I import the Kaabah image to the library and then drag it onto the
   stage to become the background

  Secondly, I created the "title" layer and insert a static text that shows the title for the page

  Thirdly I created the "buttons" layer and insert the 3 menu buttons.  There will be an action script behind  
  the three buttons

 Behind button "Pengenalan"
  on (release) {
 gotoAndStop("pengenalan",1);
  }

 Behind button "Rukun"
  on (release) {
 gotoAndStop("rukun",1);
  }

 Behind button "Tabung Haji"
  on (release) {
 getURL(http://www.tabunghaji.gov.my/);
  }

Lastly, I don't want the scene to autonavigate to the next scene. Therefore I insert another layer and rename it as stop.  In this layer, in the first frame, create an action script that contains on the followin action:
        stop();


2) Duplicate "home" scene to "pengenalan" scene so that we can maintain the layout



    Firstly, remove the "background" layer so that we can put some readable notes on the stage

    Secondly, remove the stop layer because we are going to use "gotoAndStop"

  Thirdly, create another layer and rename it as "isi". In this layer, put in the static text as definition of
  rukun haji.

  Fourth, I want to insert the "dalil".  Therefore, I created another button called "dalil". Put this action script:
 

  on (release) {
  gotoAndStop("pengenalan", "dalil");
  }

  Fifth, I want to insert notes in one of the frame.  Therefore, first we create a keyframe, say, frame 30, for  
  all the layers.

 Sixth, in the "isi" layer, insert a keyframe in frame 15. Name this frame in the properties panel as "dalil" and 
 input the static text for dalil

Seventh, we want to be able to get back to "home" scene.  Therefore, I insert another button called "home" so that user will be able to go back to "home" page.  Behind the button is the action script:

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

3) Duplicate  "pengenalan" scene to "rukun" scene



First, put in the definition of rukun by inserting static text

Secondly, put in 6 different buttons to point to 6 different rukuns. Behind the buttons are the following action script:

on (release) {
 gotoAndStop("rukun","rukun1");
  }

for each of the button and so on until

on (release) {
 gotoAndStop("rukun","rukun6");
  }

Thirdly, to show the content of Rukun 1, I insert a keyframe in frame 3. Here, I input a static text for Rukun 1.



Fourthly, I insert another keyframe in frame 6 and input static text for Rukun 2.

The process is repeated until the last rukun.



I think the process is almost comprehensive enough..

 Time to test it here

Text Entry / Subjective Question - Apps 4 (2)

Apart from objective question as an evaluation method, we also have subjective question to evaluate students.  This subjective question is categorized as text enty question.  In this type of question, the student will type in what they think is the right answer, and the application will respond as to whether the answer is correct or not...

Test my application by clicking in the image

 In this application, I work with 6 layers.  Actually, the number of layers used are subjective.  I'll talk more about layers in the next post.

The layers, from top to bottom:

1) stop

2) response

3) button

4) answer

5) question

6) background

1) Create a layer and name it as "background".  Format the background colour or the background shapes of the application

2) Next, create the question layer.  In this layer, put in the questions that you want to test the student. Remember, these text questions are of static text type.

3) Third, create the answer layer.  In the answer layer, create the space for input text from the user. 

    Set the properties:

    - Embed -> all

    - Auto kern -> off (untick)

    - Options : Variable -> answer (this input text is defined as answer variable)

4) Fourth, create the button layer.  We can select the button from the various button in the library

    Go to Windows --> Common Libraries --> Buttons

    (Lots of buttons to select from)

    Drag the button on to the stage.

5) Behind the button, create the action script.  Take note that the correct answer for this question is "print client".  All other answers will be taken as incorrect answer.

    The response will come out whenever the user press on the button or <Enter> button.

   on (release) { if (answer == "print client") {response = "Congratulations! Your answer is correct!";
   } else {
   response = "Incorrect. Your answer "+ answer +" is incorrect. Please try again.";
  }
  }

  on (release, keyPress "<Enter>") {

  if (answer == "print client") {response = "Congratulations! Your answer is correct!";
  } else {
  response = "Incorrect. Your answer "+ answer +" is incorrect. Please try again.";
  }
  }

6) Create the response layer.  In this response layer, just create the dynamic text that will be labeled as response below the questions.

    Set the properties:

    - Embed -> all

    - Auto kern -> off (untick)

    - Options : Variable -> response (this dynamic text is defined as response variable)

7) Lastly create the stop layer.  Just a simple action script in the first frame of this layer, that is to stop the application, to define the answer and response variable, and to initialize the answer and response variable.

  stop();
  var answer;
  var response;
  answer =""
  response =""

Test my created question application here

Multiple Choice Question - Apps 4 (1)

If we build a learning courseware, of course we have to create an evaluation to test the students' understanding and knowledge. One of the method to evaluate the student is to create several multiple choice questions..

Test out this simple multiple choice questions that I created..

OK.  Here are the steps...

First of all, we will need 4 layers.  From top to bottom...
1) Actions (containing action script)
2) Response (containing feedback after user select the answer)
3) Buttons (Choice of answers)
4) Questions

Let's start

1) Create a layer and rename it as "Question".  In this layer Put in the question and the necessary background formatting

2) Create another layer, rename it as "buttons". Put in the 4 choice of answers.  There are 8 items involved here: 4 buttons, A, B, C, D and 4 different answer using static text

3) Behind the one correctly chosen button, put in the following action script:

on(release){
 response = "Congratulations, your answer is correct!";
}

Behind the three wrongly chosen buttons, put in the following action script:

on(release){
 response = "Your answer is incorrect.  Please try again!";
}

4) Create another layer and rename it as "response".  Create a dynamic text for the response under the choice of answer.  Create enough space for the response text area. 

Special properties for the dynamic text:
- Embed - Character Ranges - All (Important in CS5)
- Auto Kern - Off (untick)
- Options - Variable : "response"  (declare this dynamic text to be used in action script)

5) Now, create the last layer and rename it as action. The "action" layer usually contains script for the application. However, for this simple application, we're just going to put in some initialization.

6) In the first frame, right click and go to "Actions". Put in the following script:

stop();
var response;
response = ""

That's all folks.  Don't forget to save, test, export it to swf and upload to google site...

Check out the finished product here 

Frame by Frame - Apps 3 (4)

Animation of the cartoon's mouth using frame by frame technique...

Ok... it looks easy, sounds easy, but needs a lot of PATIENCE.. now we really do appreciate all those cartoonists, right!

1) Let's start by drawing this cartoon in frame 1

2) Now, copy the frame to frame 2, and open up the mouth by creating another line for the mouth

3) Copy frame 2 to frame 3. Adjust the lower line of the mouth using selection tool to open up the mouth wider.

4) Repeat the process

     Repeat until the mouth is opened to the widest opening..

5) The mouth is opened widest.  (Dah tak boleh lebar lagi.....)

6) Now, start to decrease the mouth in the next frames bit by bit...

7) Repeat the process.

 Finished... the result...

Moving Ant - Apps 3 (3)

Source : Adobe Flash Professional CS5

1) Create a background layer to show the soil and the pathway of the ant

2) Create another layer and rename it as the "ant" layer

3) In the "ant" layer, create an "ant" and convert it to a movie clip symbol.

4) Right Click on the "ant" layer and select "Add Classic Motion Guide". Another layer called "Guide: Ant" will be created

5) In the "Guide: Ant" layer, draw the pathway of the ant using pencil tool

6) Copy the first frames in all the 3 layers to the 50th frame

7) Click on the 50th frame in the "ant" layer, move the "ant" to the last position.

8) Rotate the "ant"'s position in the first and the last frame to show that it is facing the right direction while moving.

9) Make sure the "start" of path touches the centre of the "ant" in the first frame and the "end" of path touches the centre of the "ant" in the 50th frame.

10) Right click somewhere between the 1st and the 50th frame of the "ant" layer and select "Create Classic Tween"

11) Check the tween's properties. Make sure "Orient to Path" is selected

12) Adjust the frame rate at the bottom of the Timeline to "5" fps to show that the "ant" is moving in slow motion

Voila!  Ctrl-Enter and watch your moving ant

Tazkirah Dr

Hari ini aku nak cerita tentang tazkirah yang Dr. bagi..

Yala, dalam kesibukan mengharungi pekerjaan dan menyambung pelajaran secara part time disamping menguruskan keluarga memang memberi banyak cabaran, terutamanya dari segi masa..

Pesanan Dr. Zaida...

- Jaga solat
- Jangan lupa mengaji
- Amalkan berdoa untuk setiap keadaan
- Jangan abaikan tugasan memasak untuk keluarga
- make time for your FAMILY

Bila kita jaga 'masa', terutamanya yang berkaitan dengan ibadat.. insyaAllah, Allah akan jaga masa kita kerana Allah yang menguruskan masa kita, bukan kita..

Seseorang itu boleh bekerja 2 jam dengan komputernya untuk menyiapkan satu tajuk thesisnya

tetapi

seorang lagi hanya dapat mengadap komputernya selama 2 jam tanpa ada satu perkataan pun terhasil..

Adakah kerana dia tidak menghargai 'masa'nya..?

Fikir-fikirkan..

Payment Calculation Completed

Alhamdulillah... siap juga sql code utk payment calculation ni...

codes untuk calculate items tak susah...

yang susahnya, code untuk retrieve data from table and update data in table...

kalau direct retrieve and update, boleh guna the readymade Dreamweaver Recordset and Insert Record..

tapi bila dia berkait2 dengan data from different tables.. kenala modify the coding.

finally... the codes that cheers my day..

$_POST and $_GET

URL parameters in the Run-time Value column:

Server Model	Run-Time value expression for URL parameter
ASP	Request.QueryString(“formFieldName”)
PHP	$_GET['formFieldName']

Form parameters in the Run-time Value column:

Server Model	Run-Time value expression for form parameter
ASP	Request.Form(“formFieldName”)
PHP	$_POST['formFieldName']

Example of calculatoin codes

****************************

if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "form1")) {

$pibg = $_POST['pibg'];
$selenggara = $_POST['selenggara'];
$lkerja = $_POST['lkerja'];
$majalah = $_POST['majalah'];
$diari = $_POST['diari'];
$progismor = $_POST['progismor'];
$yurankelas = $_POST['yurankelas'];
$progakadmk = $_POST['progakadmk'];

$total=134;
$totalpaid = $pibg+$selenggara+$lkerja+$majalah+$diari+$progismor+$yurankelas+$progakadmk;
$totalunpaid=$total-$totalpaid;

$updateSQL = sprintf("UPDATE student SET name=%s, `class`=%s, dadic=%s, dadname=%s, momic=%s, momname=%s, guidic=%s, guidname=%s, tel=%s, adress=%s, pibg=%s, selenggara=%s, lkerja=%s, majalah=%s, diari=%s, progismor=%s, yurankelas=%s, progakadmk=%s, totalpaid=%s, totalunpaid=%s WHERE ic=%s",
                       GetSQLValueString($_POST['name'], "text"),
                       GetSQLValueString($_POST['class'], "text"),
                       GetSQLValueString($_POST['dadic'], "int"),
                       GetSQLValueString($_POST['dadname'], "text"),
                       GetSQLValueString($_POST['momic'], "int"),
                       GetSQLValueString($_POST['momname'], "text"),
                       GetSQLValueString($_POST['guidic'], "int"),
                       GetSQLValueString($_POST['guidname'], "text"),
                       GetSQLValueString($_POST['tel'], "int"),
                       GetSQLValueString($_POST['adress'], "text"),
                       GetSQLValueString($_POST['pibg'], "double"),
                       GetSQLValueString($_POST['selenggara'], "double"),
                       GetSQLValueString($_POST['lkerja'], "double"),
                       GetSQLValueString($_POST['majalah'], "double"),
                       GetSQLValueString($_POST['diari'], "double"),
                       GetSQLValueString($_POST['progismor'], "double"),
                       GetSQLValueString($_POST['yurankelas'], "double"),
                       GetSQLValueString($_POST['progakadmk'], "double"),
                       $totalpaid,
        $totalunpaid, 
                       GetSQLValueString($_POST['ic'], "text"));

Example of finding a particular list of data

********************************************

// find the ic of the teacher
$colname_Recordset0 = "-1";
if (isset($_SESSION['username'])) {
  $colname_Recordset0 = $_SESSION['username'];
}
mysql_select_db($database_feesconn, $feesconn);
$query_Recordset0 = sprintf("SELECT * FROM `user` WHERE username = %s", GetSQLValueString($colname_Recordset0, "text"));
$Recordset0 = mysql_query($query_Recordset0, $feesconn) or die(mysql_error());
$row_Recordset0 = mysql_fetch_assoc($Recordset0);
$totalRows_Recordset0 = mysql_num_rows($Recordset0);

// assign a session variable

$_SESSION['ic'] = $row_Recordset0['ic'];

// find the class of the teacher
$colname_Recordset2 = "-1";
if (isset($_SESSION['ic'])) {
  $colname_Recordset2 = $_SESSION['ic'];
}
mysql_select_db($database_feesconn, $feesconn);
$query_Recordset2 = sprintf("SELECT * FROM teacher WHERE ic = %s", GetSQLValueString($colname_Recordset2, "text"));
$Recordset2 = mysql_query($query_Recordset2, $feesconn) or die(mysql_error());
$row_Recordset2 = mysql_fetch_assoc($Recordset2);
$totalRows_Recordset2 = mysql_num_rows($Recordset2);
$_SESSION['class']=$row_Recordset2['class'];


// start finding students in class
$colname_Recordset1 = "-1";
if (isset($_SESSION['class'])) {
  $colname_Recordset1 = $_SESSION['class'];
}
mysql_select_db($database_feesconn, $feesconn);
$query_Recordset1 = sprintf("SELECT * FROM student WHERE `class` = %s ORDER BY name ASC", GetSQLValueString($colname_Recordset1, "text"));
$Recordset1 = mysql_query($query_Recordset1, $feesconn) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1); 

Shape Tweening - Apps 3 (2)

Now we are going to do a shape tweening

1) Type the word "FLASH" in frame 1

2) Right click on the word "FLASH" and choose Break Apart

3) Right Click Again on the letters and choose Break Apart one more time

4) In Frame 30, create a star by choosing the PolyStar Tool

5) In the Properties Panel -> Tool Settings

 

     Style:  Star

     Number of Sides :  5

6) Right click between frame 1 and frame 30, choose Create Shape Tween

Watch your FLASH changing into star shape!

Bouncing Ball - Apps 3 (1)

Source:  Adobe Professional Flash CS5

Effect:

A bouncing ball that changes its colour and shape while bouncing..

1) Change Background Colour

    Right Click on stage -> Document  Properties -> Change the Background Colour

2) Create a round ball using the Oval tool and position the ball on the top left of your stage.  Choose a red colour for the ball

4) Copy frame 1 to frame 10

5) Adjust the position of the ball to the bottom of stage.

6) Choose the 'Free Transform' icon to enlarge the size of the ball. 

7) At the properties panel, change the following:

    Colour effect : Tint

    Tint: 100%
    Red: 0

    Green: 255

    Blue: 255

8) Copy Frame 1 to Frame 20. Adjust the position of the ball

9) Copy Frame 10 to Frame 30. Adjust the position of the ball

10) Create Classic tween at the following places

     - Between frame 1 to frame 10

     - Between frame 10 and frame 20

     - Between frame 20 and frame 30

Voila!  Watch your ball bouncing... tapi bila tengok lama2 pening le pula...

Apps 2 and Onion Skin

A lot of times, we would like to imitate certain objects in Flash. The reason is because, our own objects are ours to control where we can use it to do our own animation.

It is also a powerful assistant in animation, because animating the objects will have guidelines because the image in the frame preceding it is transparent

Only two frames are needed for this activity

1) First frame - the imported image

2) Make the first frame as "Onion Skin"

3) Insert a keyframe in frame no. 2... waaa.. .you can see the outlines of the image

4) Start drawing.. using pencil tool, line tool, and so on..

5) Colour your object

6) The frame containing the guideline image can now be removed the "onion skin" property or removed totally...

The Result..