Getting Started with Fireworks: States and Behaviors

Getting Started with Fireworks: States and Behaviors

on Feb 16th 2011 with 13 comments
Tutorial Details
  • Program: Adobe Fireworks
  • Version: CS5+
  • Difficulty: Beginner

In this part of the “GSwF” series, we’re going to show you how to use Fireworks to setup some basic buttons with their own unique mouse-sensitive states and behaviors. This will add another level of interactivity to your designs, so if you’re starting out with Fireworks, you won’t want to miss this one!

Using States and Behaviors in Fireworks

In the last “Getting Started with Fireworks” post, we looked at how to create Hot Spots, or interactive layers that you can use to link things like text or buttons up with other pages in your documents. Today, we’re going to expand on that by showing you how to create multiple “behaviors”, also known as states within your document.

Connor is going to walk us through how to create a simple button with two different states (one for the normal state, one for the mouse-hover state). Then he’ll expand on this by putting the knowledge to use in the practice project we’ve been using for the series. I’ll let Mr. Turnbull take it from here:

 
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.

This author has yet to write their bio.  

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

  • Pingback: Primeros pasos con Fireworks: los Estados y los comportamientos

  • Arthur

    Hi! Great job! Where are you from? Nice accent ;) But! Why i’m go used FW? When i can do this same only using CSS?

    • http://w.i.p. Peter Richardson

      Fireworks is a tool for creating website prototypes or ‘mock-ups’, your host in the tutorial didn’t suggest anything else.
      Personally I wouldn’t use it for creating complete websites although it is possible if you have a good knowledge of HTML and CSS.

      Peter

      • Connor Turnbull

        Yep, it’s important to remember this is just a prototyping tool for creating mockups and wireframes, which is, in itself, a vital part of any website’s development.

  • http://jbayone.us Jeremy Bayone

    Thanks, I’d like to start using Fireworks more so this is a start

  • http://www.webdesigninginchennai.com/ Daniel

    Superb tutorial. Loved it! You are doing great man.

  • Eric

    I’m not sure why Fireworks is ‘limited’ to a prototyping tool. As an image ‘creator’, its vector tools are pretty darn good. Not as deep as Illustrator but for me easier to use and quite sufficient to create most of the vector design you would see on the web. Same for the raster/bitmap editing. Not as deep as Photoshop but again, adequate for what I would imagine is 75%+ of the needs for raster graphics.

    On another note, I would love to see some tutorials on how best to set up a FW project to make the best of its CSS export capabilities. I get that creating some ‘layout layers’, rectangles that will outline you basic divs, is a good idea, but I’m not sure how that works and whether your layers will always stick you with AP divs.

    And lastly, a tutorial on Nav behaviors would be appreciated. Also, which tutorial starts this series, do you guide us through the logo and Nav bar creation in one of these tuts and if so, which one?

    You’re dong a great job, keep it up! Much appreciated.

  • vLight

    Hello, Connor. Is there a way to create some animated behaviors in FW, e.g. the same rollOver but with an animation e.g. fading (in/out) ?

  • Jason

    I would like to see more advanced tutorials on fireworks.

  • http://to-ny.com Tony

    I come from a background of Indesign and I’m trying to set up type styles IE,

    h1 font-size: 30px
    h2 font-size: 26px
    h3 font-size: 20px
    h4 font-size: 18px
    h5 font-size: 16px
    h6 font-size: 14px

    Is there any way to do this in Fireworks?

  • Rohit

    i would better use CSS

  • Joeri

    I’m creating a website using pages, slices, states and behaviores.
    Every page has around 15 buttons, for every button I use a slice.
    (Since I want the image of the button to rollover to state 2.) (I’ll call these buttonslices to explain)
    All the information I want to show when u press the button has to go to 2 other bigger slices wich then swap to state 3 – 4 or whatever.
    So I created 2 clickon behaviors swatching an image in the bigger slices, I’ve deselected the option “restore image on mouse out”. In theory this should work, but because of the rolloverimage needs that option selected it also restores the other behaviors on mouse out… This is a huge problem. I’ve tried using hotspots above the button slices but in that case it doesn’t activate the rollover behavior that’s put on the buttonslice.
    HELP plz?

    • joeri

      Used the nav bar image behavior instead.

  • Terio

    Very nice tutorial!

    I was wondering though if it is possible in fireworks to achieve CSS3 like animation effects (transitions, transforms…) and preview them.

    Does anyone know if this is possible via fireworks or by other means?

    Thanks for any advice! :)

  • Pingback: Making the Most of Photoshop Layers | Webdesigntuts+

  • Pingback: Making the Most of Photoshop Layers | iDevie