Fireworks Pro Series: Working with Flash Catalyst

Fireworks Pro Series: Working with Flash Catalyst

on Jan 27th 2011 with 9 comments
Tutorial Details
  • Programs: Fireworks and Flash Catalyst
  • Version: CS5+
  • Time: 15 minutes
This entry is part 5 of 8 in the Fireworks Pro Series Session
« PreviousNext »

In this part of the Fireworks Pro Series, we’re going to continue looking at how Fireworks works with other programs in the Adobe Creative Suite. Specifically, we’ll be creating a website design and then convert it to an interactive, animated website in Flash Catalyst… all in under half an hour!

About Fireworks and Flash Catalyst

If you’ve never worked with Flash Catalyst before… this is actually a pretty great starting point. Tom is going to walk through the creation of a simple, straight forward website in Fireworks… but that’s where things really get interesting. Once the site design is complete, we’ll walk through how to convert the entire design into a working, fully interactive (and animated!) site in Flash Catalyst that you can deploy just about anywhere on the web!

This is a great jumping off point for anyone who is new to Flash, Fireworks, or Catalyst – But it’s also useful for just about anyone who hasn’t really used the entire Creative Suite to take a site from design to implementation. In under 30 minutes we’ll be creating a working website… not bad for the same amount of time that it takes to grab lunch.

The key topics that we’ll be covering:

  • How to build a complete site design in Fireworks (with multiple pages)
  • How to Export the design for Flash Catalyst
  • How to convert the flat design into an interactive website, complete with video, scrollable content, and more.

Let’s Get Started!


Part 1 of 2 of the Fireworks > Catalyst Video : Exporting into Catalyst

Part 2 of 2 of the Fireworks > Catalyst Video : Creating the File in Fireworks

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
  • Derrick

    I have a bit of an issue with this one. While I do like using Fireworks and have enjoyed these
    tutorials the idea that a website affiliated with Nettuts would push building an entire website in
    Flash is a little odd. I believe flash has its place but not for entire web design. Not in this day
    and age.

    • Tom Green
      Author

      Back up a bit here. I didn’t say this project was a web site or a Flash project.

      The point of the piece is creating the Catalyst project’s assets in Fireworks and then using those same assets to complete the project in Catalyst. I have been very clear throughout this entire series that Fireworks is more than a Photoshop “wannabe” and that it can be used for a multitude of purposes.I n this case, shot over to Catalyst.

      The other thing that i didn’t get into was that Catalyst is where the interactivity and media are given their functionality but the real magic for this project is undertaken by the Flex guys in Flash Builder or Flex where it can subsequently be output as a mobile app or used for another purpose. When a catalyst file is prepared for output there is an MXML file which is what the flex guy builds on.

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

      Heya Derrick, Thanks for the feedback… a few points that are worth addressing that should help clarify the things you’ve brought up:

      1) “a website affiliated with Netttus would publish … a Flash based tutorial” : You know about Activetuts too right? The Tuts Network isn’t “Flash Agnostic” by any stretch of the imagination ;)

      2) “building an entire website in Flash is a little odd” : Now I’ll be the first to admit that Flash has fallen out of favor with the web industry lately… but there are still lots of sites being produced all the time on Flash… heck, some of the best web designs on the entire internet are built with Flash and nothing else.

      The underlying point that I think you’re trying to make is pretty controversial at this point in time: that Flash is irrelevant… for web designers at least. I happen to personally agree with you in some ways, but it’s such a huge (and controversial) subject that it might even be worth our site assembling a big written post on the topic in the near future.

      Don’t get me wrong… I’m absolutely not discounting your opinion, but you definitely put your finger on a nerve for lots of web designers out there. Heck, we even have a Reader’s Poll on the topic of whether our readers use Flash anymore; About 60% of our readers use Flash at least once in a while… which definitely leaves it among the most-used pieces of software for web design at this point in time.

      Getting back to the point of this particular tutorial though… Remember that this series is about showing people what Fireworks is capable of. While Flash might not be every web designer’s favorite tool right now, seeing how Fireworks can quickly interface with Flash is still an interesting and relevant part of the series… then again, we’ll also be looking at how Fireworks interfaces with Photoshop, Dreamweaver, and even After Effects in this series… so if Flash isn’t your cup of tea, we’ll still have some great tutorials for your own particular workflow ;)

      Thanks for posting Derrick!

  • Ded

    I think I would like to see more about FW itself. The basic layout aspect seems straight forward, but then when you get to the folder structure menu on the right of the FW interface, and how to manipulate states FW becomes a little unintuitive. For instance where do we put state changes and how do we implement them. Hopefully we can see more of that. The impression I’m getting from this series is that FW is an integration environment.

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

      Great comment Ded – I’ll see what we can do to produce a “basic Fireworks interface” tut like you’ve just mentioned :)

    • http://www.chimply.net Dieter

      I’m also interested in learning more about the basic Fw environment. I’ve never used it…
      So far the Fw tutorials are already a little too advanced for my taste. For example, why do you have to specify a width and height for a new Fw project? Most websites don’t have a fixed width and/or height so that already confuses me and I’m not even started yet…

      I also don’t fully understand the benefit for first making a design in Fw ( or Photoshop or Illustrator or whatever ) and then having to ‘rebuild’ it with HTML and CSS. To me it seems like doing the same thing twice but in a different way.

  • Liz

    I enjoyed the videos since I have never used catalyst. After seeing how easy it is to import FW files, etc I think I’m going to check it out now. I only use flash sometimes like for banner ads but it won’t hurt to have another tool to add to my list. I have been using FW for sometime now but with these tutorials I am still learning something new each time. Thks

  • http://blog.wilsonet.com Daniel J. Wilson

    Thanks for the tip about using FXG as a way to move Fireworks files to Illustrator.

    I will point out that you can actually crop individual bitmaps within Fireworks without affecting the canvas by selecting the bitmap on the canvas and using Edit > Crop Selected Bitmap. Fewer hoops to jump through than the Export Area method.

    • Tom Green
      Author

      I agree with your Crop observation but I wanted to show this rather overlooked feature and the opportunity landed in my lap:-)

  • Pingback: Fuegos artificiales Pro Series: Trabajar con Flash Catalyst

  • Pingback: Fireworks Pro Series: Working with Flash Catalyst | Coding Articles & Tutorials

  • Pingback: [拾人牙惠] 50個不要用PS做網站設計的理由 | Kabaism