Clip Art & Vector Images: Shape Tween	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Importing Clip Art, Bitmap & Vector Images
For Shape Tweens & Other Uses

Free Flash Tutorial

The aim of the tutorial is to learn how to import Clip Art and other forms of Computer Graphics and Vector Images. It is important to understand the difference between the two types of images: Vector and Bitmap images. This is because Flash handles these different images formats differently. In this tutorial I will demonstrate the difference by looking at how Flash Shape Tweens the different image types:

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

 

Shape Tweens:

 

Both these Shape Tween animations are the same except for how the images have been imported:

 

Bitmap Image Shape Tweened	Vector Clip Art Shape Tweened

In the above examples both Movies use the same Clip Art file but they have been imported into Flash using different methods. In one case Flash converts the image to a Bitmap image and in the other the Clip Art retains its original Vector File Format.

It is usually better to import images as Vector based images as they tend to be smaller files. Here are some of the things you should be aware of when importing images:

• Vector is Flash's Native format.
• Vector images are usually faster to download than Bitmap images.
• A Vector image has distinctive and different properties to that of a Bitmap image and vise versa.
• Flash converts some vectors into bitmaps on import (which this is avoidable).
• Flash never converts a Bitmap into a Vector Image on import.

  Note: It is quite difficult to convert a Bitmap image into a Vector image and if you need to you would normally use a specialist program. These programs are usually referred to as Trace programs. Some image programs may have Trace type filters.

This Tutorial Covers:

• The first step is to understand what a Bitmap images is.

Quick Links: Bitmap Images

• Next I will look at what a Vector Images is and I will cover some basic techniques in editing Vector Shapes:

Quick Links: Vector Images

• I will then look alternative ways if importing Vector based Clip Art so that it retains it's Vector properties and or how to import Vector Clip Art as a Bitmap. I will also look discus Graphics Programs which are designed to create and edit Vector Images.

Quick Links: Importing Vector Images into Flash

• I will then show you how to create the Shape Tweened animation:

Quick Links: Shape Tweening Vector Art


Vector based Shape Tween.

Step One: Understanding Bitmap Images

Broadly speaking there are two types of computer image files. They are Bitmap and Vector. Photographic types of images (such as Jpeg) tend to be Bitmap and graphic types of images such as logos tend to be Vector.

• Bitmap Image: The word Bitmap refers to the method of storing pictures electronically that 'maps' an image Pixel by Pixel. These images consist of rows and columns of dots. Each dot has a colour value. The value of each dot is stored in one or more 'bits' of data.

A Bitmap image.

Zoom into a Bitmap image and you will see the individual square pixels:

Zoom in and you can see the individual squares or pixels of colour.

Bitmap images are good at storing textures which is why photos use this method.

There are many Bitmap file formats: JPEG, PNG, GIF, BMP, TIFF, PSD etc.

To make Bitmap images you can use a digital camera, scanner or programs like Adobe PhotoShop, Adobe Fireworks, Microsoft Paint or Corel's Paint Shop Pro.

Alternative Meaning: Just to confuse the word Bitmap also refers to images that have only two colours, usually Black & White. There would be no gray or in-between colours.

A Bitmap Image.

Zoom into a Bitmap image and you will see the individual pixels:

There are only Black and White pixels.

Note: Although it is confusing to have one word which has two very specific but similar meanings, thankfully they are used in different circumstances. The first Bitmap definition is a general computer term but these black and white Bitmap images are used in the printing industry. Standard commercial printing presses are not capable of printing gradations of colour so these black & white Bitmaps are used when creating Printing Plates for printing colours. This is because either there is ink in a particular location or there is not.

Note: When using the word Bitmap I will always be using it in the first definition (image made of many coloured pixels) and not to the black & white meaning.

Step Two: Understanding Vector Images

Vector: A vector image is a computer image that uses a Wire Frame or Outlines to define a shapes area. This is made up of mathematical descriptions of paths and fills to define the graphic. A Vector image is drawn in shapes and lines called paths:

This is a Shape drawn in Flash with the Paintbrush Tool:



Standard shape created in Flash.

If you switch on the Show Layer as Outlines: View > Preview Mode > Outlines (Ctrl Alt Shift O)


Outline or Vector of the Shape.

Note: The Outline shape can be edited with the Sub Selection Tool:


Editing a Shape with the Sub Selection Tool.

Tip: Don't forget to turn Outline Mode off: View > Preview Mode > Anti-Alias (Ctrl Alt Shift A)

There are several distinct parts to a Vector shape:

Stroke or Outline
A the visible outline that goes right around the shape. This maybe different colours, have different line widths or even be patterns such as dashes:

Same Shape different Stroke.

Fill
A colour or pattern that fills a shape:

