Sometime in the next month my article for boxesandarrows.com will finally appear. It discusses using Microsoft Visio for animating rich interactions. I discuss this briefly in a prior blog.
Photoshop CS and CS2 introduced some new features that make it easy to simulate complex interactions including animated transitions.
Layered Comps
Photoshop CS brought us the wonderful world of layered comps. You can now name the layer configuration. The layer order, visibility, layer styles, and element positions are saved.
It is sort of like being able to take a photo snapshot of the current state of the design.
Its purpose is to create alternate designs and give them a name. Then the designer can walk through the different comp designs with a customer to choose the best one among them.
In the world of rich interactions, we can take a snapshot of the user interface at each interesting event state or user interaction.
Animation Palette
Photoshop CS2 brought an animation palette. By adding layered comps to the each frame of an animation, you can play the various layered comps. Think of it being able to play back a set of complex interactions.
A cool feature is the ability to create tweening between frames.
An example is I could have two rectangles positioned and named as a layered comp called rectangles. The next comp could switch these rectangles. This could be called swapped_rectangles. Dragging these two layered comps into the animation palette will create two steps to the animation: rectangles in their original position and rectangles in their final position. Not too exciting, right? Now select both frames in the animation palette and tell it to tween and allow it to create 10 frames. Now we have 12 frames total.
When you run the animation, notice that the rectangles look like they are swapping. The in-between frames make the animation look convincing.
Capture the Movie
Simplest way is to use a video capture tool (like SnapZ Pro for the Mac) to create a movie file of the interaction as it is played in Photoshop. The movie can be distributed to illustrate the interaction.
The combination of layered comps, animation, and video capture create a simple way to illustrate cinematic effects and complex interactions in a page.
2 comments:
I owe an example for this post. Will post it shortly
Hey Bill,
Congrats on the Pattern Library launch! Anyway, I came across this article and it is really useful. I have been using layer comps successfully and the ability to animate to show the interaction is something I guess I never expected out of PS. Definitely going to look at this and it will probably keep me away from spec'ing in Flash for a little while longer. Good read!
Post a Comment