morph shapes (but not symbols) from one shape/size, color to
another.
morph text and bitmaps if you break them apart and turn them
into graphics first
Draw a square to morph:
Create a new movie in Flash (File>New) if necessary
Save it as morph.fla
Create a shape to morph
Rename Layer1 Morph Square (right click on layer, select properties, and type in new name)
Change the Fill color (paint bucket) on the Toolbar to red
Change the Stroke Color (pencil) to a different color that contrasts with red
Click the square drawing tool on the tools window.
Draw a square in keyframe 1 of the Morph Square layer
Select the Stroke (outline) around the square and delete it
Create a keyframe (F6) in Frame 20
Turn on onion skinning by clicking the second button from the left below the timeline. Onion skinning will show objects that have been deleted in earlier frames
Draw a letter E for the morphed shape:
Click in keyframe 20 of the morph square layer
Select the square you drew in keyframe 1 and delete it in keyframe 20 (it will still be in Keyframe 1)
Because you have onionskinning turned on, you can see a shadow of the shape you just deleted
Draw a letter E with the paintbrush (use a
big brush) where the square was
You can use red or any other color you like as the stroke color.
Morph the shape into the letter by tweening
Place the cursor in the layer in keyframe1`
Open the property inspector if it is not already open (Window>Properties)
In the Tween dropdown list, select shape
In the Blend dropdown list, select Angular,
because the shapes have corners and relatively straight lines. Distributive shape tweening is for smoother shaped drawings
Click OK
Press the Enter key to play the tween
Another shape tween with shape hints:
Click the lock in the morph swuare layer to prevent changing
it
Hit the +button on the timeline
to create a new layer
Name the layer morph A
Draw a letter A with the paint brush on the
left side of the canvas in the first keyframe
Create a keyframe(F6) in frame 20
of the morph A layer
Delete the drawn letter A
Draw an upside down letter V in the lower right
corner in keyframe 20
Click in keyframe 1 of the Morph A layer
Select shape in the tween dropdown list
in the property inspector
Select Angular in the Blend dropdown list
in the property inspector
Add shape hints -- Shape hints are used with complex morphing
shapes - you can have up to 23 of them.
If we wanted the peak of the letter A to morph to the peak of
the letter V, we can supply shape hints to the shapes to guide
the morphing
Click in keyframe 1 of the Morph A layer
Click on Modify>Shape>add shape hints
Move the shape hint dot a to the peak of letter A
Put the cursor in Keyframe 20
move the shape hint dot to the peak of letter V to make
the top peak of the letter A morph to the bottom point of
the letter A
Tweening from Text to shapes:
Create a new layer
Name the layer morph text
Click the cursor in frame 20 and create a keyframe
(F6)
Use the text tool to type in a letter in Keyframe 1 (a large
letter) with a broad font such as Arial Black
Click the Text tool on the toolbar
Use the property inspector to set text characteristics --
Arial Black, Size 74, color of your choice
When you type the text the little circle on the rectangle
surrounding the text should be in the upper right corner
If it is not, choose Static Text in the Text Type dropdown
list.
Change the text from text into a graphic so you can morph it
(no longer editable with the text tool)
Click in keyframe 1 of the Morph Text layer.
There should be a blue line around the text
Break the text apart to turn it into a graphic: Modify>Break
Apart
The text looks like any selected graphic and is no longer
editable with the text tool.
Go to Keyframe 20, delete the letter A, and draw a shape somewhere
else on the canvas
Place the cursor inside the Morph Text Layer between the two
keyframes
In the Property Inspector, select shape tweening, and choose angular
if the letter and the shape are straight.
Tweening from bitmap to shapes -- this tweening is very CPU (computer) intensive and may hang up Flash:
Create a new layer
Name the layer morph bitmap
Click in keyframe 1 of the layer
Click File>Import to Stage to import the graphic below into Keyframe 1 of the morph bitmap layer in the timeline
Morph the graphic
Break the graphic apart: Modify>Break apart
Create a keyframe (F8) in frame 20 in the morph bitmap layer
Delete the bitmap and draw another shape somewhere on the stage
Click in one of the frames within the starting & ending keyframes in the layer
In the Property Inspector, select Shape in the Tween dropdown list
This tweens the shape and just changes fill pattern from the bitmap to color of shape in frame 20
Morph again after vectorizing the bitmap image
Try the same thing on a new layer, but this time convert the bitmap to a vector image (modify>trace bitmap).
Create a new layer
Put the cursor in the first keyframe of the layer
Drag the bitmap image from the movie library onto the movie stage
Click Modify>Bitmap>Trace Bitmap
Leave the default settings
The image now becomes vectorized
If there is a background color around the bitmap, selectand delete it so that the bitmap is no longer a rectangle.
Morph into another shape in keyframe 20
How does this affect the morphing?
Export the movie as an SWF file on a Web page
Save the file (File>Save)
Export the movie on a Web page
Click File>Publish Settings
Click the Format tab in the Publish Settings window
Click SWF and HTML to export the SWF file on an HTML page
Be sure the Flash Version is set to Flash 9
To ensure the HTML page validates as XHTML transitional 1.0
Open the HTML page that Flash generated in Dreamweaver CS3
Convert the page to XHTML valid by clicking File>Convert>XHTML Transitional 1.0I
Delete the <embed> tags from within the <object> tags, which will not validate.
Use the page as is or copy and paste the JavaScript and the Object tag content into another page that is formatted like the rest of your website.
If the browser displaying the HTML page is using Actionscript the JavaScript will be used to display the movie.
If the browser does not use ActionScript it wil display the movie using the <object> tags that are embedded inside <noscript> tags.
