Animated Stickman - Tweening Animation in Adobe Fireworks

Thursday, February 12th, 2009

Following on from our previous post: “How to make Animations and Animated Graphics in Adobe Fireworks“, we’ve now got the basic knowledge of making an animation in Adobe Fireworks. We can animate a graphic, moving it a small amount, each frame, across a series of frames to make the final result appear as if our graphic is actually in full motion.

Our tutorial today is going to cover the rest of Adobe Fireworks’ useful tools and commands for making animation even easier and more impressive looking! We’re going to use symbols and tweening, a method of animation that became popular in Adobe Flash. We’ll also take a look at onion skinning and distributing to frames, all techniques that are useful for animation in Fireworks.

Here’s what we want to achieve (click to see a bigger view):

Surfing Stickman

Our stickman is going to move from A - B across 12 frames, and the waves will do the same but at a slower speed. Unlike our last Fireworks Animated Stickman tutorial, we’re only going to need to animate 2 frames (A - B) and Fireworks will do the tweening - which is short for inbetweening (doing everything in between frames A and B).

Read on to find out how simple it is to animate our surfing stickman…

(more…)

Share this post:
  • Print this article!
  • E-mail this story to a friend!
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Live
  • MySpace
  • Reddit
  • StumbleUpon
  • Technorati
  • Propeller
  • YahooMyWeb

3D Text in Photoshop/Fireworks

Tuesday, January 27th, 2009

3D text can be made simply in Adobe Photoshop and Fireworks and there’s so many different ways of creating it, no two text graphics will ever look the same! It’s great for making text on your website stand out and it can even be used in your logos and avatars.

Our 3D Text Examples

Our 3D Text Examples

Our 3D examples above took only minutes to make and demonstrate different ways to turn your text 3 dimensional! Read on to find out how to try these different methods; drop shadow, inner bevel, inset emboss, and blend.

(more…)

Share this post:
  • Print this article!
  • E-mail this story to a friend!
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Live
  • MySpace
  • Reddit
  • StumbleUpon
  • Technorati
  • Propeller
  • YahooMyWeb

How to make Animations and Animated Graphics in Adobe Fireworks

Thursday, January 8th, 2009

There’s nothing more eye catching on a website than an animated picture. Done right, it can make your webpage spring to life, often being the first thing that a user will look at. It can be a great way of saying “look here” should a certain section of your webpage need it. But how do you make animated graphics?

Our example animation we will be creating

Our example animation we will be creating

Keep reading to find out how easy it is to make animated graphics in Adobe Fireworks.

(more…)

Share this post:
  • Print this article!
  • E-mail this story to a friend!
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Live
  • MySpace
  • Reddit
  • StumbleUpon
  • Technorati
  • Propeller
  • YahooMyWeb