Fireworks
and Flash
Overview
l Syllabus
l Overview of the course
Flash
and Fireworks
l Both sold by Macromedia
l Can do some similar things
What
is Flash?
l Gaining a huge following on the web
l Very small file sizes
l Create vector graphics
l Clean and scalable vector graphics
l Can use bitmap graphics
l Create sophisticated animation and visual effects
Sites
using Flash
What
is Fireworks?
l Fireworks bitmap graphics
l Create vector graphics
l Create simple animations
l Usually doesn’t require a plug-in
What
is the difference between the two?
l File formats
l Extent of animation
l Type of scripting
l Need for plug-ins in the browser to view
l Streaming
l Faster download
l Interactivity
What
is Flash MX?
l How is Flash MX different from Flash 5?
Fireworks
Text
l Companion Web site
Fireworks
Text: Module 6
l We won’t do the projects in this chapter
l Demos
l Project 6-6: Rollovers and Navigation Bars - image_rollovers.htm
l Project 6-7: Flash Text – index_flashtext.htm
l Project 6-8: Flash buttons – index_flashbuttons.htm
Fireworks
Text: Module 11
l Pages 316 – 334
l Homework assignment
l Text is not like textbooks you are used to
What
is a bitmap graphic?
l Also called a raster image
l Created by creating a grid
l Fill in squares of the grid with a color
l Squares are pixels
l Demo
l Fireworks allows you to modify the pixels
l Page 4 in Flash textbook
Bitmap
Image Formats
l GIF
l JPEG
l PNG
More
about Bitmaps
l Images depend on the resolution of the monitor
l Enlarging a bitmap will often produces ragged edges and
poor quality
GIF
format
l Graphics Interchange format
l Compuserve developed image format
l Allows for small file sizes to download quickly
l Compression without loss of quality
Compression
l Make smaller
l Allow for faster transmission
l Several compression techniques
l Unisys owns technology used to compress GIF images
l Mid-1990s the company decided that it should really be
paid for the work that went into making this format possible
More
Gif Qualities
l Limited to 256 colors
l Best with limited colors
l No shading
l Solid colors
l Can make portions of image transparent
l Background shows through in place of transparent color
l Demo with FrontPage
l Animation
JPEG
format
l Joint Photographic Experts Group Format
l Developed to overcome problems with GIF
l Smooth transitions, shadows, or complex colors possible
l Photographs
l Lossy compression
l Loses some quality in compression
l Doesn’t compress solid colors well
l Can’t do animations
l Can’t do transparency
What
is the PNG format?
l PNG – Portable network graphics
l Default format for Fireworks
l Developed as an alternative to fees associated with GIF
formats
l Many of the advantages of GIF without the drawbacks
l Images even smaller than GIFS
l Can display more colors
More
PNG qualities
l Can use transparency and animation
l Combines attributes of bitmap and vector images
l Victim of browser compatibility problems
l Has not gained widespread acceptance among web developers
What
is a vector graphic?
l Mathematical equations
l Describe each point in the image, location, color of
objects on canvas
l Further specify color, size, and other info
l Macromedia Freehand and Adobe Illustrator create vector
images
l .swf format (Flash)
Vectors
and Paths
l Images can be easily modified, moved, combined, and manipulated
in ways that is not possible with bitmaps
Shockwave
Flash format
l SWFs
l Pronounced “swif”
l Not strictly an image format
l Use is increasing exponentially
l Used to insert text and small button images in Dreamweaver
l Clean and highly interactive images
l Older browsers do not support
l But plug-ins make them viewable
More
about SWF
l Images that can be programmed to work as navigation
elements
l Quicker download times than possible with GIF files
Bitmaps
versus Vector Images
Considerations
in Use of Images
l Decide how you will use the image
l Use will impact how to minimize file size
l Decide the size (H,W) of the image before you put it
on your page.
l Resizing bitmaps on the page is not good
l Maintain your original image files
l Allows modification of original and re-export
l Some export processes change the image so it can’t be
modified
More
considerations
l Keep images in separate folders in DW
l Use logic when naming images
l Be careful using image formats that aren’t widely accepted
by browsers
l Test, Test, Test – multiple machines, browsers, etc.
l Demo how to open a gif or jpeg directly in a browser
l May not work in the Lab
l Bus31.gif for demo
Fireworks
l Easy to create graphics
l Can work with vectors and bitmaps
l Can draw a vector image
l Can transform images freely
l Can work with a bitmapped image such as a photograph
l Can work with both in the same document
l Different tools available in each mode
l Vector Mode
l Bitmap Mode
l Photos use bitmap mode
Bitmap
Mode
l Click a button to switch modes
l Striped border around the image (blue and black onscreen)
l Stop button at bottom of document window shows
l Text “Press Stop to exit Bitmap mode” is in the first
part of the status bar
l Use for editing pixels but not for drawing object paths
l To get back to bitmap mode --- double click on image
l Demo with Bear on Bike – JPG
More
about Fireworks
·
Create and optimize graphics
for the web
·
Was not designed to be the most
sophisticated drawing and image manipulation tool
·
Other drawing / image programs
may have more drawing capabilities
·
Import from other drawing programs
into FW
·
Create HTML documents and images
enhanced with JavaScript
·
Create web-specific images such
as animations, buttons, and drop-down menus
Working
with vector images
l Equations are know as paths
l Path
l Like a path through the woods
l Vector images create paths in the same way
l Starting and ending point
l Different characteristics along the way (straight, curved,
benches, varying line thickness, different colors, combos of paths that join
objects in new ways, etc. )
Portable
Network Graphics
l Fireworks Native File Format – PNG
l Ordinary PNGs can be read by most browsers
l But Fireworks PNGs are not suitable for use on a web
page
l FW adds extra information and tracking
l FW maintains a library of styles and effects for each
object and info stored along with the image can create large file sizes
l Optimizing and exporting from native PNG format to more
web friendly
Maintaining
Your Images
l Keep originals in a separate folder
l Probably not on the web site
l Files can be large
l Makes it easier to find originals when you need to revise
Fireworks
Interface
l Fireworks 4
l Interface more closely resembles other Macromedia products
than prior versions
l Floating panels
l Can be moved, modified, opened, closed
l Series of panels
l Select and draw
objects on a canvas
l Apply special
effects
l Optimize your
image
l Perform advanced
operations such as creating animations
l Demo – Opening and Closing Panels
l Don’t need to have a panel open until you need it
Document
Window
l Contains the canvas on which all work is performed
l Figure 11-6 on page 331
l Preview Tabs
l To see how an exported document would appear when optimized
and converted to a JPEG or GIF file
l Icons at to open frequently used panels or modify window
l Magnification
l Stroke, Behaviors, Optimize, Color Mixer
l Typical menu bar - Print, Save, Save As, Copy, Cut, Paste
Canvas
l Canvas is the work area
l Gray area -- outside the document
l Can drag things into gray area – “negative area”
l Can use for rearranging items when working on image.
l Can click in “negative area” to unselect document or
parts of a document
New
Document
l File, New
l Image size
l Resolution
l Typically pick 72 ppi
l No more than 96 ppi for the web due to limits of screen
resolution
l Print documents have larger resolution.
l Canvas Color
l White
l Transparent
l Custom Color (use picker to select)
Tools
Panel
l Used to create or modify objects on the Canvas
l Flyout menus for some tools (DEMO)
l Additional functions
l Small triangle to the right of the tool icon (Click and
hold)
l Groupings of tools by gray lines
l Selection Tools
l Drawing Tools
l Hotspot and Slice Tools
l Panning and Zoom Tools
l Color Tools
l Picture page 323 (figure 11-5) of tools panel and icons
l Number of tools can be daunting – don’t have to use them
all everyday
Selection
Tools
l Used for choosing an object to be modified, copied, deleted,
moved
l Six icons at top of panel
l Pointer
l Select on entire object
l Subselection
l Select an item within a group
More
selection tools
l Marquee
l Select an area that you draw with this tool
l Oval Marquee
l Lasso
l Polygon lasso
l Crop
l Select part of an image that you want to keep and cut
out the rest
l Magic Wand
l Select an area based on color
Drawing
Tools
l Tools for drawing objects on your canvas and for adding
text
l Line – straight line
l Pen – series of points to comment with a line
l Rectangle – with filled center
l Rounded rectangle
l Oval
l Polygon
l Pencil – draw a freeform line
l Paintbrush
l Redraw Path
Editing
Tools
l Tools to modify a selected object
l Scale
l Make object larger, smaller, rotate
l Freeform
l Reshape parts of the path by pushing or pulling
l Eyedropper
l “Grabs” color from somewhere else on screen. Then can
use other tools to apply the tool to other parts of the document
More
Editing Tools
l Paint bucket
l Fill an object with color selected in “Fill Color”
l Knife
l Slices path while in vector mode
l Eraser
l Remove pixels in bitmap mode
l Rubber Stamp
l Duplicate an area of an image onto another area
Hotspot
and Slice Tool
l Tools for web related tasks
l Hotspots
l Areas of an image that can have a URL assigned to them
l This image is often known as image map
l Types of hotspots
l Circular
l Polygon
hotspot
l Rectangle
slice
l Polygon
slice
l Slices
l Divide a large object up into multiple smaller objects
l Allows for faster downloads on web pages
l Hide and Show Slices (another section of toolbar)
l Hide or show overlays that FW creates when hotspots or
slices are created
Panning
and Zooming Tools
l Change how you view the image you are working with
l Pan
l Grabs image and move around on the canvas
l Zoom
l Magnification of an image either larger or smaller
Color
Tools
l Options for adjusting color and color properties of images
l Expansion arrows instead of flyouts – to get to color
palettes
l Stroke Color
l Colors of lines and curves
l Fill Color
l Interior color of closed objects
l Set Default Colors
l Returns stroke and fill to defaults in Edit, Preferences
More
Color Tools
l No Stroke or Fill
l Turn off stroke or fill
l Swap Colors
l Swaps stroke and fill colors
l Color selection box
l Hexadecimal color
l Web Safe, non-safe – 216 colors
l Arrow at top of box
l Select color models
Main
and Modification Toolbars
l Windows only
l To show or Hide these toolbars
l Window, Toolbars, Main, Modify
l Directly below menu bar
l Main toolbar
l Open, New, Save, Print, Undo
l Modification toolbar
l Rotate image
l Group, Ungroup
l Move things forwards and backwards
Context
Menu
l Right clicking – additional options