Sprite animation using Adobe Fireworks and Axure

Posted in Resources > Interaction Design by Firetuts

Joseph Reni goes through the steps to create an sprite animation in Fireworks using states.

Creating a Sprite Animation with Fireworks

Joeseph steps through the process of creating the states with the states panel, how to test the animation to make sure it flows correctly and shows the steps of taking his states from Fireworks and automatically producing a sprite that can be used on a web page or in this case an animation in Axure. Even if you just want to create an animation by itself or learn how to export a sprite with CSS then the first part of the tutorial is a good start.

Importing sprite into Axure and creating effects

sprite-animation-axure

In the second part of the tutorial, Joseph explains how to import graphics into Axure and then creates animation effects based on click events. He then goes through how to deal with other sprites and how certain click events and logic statements can be used to create the desired prototype.

This video is a biggie at 50 mins but go through all of it as its worth it. If you want a primer on generating animations with click events in Axure then this is a must view.

Author: Joseph Reni

Website: youtube.com

View Video
There're 2 comments for this post.
  1. Hi Joseph,
    Thank you very much for taking the time to share this. I learned a lot. I also learned more because of your scripting errors. Deliberate or not, the “errors “were great in solidifying my understanding. I think we should all do the same. Thanks again for the tremendous effort you put in for us all to benefit.

    Regards,
    Alan.

  2. Joseph on said:

    Thank you, yes these are common errors when working with Axure. I making a lot of advanced interactions for axure – feel free to follow me @gejoreni for updates.