Same Shape different Fills.

Path
This is the mathematical Shape that makes up the Vector Shape. This can be viewed by going into outline mode. If you switch on the Show Layer as Outlines: View > Preview Mode > Outlines (Ctrl Alt Shift O)

Path or Vector of the Shape.

Anchor Points
The small green squares that are become visible when you click on a shape with the Sub Selection Tool:

You can change the shape by dragging the Anchor points with the Sub Selection Too:

Tangent Handles
This is tangent line that becomes visible when you click on a Anchor Point with the Sub Selection Tool. The Tangent Handles are the green dots at the end of the Tangent lines:

By dragging the Tangent Handles you can change the way the Path moves trough the Anchor Point.

This changes the objects shape:

File Size

Vector Images tend to have a small electronic file size (KB or MB). Flash uses vectors because of the files sizes are small so the files download quickly. Because the image is stored mathematically the width and height size of an image is not important. You can enlarge a vector image and there is no loss of image quality. Even though an image may look bigger in width and height the electronic file size (in KB) remains unchanged!!

Vector Images are commonly used in:

Clip Art is usually made of Vector type images.

Fonts are sets of electronic letters and each letter has a shape. Fonts are normally vector images.

Flash stores images as vector shapes. So when you draw or paint shapes in Flash they are made up of vectors.

Logos are usually made of Vector files and can be enlarged to any size without loss of image quality.

3D Rendering programs use Wire Frame or Vector type of images.

Note: The above are examples only. There will always be exceptions such as Clip Art libraries that contain Bitmap images.

Shapes that you draw or paint in Flash will be Vector. Graphics programs are specifically designed to so create and edit Vector images. You can use any Graphics program like Adobe Freehand, Adobe Illustrator and CorelDraw. Most 3D programs also use Vectors.

Cross Ref: For more information about using images on the internet: Tutorial - Pictures for the web

Step Three: Importing Clip Art as a Vector Image

I will show you how import your Clip Art into Flash as a Vector shape. This will greatly improve your ability to use Clip Art as resource within Flash.

Note: When discussing Clip Art I am referring specifically to Vector based images. There are other sources of Vector images such as images. For example Art Work that has been created in programs like: Adobe Freehand, Adobe Illustrator and CorelDraw. Most 3D programs would use Vectors.

Beware: Most Clip is Vector based but there is also Bitmap based Clip Art.

You can copy and paste Clip Art directly from a programs like Microsoft Word. Alas Flash tends to convert these images to Bitmaps and this does not always work that well. Below is an example of Clip Art Pasted directly from Microsoft Word into Flash. Flash handles these image as Bitmap Images:

Example: Download the Flash file  Beg 036a

Bitmap images are used in this animation.

In this next example I have brought the Clip Art into Flash as Vector Images:

Example: Download the Flash file  Beg 036b

Vector images give a far more interesting result.

You can see that Flash handles Bitmap and Vector images completely differently.

Flash does not have a Clip Art Library. So this means that you may need to use other programs to access your Clip Art. Microsoft Word would be the most wide spread application that contains Clip Art. So for this example I am going to use this as my starting point to access the Clip Art.

Because you maybe using different programs I am not going to go into click by click detail, but I will give you a broad idea of what to do:

1. Open: Microsoft Word
   
2. Select some Clip Art from Word: Insert > Picture > Clip Art
   
3. Select and copy the Clip Art to the computer's memory: Edit > Copy (Ctrl C)
   
   
   
   
4. Open: Flash
   
5. Open a new Flash file: File > New > General Tab > Flash Document > OK
   
6. Paste the Clip Art into Flash: Edit > Paste (Ctrl V)
7. Open the Property Inspector: Window > Properties > Properties (Ctrl F3)
8. Use the Selection Tool to select the Image:

   You will see in the Property Inspector that the image has imported as a Bitmap:

   
   Flash Handles the Clip Art as a Bitmap Image.

9. This is not the desired result so delete the image: Edit > Clear (Backspace)
   
   
   
   
10. Return to: Microsoft Word
    
11. Copy the Clip Art to the computer's memory: Edit > Copy (Ctrl C)
    
    
    
    
12. Open a Graphics Program such as: Adobe Illustrator

    Note: You should be able can use any Graphics program such as:

    • Adobe Illustrator
    • Adobe Freehand
    • CorelDraw

    
    Alternative: If you do not have access to a Graphics Program don't worry see the Alternative Method below.

13. Open a New file: File > New (Ctrl N)
14. Paste the Clip Art into the file: Edit > Paste (Ctrl V)
15. Select the File with the default Selection Tool:
16. Copy the Clip Art to the computer's memory: Edit > Copy (Ctrl C)
    
    
    
    
17. Return to: Flash
18. Paste the Clip Art into Flash: Edit > Paste (Ctrl V)

