Flash MX 2004

1
Flash MX 2004

• Week 7

2
Bitmaps

• Bitmaps (aka Raster graphics) Characteristics
• Built pixel by pixel color by color, composed
  of small dots (pixels).
• A line in a bitmap can be composed of a series of
  hundreds of dots (pixels) touching one another.
  
• All the information about each pixel makes up a
  large file size.
• Disadvantage
• Large File Size
• Advantages
• Photorealistic Imagery
• In Flash, bitmaps can be employed as fills or
  backgrounds.
• In Flash, you can break apart a bitmap to edit.
• Convert a bitmap to a vector (Trace Bitmap)
• Visual Clarity and Color fidelity are important
  technical points

3
Bitmaps

• Visual Clarity (Resolution)
• Resolution the of pixels per a given area
• On Print, resolution matters, it should be set to
  300ppi ( pixels per inch)
• 72ppi
  300ppi
• On the Web, resolution does NOT matter, it
  should be set to 72 ppi
• 72ppi
  300ppi
• The monitor can only display the image at 72ppi
  or 96ppi

4
Bitmaps

• Visual Clarity (Resolution)
• 4 inch by 6 inch image at 300 ppi
• 4 inches X 300ppi 1200 pixels
  
• 6 inches X 300ppi 1800 pixels 1200
  pixels X 1800 pixels 2,160,000 pixels
• A full color image is in RGB mode,
  therefore, multiply that by three for each
  color mode 3 X 2160,000 6,480,000 pixels.
• This is only a 4" x 6" image (standard
  snapshot)!
• If your picture is larger than that or at a
  higher resolution, that number can quickly grow
  in size. For example, a full color 8" x 10" image
  at 300 ppi will be 21,600,000 pixels!
• Higher resolution images contain more pixels and
  thus more information, they usually yield more
  detail and smoother colors.

5
Bitmaps

• Color Fidelity (bit depth)
• Representation of the colors in the image.
• Each pixel has a range of color it can be, this
  range is established by bit depth
• Bit depth number of bits found in a graphics
  file
• A bit refers to the smallest amount of
  information that a computer can understand. It
  contains either a 1 or a 0
• Each bit represents two colors because it has a
  value of 0 or 1
• 2 Basic bit depths 8-bit and 24-bit
• 8-bit Each pixel in an image can be represented
  by any one of 256 colors
• 24-bit Each pixel of an image can be represented
  by any one of 16.7 million colors. (More common
  one, looks better).

6
Bitmaps

• Color Fidelity (bit depth)
• Color Mode Bit Depth
  Colors
• Grayscale 8-Bit 2
  to the 8th power 256 (254
• 
  grays,
  black white)
• RGB 24-Bit 2
  to the 24th power 16.7 million
• 8-bit Each pixel in an image can be represented
  by any one of 256 colors
• 24-bit Each pixel of an image can be represented
  by any one of 16.7 million colors. (More common
  one, looks better).

7
Bitmaps

• Raster images come in a variety of file formats
  yet there are three main types
• GIF Graphic Interchange Format,
• restricted to 256 colors (8-bit)
• carries on off transparency
• lossless ( NO data lost when compressed)
• PNG Portable Network Graphics, not yet
  supported by IE or other major Web browsers.
• Supports up to 48-bit,
• surpasses GIF compression by up to 50,
• carries full transparency
• lossless
• JPEG Joint Photographic Experts Group
• Supported by every graphical Web browser on all
  major platforms
• No restriction on color
• Lossy (losses data when compressed)

8
Bitmaps

• You need to compress your bitmap image in Flash
  to minimize the file size.
• Compressing (optimizing) image gets rid of
  redundant or unnecessary information.
• It is a good idea to optimize your images outside
  of Flash then import them inside of Flash except
  for JPG files.
• If you recompress an already compressed JPG
  image, your images will end up being larger and
  will look poorer.
• Two types of compression
• 1. Lossless (no data lost, GIF or PNG)
• 2. Lossy (data lost, JPG)

9
Bitmaps

• Ways to Access the Bitmap Properties Dialog Box
  from the Library

Double Click the bitmap icon to the left.
Click on the Symbols property icon
10
Bitmaps

• Bitmap Properties Dialog Box

Preview Window
Allows you to choose between JPG or PNG/GIF
Allows you to see the new changes you made
11
Trace Bitmaps

• Trace Bitmaps
• Converting a bitmap into a vector representation
  by having Flash trace it.
• Select the bitmap on the stage then select
  Modify ? Bitmap ? Trace Bitmap.
• You can break apart bitmaps manipulate them
  using the toolbar tools.
• The Trace Bitmap dialog box allows you to
  customize how the trace will be generated.

12
Trace Bitmaps

• Converting a bitmap into a vector representation
  by having Flash trace it.
• The trace tool analyzes the pixels that make up
  the bitmap, locates areas with similarity colored
  pixels, then creates vector graphics based on the
  like-colored shapes it has identified.
• Tracing can only be performed on bitmaps that
  have not been broken apart first.
