Instruction Design Theory in a YouTube Video

This Video features Travelling The Black Hole explained in scientific astronomical facts.  A lot of scientific facts and terms such as "Shwarzschild radius", "singularity", "gravitational lensing", "photon sphere", "spaghettification", "wormhole", "cosmological principle", "dumbhole" and "Googolplex".  Basic knowledge in science, astronomy and physics are required to further understand the content of this video.

I would like to describe this video presentation as cognitive learning instructional design.  The lecturer give us a simple analogy for each new concept introduced before moving on to the complex ones. The video has its strong points, listed below:

1) Clear, word by word explanation which helps a non native English speaking student to understand
    what is being relayed

2) Explanation is done from simple to complex

3) Scientific terms are spelled out during the explanation

4) Graphical examples and video simulation further help in understanding the complex concept being
     explained

There are however, a few improvements that enhance this video presentation, probably an engaging space sound music.  As for the introduction of new scientific terms, I think it would further help if the definition, instead of just being explained, can be defined in words on screen.  To me, it will serve as a reinforcement of what that has been heard.

Feel free to give your comments

Embedding swf files in blog post

I would like to share my friend's searching effort on this topic.  Useful in blogging.... happy trying..!

http://author-hailiz.blogspot.com/2012/06/how-to-embed-swf-files-in-blog-post.html

Rotating a 3d object

I’m going to create a 3D Box and animate it using the new 3D Tools and Features in Flash CS4.

Step 1: Create a square shape

Start by drawing out simple square. Hold down the shift key to constrain the proportions. Now lets change the solid fill to a gradient by going the color palette, and lets change the type to a Linear gradient. Next lets remove the stroke, just goto the stroke color picker and choose the None option.

Now lets make sure our square is in the center of the stage, we can do that by going to the align panel and click on the horizontal and vertical align buttons.

Step 2: Position & Convert into a Movie Clip

Okay next lets convert this shape into a movie clip, just right click and select Convert to Symbol… alright now lets nest this symbol inside another movie clip, and lets name this one 3D Box. So inside the 3D box movie clip is where we’ll be setting up the 3D layers.

Step 3: Duplicate Layers for Each Box Side

Alright so now we can just copy and paste a few of these squares on some new layers. And lets name each copy after a side of the 3D Box such as top, bottom, left and right.

Step 4: Rotate Each Side 90º & Position in Place

Now lets convert all the frames into motion tweens by selecting them, right clicking and Create Motion Tween. Now lets start with the top layer and rotate the X axis 90 degrees. You can hold down the shift key to constrained your rotation. Next we can go inside the motion editor to ensure our rotation was a either a positive value, or a negative one. Just to make sure everything is set the name.

Now we’ll want to move this top layer up about half of the way. So just calculate half the height of the square and move it up so it sets on top. I like to use the 3D Position and View Panel to do this because you can easily change the values there.

Now lets repeat this process for the bottom layer. But this time we’ll want move the half way down, so again just change the value in the 3D Position and View Panel. Alright so next lets start on the left and right squares. Starting with left, lets rotate the Y axis 90 degrees and shift it over to the left about half of the width of the square. Again we can go inside the motion edition to check our values. Alright now we can repeat the same process for the right square, but don’t forget to move it to the right side instead of the left!

Step 5: Test 3D Box Rotation

So once we finish all rotating and positioning, we should be left with a picture frame looking set of rectangles. So lets jump out of the movie clip and goto scene 1. Now lets select our 3D rotation tool and watch as I rotate the box on its Y axis. Pretty sweet huh?

Step 6: Add Drop Shadow

Lets select our bottom layer, and lets goto the filters section in the properties panel and licks pick drop shadow. Lets change the blur X and Y values to something big like 100 pixels, change the quality to high, and distance to 0.

Step 7: Animate 3D Box Rotating

So now lets jump out to our main timeline and lets add a few move frames. Now Ill be using the motion editor to animate the 3D Box and have spin on it Y axis. So lets convert it the frames into a motion tween by right clicking on the frame bar and selecting convert to motion tween. Now we can scrub over to the last frame and then goto the motion editor. So if we want to just rotate the box spinning from left to right, we can simply change the Rotation Y value to 360 degrees.

Test out the animation by pressing cmd+renturn (cntrl+return on PC).

http://noeruiz.com/tuts/how-to-create-3d-box-in-flash-cs4/

http://www.youtube.com/watch?v=PfR9n0eZJvs&feature=related

Combine Flash Movies

1) Open the first Flash FLA movie in Flash you want to combine with another movie. Open the second
    movie

2) Right-click any frame in the Timeline panel (in the second movie) and choose "Select all Frames" from the
    fly-out menu. Right-click the selected frames and choose "Copy Frames" from the fly-out menu.

3) Go to the first movie. Scroll to the end of Timeline to the first column of blank frames.
    Right-click the first blank frame in the first (top) layer and choose "Paste Frames" from the fly-out menu.
    Flash pastes all the layers and frames---and their contents---into the Timeline, appending the movie and  
    extending the Timeline to hold the new content

4) Repeat these steps for each additional movie you want to add to this one.

Combining Movies with Scenes

1) Open the first Flash FLA movie in Flash you want to combine with another movie. Open the second

    movie

2) Right-click any frame in the Timeline panel (in the second movie) and choose "Select all Frames" from the

   fly-out menu. Right-click the selected frames and choose "Copy Frames" from the fly-out menu.

3) Go back to the first movie. Click "Window" on the menu bar and choose "Other Panels," and then select

    "Scene" from the Other Panels fly-out menu. This opens the Scene panel.

