Fireworks MX: Zero to Hero Joyce J. Evans Charles E. Brown Fireworks MX: Zero to Hero © 2002 Apress Originally published by Friends of ED in 2002 AU rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in criticat articles or reviews. The authors and publisher have made every effort in the preparation of this book to ensure the accuracy of the information. However, the information contained in this book is sold without warranty, either express or implied. Neither' the authors, friends of ED nor its dealers or distributors will be held liable for any damages caused or alleged to be caused either directly or indirectly by this book. First Printed October 2002 Trademark Acknowledgements ISBN 978-1-59059-203-8 ISBN 978-1-4302-5209-2 (eBook) DOI 10.1007/978-1-4302-5209-2 - " II""· " ~. ~~;~ "? :A. l6,.-t(:~'~' ~ __ .. C:. J 'Ii"'.)'..,& ~ ~ ;JJ.J;. •_ _ • i~..c Fireworks MX: Zero to Hero Credits Authors Author Agent Joyce J. Evans Laura Jones Charles E. Brown Project Manager Additional Material Vicky Idiens Alan McCann Dan Maharry Reviewers Anna Mayes Commissioning Editor Steve McCormick Lumbotharan Thevathasan Louis Benjamin Ayo Binitie Graphic Editors Nathaniel Renouf Ty Bhogal Todd Simon Matt Clark Steve Cox John Williams Technical Editors Vibha Roy Jake Manning James Robinson Indexer Victoria Blackburn Simon Collins Libby Hayward Elizabeth Scott Proof Reader Alan McCann Melanie Orgee Managing Editor Sonia Mullineux Joyce J. Evans www.joycejevans.com Is a training veteran with over 10 years of experience in educational teaching, tutorial development, and Web design. She has received Editors Choice Awards for her Fireworks 4 FIX and Design book and has authored several computer books including Dreamweaver MX Complete Course and soon to be released Macromedia Studio MX Bible. Joyce is a Team Macromedia Volunteer and her work can also be found in the Macromedia Design/Developer center. Charles Brown www.pclearningcenter.com Resides in northern NJ and holds a doctorate in music. He has studied with Igor Stravinsky, organist Virgil Fox, and pianist Vladimir Horowitz and made his debut with Leonard Bernstein. Because of his work with Stravinsky, he had a close association with artist Pablo Picasso. In 1981 he transferred his creative skills to computers and now does web designs for major corporations. He is also a busy trainer conducting nearly 100 workshops per year and is a frequent speaker at conferences. Dan Maharry Was born in a small seaside town recently notable only for the BBC blowing up a bus on its harbour and for being the birthplace of artist and enfant terrible Tracy Emin. While this may have hindered others, Dan has used this foundation to come to Birmingham, England, a city famous for only one thing - the exit. Here he ponders life, the next words he'll shove in this bio, and his ever present list of things to do from a small flat with a large stereo and several hundred CDs, which multiply like rabbits despite their inanimate nature. It's possible they may be breeding with the DVDs on the shelf above too. His neighbors live in the constant hope that he'll actually get better on his guitar at some point in time. Previously a student at the University of Manchester Institute of Science and Technology studying Maths and Computers, Dan logically spent 95% of the time working for three of the student newspapers writing almost exclusively on film and rock music. He has come to the conclusion that it's much easier to meet rock stars than actors. Alan McCann www.bethanyfilms.com Has been a full-time friend of ED for almost two years now. After graduating with a Media degree he found his spare time activities of writing and web designing, not his passion for film, to be his best route into a career, and has never looked back. Since then he has written for the friends of ED DVision imprint. satisfying his love for the moving image, and also continues to create and develop websites for a wide range of purposes. Since discovering Fireworks with version 4, it has fast become his most essential creative tool and his first fully Fireworks-designed web interfaces can be found at www.bethanyfilms.com and www.star-69.co.uk. Welcome The structure of the book ............................................................................................ 1 What you'll need ..............................................................................................................2 Conventions ...................................................................................................................... 3 Download Files ................................................................................................................3 Support - we're here to help ......................................................................................4 Section 1 1 Web Graphics Be the Fireworks MX interface 7 Using images on the Web ............................................................................................ 8 Vector and Bitmap graphics .......................................................................... 8 Image file formats .......................................................................................... 10 The Fireworks MX interface ...................................................................................... 13 Configuring the interface .............................................................................. 14 Creating a new document ............................................................................ 16 The context-sensitive Property inspector .............................................. 18 2 Creating content: tools and colors 29 The Tools panel ............................................................................................................. .30 Basic Vector tools ........................................................................................... .31 Bitmap tools ...................................................................................................... 36 Advanced vector tools ................................................................................. .46 Canvas tools ..................................................................................................... .51 Working with color ..................................................................................................... .52 The Color Tools ............................................................................................... .52 Understanding color modes ....................................................................... .53 Understanding color palettes ...................................................................... 54 Picking a color to work with ....................................................................... .56 Organizing your colors .................................................................................. 59 More fun with fills .......................................................................................... 60 Creating your own gradient ........................................................................ 63 Adding effects .................................................................................................. 66 Introducing styles ............................................................................................ 67 73 Object properties .......................................................................................................... 74 Layers ................................................................................................................................ 75 Manipulating objects .................................................................................................... 77 Rulers .................................................................................................................. 77 Guides ................................................................................................................7 8 Grids .................................................................................................................... 79 Ordering objects ..............................................................................................8 0 Grouping ............................................................................................................ 83 Copying an object .......................................................................................... 85 Blending Modes ............................................................................................................ 87 Symbols ............................................................................................................................ 89 Creating a symbol .......................................................................................... 90 Editing a symbol .............................................................................................. 92 4 Object behavior: interactivity 97 Behaviors ........................................................................................................................ 98 Common behaviors in Fireworks MX ...................................................................... 99 Hotspots ........................................................................................................................ 100 Editing hotspots ............................................................................................1 05 Image maps vs. navigation bars ................................................................ 105 Slices .............................................................................................................................. 106 Swapping Images ........................................................................................................ 110 Slice Types ...................................................................................................... 112 Export Settings .............................................................................................. 113 Exporting Slices ..............................................................................................1 13 Button symbols ............................................................................................................1 14 The Button library ........................................................................................ 120 The URL library .............................................................................................. 121 Pop-up menus .............................................................................................................. 122 How to create pop-up menus .................................................................. 122 5 Optimization and Exporting 129 Using the Optimize panel to optimize your projects ...................................... 130 Creating custom settings ............................................................................ 131 Creating your own presets ........................................................................ 131 Previewing our settings .............................................................................. 132 JPEG Formats .................................................................................................. 134 ..... , ~ •• . '-'1 - ~ '-iii - ., '.1r~;, ~ ~- 'Q~ ~'-y' ~ ~ tlJ.t . ~~.r., ~~~ • .-. Exporting in Fireworks ..............................................................................................1 36 Exporting slices .............................................................................................. 137 Exporting frames and layers ...................................................................... 138 Exporting selected areas ............................................................................ 138 Using the Export Preview ............................................................................ 140 The optimizing and exporting Wizards .................................................. 140 Exporting HTML ............................................................................................ 143 The Quick Export button ............................................................................ 143 Exporting XHTML .......................................................................................... 144 C5S layers ........................................................................................................ 144 6 Animation 147 Animation principles .................................................................................................. 148 Producing a basic animation ...................................................................... 148 Using symbols and producing keyframe animation ............................ 150 How to use animation symbols to produce animation .................... 153 Tweaking your animations ........................................................................................ 157 The onion-skinning technique .................................................................. 157 Duplicating and distributing frames ........................................................ 157 Frame delay ....................................................................................................1 58 Special effects ................................................................................................ 158 Exporting your animations ...................................................................................... 159 Section 2 7 Working with Vectors 163 Making tabs .................................................................................................................. 164 A tab with round and square corners ....................................................1 65 A tabbed folder ............................................................................................ 165 Make an L shape with a curve ................................................................................ 166 Drawing a heart shape .............................................................................................. 167 Making a decorative ornament .............................................................................. 168 Creating the small spheres with highlighting ........................................1 69 Preparing all the spheres ............................................................................ 171 Making the basic shape ............................................................................ 173 Adding depth to the basic shape ............................................................ 175 Putting the ornament together ................................................................ 176 Editing paths with vector editing tools ................................................................ 176 Freeform tool ................................................................................................ 177 Reshape Area tool ........................................................................................ 178