Adobe GoLive CS2 Animating Layers
A layer in a webpage is very different from what we think of layers in applications such as Adobe Photoshop or InDesign. The concept of layers (created by Netscape in 1997) was part of the proposed document object model for HTML. After fierce standards and browser wars, layers sort of changed into CSS-driven/positioned DIVs. You may also hear these objects referred to as “floating boxes.” When you use JavaScript to control a DIV, it’s commonly referred to as Dynamic HTML (or DHTML). Using GoLive’s DHTML Timeline Editor and a Layer object, we’ll create an animated object on our webpage…and you won’t have to look at one line of JavaScript code—unless you switch to source mode… 
STEP 1 Open the Assets; Add Layer Object
Open the GoLive CS_Issue7_Tutorial.site and double-click on the index.html file in the Site window to open it. We’ll start by creating a layer using GoLive’s Layer object from the Basic tab of the Objects palette and dragging it into the page. It doesn’t really matter where we place the object right now, so we’ll drop it to the right of the copy.
[To follow along, download the CS2 assets for this tutorial from www.layersmagazine.com/magazine-downloads.]
STEP 2 About the Boxes
Notice that after we drop the layer, it’s actually placed after the table cell holding our text, which is okay, really. In this image, the small yellow box represents the actual code in our page and the bigger box represents the positioning that’s defined by the style sheet.
STEP 3 Selecting a Layer
Move your cursor over the edge of the box until you see a sideways hand cursor, which indicates that we’re selecting the layer, instead of selecting what’s inside the layer.
STEP 4 Reposition the Layer
Click-and-drag the layer to the desired position. As we make this change, we’re actually updating the style sheet information relating to our new object.
STEP 5 Rename the Layer
With the layer selected, open the Inspector palette. In the dialog, let’s first change the Name from layer1 to something more meaningful—in our example we used “sidebar.” Set the Width to 230px and change the Height to Unchanged in the pop-up menu (this makes the layer stretch vertically as we add/remove content).
STEP 6 Get Content
Now let’s put some content into the layer. Open the file named sidebar.html. Select the table (make sure you see the box shape next to your Arrow tool), then go under Edit and choose Copy.
STEP 7 Insert Content into the Layer
Now go back to the index.html file, and move your cursor over your layer until you see the text i-beam cursor. Click and you’ll see a blinking text cursor, then select Edit>Paste. The HTML code for content that’s inside the layer is inside the yellow box we saw in Step 2.
STEP 8 Accessing the CSS Editor and Layers Palette
Select the layer and bring up the Inspector palette again. There are two additional key areas of information linked from this palette: the CSS Editor and the Layers palette. When you open the CSS Editor, you’ll see the same information that we entered earlier. You can make further modifications to your layer here as well. The Layers palette gives you a running inventory of the layers on the page and lets you directly select any layer, without a sideways hand, or having to decipher a series of small yellow code objects.
STEP 9 Accessing the Timeline Editor
The Inspector palette has two additional tabs in it relating to our layer. In the Timeline tab we can specify the type of animation and a Key Color (just for editing purposes). You’ll also see a Record button. When you click the Record button, then click-and-drag your layer in a desired animation pattern, GoLive will create an animation, even representing the speed at which you dragged out your path. In our example, however, we’re going to use the DHTML Timeline Editor, so click the Open Timeline Editor button (I know, I have control issues).
STEP 10 Create a New Keyframe
Hold down the Command key (PC: Control key) and click on the Timeline at approximately the 10-second mark to create a second keyframe on our Timeline. Also, notice the pull-down menu at the bottom right of the DHTML Timeline Editor: This is where you can specify the frames per second (fps) for your animation.
STEP 11 Reposition First Frame
Click on the first keyframe in the Timeline to select it, and then click-and-hold on the bottom right of the layer in the page. Drag the layer to the top center of the page as high as you can so that most of the content is hidden from view (you should see only the bottom of the layer as shown in next step).
STEP 12 Hide the Layer Offscreen
As we have little control over the bottom and right sides of a user’s browser, the only absolute areas that we can count on are the top and left edge (which is why branding and global navigation are typically anchored in these areas). For our animation, we want to hide the layer from view, then have it appear from offscreen. As you drag your layer to its beginning point, GoLive will draw a line to represent the animation’s two key points (similar to After Effects).
STEP 13 Jogging the Timeline
To test and see if the keyframes are set up properly, click-and-drag the yellow triangle Time cursor to step through the animation. If you see the layer moving between the two keyframes in the page as you drag the Time cursor, the animation has been set up successfully.
STEP 14 Loop Settings
Now you’ll need to set up any loop settings you desire. By default, this animation will play from frame 1 and stop at the end, but if you want the animation to loop, click the Loop button at the bottom left in the Timeline Editor to select it. Then you have another choice (right next to the Loop button), and that’s Palindrome, which essentially means that instead of the animation jumping back to frame one, it will play backward until it reaches the end, then play forward again. As always, test your page in a Web browser.
Photoshop
Illustrator
Indesign
Dreamweaver
Fireworks
Premiere
Flash
After Effects
Lightroom
Acrobat
Featured Partner 
- Dragging an Object Between Documents
- TV Scanline Effect
- Trick to the Glossy Effect
- 3D Text
- Changing Type on a Path
