|
Written by John Tang
|
|
Thursday, 29 January 2009 |
Adobe has turned it's attention back to the animators and designers
with the release of Flash CS4. There is good evidence that Flash CS3
primarily focused on improving the Flash for developers.
The main
improvement with CS3 is the introduction of ActionScript 3.0. The
underlying Flash language is a giant improvement over it's
predecessor. Unfortunetely, this did little to improve Flash for
designers and animators. Flash CS4 has many new features that is
targeted directly at animators and designers. The 3D Transformations
and Translation, Bone Tool, Motion Editor, Motion Tween, 3D Tween, and
Presets are powerful tools in the hands of an animator or designer.
3D Transformations
------------------
Many Flash developers are familiar with the Papervision 3D library that is used to programmically manipulate 2D and 3D graphic images and models. That's great if you're a programmer. It's not so great if you're a non-programmer. One new tool that enables 3D graphics is the 3D Rotation Tool (3DRT). The tool can be used to rotate an image along the x,y, or z axis. You can create tweens that move in 3D space. This tool is located near the free transform tool. Clicking on the 3DRT will bring up a guide that looks like a cross bow with a circle. The red horizontal line is used to manipulate the x axis rotation. The green line is used to manipulate the y axis rotation. The blue circle is used to manipulate the z axis rotation.
The 3D Translation Tool (3DTT) is used to translate or move graphics along the x, y, and z axis. Moving a graphic from one point to another point is smiliar to tweening a graphic's x and y position. Using 3DTT along the z axis has the effect of enlarging or shrinking the object.
Animation or tweening is now a lot easier. The old method of tweening required moving the image to different positions on the screen at selected keyframes. While this method is still available a more powerful tweening method exists. The user can select a series of keyframes and right mouse click to create a motion tween. A dotted line will appear that displays the start and ending positions of the graphics. The dotted line represents the movement that the graphics will travel along. Change the dotted line by clicking and dragging it. Your image will now travel along this path.
Bone Tool
------------------
The Bone Tool (BT) may be the most fun animation tool to be introduced in a while. It's easier to describe what it does by stepping through a simple tutorial. Draw a fat line. It doesn't have to be straight. Click on the BT icon. It looks like a bone. Click along the path of the line. You will see items that look like bones on the line. You can animate by clicking on the bones and moving them around. Click on an end point of the bone and move it around. Go to another frame and move the line around. An artist could draw a dog and animate him using this tool.
Motion Editor, (3D) Motion Tween, Presets
-----------------------------------------
The Motion Editor (ME) is positioned behind the Timeline. Adobe took the ME tool from the After Effects product. The ME allows you to control the transition of MovieClip properties to create animations. You can then save your animations as motion presets. The ME is like the Timeline on steriods.
Let's see it in action. Create a blank layer. Drag and drop a symbol from the library to the scene. Right click on the symbol and click on "Create Motion Tween". You will see a blue rectangle block in the Timeline. Right click the blue rectangle and click on 3D Tween. Click on the ME. It should be behind the Timeline. If it is not visible select Window-Motion Editor from the main menu bar. The dashed lines on the ME indicates that no transformation has been done.
Basic motion, Transformation, Color Effect, Filters, and Eases are the properties that can be modified with the ME. Make sure your image is selected in order to activate the ME. From the ME click on Rotation X and change the value from 0 to 360. Test your animation by hitting the Enter key. Change the Rotation Z to 180. Test your animation.
We can now save the animation as a preset so that it can be applied to any symbol or MovieClip. Select Window-Motion Presets from the main menu. Click on the Custom Presets folder. Click on the bended paper icon at the bottom left corner of the Motion Presets panel. Give it any name. The animation preset can now be used in any future project. Publish the Flash file and use the same name that you used to save your preset. Copy the .swf file to your Flash presets document directory. I am using Windows so my location would be C:\Documents and Settings\JOHN\Local Settings\Application Data\Adobe\Flash CS4\en\Configuration\Motion Presets. You can now preview your preset from within Flash.
About John Tang
John Tang's college roommate convinced him to go into IT since
computing was his passion. He studied Applied Mathematics at UCLA but
always had a love of programming. He worked at a research lab on the
UCLA campus where he learned Fox Pro, SQL, and local area networking.
His first "real" job was at Ernst & Young where he did mainframe
programming with Cobol and client server development with Powerbuilder,
Sybase. He has been working as a web programmer since 1999 starting
with Java, HTML, JavaScript, and Oracle before migrating to PHP and
MySQL.
|
