Adobe Fireworks CS6 Classroom in a Book is now available!

I’m so excited! I just received copies of my latest book on Adobe Fireworks. Hard to describe the feeling of seeing your words in print. But after months of conceptualizing, writing, re-writing, editing and revising, it’s finally here!

My new book is now avaialble!

My new book is now available!

I had a wonderful editing team to work with on the Project. Sheri German, my friend and Technical Editor  (2nd time in a row) for this book kept me on task and was did a great job of making sure steps were accurate and clear. I owe her so much for the attention to detail she paid to this book.

Linda Laflamme, my Developmental and Copy Editor, did an amazing job of getting into my head, helping to to flesh out details in an easy to understand, but concise and personable manner.

And of course, Valerie Witte, my Production Editor at Peachpit, was super-supportive, incredibly patient and always there when I needed her. She is a joy to work with.

I’d also like to thank my son, Joseph Hutt (himself and aspiring writer and creative individual) for allowing me to use photos I took of him in some of the exercises in the book. Likewise, thanks go to my very good friend Tom Green, fellow writer, teacher and mentor of mine, and his son Rob Green, for giving me permission to use photos of them in the book as well.

I am very appreciative of the fact that Peachpit Press recognized the need for  text on Fireworks, where many publishers have not.

Thanks also to all those people whom I’ve talked with, griped with or who so generously shared with me their skills, opinions or sample art to use in sections of the book.

I’m very pleased with this edition of the Fireworks Classroom in Book. It’s the third CiaB I’ve written on Fireworks, and I feel it’s the best one so far. My goal with this edition was to rewrite as much of the book as possible, and refresh as much of the art work and exercise files as was feasible. I think I met my goal, while also adding completely new content and addressing feedback from previous editions.

It’s also a bit more of a personal book for me, because so much of the artwork – photos, interfaces, wireframes – are of my own creation. Many images from my yearly camping trip with Joe, Tom and Rob (and Marley, the camp mascot) appear in this edition, so while it’s an instructional text, it also contains memories for me.

What is Classroom in a Book?

Back cover of the book, featuring Tom Green in a slideshow interface.

Back cover of the book, featuring Tom Green in a slideshow interface.

For those of you who’ve not picked up a Classroom in a Book (CiaB) before, these texts are both reference and how-to manuals in one. Project based, they take users through an introduction to the software’s interface, and then get right into using the tools to produce content. In short, hopefully answering not just the how, but also the “why”, when possible.

While not a replacement for official documentation, it’s hoped you will glean ideas, workflows and tips from these books that you might not necessarily get from the manual.

If you’re interested in designing, wireframing or protoyping for the web, applications or even just doing more with your screen graphics for PowerPoint, I think this book gives you just what you need to use Fireworks effectively.

If you’re a teacher, I’ve also written a companion guide for the book to help you plan out lessons, and giving you summaries of what each chapter (lesson) covers.

If you pick up a copy, please let me know what you think. I would love to get feedback on the book.

