Fireworks session iii

490 views
434 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
490
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide




















































  • Fireworks session iii

    1. 1. storyboarding with fireworks - III M E T A L S C H O O L
    2. 2. creating a menu bar M E T A L S C H O O L
    3. 3. master page: whole make sure you’re in the master page. under common library panel choose buttons > bevel button-blue M E T A L S C H O O L
    4. 4. master page: whole drag the blue button on to the canvas. select it and adjust w and h properties as shown above in the properties box M E T A L S C H O O L
    5. 5. master page: whole in the center of the button symbol you will see a ‘+’. that indicates it is a button. double-click it to open the button editor M E T A L S C H O O L
    6. 6. master page: whole use the sub-selection tool to choose the color patch on the button (not the text or the gradient but the whole color patch). hover over different regions of the button to get the hang of the 3 areas within it M E T A L S C H O O L
    7. 7. master page: whole with the color segment on the button selected use the color box in the properties panel to choose the solid color of #221100 (dark brown) M E T A L S C H O O L
    8. 8. master page: whole double-click on the name ‘button’ and type in ‘home’ instead. click outside the button. click on the yes button in the update dialog box that follows M E T A L S C H O O L
    9. 9. master page: whole notice in the properties panel, we are working currently with the ‘up’ state. change it to ‘over’ from the drop-down menu to style the next state M E T A L S C H O O L
    10. 10. master page: whole the button vanishes. to bring it back, click on the ‘copy up graphic’ button M E T A L S C H O O L
    11. 11. master page: whole choose the color segment of the button once again with the sub-selection tool and make the color #009900. choose the text region and change to black text #000000 M E T A L S C H O O L
    12. 12. master page: whole click outside the button once. change the state to ‘down’ in the properties panel M E T A L S C H O O L
    13. 13. master page: whole choose the color segment once again and change it back to #221100 (dark brown). change lettering to #cccccc (grey) M E T A L S C H O O L
    14. 14. master page: whole the finished down state of the ‘home’ button M E T A L S C H O O L
    15. 15. master page: whole the home button on the menu bar M E T A L S C H O O L
    16. 16. master page: whole make a copy of the home button by option-dragging it to the right. select the new copy and change the text in the properties box to ‘albums’ as shown above M E T A L S C H O O L
    17. 17. master page: whole the two menu buttons created thus far M E T A L S C H O O L
    18. 18. master page: whole similarly create more buttons and name them as above M E T A L S C H O O L
    19. 19. master page: whole the whole menu bar with 8 buttons M E T A L S C H O O L
    20. 20. master page: whole to enable the links, select the rectangle hotspot tool from the tools menu on the left and draw a rectangle around the ‘gallery’ button M E T A L S C H O O L
    21. 21. master page: whole with the hotspot selected, choose the link as ‘gallery.htm’ as M E T A L shown above. select from below the dividing line S C H O O L
    22. 22. master page: whole similarly for the ‘contact’ button M E T A L S C H O O L
    23. 23. master page: whole ...and the ‘about’ button M E T A L S C H O O L
    24. 24. master page: whole preview all pages in safari M E T A L S C H O O L
    25. 25. master page: whole clean up the layers panel and name the various button layers appropriately M E T A L S C H O O L
    26. 26. M E T A L S C H O O L

    ×