Week 7 Summary – Part 2: Notes

GIF is a popular format for animation on the web because it simple to make a GIF animation, and they will automatically play in any browser without special software or plugins. They are best for simple animations however, because they are low resolution, do not support a huge color palette, and if you make the animation too complicated with too any layers, the file size will get too large.

The most common use for GIF animation is for advertising banners
(blue banners are the most effective at persuading viewers to click on them).
Loop 3-5 times.

Elements that can be animated in a GIF: Position, opacity, effects, layer visibility

Be very careful when using text in an animation to maintain readability. Sans-serif is better than serif.

Website design:

First step, make a morgue file to collect inspiration, examples of design elements you would like to include in your project.

Use a flowchart to begin planning out the structure of your site. Also use sticky notes to help you decide on the placement of the site’s components. Elaborate on these planning stages with a storyboard.

Keep the navigation straightforward and efficient. Keep all the different pages making up the site unified in appearance (they don’t have to be exactly the same, but they should look like they belong to a consistent site).


You can convert an object into a symbol. The symbol can make working a lot more
efficient; it works somewhat like grouping as the graphic becomes a single entity, but it is still possible to edit the components making it up. It also becomes a master copy, so each time you use the symbol it is a copy of the original. If you edit it you are editing the instance and not the original. You can edit an instance and the original copy will be unaffected. However if you edit the original copy then all of the instances will take on the change as well. The allowance to make global changes by editing the original file is what makes them so valuably efficient.

If you click on an object and a cross hair appears over it, then you know that the object is a symbol.

Edit in Place Mode: allows you to double-click on something, and the rest of the document will fade out. You can edit only the thing you clicked on, separated out from the rest of the document (even if it is grouped to something, and does not exist as a separate entity).

3 main types of symbols in Fireworks: graphics, button, animation (also components symbol, an enhanced graphics symbol).

You can make a graphics symbol either from a single item or from a complex group of items.

To convert an object to a symbol:

Select object–>Modify–>Symbol–>Convert to symbol. A dialog box will come up and you can type in a name for the symbol, and select which type of symbol you would like it to be.

*To alter a symbol without the other instances also being effected, only click on it to select it once. Don’t double click. Add filters and change size in the properties panel.

You can enable 9-slice scaling guides when you convert something to a graphic. If you apply 9-slice scaling guides you will always go into isolation mode when you edit it. When you position the guides inside a symbol with 9-slice scaling enabled, the guides will always stay put. They are kept locked down as part of the symbol.

Creating animation symbols:

Select object–>Modify–>Symbol–>Convert to Symbol–>set type to “animation”

Brings up a dialog box where you can determine things like how many stages you wish to make up the animation, if it should roate or scale, etc.

A State = a frame of the animation (like a cel in traditional animation).

Inside the State panel you can control aspects like the timing of the states, if there is a delay between each one showing, etc. (The number for the state delay is to the right of the name in the states panel.) The number shown for the state delay equals hundreths of seconds (“7” actually = 7/100th second). To slow down the speed on an animation change the timing delay number to a larger value.

Creating GIF animation in Fireworks:

Make sure that all layers you wish to remain visible are presnet in th estate when you animate. If a layer is not animated select “share to state” (highlight layer and select from drop-down menu in upper right of layers panel). You can highlight all layers at once to do this. Even if a layer is visible in the PNG file, if it has not been shared to stats it will not show up in the GIF animation.

The layer that will be animated, you do not “share to state” (This is because it ill be different in each state in order to achieve the animation). It will be distributed to the states as you animate it.

First method to animate:

1. Select object you wish to animate.

2. Edit–> Clone (this makes a copy of the object in the exact same position.)

3. Make as many clones as you want states.

4. Change the position of each clone layer to create movement. Once all of the different clones have been positioned where you want them, then select them all and select ‘distribute to states’ (select the layers in the layers menu, select ‘distribute to states’ from the main drop-down in the states menu).

If the layers do not distribute to states in the correct order, you can rearrange them by drag and dropping. test to make sure the animation runs smoothly.

To Export the file as an animation:

Optimize panel–>make sure that ‘animated GIF’ is selected (the default is regular GIF, which will not play the animation, so be careful to change it.)

Or: Save as an Adobe Flash file (File–>Save As–>Adobe Flash SWF)

Twist and Fade

Select object–>Commands–>Creative–>Twist and Fade

You can set a variety of effects, such s fading opacity, blur, moving in a circular motions, or random patterns.

Make sure to check the box in the twist and fade dialog box that says “Animate”. Click “Ok”.  Fireworks will generate all the states needed to accomplish the animation.

Tweened Animation

1. Convert the object to a symbol.

2. Make a copy of the symbol and move it to a different position on the screen.

3. Select both instances of the symbol.

4. Modify–>Symbol–>Tween instances.

In the dialog box that will pop up you can set how many states you wish to comprise the animation. You also can chose whether or not to distribute to states. Fireworks will then generate all the in between states needed to make the symbol move from postion 1 to position 2.

Export as an animated GIF.

Animating in Photoshop

Start with a layered file which hs different element son each layer.  Open the animation panel from the windows tab in the top navigation menu. There will be only one frame in the animation panel. The frame will only show those layers which are visible in the layers panel. Make a second frame by clicking the button that looks like a tiny square inside and in the corner of a larger square. The new frame will be a copy of frame 1. Select frame 2 and make changes (such as turning on the vibility of a layer which was hidden in frame 1). Continue adding new frames and making new layers visible until all layers have been added.

To add a layer and have it visible in all frames, select the layer. This brings up 3 unity icons at the top of the layers menu. Clck on the center button (“unify layer visibility”). This will bring up a dialog box. Clik “match”.

You can test play an animation by selecting the first frame and clicking the arrow button in the animation panel. o change the timing delay: Click the drop-down menu of any frame (the little black arrowunderneatht he frame icon).

To make the animation loop: Drop-down on bottom left og the animation menu. CHange from “once” to the # of times you wish the loop to play.

To save:

File–>Save for web and devices–>make sure format is set to GIF

*If you have a photo in your animation, and the GIF format makes it look bad, try increasing the # of colors).


This entry was posted in ART 170: Web Design 1. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s