A Flash Activity – Morphing

Document Sample
A Flash Activity – Morphing Powered By Docstoc
					A Flash Activity – Morphing
This activity will introduce you to the concept of Shape Tweening or Morphing
(Morphing is where one shape changes into another shape over time)

Setting the Stage

                                                        From the Modify menu choose Document

                                                        The Document Properties window appears

                                                        Set the Dimensions to 600 by 250 pixels

                                                        Leave the other settings as they are for now

Setting up the Timeline
For this activity we need to have Keyframes set at Frame 1, Frame 20, Frame 40 and Frame 60

        Frame 1 is
       automatically          Right-click on Frame 20        choose Insert Keyframe
        a Keyframe            on the timeline                from the popup menu
                              (<Ctrl> click on a Mac)        that appears

Now do exactly the same at Frame 40 and Frame 60 – you should then have 4 keyframes.

A Flash Activity – Morphing                                                                       Page 1
A Spot of Drawing
On the first Keyframe - Frame 1 draw a Red Oval on the stage

                                                                                 Click on Frame 1
                                                                                 to select it …

                                                                                 choose Oval Tool

                                                                                 no Stroke colour

                                                                                 red Fill Colour

                                                                                 Draw the oval on
                                                                                 the Stage

On the second Keyframe - Frame 20 draw a Blue Rectangle

                                                                                 Click on Frame
                                                                                 20 to select it

                                                                               Choose the
                                                                               Rectangle Tool

                                                                                 blue Fill Colour

                                                                               Draw the rectangle
                                                                               on the Stage

On the third Keyframe – Frame 40 draw a Green Polygon or Star

                              Click on the Rectangle Tool
                              and from the drop down menu
                              choose the PolyStar Tool

                                    Click the Options button on the
                                    Properties panel at the bottom
                                    of the screen

                                                      On the Tool Settings window that appears
                                                      change your options to suit – I chose a 5
                                                      pointed star …

A Flash Activity – Morphing                                                                  Page 2
Use the arrow keys on the keyboard to position your polygon or star on the stage

Eventually we will want our animation to run continuously – therefore it is important that there is a
smooth transition back to our initial image – the red oval on Frame 1. To achieve this we need to copy
our image on Frame 1 onto Frame 60 to complete the loop …

                                                               Click on Frame 1 – choose the
                                                               Selection Tool and click once on the
                                                               oval to select it … then go to the Edit
                                                               menu and choose Copy

Now click on the last Keyframe - Frame 60 and paste the oval image in
exactly the same position on the stage using the Paste in Place option from
the Edit menu

Save your file (eg: morph.fla)

Press <Enter> (or <Return> on a Mac) to see the animation so far …

Not very impressive as yet – just some shapes that stay on the screen for a bit!

A Flash Activity – Morphing                                                                      Page 3
Morphing the Shapes
We need to select all 60 frames on the Timeline and then add the Shape Tween property …

                                                                          Click once on Frame 1 to
                                                                          select it then hold down the
                                                                          <Shift> key and click once
                                                                          on Frame 60 – all 60 frames
                                                                          are now selected.

                                                                          Choose Shape from the
                                                                          drop-down Tween menu

You will know you were successful if arrows appear linking the Keyframes on the Timeline

Save your work again – then press <Enter> to see the animation now

A bit more impressive with the morphs and colour changes happening!

Continuous Running
The animation will look even more impressive if it ran in a continuous loop …

                                                      From the Control menu
                                                      choose Loop Playback

Run the animation again – it should smoothly loop through all the shapes continuously …

A Flash Activity – Morphing                                                                    Page 4
Layers upon Layers
So that you can practice your morphing skills and also so that you learn a bit more about the power of
Flash we will add another morph to our animation – on a different layer …

 Double-click on the layer
 name and change it from
 Layer 1 to shapes
                                                                     Double-click on the new
                                  click on the Insert Layer          layer name and change it
                                  icon to add a new layer            from Layer 2 to words

                                                      To make it easier to work on the new layer it is
                                                      possible to hide the other layer by clicking on the
                                                      dot under the eyeball for that layer …

                                                      A red cross appears to show the layer is hidden

    • The lock symbol allows you to lock a layer so that you don’t accidently make changes to it
    • The hollow square symbol allows you to see a layer as a wireframe outline while animating
    • The pencil symbol shows which layer is currently being edited