4) Click the "Add Scene" button in the Scene panel (first button in the lower-left corner of the panel). Flash

    creates a new scene and displays it in the document window. Right-click frame "1" on "Layer 1" and   

    choose "Paste Frames" from the fly-out menu. Flash pastes the content from the movie where you  
    copied the frames into this scene. When you test or export the movie to a SWF file, Flash Player will play
    each scene, one after the other.

Repeat these steps for each additional movie you want to add to this one.

Source:
http://www.ehow.com/how_6002759_combine-flash-movies-one-movie.html
Read more: How to Combine Flash Movies Into One Movie | eHow.com http://www.ehow.com/how_6002759_combine-flash-movies-one-movie.html#ixzz1wt1rRDVW

Learning About Layers

Let's learn about layers and the importance of layers

Layers, in graphic arts programs, give you a way of organizing objects in your documents and controlling their front-to-back stacking order. Illustrator, InDesign, and Photoshop all have layers, and share most basic layer features: you can create, move, hide, and show layers, and you can assign objects to layers.

We should first understand that Flash uses two types of spatial (space) organization
1) position of objects on stage
2) stacking order of objects that overlap

Therefore, layers  in Flash are used on the Timeline as a way to ORGANIZE objects and actions.  Placing objects and actions in their own layer makes them easier to work with and provide the necessary documentation that can be easily edited by other developers.

By having layers, the developer can draw and edit objects in one layer without affecting other overlapping objects in another layer. This is done by hiding the unnecessary layer.  If the overlapped objects are all done in one layer, they are merged together and specific selection of an object will be impossible.  By using layers, the object in that layer will be easily selected if we want to reshape them or reposition them on stage.

The second reason of having layers, as mentioned earlier is to provide necessary documentation for easy editing.  The developer will know which layer is for what function, that is which layer contains the first object, the second object ande so on, which layer contains the action script, which layer contains sound, which layer contains animation, etc.  A simple file may not need different layers, but by practicing using layers, will be ready to use the same concept when we develop more complex application.

We can also perform operation on the layer itself
1) Lock the layers (to protect their embedded objects from unwanted editing)
2) Hide the layers OR make them visible (i.e. you can see OR not see their objects in the workspace)
3) Switch between normal to outline mode
4) Move layers to change order of overlapped or stacked objects

There are six types of layers:

1) Normal (the one that we use)

2) Guide (Standard and Motion) 
    a) A Standard Guide serves as a reference point for positioning objects on stage
    b) A Motion Guide is used to create a path for animated objects to follow

3) Guided - A layer that contains the animated object (link to Motion Guide layer)

4) Mask - A layer that hides and reveals portions of another layer (widely used in Photoshop)

5) Masked - A layer that contains the objects that are hidden and revealed by a Mask layer

6) Folder - A layer that contain other layers

In this course, we have learned about layer type 1, 2 and 3.  More to come if we further this course in the future.

Source of information:

Dr Zaidatun Tasir - Universiti Teknologi Malaysia

Adobe Flash CS3 Revealed - Jim Shuman

http://edutechwiki.unige.ch/en/Flash_layers_tutorial

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

First Touch on Ipad and Flash

Introduction to Flash using Ipad

Well, this is the first time I’ve touched an Ipad.  Ha! Ha! It shows that I’m not that advanced with tehnological gadgets, right!  Anyway, it delighted me to be able to use the Ipad even though some of us are sharing L

Anyway, This is what we learned

a)      Flash Interface

b)      Application of Flash

c)      Type of Interaction

d)     What do I need

Flash Interface

There are 5 types of flash interface: 

a)      Tools Panel - on the left side

Tools needed to draw and edit objects

b)      Timeline - on top

Contains frames of animation in sequential order

c)      Using the library - on the right side

Contains all imported media such as photographs, clipart, video and sound files

Symbol - Name of any object saved in the libray

Instance - A copy of symbol that is used in a flash movie

d)     Stage - at the center

Displays animations, images and other content

e)      Properties Panel

Contains options and properties for the tools and object selected

Application of Flash

There are 4 applications where Flash is widely used:

a)      Web Banner

b)      Animation

c)      Games

d)     Courseware

Types of Interaction

3 types of interaction are used when dealing with users:

a)      Button & Hotspot

Button

- used for timeline navigation

- add interactivity to movie

- respond to mouse clicks, key press or rollovers

- have 4 frames in timeline (up, over, down, hit area)

Hotspot

-          sets up interaction with user

-          respond tu user ‘click’

Example

        
        Add a Flash hotspot to a callout to add interactivity within a produced Flash video. Use Flash hotspots to:

 Direct customers to a link to download your software.

 Show viewers websites in a new browser window.

 Demonstrate examples through hyperlinks in the callout.

 Take viewers to specific markers within the video.

 Allow viewers to replay a section in the video

b)      Text

Static Text - Display Static / Unchanged Text

Input Text - Capture Text Input from user

Dynamic Text - Display characters that are updated or change at runtime.

(Example)

c)      Drag & Drop

Users are able to drag and drop objects in the application.  This interaction is very good for educational purposes.

What Do I Need (Minimum Requirements)

a)      Intel Pentium 4 or AMD Athlon 64

b)      Windows XP SP2, Windows Vista, Windows 7

c)      1 GB RAM

d)     3.5 GB hard disk space

e)      1024 x 768 display with 16 bit video card

f)       DVD-ROM drive

Well, we cannot memorize the facts, right.  Practice using the tools will make us familiar with the application. 

Well, practice time..!