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