Fireworks Pro Series: From Fireworks to Flash

Fireworks Pro Series: From Fireworks to Flash

on Jan 21st 2011 with 9 comments
Tutorial Details
  • Programs: Adobe Fireworks and Flash
  • Version: CS5+
  • Time: 30 minutes
  • Difficulty:Easy
This entry is part 4 of 8 in the Fireworks Pro Series Session
« PreviousNext »

This part of the Fireworks Pro Series is for the Flash users out there! We’re going to continue looking at where Fireworks can fit into a web designer’s workflow. Today, we’ll examine how Fireworks can work alongside Flash to create functional websites quickly and easily. Flash CS5 users won’t want to miss this one!

Moving from Fireworks to Flash

Well hello there! Today, Tom Green is going to show us how Fireworks and Flash can play well together.

If you work regularly in Flash, you probably have used Photoshop exclusively to create graphics and import from there… but Fireworks takes it another step by allowing you to create some useful “pre-built” elements like buttons that you can import as functional elements. What this means to you? Saved time and energy as you can skip manually creating the same elements once you import into Flash.

Some of the key points you won’t want to miss are:

  • Why Fireworks fits into your workflow as an ideal Flash-graphics companion
  • Create pre-built “multi-state” buttons in Flash, directly from Fireworks
  • The best workflow for turning Fireworks comps into fully working Flash sites
  • Get small file sizes by exporting your Flash graphics directly from Fireworks to the Flash library
  • How to save time using Fireworks Slices and the Export tool.

Grab a cup of coffee and hit play:

About the Author

Tom Green is a professor of Interactive Multimedia through the Humber Institute of Technology and Advanced Learning’s School of Media Studies. Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of their subject is current with industry best practice. He is an Adobe Community Expert, Adobe Education Leader (Post Secondary), Community MX partner and was listed in Adobe’s Top Ten Most Influential Flash Designers.

Tom has written several books (9 in all!) and extended tutorials on the topic of Fireworks and web design over the last 7 years, so he’s a natural fit to guide us through this incredible program. After this introduction, Tom will be guiding us through the wonderful world of Fireworks with several video tutorials. Alright, now that you know a bit about Tom, let’s dig in!

About the Fireworks Pro Series

If you’ve been wondering about what makes Fireworks tick for a while, this series is being recorded for you!

We’re amassing quite a few tutorials for everyone from the beginner to the expert, so be sure to check out our entire library of Fireworks tutorials.

