cis 9993 - las positas college
TRANSCRIPT
CIS 9993Create Web Interaction w/Flash
Las Positas CollegeInstructor: Mrs. Da Silva
Location: Room 804http://lpc1.laspositascollege.edu/lpc/cdasilva
Understanding the Formats
Bitmap and vector images
Can be imported and animated, even if created in other application
Bitmaps
Can increase file size of movie
Slows movie download time
Vector images
Importing from Fireworks or Illustrator is easy
More efficient than bitmaps
Chapter 7
Understand and Import Graphics
Vector-based application
Images and motion calculated according to mathematical formulas
Results in smaller file size
Results in robust ability to resize movies without notable loss in quality
Chapter 7
Understand and Import Graphics
Bitmap or raster image
Based on pixels, not mathematical formula
Importing multiple bitmaps
Will increase file size of movie
In terms of movie resizing, will decrease flexibility
Chapter 7
Importing Different GraphicFormats
Best way to use a graphic
Import it by selecting the Import option on the File menu
Then choose Import to Stage command
Next, navigate to graphic of your choice
Chapter 7
Fig. 1: Import to Library Dialog Box
Chapter 7
Importing Different GraphicFormats
Movie clips
Movies within a movie
Have their own Timeline
Can help organize contents of a movie
Can help create complex animations
Chapter 7
Using Fireworks PNG Files
Fireworks PNG files
Can be imported as flattened images or as editable objects
If you import a flattened image Flash will automatically bitmap the image
Chapter 7
Using Fireworks PNG Files
When you insert a PNG file as an editable object, it retains:
Its vector format
Its layers and transparency features
If you click the Keep all paths editable option:
all the features of the PNG file will be intact inside a movie clip symbol that is stored in the Library
Chapter 7
Fig. 2: Fireworks PNG Import Settings
Chapter 7
Importing Adobe Ilustrator Files
Illustrator files are vector-based
When imported as a movie clip, they preserve most of their attributes including filters (such as drop shadows) and blends (such as transparency settings)
Chapter 7
Importing Adobe Photoshop Files
A key feature of importing PSD files is that you can choose to have the Photoshop layers imported as Flash layers.
This allows you to edit individual parts of an image once the graphic is in your Flash document
animating text
using the entire graphic
creating a button using a photograph
Chapter 7
Importing Adobe Photoshop Files
1. Select the Import option from the File menu
2. Choose to import to the stage or to the Library
3. Navigate to and select the PSD file you want to import
Chapter 7
Importing Adobe Photoshop Files
If you choose not to make a layer editable, the contents are flattened as a bitmap image
If you choose to make a layer editable, a movie clip symbol, with the graphic information, is created using the layer contents
Chapter 7
Fig. 3: Import Dialog Box
Chapter 7
Importing Bitmaps
You can
Control size, compression, and anti-aliasing of imported bitmap
Use a bitmap as a fill
Convert a bitmap to a vector
Once you import a bitmap
It becomes an element in the Library
Chapter 7
Fig.4: Imported Movie Clip Symbol
Dragonfly movie on the stage
Movie folder automatically generated
in the library
Chapter 7
Fig. 5: Tree on the Stage after Importing
X and Y coordinates for tree
Drag tree beneath dragonfly
Chapter 7
Fig.8: Bitmap Properties Dialog Box
Item preview window
Remove check mark
Compressed size of the graphic
Chapter 7
Break Apart Bitmaps and Use Bitmap Fills
Breaking apart a bitmap image
Increases flexibility within a movie
Once you break the image, you can
Click different areas to manipulate them separately
Sample the image with Eyedropper tool
Chapter 7
The Lasso and Magic Wand Tool
The Lasso tool lets you select an irregularly shaped part of a graphic
move
scale
rotate
reshape
The Magic Wand tool extends the Lasso tool so you can select areas of similar color in a bitmap you have broken apart
Chapter 7
Using Bitmap Fills
Bitmap fill
Created by taking one image and using it to fill another
Can be applied to any drawn shape or text that has been broken apart
Chapter 7
Fig. 9: Different Bitmap Fill Effects
Chapter 7
Fig.10: Bitmap Fill Selected in Color Mixer Panel
Bitmap fill Bitmap selected as the type
Available bitmaps from library
Chapter 7
Trace Bitmap Graphics
Tracing is an outstanding feature for:
Challenges with illustration
Converting a bitmap image into a vector image for animation purposes
When you apply trace functions, you turn a pure bitmap into vector paths and fills
Chapter 7
Trace Bitmap Graphics
Creates paths and shapes, but every piece of original image remains on one layer
To animate or tween between pieces of the shape, isolate parts of the object onto their own layers
Chapter 7
Using Trace Settings
Your traced graphic will look more like the original graphic if you retain more detail.
If you want the traced graphic to look more abstract, use less detail. However, the greater the detail, the greater the file size.
Chapter 7
Four Options for Detailed Trace
Color Threshold
Compares two side by side pixels
Minimum Area
Sets the number of surrounding pixels to consider, with options between 1 and 1000
Curve Fit
Determines how smoothly outlines are drawn
Corner Threshold
Works with sharp edges to retain them or smooth them out
Chapter 7
Fig. 19: Trace Bitmap Dialog Box
Chapter 7
Mixing Graphic Formats
Tracing allows you to merge different photo styles without ruining movie integrity
Depending on the effect you are trying to achieve, you might use one or more techniques to create movies
Chapter 7
Organize Your Library
Cleaning up your Library will result in a better-optimized movie
Setting up folders and moving the assets to them helps reduce the clutter in the panel and makes it easier for you to find needed assets
Another consideration when organizing the Library panel is removal of unneeded assets
Chapter 7
Importing Idiosyncrasies
You can import graphics from
AutoCAD, MacPaint, Silicon Graphics Image, and QuickTime
If QuickTime not installed, Flash will import even a complex layered file as one single, flattened layer
Chapter 7
Animating Imported Graphics
Animation is one of the most powerful features and benefits of Flash
You can animate any type of imported graphic
Images inside Flash can be manipulated
Chapter 7