VSTE - 2003 Annual State Technology Conference

Macromedia Fireworks MX

Presenter: Leah Yates, Web Analyst, Albemarle County Public Schools Co-Presenter: Pat Harder, Albemarle County Public Schools

Introduction:

Macromedia Fireworks MX is the easiest way to create, optimize, and export interactive graphics in a single, web-centric environmentfrom simple graphical buttons to complex rollover effects and pop-up menus.
Whats New in Fireworks MX?
New user interface better organized and consistent with other MX applications Property Inspector displays options that change according to the current tool or object selection Tools Panel divided into clearly labeled sections for easy tool selection New tools for editing images blur, sharpen, dodge, burn, smudge, gradient Quick Export Option
Getting Started - The Basics:
*Bitmap vs. Vector Images Bitmap Photographs, usually saved as.jpg Bitmap images are made up of pixels, which are tiny squares that combine like the tiles of a mosaic to create an image. Vector Drawings, graphics, usually saved as.gif A vector object is a computer graphic whose shape is defined by a series of lines and curves, called vectors, connected by points that form a path. The workspace consists of: - The Toolbar (Tools Panel) - The Document Window (which contains the work area called the canvas) - Other Floating Panels (Stroke, Optimize, Color Mixer, etc) Tools Panel: The Tools panel includes dozens of tools, some of which are arranged in tool groups. Some tools are specifically used for bitmap images, some for vector images and some for both.
___________________________________________________________
Hands on Example #1 Editing an existing image (bitmap) 1. File > Open, Desktop | FireworksMX | Images | flower.jpg 2. Select the crop tool, 3. Draw a box around the area of the image that you would like to keep.
4. If necessary, drag the black handles to resize the crop area. 5. Double-click in the crop area. The image should be cropped!
*Other ways to crop and select a bitmap: lasso, marquee, magic wand. 6. File > Export, Desktop | FireworksMX | Completed | Save As: cropped *By default the image with be saved as a.gif file. To change these settings use File > Export Preview.
1. File > Open, Desktop | FireworksMX | Images | school.jpg 2. Select the Blur tool , click and drag over the image. Note the changes. Experiment with the Dodge, Burn and Smudge tools. 3. File > Export Preview, change saved settings to JPEG Better Quality or JPEG Smaller File to experiment with the file size. Click Export. Save as: Desktop |FireworksMX | Completed |schoolopt.jpg.
Hands on Example #2 Creating/editing a new image (vector) 1. File > New, The New Document dialogue box will open. 2. Create a new document with the following specifications: Width 500 Pixels Height 500 Pixels Resolution 72 Pixels/Inch Canvas Color Transparent Click Ok 3. Select the Rectangle tool. Draw a rectangle (or any shape of your choice) on the canvas.
*To select a different shape tool, click and hold on the rectangle tool and choose a different tool. *The Properties Inspector displays the options for any given tool or object. 4. Change the fill and stroke colors of the object by selecting the appropriate icon in the Colors category.

5. Use the Scale tool

to resize/rotate the object as desired.
6. Select the Text tool. Draw a text box inside the object and type some text. Change the font, size, color, etc using the properties inspector.
7. Use the pointer tool to select your object. (There will be light blue handles in each corner when the object is selected). In the Properties Inspector click on the (+) next to the word Effects. 8. Choose Shadow and Glow and then select Glow. *To remove an effect, simply click on the checkbox next to the name of the effect. *To edit an effect, click on the blue i to open the options window.
9. Click on the drop-down arrow next to the word Solid. Select a different fill type such as Linear, Radial or Starburst. Note the changes that are made to your object (make sure your object is selected before changing the fill type). Experiment with the different Stroke and Fill options. 10. Modify > Trim Canvas, to eliminate any excess white space around the object. 11. File > Save As, Desktop | FireworksMX | Completed | object.png 12. File > Export, Desktop | Fireworks 4 | Completed | object.gif

Learning More Advanced:

Now that you know the basic tasks of creating and editing images with Fireworks, you are ready to learn how to incorporate these graphics into your web pages.
Hands on Example #3 Creating an image map 1. File > Open, Desktop | FireworksMX | Images | map.gif 2. Select the Rectangle Hotspot tool. Draw a square inside Colorado.
3. In the Properties Inspector type: http://www.colorado.edu in the box next to Link. File > Preview in Browser (F12), to test the hotspot.
*When clicking on the state of Colorado, the website for the University of Colorado should load. If an error occurs, go back and check your spelling to make sure the address was typed in correctly. 4. Experiment with the circle and polygon hotspot tools to create irregular-shaped hotspots. Add URLs of your choice and test in the browser. 5. File > Save As, Desktop | FireworksMX | Completed | imagemap.png 6. File > Export, Desktop | FireworksMX | Completed | imagemap *When an image map is exported, two files are saved (.gif AND.html). When inserting an image map into a page in Dreamweaver, make sure to use the html file. Website Example: Murray Elementary School (Library Page) http://www.k12albemarle.org/MurrayElem/Estep/Library/libraryhome.html
_________________________________________________________
Inserting Images in Dreamweaver: 1. Launch Dreamweaver and create a blank document. File > New 2. File > Save As: Desktop | FireworksMX | Completed | test1.html 3. Insert > Image: Desktop | FireworksMX | Completed | cropped.gif and/or object.gif 4. Insert > Interactive Images > Fireworks HTML: Desktop | FireworksMX | Completed | imagemap.html *Dreamweaver 3 users, choose Insert > Media > Fireworks HTML. 4. File > Preview in Browser, to test the hotspot. 5. In Dreamweaver, click on the image map and choose Modify > Selection Properties. Select one of the hotspot tools and draw a hotspot over a state. 6. In the box next to the word Link, type in a URL to any website. File > Save. File > Preview in Browser to test the new hotspot. *Image maps can be created in either Fireworks or Dreamweaver. One advantage of creating image maps in Dreamweaver is the ability to quickly link to other pages/files within a site.

Hands on Example #4 Creating a rollover button using the button editor 1. File > Open, Desktop | FireworksMX | Completed | object.png 2. Click on the outside edge of the rectangle, hold down shift and click on the text.
Modify > Group, to combine the shape and text into one object. 3. Modify > Symbol > Convert to Symbol Select button from the list of options. Give your button a name, (ex. buttontest) Click OK
4. You should now see a green layer over the top of your object. This is called a slice. A slice lets Fireworks know that this object is going to perform a certain behavior. In this case, the behavior is going to be a simple rollover. 5. Double-click on your button. The button editor should appear. This is where you can define the different states of the button. You should see 4 tabs. Up, Over, Down, Over While Down and Active Area. 6. The Up Tab displays the button in its current state. Click the Over tab. In the bottom, right-hand corner click the Copy Up Graphic button. This makes a duplicate copy of the object on the Up tab.
7. Now make a change to the object in the Over state. For example, change the background color or edit the text. (If you get a message that says Update the text in other button states? make sure to click NO because you only want to change the over state.) 8. Once you have made a change, click the Down Tab. In the bottom, right-hand corner click the Copy Over Graphic button. Make another change to the button (text, color, size, etc).
9. Click the Up, Over and Down tabs one at a time. The button should look somehow different in each state. Example:

Up State

Over State

Down State

10. Close the button editor window (the changes will be saved automatically) 11. In the bottom, left corner of the toolbar (under the View heading) click on the Hide/Show Slices icon.
12. Next click the Preview tab in the document window. This will allow you to test the different states of the button. Move the mouse over the button and click on it, you should be able to see the changes you made to each state. 13. Click on the Original Tab. If you need to go back and edit your button, double-click on it to open the button editor and make the necessary changes. 14. Modify > Trim Canvas, to remove any excess white space around the button. 15. File > Save As, Desktop | FireworksMX | Complete | buttontest.png 16. File > Export. Desktop | FireworksMX |Complete | buttontest * When a rollover button is exported, two files are saved (.gif AND.html). When inserting a button into a page in Dreamweaver, make sure to use the html file. Website Example: Agnor-Hurt Elementary School http://www.k12albemarle.org/AgnorHurt/home.html
Hands on Example #5 Creating a pop-up menu 1. Using the rectangle tool, draw a rectangle on the canvas. Change the size and color as desired. 2. Using the text tool, draw a text box inside the rectangle. Type the words Search Engines. Edit and position the text as desired. 3. In order to add a pop-up menu, a slice must be created. Click on the rectangle and choose Edit > Insert > Slice. A green layer will appear over the rectangle. 4. Modify > Pop-up Menu > Add Pop-up Menu, the Pop-up Menu Editor will appear. In the box next to text type the word Google. In the box next to Link: type the address: http://www.google.com. Click the + to add this item to the list. Add two more items following the same procedure: Yahoo http://www.yahoo.com and MSN http://www.msn.com, then click Next. 5. Edit the font, size and color options as desired. Click Done. 6. The pop-up menu is represented by a blue outlined table on top of the slice. Move your mouse over the table until it becomes a hand. Click and drag the table to the location that you would like the pop-up menu to appear on the page. Modify > Trim Canvas. 7. File > Preview in Browser, to test the pop-up menu. (It will not be displayed within the Fireworks application). 8. File > Save As, Desktop | FireworksMX | Completed | popup.png 9. File > Export, Desktop | FireworksMX | Completed | popup * When a pop-up menu is exported, two types of files are saved (.gif AND.html). When inserting a pop-up menu into a page in Dreamweaver, make sure to use the html file.

