Graphics For Authorware

1,884 views
1,758 views

Published on

Presentation on creating graphics for Authorware or other multimedia software, with emphasis on transparency and resolution issues

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,884
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Graphics For Authorware

  1. 1. Graphics for Authorware Presented by Amy Blankenship Magnolia Multimedia
  2. 2. Who I am (Amy Blankenship) <ul><li>Authorware user since 1996 </li></ul><ul><li>Team Macromedia Volunteer </li></ul><ul><li>Independent consultant since 2002 </li></ul>
  3. 3. Get files <ul><li>The files used in this presentation can be found at http://www.authorware-amy.com/graphics_supporting_files.zip </li></ul>
  4. 4. Why Use Graphics? <ul><li>Diagrams </li></ul><ul><li>Buttons </li></ul><ul><li>Illustrations </li></ul><ul><li>Aesthetics </li></ul>
  5. 5. Graphic Formats <ul><li>Authorware Internal </li></ul><ul><li>BMP </li></ul><ul><li>GIF </li></ul><ul><li>PNG (alpha) </li></ul><ul><li>JPG </li></ul><ul><li>WMF </li></ul><ul><li>Animation formats (.swf, .avi, etc.) </li></ul>
  6. 6. Graphics Challenges <ul><li>Visual size (making it fit on screen) </li></ul><ul><li>File size (making it fit in the package) </li></ul><ul><li>Appearance (making it look like you want) </li></ul><ul><li>Transparency/Edges </li></ul>
  7. 7. The Question: How do we take the formats available and use them to overcome the challenges to create the graphics we need?
  8. 8. Types of Graphics Formats <ul><li>Vector Graphics </li></ul><ul><ul><li>A vector graphic is a mathematical “description” of a shape. </li></ul></ul><ul><ul><li>Authorware Internal graphics </li></ul></ul><ul><li>Raster Graphics </li></ul><ul><ul><li>A raster graphic is a collection of pixels that are “set” when the graphic is created </li></ul></ul><ul><ul><li>For our purposes, all imported graphics </li></ul></ul>For more on raster and vector formats, see http://www.webreference.com/graphics/column31/2.html
  9. 9. The Rules <ul><li>Use Authorware’s internal drawing tools where possible </li></ul><ul><li>Keep graphic file sizes small </li></ul><ul><li>Create graphics at the size you intend to use them (72 dpi) </li></ul><ul><li>Use transparency sparingly, especially alpha transparency </li></ul>
  10. 10. Authorware’s Internal tools <ul><li>Use the grid to create perfect polygons at a large scale, then resize </li></ul><ul><li>Use textured fills creatively </li></ul><ul><li>Use the Text tools well </li></ul><ul><li>Windows Controls as graphic elements </li></ul>
  11. 11. Let’s Try it! <ul><li>Launch Internal Drawing.a6p </li></ul>
  12. 12. Imported/Linked Graphics <ul><li>Imported Graphics </li></ul><ul><ul><li>No worries with keeping up with an external file (especially important over the web) </li></ul></ul><ul><ul><li>Adds to Authorware file size (.bmp file format automatically compressed) </li></ul></ul><ul><ul><li>To reuse the same image without adding to file size, you must use a library </li></ul></ul><ul><ul><li>Must re-import when image changes </li></ul></ul><ul><li>Linked Graphics </li></ul><ul><ul><li>To change the image in the Authorware file, you change the external file and you are done—unless you have to move something </li></ul></ul><ul><ul><li>Does not add to Authorware file size, no matter how many times you use it </li></ul></ul><ul><ul><li>Must be available to Authorware piece </li></ul></ul>
  13. 13. What is a Pixel? <ul><li>A pixel is a square that contains a single color. </li></ul><ul><li>The display on your computer is made up of a grid of pixels </li></ul><ul><li>Raster images are composed of a fixed number of pixels. </li></ul><ul><ul><li>If you blow up the image, the pixels get larger. Blow it up enough, and you can see the individual pixels </li></ul></ul><ul><ul><li>If you shrink an image, some pixels will no longer be big enough to be visible, and small details will be lost </li></ul></ul><ul><ul><li>Resampling an image adds or subtracts pixels, while attempting to maintain image quality </li></ul></ul>
  14. 14. BMP File Format <ul><li>Best for Imported graphics (Authorware compresses it) </li></ul><ul><li>File size can be large, unless you use BMP 8 (256 colors) </li></ul><ul><li>Good for line art, and acceptable for continuous tone (photos) </li></ul>
  15. 15. GIF File Format <ul><li>Often a good compromise between quality and file size </li></ul><ul><li>Good for line art </li></ul><ul><li>Authorware does not compress .gif images </li></ul><ul><li>Authorware ignores .gif transparency </li></ul><ul><ul><li>Use 100% white for transparent areas </li></ul></ul>
  16. 16. PNG File Format <ul><li>Can be very small files </li></ul><ul><ul><li>Fireworks .png files must be exported to remove excess Fireworks-proprietary information </li></ul></ul><ul><li>Offers alpha transparency </li></ul><ul><ul><li>PSD (Photoshop Document) files also offer alpha transparency, but should be avoided for their large file size </li></ul></ul><ul><li>Good for both line art and continuous tone </li></ul><ul><li>Can slow performance considerably, especially if you move it </li></ul>
  17. 17. JPG File format <ul><li>Best for continuous tones (photos) </li></ul><ul><li>Best if you absolutely have to scale </li></ul><ul><li>Good for small file sizes </li></ul><ul><li>Performance is often poor (JPG is compressed) </li></ul><ul><li>Worst for line art and text (lossy) </li></ul><ul><li>Blends edges. Do not use for any kind of transparency. </li></ul>
  18. 18. WMF (Windows Metafile) format <ul><li>Technically a Vector format </li></ul><ul><ul><li>Authorware does not re-interpret the pixels when the image is scaled, so it acts like a raster format </li></ul></ul><ul><li>Small file size </li></ul><ul><li>Best for line art </li></ul>
  19. 19. File Format Comparison <ul><li>Launch Graphics Comparison.a6p </li></ul>
  20. 20. Transparent/Matted Graphics <ul><li>Matted </li></ul><ul><ul><li>Makes pixels transparent that are 100% white and form a continuous area from the edge of the object's bounding rectangle to the object. </li></ul></ul><ul><li>Transparent </li></ul><ul><ul><li>Makes all pixels that are 100% white transparent, regardless of where they are in the graphic </li></ul></ul><ul><li>Imported button graphics are always transparent or matted </li></ul>
  21. 21. Pros and Cons of Transparent Mode <ul><li>Performance </li></ul><ul><ul><li>Transparent and Matted graphics will take fewer resources to display and move than alpha graphics </li></ul></ul><ul><ul><li>Any form of transparency will take more resources than opaque graphics </li></ul></ul><ul><li>Appearance </li></ul><ul><ul><li>All white pixels will be transparent, whether you want them to or not </li></ul></ul><ul><ul><li>Transparent or matted graphics with anti-aliased edges will have white pixels on the edge </li></ul></ul>
  22. 22. Pros and Cons of Matted Mode <ul><li>Performance </li></ul><ul><ul><li>Transparent and Matted graphics will take fewer resources to display and move than alpha graphics </li></ul></ul><ul><ul><li>Any form of transparency will take more resources than opaque graphics </li></ul></ul><ul><li>Appearance </li></ul><ul><ul><li>All internal white pixels will be opaque, whether you want them to or not </li></ul></ul><ul><ul><li>Transparent or matted graphics with anti-aliased edges will have white pixels on the edge </li></ul></ul>
  23. 23. 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
  24. 24. Solutions to Transparency problems <ul><li>If you have a solid background, create an opaque graphic with a matching background </li></ul><ul><li>Use transparent mode, making sure your interior white pixels are not pure white </li></ul><ul><li>Use alpha transparency </li></ul>
  25. 25. Examples of Other solutions Opaque graphic that matches the background Alpha transparent graphic that blends with the background
  26. 26. What is anti-aliasing? <ul><li>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 &quot;jaggies.&quot; </li></ul><ul><li>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. </li></ul>
  27. 27. Why does anti-aliasing leave white pixels around the edge of the image? <ul><li>The only color Authorware will make transparent is white </li></ul><ul><li>Anti-aliasing blends the color of the foreground object and blends it with the background color </li></ul><ul><li>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) </li></ul>
  28. 28. Alpha Transparency <ul><li>Each pixel of an image has three normal channels (Red, Green, and Blue) </li></ul><ul><li>Some images can contain a fourth channel, called the alpha channel, that contains transparency information for the other channels. </li></ul><ul><li>Alpha transparency allows for semi-transparent pixels, including edge pixels </li></ul><ul><li>Pixels along the edge of a properly created image with alpha transparency will blend into whatever is behind them </li></ul>
  29. 29. Let’s Practice <ul><li>Open your copy of Fireworks </li></ul>
  30. 30. Example of alpha transparency <ul><li>The semi-transparent shadow of the truck blends into both graphics </li></ul><ul><li>The anti-aliased edges of the truck blend into the colors behind them seamlessly </li></ul>
  31. 31. Why not use Alpha transparency all the time? <ul><li>Buttons can’t be alpha transparent </li></ul><ul><li>It takes more resources to display and move alpha transparent graphics </li></ul><ul><li>If a transparent, matted, or opaque graphic is designed with care, it can look as good as an alpha graphic </li></ul>
  32. 32. The Rules <ul><li>Use Authorware’s internal drawing tools where possible </li></ul><ul><li>Keep graphic file sizes small </li></ul><ul><li>Create graphics at the size you intend to use them (72 dpi) </li></ul><ul><li>Use transparency sparingly, especially alpha transparency </li></ul>

×