�ݺ�ߣ

Graphics for Authorware Presented by Amy Blankenship Magnolia Multimedia

Who I am (Amy Blankenship) Authorware user since 1996 Team Macromedia Volunteer Independent 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? Diagrams Buttons Illustrations Aesthetics

Graphic Formats Authorware Internal BMP GIF PNG (alpha) JPG WMF Animation 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 small Create 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 creatively Use the Text tools well Windows 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 art Authorware does not compress .gif images Authorware 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 scale Good for small file sizes Performance 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 size Best 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 Transparent and 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 transparency all the time? Buttons can’t be alpha transparent It takes more resources to display and move alpha transparent graphics If a transparent, matted, or opaque graphic is designed with care, it can look as good as an alpha graphic

�ݺ�ߣ

Graphics For Authorware

More Related Content

Graphics For Authorware