• Modify ? Bitmap ? Trace Bitmap

13
Trace Bitmaps

• Color Threshold 1-500 Range, controls the of
  colors in the vector graphic for adjacent pixels
  using a calculation. The lower the , the more
  colors are used the larger the file size.
• Minimum Area 1-1000 Range, determines how many
  adjacent pixels are considered during the trace
  calculation. 1most detail, 1000least detail.

Color Threshold 100
Color Threshold 25
Color Threshold 50
Minimum Area 1
Minimum Area 100
14
Trace Bitmaps

• Curve Fit Determines how smooth the outlines in
  the traced shape are drawn how closely they
  match the original image with various options.
• Pixels result in a more scattered outline.
• Very Smooth results in a a more uniform outline.
  
• Pixels
  Normal
  Smooth
• Corner Threshold similar to curve fit yet its
  used to calculate the edges of the bitmap. It
  determines whether to use sharp edges (Many
  corners, adds more detail) or smoother edges (Few
  Corners, less detail)

Many Corners
Normal Few
Corners
15
Trace Bitmaps

• Applying a Bitmap Fill You can apply a bitmap
  as a fill to a graphic object using the Color
  Mixer. The Fill Transform tool allows you to
  scale, rotate, or skew an image and its bitmap
  fill.
• Steps on how to apply the fill to existing
  artwork
• Select a graphic object or objects on the Stage.
• Select Window gt Design Panels gt Color Mixer.
• In the Color Mixer, select Bitmap from the pop-up
  menu in the center of the panel.
• If you need a larger preview window to display
  more bitmaps in the current document, click the
  arrow in the lower right corner to expand the
  Color Mixer.
• Click a bitmap to select it. The bitmap becomes
  the current fill color. If you selected artwork
  in step 1, the bitmap is applied as a fill to the
  artwork.

16
Buttons

• To create a button
• Select Edit gt Deselect All to ensure that nothing
  is selected on the Stage.
• Select Insert gt New Symbol, or press ControlF8
  (Windows) or CommandF8 (Macintosh). In the
  Create New Symbol dialog box, enter a name for
  the new button symbol, and for Behavior select
  Button.Flash switches to symbol-editing mode. The
  Timeline header changes to display four
  consecutive frames labeled Up, Over, Down, and
  Hit. The first frame, Up, is a blank keyframe.
• To create the Up state button image, use the
  drawing tools, import a graphic, or place an
  instance of another symbol on the Stage.You can
  use a graphic or movie clip symbol in a button,
  but you cannot use another button in a button.
  Use a movie clip symbol if you want the button to
  be animated.
• Click the second frame, labeled Over, and select
  Timeline gt Keyframe. Flash inserts a keyframe
  that duplicates the contents of the Up frame.
• Change the button image for the Over state.
• Repeat steps 4 and 5 for the Down frame and the
  Hit frame.

17
Buttons

• Button Symbol
• Has its own timeline with 4 premade frames
• The Timeline doesnt play, it simply reacts to
  cursor movement
• Button States
• Up nonactive state
• Over-(aka rollover) cursor positioned over the
  mouse
• Down- when the button is clicked
• Hit invisible to the user, clickable area, it
  defines the area of the button that responds when
  clicked.

18
Buttons

• Up State
  Over State

19
Buttons

• Down State
  Hit State

You can create a disjointed rollover, in which
rolling over a button changes another graphic on
the Stage. To do this, you place the Hit frame in
a different location than the other button
frames.
20
Buttons

• If you leave the Hit state blank, the shape in
  the last defined keyframe will be used as the hit
  area.
• By default, Flash keeps buttons disabled as you
  create them, to make it easier to select and work
  with them.
• To see the visual feedback of your button, from
  the main menu, select Control ? Enable Simple
  Buttons. Then turn this off in order to edit your
  buttons.
• To enable and disable buttonsSelect Control gt
  Enable Simple Buttons. A check mark appears next
  to the command to indicate buttons are enabled.
  Select the command again to disable buttons.
• You can add sound to play when your button is in
  a particular state.
• You can also create animated buttons by placing
  instances of movie clip symbols into your button
  symbols different states.
• You cannot place buttons inside buttons

21
Buttons

• Button Types
• Basic same content in the Up, Over, and Down
  states
• Rollover- different content in the Up, Over, and
  Down states
• Animated Rollover-different content in the Up,
  Over, and Down states but also contains a movie
  clip
• Invisible no artwork in the Up State, can
  contain artwork in the other states, in addition
  to the Hit state.

22
Final Next Week

• Please be on time
• Final consists of 2 parts - 20 pts
  written - 80 pts project presentation ? Make
  sure you follow the
  guidelines. Project
  needs to be
  submitted on a CD with a
  
  storyboard.
• 
  

23
Final Review

• Written Part ----- 20pts
• 20 questions (Multiple Choice, True and False)
• Review PowerPoint Presentations from Week 1- Week
  7, notes in class, hands on techniques used in
  class, etc.