Upload
amyblankenship
View
1.603
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Presentation on creating graphics for Authorware or other multimedia software, with emphasis on transparency and resolution issues
Citation preview
Graphics for Authorware
Presented by
Amy Blankenship
Magnolia Multimedia
Who I am (Amy Blankenship)
Authorware user since 1996Team Macromedia VolunteerIndependent consultant since 2002
Get files
The files used in this presentation can be found at http://www.authorware-amy.com/graphics_supporting_files.zip
Why Use Graphics?
DiagramsButtonsIllustrationsAesthetics
Graphic Formats
Authorware InternalBMPGIFPNG (alpha)JPGWMFAnimation formats (.swf, .avi, etc.)
Graphics Challenges
Visual size (making it fit on screen)File size (making it fit in the package)Appearance (making it look like you want)Transparency/Edges
The Question:
How do we take the formats available and use them to overcome the challenges to create the graphics we need?
Types of Graphics Formats
Vector Graphics A vector graphic is a
mathematical “description” of a shape.
Authorware Internal graphics
Raster Graphics A raster graphic is a
collection of pixels that are “set” when the graphic is created
For our purposes, all imported graphics
For more on raster and vector formats, see http://www.webreference.com/graphics/column31/2.html
The Rules
Use Authorware’s internal drawing tools where possible
Keep graphic file sizes smallCreate graphics at the size you intend to
use them (72 dpi)Use transparency sparingly, especially
alpha transparency
Authorware’s Internal tools
Use the grid to create perfect polygons at a large scale, then resize
Use textured fills creativelyUse the Text tools wellWindows Controls as graphic elements
Let’s Try it!
Launch Internal Drawing.a6p
Imported/Linked Graphics
Imported Graphics No worries with keeping
up with an external file (especially important over the web)
Adds to Authorware file size (.bmp file format automatically compressed)
To reuse the same image without adding to file size, you must use a library
Must re-import when image changes
Linked Graphics To change the image in
the Authorware file, you change the external file and you are done—unless you have to move something
Does not add to Authorware file size, no matter how many times you use it
Must be available to Authorware piece
What is a Pixel?
A pixel is a square that contains a single color.
The display on your computer is made up of a grid of pixels
Raster images are composed of a fixed number of pixels. If you blow up the image, the pixels get
larger. Blow it up enough, and you can see the individual pixels
If you shrink an image, some pixels will no longer be big enough to be visible, and small details will be lost
Resampling an image adds or subtracts pixels, while attempting to maintain image quality
BMP File Format
Best for Imported graphics (Authorware compresses it)
File size can be large, unless you use BMP 8 (256 colors)
Good for line art, and acceptable for continuous tone (photos)
GIF File Format
Often a good compromise between quality and file size
Good for line artAuthorware does not compress .gif imagesAuthorware ignores .gif transparency
Use 100% white for transparent areas
PNG File Format
Can be very small files Fireworks .png files must be exported to remove excess
Fireworks-proprietary information Offers alpha transparency
PSD (Photoshop Document) files also offer alpha transparency, but should be avoided for their large file size
Good for both line art and continuous tone Can slow performance considerably, especially if
you move it
JPG File format
Best for continuous tones (photos)Best if you absolutely have to scaleGood for small file sizesPerformance is often poor (JPG is
compressed)Worst for line art and text (lossy)Blends edges. Do not use for any kind of
transparency.
WMF (Windows Metafile) format
Technically a Vector format Authorware does not re-interpret the pixels
when the image is scaled, so it acts like a raster format
Small file sizeBest for line art
File Format Comparison
Launch Graphics Comparison.a6p
Transparent/Matted Graphics
Matted Makes pixels transparent that are 100% white
and form a continuous area from the edge of the object's bounding rectangle to the object.
Transparent Makes all pixels that are 100% white
transparent, regardless of where they are in the graphic
Imported button graphics are always transparent or matted
Pros and Cons of Transparent Mode
Performance Transparent and Matted graphics will take fewer
resources to display and move than alpha graphics Any form of transparency will take more resources than
opaque graphics
Appearance All white pixels will be transparent, whether you want
them to or not Transparent or matted graphics with anti-aliased edges
will have white pixels on the edge
Pros and Cons of Matted Mode
Performance Transparent and Matted graphics will take fewer
resources to display and move than alpha graphics Any form of transparency will take more resources than
opaque graphics
Appearance All internal white pixels will be opaque, whether you
want them to or not Transparent or matted graphics with anti-aliased edges
will have white pixels on the edge
Examples of Transparentand Matted Graphics
Transparent Mode with Anti-Aliased Edge
Transparent Mode with Hard Edge
Matted Mode with Anti-Aliased Edge
Matted Mode with Hard Edge
Solutions to Transparency problems
If you have a solid background, create an opaque graphic with a matching background
Use transparent mode, making sure your interior white pixels are not pure white
Use alpha transparency
Examples of Other solutions
Opaque graphic that matches the background
Alpha transparent graphic that blends with the background
What is anti-aliasing?
Aliasing-In graphic design, aliasing occurs when a computer monitor, printer, or graphics file does not have a high enough resolution to represent a graphic image or text. An aliased image is often said to have the "jaggies."
Anti-Aliasing-Smoothing or blending the transition of pixels in an image. Anti-aliasing the edges on a graphic image makes the edges appear smooth, not jagged.
Why does anti-aliasing leave white pixels around the edge of the image?
The only color Authorware will make transparent is white
Anti-aliasing blends the color of the foreground object and blends it with the background color
Unless your background is white or close to it, never anti-alias the edge of a transparent or matted graphic (remember, buttons are always transparent or matted)
Alpha Transparency
Each pixel of an image has three normal channels (Red, Green, and Blue)
Some images can contain a fourth channel, called the alpha channel, that contains transparency information for the other channels.
Alpha transparency allows for semi-transparent pixels, including edge pixels
Pixels along the edge of a properly created image with alpha transparency will blend into whatever is behind them
Let’s Practice
Open your copy of Fireworks
Example of alpha transparency
The semi-transparent shadow of the truck blends into both graphics
The anti-aliased edges of the truck blend into the colors behind them seamlessly
Why not use Alpha transparencyall the time?
Buttons can’t be alpha transparentIt takes more resources to display and
move alpha transparent graphicsIf a transparent, matted, or opaque graphic
is designed with care, it can look as good as an alpha graphic
The Rules
Use Authorware’s internal drawing tools where possible
Keep graphic file sizes smallCreate graphics at the size you intend to
use them (72 dpi)Use transparency sparingly, especially
alpha transparency