Set up the Keyframes
To keep this layer in sync with the other layer we need to end with a Keyframe at Frame 60 – we’ll set
another Keyframe at the midway point – Frame 30

                              Right-click on Frame 30 on the timeline and         Do the same
                              choose Insert Keyframe from the popup menu          on Frame 60

Morph a Word
For this example we will morph one word into another and then back again … you could however
morph a word into random shapes and back … the principles are the same

I will morph the word dog into the word cat …

A Flash Activity – Morphing                                                                          Page 5
On the first Keyframe - Frame 1 we will type the word dog

                                                                                       click on Frame 1
                                                                                       to select it

                                                                                       Choose the
                                                                                       Text Tool

                                                                                       Choose a suitable
                                                                                       (eg: Arial Black is
                                                                                       nice and thick)

                                                                                     Choose a large
                                                                                     size (eg: 200)

                                                                                       Choose a suitable
                                                                                       colour (eg purple)

Changing to Bitmaps
Unfortunately you cannot morph text – so we need to change the text into a bitmap image

                                    Click on the text with the Selection Tool to select it

                                    Go to the Modify menu and choose Break Apart

                                    The word splits into individual letters (still not bitmaps)

Go back to the Modify menu and choose Break Apart
a second time … this time the letters turn into bitmaps

On the second Keyframe - Frame 30 follow this procedure again with the word cat

A Flash Activity – Morphing                                                                         Page 6
Frame 30 should look like this when finished …

To ensure that smooth transition in a continuous loop we need to finish off where we started …

Click back on Frame 1 on the Timeline

Go to the Edit menu and choose Select All

Then go to the Edit menu and choose Copy

This has now copied all of the bitmaps that make up the word dog

We want to put them in the same place on the last Keyframe – Frame 60

Click on Frame 60 on the Timeline

Go to the Edit menu and choose Paste in Place

We need to turn on Shape Tweening (see top of page 4)
Click on Frame 1
<Shift> click on Frame 60
Choose Shape from the Tween menu on the Properties panel

Save your work and test the morph by pressing <Enter>

A Flash Activity – Morphing                                                                      Page 7
Combination Morph
Unhide the original shapes layer (by clicking on the red cross under the eyeball) and run the
animation again so that you can see both layers in action.

You may have to play with colours to see all your work properly

Things to Try
Run the animation as a wireframe
(this involves clicking the hollow square symbol - beside the eyeball and lock - on each layer)

Swap the order of the layers and run the animation
(you can do this by simply dragging the layer names up and down)

Add a third layer and morph a word into a series of shapes
(you could also just delete the word cat from Frame 30 and draw 3 random shapes to test this)

Use the Subselection Tool (the hollow arrow on the Toolbar) and play with the shapes of the letters to
make them more interesting

    Choose the Subselection Tool

    Click on the edge of a bitmap and a
    series of handles appear

    Drag the handles to transform the
    shape – for example you could click on
    the inner circle part of the d and change
    it to look like an open angry mouth …

Play with different colour combinations (each letter could be a different colour)
(just click a bitmap to select it and change the fill colour on the Toolbar – the bitmap will change to that
colour. At the bottom of the colour choices there are some rainbow patterns and gradient fills)

Add another layer and create a Motion Tween
(for example you could convert some words on this layer to symbols (not bitmaps) and then have the
words fly across the screen on top of the morphs)

Play with the menus - particularly the Transform option from the Modify menu
(you can distort, rotate, skew, scale and generally have a good time with these options)

A Flash Activity – Morphing                                                                          Page 8

Shared By:
Description: A Flash Activity – Morphing