Alternative Method: If you wish you can import the files directly from Flash. Before you can do this you will need to know the location of the Clip Art source files. They will be in a folder on your hard drive. It maybe something like this: C:\Program Files\Microsoft Office\Clipart Tip: If you cannot locate the folder try and do a search for .wmf files (Windows Meta File). On some computers it could be part of the hidden system folders. To locate the files you may need to use a File Management program such as: Windows Explorer Once you know the location you can import the Clip Art directly from Flash: File > Import > Import to Stage (Ctrl R)

19. Use the Selection Tool to select the Image:

You will see in the Property Inspector that the image has imported as a Group:


This time the image has imported into Flash as a Group.

Note: This is a group of Vector based shapes

Warning: If your image is still a Bitmap it is probably because the original Clip Art file was a Bitmap file and not a Vector file.

20. Break the image apart: Modify > Break Apart (Ctrl B)

You can now see the individual Vector shapes:


Image Broken apart (once only).

Tip: Using the selection Tool you can now move or delete individual parts of the Clip Art. Deselect everything by clicking to one side and then reselect individual vector shapes.


The individual shapes can be moved around or deleted.

21. With all the image segments selected break the image apart again: Modify > Break Apart (Ctrl B)

Break Apart Objects that are Grouped
You can Shape Tween any type of object if it is broken apart. Text has to be broken apart twice, some groups or other objects, like Clip Art, may need to be broken apart several times. Remember if the object is not 'dotty', you cannot Shape Tween it.

The image is now completely broken up and ready to edited and/or Shape Tweened:


The image is 'dotty' and cannot be broken apart further.

Tip Colour: Using the selection Tool you can now change the fill and outline properties of individual shapes such as their colour:


Fancy a green cup and purple plate?


Tip Shape: If you want to change the shape of an individual object use the Subselection Tool:

This is not easy but it is possible to make dramatic changes to the shapes. Zoom in and drag the Anchor Points (small green boxes) around:


The individual green Anchor Points can be moved around or deleted.


How about a punky, spiky plate?

Step Four: Getting Frame 1 Ready for the Shape Tween

Once you have a Vector image on Frame 1 that is Broken Apart you can then prepare to create the Shape Tween:

1. If the Property Inspector is not open, open it by going: Window > Properties > Properties (Ctrl F3)
   
   
2. In Frame 1 select the: Keyframe

Note: A Shape Tween is a Timeline Frame property. To display the Frame details in the Property Inspector click on the Keyframe in Frame 1. The Keyframe is the dot under the red Play Head.


The Keyframe (dot) in Layer 1 is selected.

3. In the Property Inspector go to the Tween menu and select: Shape

   
   From the Tween drop down menu select: Shape

   Note: Other options should now be visible in this section of the Property Inspector.
   
   
   Shape Tween options visible in the Timeline when the Tweened frame is selected.

   Cross Ref: For details on the Shape Tween options see the Tutorial: Shape Tweening

Step Five: Your Second Shape

For a Shape Tween to work you must have two shapes.

1. Right click (Mac: Ctrl click) on Frame 15 and select: Insert Blank Keyframe


The Timeline should now have a green dashed line between Frame 1 and 15.

Note: This is the symbol for a incorrect Shape Tween. A Shape Tween needs a second object. When the second object has been correctly places into frame 15 the dash will become an arrow:


Correct Shape Tween Symbol.

2. You will need to paste/import a second piece of Clip Art as you did earlier in the Tutorial: 2nd Clip Art


My second piece of Clip Art

3. Break Apart the Clip Art as many times as need to get the image: Modify > Break Apart (Ctrl B)
   
4. Repeat as many time as is needed until the Clip Art becomes Dotty: Modify > Break Apart (Ctrl B)

   
   Broken Apart.

   Your TImeline should now have the correct Shape Tween Symbol:
   
   
   Correct Shape Tween Symbol.
   

Step Five: Test your Movie

Your Shape Tween should now be finished.

1. Save your file: File > Save (Ctrl S)
   
   
2. Go to: Control > Test Movie (Ctrl Enter)

   You should see something similar to this:
   
   

3. Close the Test Window:

Note: My original Demo Movie goes back and forth between the two pieces of Clip Art:

Example: Download the Flash file  Beg 036b

To achieve this back and fourth effect I created two Shape Tweens in the Timeline. There is a slight gap between each so that your eyes have time to focus on completed object. This is what me Timeline looks like:

Double Shape Tween.

Well that's it so have fun Shape Tweening!!

Cross Ref: Shape Tweens

Cross Ref: Photo Shape Tweens

Cross Ref: Pictures for the Web