If you have a particular request or question about using Fireworks for web or app design, post it in the comments section along with any of your other thoughts!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Tom is a professor of Interactive Multimedia through the Humber Institute of Technology and Advanced Learning’s School of Media Studies. Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of their subject is current with industry best practice.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://stylefront.net TJ Lorimer

    Hi Tom, (or Brandon)
    I just wanted to ask.. To be a freelance web designer, what is better to use to design my sites.?
    I currently use Fireworks and have been for around 6-7 years, I have used photoshop once or twice
    and that is it. I have just got Photoshop and I seem to be picking it up quite well, but still, what should I use?
    Or should I use both. If I should use both, In which way should I use Fireworks and Which way should I use Photoshop?

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Hi TJ,

      I can give you my opinion… but take it with a grain of salt understanding my own background: I never really even opened up Fireworks until about a year ago – and when I go to design a site, I still use Photoshop for the sole reason that it’s what’s comfortable to me. Over the course of this series of tutorials, I’ve been shown a lot of wonderful things about Fireworks, but Photoshop is always going to be my go-to tool unless I make a serious effort to drop Photoshop at some point. As the old saying goes though: “if it ain’t broke…”.

      With that said, Fireworks is a really useful tool, but for specific types of tasks. I’m working it into my workflow as my main “post-design / pre-coding” program because it gives me a wider range of options for saving graphics for the web at lower file sizes… I’ve also been considering it as a “pre-design” program for quick wireframing and prototyping where Photoshop can be a bit sluggish.

      Where Photoshop shines is in the design phase. It has a wider range of graphical options and power (naturally) and I feel like the entire UI is setup for hardcore designing… which is to say that nothing is quick or streamlined… you have full range to edit anything and everything and you have access to the cutting edge filters / layers / adjustments / etc. that Adobe truly excels at making.

      So – some advice for you: It sounds like you already know Fireworks like the back of your hand… so your best bet to improve your value as a designer would probably be to pick up some advanced photoshop tricks. It’s not to say that it’ll ever replace Fireworks, but just like I’m working Fireworks into my own workflow after mastering Photoshop, it’s probably going to be helpful to see where PS fits into your own workflow after mastering Fireworks.

      Hope that helps! Again, take it with a grain of salt – a good design is always going to be a good design, regardless if it’s created in Photoshop, Fireworks, or made of cut up construction paper and glue ;)

      • http://stylefront.net TJ Lorimer

        Thanks for that! That really did help to be honest.
        With fireworks, in the design process, there are things that I see and that inspire me that I just cannot do in fireworks with ease like photoshop. The other reason I decided to get Photoshop is because, I’ve really started to think about getting some items up for ThemeForest, and I wasn’t sure of how the PSD would come out if I had made it 100% with Fireworks. I am still not certain of how the compatibilty works between Fireworks and Photoshop, maybe that’s something you could explain on here someday, The compatibility of Fireworks made PSD files on Photoshop. Are they easily editable on Photoshop or are some of the effects not viewable on Photoshop as they are differently applied on Fireworks?

        I think I should start making Wireframes on Fireworks and then finish the design on Photoshop.
        Thanks again for the advice. I hope to make myself noticable to you soon with my newly found Photoshop skills. :P

        • Liz

          I have wondered about that too TJ. I feel comfortable with FW but for some effects especially for text at some point I like to bring it into Photoshop to finish it off. I just don’t know if I would be creating more work fo myself…..so I like ur article/tutorial suggestion. Right now I’m working on improving my Photoshop skills but until I feel comfortable I have to figure out what process works best so I am comfortable and achieve the quality I’m trying to achieve.

        • Tom Green
          Author

          Funny you should raise this issue.

          I am currently wrapping up a Training DVD around After Effects and, it turns out, AE doesn’t like to use the png from FW. It flattens it.

          My solution was to save it out as a PSD file and import into AE.Everything, including layers and transparency comes in, intact.

          • http://stylefront.net TJ Lorimer

            But what about when you import this FW made PSD into photoshop? What happens when you try to edit this PSD made in FW with PS?

            It’s the key piece of information that has been stopping me properly from doing work, because I am fluent with FW and it’s clear to me that there is a big majority of the web design communtiy and the buyers for such designs made by us that like to use PS and edit these designs with PS.

            What happens when they open this PSD with PS? Will it be as customizable as it is on FW? or will some features be restricted BECAUSE it was made in FW?

            I’m not sure if it’s just me and a few others such as Liz above that worry about this, but I have only just got PS and I have absolutely no clue how to use it let alone spot the differences in freedom between the two programs on one file.

            I have searched for an answer, but there seems to be no one that answers me correctly.

            Maybe this could be a good topic to write up on?

  • Fez

    Hey Brandon,

    Have you seen this website: http://www.isfireworksbetterthanphotoshop.com/ ?

    The articles over there really helped me a lot in comparing and deciding which tool to use for webdesigns. There are also some great resources listed there :)

    • Connor Turnbull

      Yep, there’s some great resources on there. *hint* look first item in useful tools and resources *hint*

  • Pingback: Fuegos artificiales de la serie Pro: Desde Fireworks a Flash

  • http://www.sackaynakpro.com keratin kaynak

    i think of that, flash very good at visual but for seo html more healty. also iphone etc. cannot open flash websites. depend on this situation, i prefer using flash & html together like asa that website http://www.sackaynakpro.com how you think about my ideas? also how you think about future of flash?