Back to main AniPack page

Download Photoshop file

Note: we recommend that you save out a new version of the Photoshop animation file before customizing the animation so that if you end up with something you don't like or want to generate a new variation, you can always start over. Of course, you can always download the Photoshop file from the NavWorks site again, but it will usually just be easier and faster if you make your own copies.

The Photoshop file for the Concentric Sliding Panels Animation contains a "Texture" and "Shadow" layer for each frame. However, this animation has frames that build upon one another. All of the even numbered layers are what we will call "main panel" layers and all of the odd numbered layers are what we will call "transition layers". In general the transition layers only become visible for one frame, while the "main panel" layers often need to visible for multiple frames. Note that all of the "main panel" or even numbered layers should be visible at first and all of the "transition layers" or odd numbered layers should be invisible at first.

To customize the animation, fill the "Top," "Button," and "Inner Mount" layers with the desired color or texture (make sure the "Preserve Transparency" option is on before applying any fills). Similarly, fill all of the layers numbered 1-15 as well as the "Bottom" layer with the same color or texture (again, make sure the "Preserve Transparency" option is on before applying any fills). To generate the first frame of the Sliding Panels animation, turn on or make visible all of the even numbered layers. Select All, Click on one of the visible layers. Choose Copy Merged from the Edit menu. Paste into a new document. To make Frame 2, make the "Bottom" layer invisible and make the "1" and "1 Shading" layer visible. Select a visible layer and choose Copy Merged from the Edit menu (this assumes you still have the entire document selected, if you don't Select All). Paste into the new document.

Continue doing the process up through the layers named "15". As you go up, make all previous layers invislble. So, for example, to create the third frame, make the "1" and "1" Shading layers invisible. Click on a visible layer and use Copy Merged to paste into the new document. The "transition layers" or odd numbered layers stay visible for only one frame in between the "main panel" or even numbered frames. For instance, to create frame 4, you would temporarily turn on the visibility of the "3" and "3 Shading" layers (and, of course, the "2" and "2 Shading" layers should be made invisible). See the tutorials for more information/examples on how to use the layered Photoshop files that come with AniPack 1 to generate GIF and Javascript animations.

One final note: the Concentric Sliding Panels is designed to have a maximum of 17 frames between fully closed and fully open, although you can remove frames if you need to make the animation's file size smaller. For example, to make a version of the an Concentric Sliding Panels animation with only 9 frames from fully open and fully closed, use only the odd numbered frames (see below left). You can also try using different combinations. For instance, the example below left used the transition layers and main panel layers in different sequence. Layer 4 was paired with 1, 6 with 3, 8 with 5 and so on. Finally, note that for this animation to loop correctly you will need to make duplicates of many of the layers. For instance, the 17 frame animation would start with frame 1, go to frame 17 and then would go back through frames 16, 15, 14, 13, and 12 (and so one) to loop back to frame 1.



©1998 NavWorks, All Rights Reserved.