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