Namo Web Editor

1. If the Timeline panel is not visible, press Alt+4 to reveal it.
2. Select the layer you want to control by clicking its outline.
3. Drag the layer by its handle into the Timeline panel. As the mouse pointer enters the panel, a sprite (lavender bar) should appear on the timeline. Release the mouse button when the sprite is in the desired position.
4. Click the initial keyframe on the sprite (the white dot at the sprite’s left end).
5. In the document window, drag the layer to the position you want it to be in at the beginning of the animation. If necessary, double-click the layer’s handle or outline and specify the exact position and other properties you want the layer to have at the beginning of the animation.
6. Click the final keyframe on the sprite (the white dot at the sprite’s right end).
7. In the document window, drag the layer to the position you want it to be in at the end of the animation. When you release the mouse button, you should see a straight black line in the document window running between the layer’s initial position and its final position, indicating the path it will take when the sprite plays. If necessary, double-click the layer’s handle or outline and specify the exact position and other properties you want the layer to have at the end of the animation.
8. If necessary, create additional keyframes as desired and adjust the layer’s position/state at each, as described below.
9. To preview the sprite, make sure the Auto start check box on the Timeline panel is selected, and then switch to Preview mode.

1. If the Timeline panel is not visible, press Alt+4 to reveal it.
2. Select the layer you want to control by clicking its outline.
3. Right-click inside the Timeline panel and click Record Path of Layer.
4. In the document window, drag the layer through the path you want it to take, moving the mouse as smoothly as possible. As you drag, a series of asterisks will appear behind the mouse pointer, tracing its motion. When you release the mouse button, a black line representing the recorded path of the layer will appear in the document window, and a finished sprite will appear on the timeline.
5. If necessary, adjust the layer’s position at specific keyframes or add/remove keyframes, as described below.
6. To preview the sprite, make sure the Auto start check box on the Timeline panel is selected, and then switch to Preview mode.

1. Click the keyframe at which you want to adjust the layer’s position and/or state. (Position and state can only be specified at a keyframe. If there is no keyframe at the point on the timeline where you want to specify these properties, you must add a keyframe.)
2. Do any of the following, depending on what property of the layer you want to adjust:
   • To adjust the layer’s position, first drag the layer to roughly the desired position. Then, if necessary, fine-tune the position by using the arrow keys on your keyboard to move the layer one pixel at a time, or by double-clicking the layer’s handle and specifying the exact position relative to the document’s top left corner, in pixels.
   • To adjust the layer’s size, drag any of its resize handles. If necessary, double-click the layer’s handle and specify its exact width and height in pixels.
   • To change the layer’s visibility, z-index, or other properties, double-click the layer’s handle.

• To add a keyframe, click the point on the sprite where you want the new keyframe, and then right-click anywhere in the panel and click Insert Keyframe. Then, drag the layer to the desired position and/or set the layer’s properties as desired for that point in the timeline.
• To move a keyframe, click the white dot representing it on the sprite and drag it left or right. The position of a keyframe determines when the layer reaches the position or state defined for that keyframe. Moving the beginning or ending keyframe of a sprite makes the sprite longer or shorter. You cannot move a keyframe beyond an adjacent keyframe.
• To remove a keyframe, click the white dot representing it, and then right-click anywhere in the panel and click Remove Keyframe. You cannot remove the beginning or ending keyframes of a sprite.

• To move a sprite in time, so that it starts at a different point in the timeline, drag it left or right on the timeline.
• You can also move a sprite to a different row on the timeline. Sprites on different rows can overlap, while sprites on the same row cannot. (However, note that two sprites that control the same layer can never overlap.)
• To move a sprite in space, so that the entire path of the layer controlled by the sprite is offset from the original path, do the following:
  1. In the Timeline panel, click the desired sprite at any frame that is not a keyframe.
  2. In the document window, drag the layer in the direction and to the distance you want the path to be offset. When you release the mouse button, the black line representing the path will reappear at the new position.
  3. If necessary, fine-tune the path’s position by double-click the layer’s handle or outline and specifying its exact position at that point.
• To remove a sprite, select it by clicking anywhere on it, and then press Delete.

One document can have multiple timelines, any of which can begin playing at the same time or at different times. For example, an action attached to a frame in one timeline can start another timeline when the first timeline reaches that frame.

• To add a timeline, right-click anywhere on the Timeline panel and click Add Timeline. The new timeline will be named “timelineX“, where X is the next available integer.
• To change the timeline being shown on the Timeline panel, click the combo box at the top left corner of the panel and select a timeline.
• To rename a timeline, select it, edit its name in the combo box, and press Enter.
• To delete a timeline, select it, right-click anywhere on the Timeline panel, and click Delete Timeline.