38 Responses to Adobe Fireworks CS6 Classroom in a Book is now available!

  1. James Welch says:

    I think you have done a fine job on this book. I’ve had no problems with the tutorials until page 74, where I was unable to open using Fireworks CS6 the file sand_river1.jpg on either the CD or the copy downloaded from the website. The same problem happened on page 79 because I could not open trash_sign.jpg either. I found a workaround: open the files in Photoshop CS6, save them, and then open them in Fireworks CS6.

    • Jim Babbage says:

      Thanks very much for catching and posting this problem James. I am arranging with Peachpit to post versions of the two image files that open properly in Fireworks.

  2. Shane says:

    Found the same problem. I downloaded the files 3 days ago. Roughly a month after the post by James Welch. Please fix this problem as I don’t have access to Photoshop for the workaround. This lesson is nearly useless to me because of this problem. Thanks!

  3. Ammar Midani says:


    if you are the author of other CIB titles for Photoshop , Illustrator & InDesign i have a few comment i would like to share.



  4. Jim Babbage says:

    Sorry, the only CiB I’ve written is the Fireworks series. I have nothing to do with the other books.

  5. John says:

    Is there any update on the images on the CD that don’t work? I don’t have photoshop to resolve the problem as suggested above. Thanks.

  6. Jenny says:

    Been making my way through this book – this is my first time ever using Fireworks and have not had many problems…I am stuck on one thing:
    Page 191 for “Choosing optimization settings” step 3 = Set the upper-right compression to 80 – is that the Quality? or should that be changed to a gif and the loss changed to 80%? \

    • Jim Babbage says:

      Hi there: I’m glad you’re finding the book helpful. In answer to your question, Step 3 is referring to the upper right preview window being selected, then setting the compression quality to 80. So the Export file format would need to be jpeg in order to do this. Sorry for the confusion!

  7. Jenny says:

    Ok – the image on page 192 answered my question! It does make it a little confusing changing the terminology when the Quality is changed for both.

  8. Jenny says:

    Hey Jim!! I’m now on the final (supplemental) Lesson 14 and when I open the index.html from the near_north_enhanced_web folder the live view is not the same as shown in your images…the only rule for the page is the near_north_mobile.css – should this have a jquery css? It’s not a huge deal, but would love to look at it and how it functions!

    Otherwise – the book has been very helpful and I am excited to update web photos and create a new mobile website for the whitewater rafting company I work for! 🙂
    thanks, Jenny

    • Jim Babbage says:

      Hi Jenny!

      So sorry for the tardy reply. I’ve been doing a lot of business travel lately. I’m so very happy you’ve found the book helpful.

      In lesson 14, it appears the link to the CSS is broken in the html markup. You can either use Dreamweaver to repoint to the jquery-mobile folder, or manually adjust the link within the code in the index.html page.

      Sorry about that!

  9. Vladi says:

    Great book, but where I can find the files (link). I just reinstal my PC and lose the files.

    • Jim Babbage says:

      While you can feel free to substitute your own files and graphics in the exercises, the sample files used in this book can be downloaded from the book’s product page on To access the lesson files, just log in to or join (it’s free), then enter the book’s ISBN. After you register the book, a link to the lesson files will be listed on your Account page under Registered Products.

      Hope this helps

  10. Monica says:

    I’m on Ch 9 Using Symbols and everything is going good, however, I noticed the file nn_webpage.fw.png already has the banner/header that was created in Ch 7 (near_north_banner.fw.png), which is unfortunate because I would have liked to learn how to add the banner. So I attempted to import the file (near_north_banner.fw.png) into the website layout which I created in Ch 3 (webpage.fw.png). Initially, I attempted to drag the banner image, but the dimensions weren’t coming out right. So then I just clicked on the page and the banner was imported with the correct dimension, however, portions of the image that had been masked in Ch 7 were visible and I don’t know how to fix that or the correct way to import. I don’t want to flatten the banner so would you please provide instructions on how you put (imported) the banner on the nn_webpage.fw.png file….it would be greatly appreciated. Thank you

    • Jim Babbage says:

      Hi Monica:

      Thank you for your question, and kudos for wanting to go beyond the exercise!
      the banner in the exercise file was completely built from scratch within the layout and actually extends outside of the document area. By looking at the objects, it seems I remasked certain portions of the banner to make things work the way I wanted, without flattening it. However, for your purposes, there is another method, that makes use of the CH 7 completed banner. What you can do is this:

      1 – Delete the objects in the header in the CH 9 file
      2 – Open the completed banner from CH 7
      3 – Go to the Preferences in Fireworks and choose the EDIT category
      4 – Make sure that the option to delete pixels when cropping is enabled. This permanently affects the image, so be prepared to save a copy of your work.
      5 – Select the crop tool and drag a crop around the visible area of the banner. FW should snap to the edges pretty easily.
      6 – Tap the Enter key to crop the file.
      7 – Press Command + A or Ctrl +A to select all the objects in the new banner.
      8 – Press Command + G or Ctrl + G to group all the banner objects. This puts all the objects in one layer, the text layer most likely.
      9 – Delete the empty layers in the Layers panel, then rename the layer holding the banner to “header”.
      11 – Save the file to your desktop.
      12 – Return to the nn_webpage.fw.png file and make sure the header layer is active.
      13 – Choose File > Import and browse to your newly saved banner.
      14 – Import the banner as you would any other file, placing the import cursor at the top left of the layout.
      15 – Tap the mouse (twice if you’re using a Mac) to import the banner at full size.

      The grouped image will be brought in as a single object, but you can always ungroup it by selecting the object and pressing Command + Shift + G to ungroup. I hope this helps!

      • Monica says:

        Hi Jim,
        Wow, thank you for answering my question and so quickly. Kudos to you…I think you are the only author I’ve contacted with a question to every answer!!!

        Anyway I followed your instructions and it worked like a charm and to pat myself on the back I was thinking about cropping but I was fearful the crop would flatten the file.

        Just to clarify the process… so when importing a file masks you might have some of the mask area visible. I noticed when I originally imported (before cropping) only two of the masks were visible – the loon and tracks. So if the banner had been created at the time the layout was created the masks wouldn’t be visible, correct?

        So far I like working in Fireworks for web layout better than Photoshop. For me Fireworks is more intuitive and easier to work in than Photoshop. I just wish there were more advanced resources/books/tutorials for learning Firework…maybe you can write an advanced book? 🙂

        BTW: I’ve enjoyed your book…the tone and instructions are easy to read and follow.


        • Jim Babbage says:

          You’re very welcome, Monica. Remember, the nice thing about Fireworks (or Photoshop, or Illustrator or InDesign etc) is that you can always undo many steps, so long as you haven’t closed the file. I’m really happy to hear you like the book and that you’re finding it useful.

          To answser your question:

          …when importing a file masks you might have some of the mask area visible. I noticed when I originally imported (before cropping) only two of the masks were visible – the loon and tracks. So if the banner had been created at the time the layout was created the masks wouldn’t be visible, correct?

          Well, I was being a little lazy in that original CH 7 project, and I only worked on masking visible areas, so anything outside the canvas I ignored. If you manually create your masks with vector shapes, though, that will give you a bit more finite control.

          The reaon I grouped everything in my instructions was to get all the assets into one layer. Technically, you can just crop the file as it is and not do any layer changes, but when you import the file, Fireworks will respect and maintain the existing layers, so things might no look the way you expect. Grouping just simplifies the process. Note in the actual web page mockup, I only have 1 layer whihc contains all the banner objects. In comparison to CH 7, where I had you create distinct layers for better control over the artwork.

          I do have practically a book full of tutorials on CommunityMX:

          Many are free, and many are low cost to buy.


  11. Pingback: FWPolice » Contest 1: Iconic Valentines

  12. Monica says:

    Hi Jim,
    I just finished Ch 12 and everything went pretty good except for some minor glitches doing the “Correcting Errors” section and using the find and replace. Anyway I figured out what I was doing wrong. But what is puzzling me is where are the images store for creating the the remote rollovers for the campsite page? On page 267 step 7 after dragging the behavior handle to the content slice we get the Swap Image dialog box and we are able to select the appropriate image for the icon, but where are those actual assets store? I see we can select a particular state and then the image shows up in the Layers panel so if we need to edit it we can, but how were they created and then saved so they show up in Swap Image dialog box? I’m just not comprehending the process so if I want to do the same thing on my website.


    • Jim Babbage says:

      Hi Monica: The images themselves can be found on the other states within the PNG file. I used some free vector artwork to create the actual icons, restyling them slightly, if I recall correctly.

      If I recall correctly, you might also find the vector artwork in the final chapter, where I talk about creating a sprite sheet.

  13. Jim Babbage says:

    I’m out of town right now but will get back to you by early next week.

  14. Paul says:

    Hi Jim – Madrid, Spain calling!
    I’m working my way through the Fireworks Classroom in a book (CS6).
    I originally arrived at this page because I didn’t understand P.191 step 3. ..compression 80. Found the answer here in previous dialogue. Just a little confusing that’s all.
    I would just like to comment on, for example, the nn_webpage_final.fw.png from Class 09 when previewed in a browser (explorer) the image breaks up particularly the section with photos on the right. Looks great in Fireworks, not so good in a browser? I’ve had a quick look to see if I could figure out why, but really haven’t had time to sort it out. Good book though, gets to the point without beating about the bush as it were. (I sorted out the problem with the files using Photoshop before seeing this page) Many thanks.

    • Jim Babbage says:

      Hi Paul:

      Thanks for your feedback. I’ve reviewed the finished file and it seems to display properly when previewed in a browser. If you are referring to your own completed file, make sure the base optimization for the entire page is set to at least JPEG (not GIF). Keep in mind, this chapter was about working with symbols, not about web optimization. and FW typically sets GIF as the default optimization for any new document. No idea why that’s the default, but it is.

    • Jim Babbage says:

      Hi Paul:

      I typically test in Firefox or Chrome, and even then it’s primarily for image quality/interactivity, as the html generated by Fireworks NEVER reaches my production pages. That said if you want to share your completed PNG file with me I’d be happy to take a look at it. I’m betting the issue with Explorer has got to do with how the tables are constructed.


  15. Paul says:


    I’ve had another look (out of curiosity more than anything) on a different machine, using the original finished webpage file from the disc. Works fine in Chrome but it breaks up in Explorer 9 and 10, seems to be a browser quirk.. As you say not important really as its not about optimization. Must get back to chapter 10 !

    • Jim Babbage says:

      Well, FW is generating a table-based layout for preview, so it’s quite possible that the table is getting messed up in IE. If it’s critical, check your export options for HTML: File > HTML Setup and experiment with the table settings. Personally, I wouldn’t worry about it too much as I would not use the HTML exported from Fireworks for a working site.

  16. Geoffrey LeMond says:

    Hi there,

    I purchased the ebook version of Fi Classroom in a book and am wondering where I can gain access to the files referenced throughout the book as the ebook is not shipped with the CD.



  17. Jim Babbage says:

    Lynn, I did not write the Dreamweaver book so I am really unable to help you out. The user forums may be your best option.

  18. Kelly says:

    Hi, I really want to get this answer. I hope you would resolve my problem.
    I’ve used CS5 Fireworks for a long time. When I buy a CS6 Fireworks and use it, I realized the Flex Skinning Functionality disappeared. There is a only jQuery function which seems to be new function. I think Flex Skinning function is so important. Could you let me know where I can find the substitute function instead of this Flex Skinning? I’ll look forward to hearing the answer from you. I would really appreciate. Thank you.

  19. Diane says:

    OK, im confused. I just received my copy of FWcs6CIB and reading it from beginning. On pg8 it states that “you saw in the first exercise”, … but alas, No Exercises that I could find. I do have the CD since I purchased the printed book, but I only get png’s in my lessons. Am I missing a connection or a missing link? I am using a MAC not windows, if that is an issue.

    • Jim Babbage says:

      Hi Diane:

      I’m a little confused myself, because page 8 talks about the Tools panel and has no reference to a first exercise. Th exercises are indeed all on the CD with the exception of 1 file (listed in the comments here, that was corrupted. It can be downloaded from Peachpit’s site.

      Mac or Windows, it doesn’t matter. For what it’s worth, I wrote the book using FW on Mac.