SCUSD



 
Flash Tutorial 5 of 5 - Morphing: Animation - Intermediate Difficulty~
The Final Step: MORPH!
Step #1: Shape Tewen ~

. Click on the background layer, the one with the original picture on it.
.

.On the background lower layer, right-click on Frame 20 & Insert a keyframe.

. On that same layer, insert another keyframe at Frame 40.

. Then grab Frame 1 of the TOP layer, drag it over and drop it into Frame 40 of the bottom layer.

.

. Click on Frame 20, and hit Ctrl-B to break yourself apart to tiny dots.

.Then click somewhere between Frame 20 & 40, like Frame 30.

. Under the properties bar at the bottom of Flash, change the Tween option to: . Shape Tween.

..

.. If a green shaped "Tween" bar between Frame 20 and Frame 40 appears, you did it.. If the green arrow bar fails to show, you most likely did not break apart the image on frame 20. Try again!

 

 

 

 

 

 

 

 

 

 

.. This is what your timeline should look like.
.
. Lastly, delete Layer 1 and hit Ctrl+Enter to view your work.

Step #2: Transparency in Flash ~

. There are two ways to make a flash file transparent, so when you use it on a web page the background will show through:

1. Exporting the Flash .swf file Transparent Windowless.

. Go to: File > Publish Settings or hit Ctrl+Shift+F12.

. Go to the HTML tab and select Transparent Windowless from Window Mode. When you hit the Publish button you should be able to see through to the background when you put your wok into a web page.

.

2. If that doesn't work, then do it in Dreamweaver or your HTML Editor.

.. Click on the flash file and go to the code view mode.

. Insert the line of code shown in green where shown.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia..../swflash.cab#version=6,0,29,0" width="200" height="100">
<param name="movie" value="images/trans.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="images/trans.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="100"></embed>
</object>

. Just insert the line of code in green after the last

<param name="

... Don't forget to add wmode="transparent" in the <embed src="

. That's how you make a transparent .swf file!
Step #3: Save & Export ~

.SAVE YOUR WORK! in the root folder for this project.

. Then go to: File > Export > Export Movie

. Export it as an .swf file.

. Attach both your .fla and .swf files to the bottom of this journal. Attach the results of your artistry to the bottom of this journal.

 
 
   
HOME | CONTACT US
1400 Dickson Street, Sacramento CA 95822 | 916-433-2839