Hands on Example #6 Creating a disjointed rollover
A disjointed rollover means that when you move your mouse over one object, a change is made to a different object. 1. File > New, The New Document dialogue box will open. 2. Create a new document with the following specifications: Width 500 Pixels Height 500 Pixels Resolution 72 Pixels/Inch Canvas Color Transparent Click Ok 3. Draw two objects on the canvas side by side (for example: a rectangle and a circle). Edit these objects as desired (color, text, size, etc).
4. Window > Frames, to open the frames panel. Click on the white arrow on the right side of the frames panel. Select Create Duplicate Frame. Insert 1 new frame after the current frame, and click OK.
5. Click on Frame 2 and make a change to the circle. If you click back and forth between Frame 1 and Frame 2, you should see a change made to the circle.
, draw a slice around the square and another around the 7. Click on Frame 1. Using the slice tool circle. A green layer will appear on top of each image.
8. Using the subselection tool (white arrow) , click on the slice (green layer) thats on top of the square object. You will know that its been selected when a light blue line appears around it. 9. Window > Behaviors, to open the Behaviors panel. Click on the plus sign Select Swap Image from the menu. to add a behavior.
10. The Swap Image window will appear. Click on the slice to the far right (this represents the slice over the circle). Show the swamped image from Frame 2. When rolling over the current slice, swap an image in the slice chosen below. *In other words, when rolling over the square, swap the image on Frame 1 with the image on Frame 2 within the slice area over the circle.
11. Click Hide/Show Slices
, so that the slices disappear.
12. Click the Preview tab. Move your mouse over the square. You should see the change made to the circle! 14. Click on the Original tab and make changes if necessary. Otherwise, you are ready to save and export your image. 15. File > Save As, Desktop | Fireworks4 | Completed | disjointed.png 16. File > Export, Desktop | Fireworks4 | Completed | disjointed * When a disjointed rollover is exported, all files are saved with it (.gif AND.html). When inserting a popup menu into a page in Dreamweaver, make sure to use the html file.

Website Example: Greer Elementary School http://www.k12albemarle.org/Greer/home.html
Hands on Example #7 Creating an animation 1. File > New, The New Document dialogue box will open. Create a new document with the following specifications: Width 500 Pixels Height 500 Pixels Resolution 72 Pixels/Inch Canvas Color Transparent Click Ok 2. Click and hold on the rectangle tool. Select the ellipse tool. In the bottom, left hand corner of the canvas draw a small circle. Fill it with a color of your choice.
3. Window > Frames, to open the Frames Panel. Click on the white rectangle in top left corner and select Duplicate Frame. Insert the new frame after the current frame, Click OK 4. In the Frames Panel, click on Frame 2. It should be highlighted in dark blue. This means that the frame is selected and is ready to be edited. With the arrow tool, click on your circle and drag it up and to the right.
5. Click on the onion skin icon and select Show All Frames. This will allow you to see Frames 1 and 2 at the same time. The selected frame (in this case, Frame 2) will show up in its true color. All other frames (in this case, Frame 1) will be a lighter shade so that you know which frame is actually selected. You can edit either object be clicking to select it.
6. Click on the little box next to Frame 2 so the onion skinning is turned off and Frame 2 is highlighted. (The little onion skin icon should only be in the box next to frame 2, not both)
7. Click the black arrow and create another duplicate frame after the current frame. You should now have three frames. Click on Frame 3 (the text Frame 3 not the little box next to it) so that it is selected. Move your ball up and to the right again. Then turn the onion skinning back on so that you can see all three frames at once.
8. Edit the position of each circle so that it appears that they are moving in an arch. Click on the ball that is on Frame 3 and then click in the box next to Frame 3 in the Frame Window (to turn onion skinning off). Click the Black arrow and select Duplicate Frame. This time add 3 frames after the current frame. You should now have 6 frames total. 9. Click on Frame 4, drag the ball over to the right. Click on Frame 5, drag the ball down and to the right. Click on Frame 6, drag the ball down and to the right. (The position of each ball doesnt really matter at this point.) Now turn the onion skinning on and Show all Frames. Click and drag the each ball so that you form a relatively smooth arch like this:
10. Click on the Looping icon and select a number of choice or select Forever. You can also select No Looping if you only want the animation to play once. 11. Click the Preview Tab and then click the white, play button at the bottom, left hand corner.

*Each Frame will be displayed in order. This creates an animation! Click the stop button to end the animation. 12. Click on the Original Tab. To edit the amount of time between each frame double click on the 7 to open the frame delay window. Any number higher than 7 will cause the frames to display at a slower rate, lower than 7 will be faster. 13. Modify > Trim Canvas, to eliminate excess white space. 14. File > Export Preview. On the left-hand side under Format select Animated GIF. Click Export, Save As: Desktop | Fireworks4 | Completed | ball.gif 15. To insert the animated gif into a web page, simply open a page in Dreamweaver, Insert > Image and select the image. File > Preview in Browser to test the animation.
Questions? Comments? Email me at: lyates@albemarle.org Materials from this workshop can be found on the following website: http://www.k12albemarle.org/FireworksMX/ Thank you for attending this workshopenjoy the rest of the conference!