| ThingMaker Documentation Chapter 3) Introductory Tutorials

| Why does the animation jump? When you move the cursor over the Thing it will jump down and to the right. This is happening because the two graphics aren't aligned properly. Typically, you won't see alignment problems if you import objects that have the same physical dimensions. But if your images are different sizes or were created by ThingConverter, you may have a situation where the images don't "read" correctly. You will learn how to correct this problem later in this Tutorial.

What's alignment? Some graphics programs use the term registration when they are referring to the way multiple images work together to create an animation that proceeds in a visually logical way. We use the term alignment, in reference to a process that's similar to registration.

Adjust the Alignment of the two States
Since it's so annoying, let's correct the alignment of the two states before we do anything else.

1. If the Scene is still playing, press Edit to stop.

2. The Thing should be selected, and the Settings Palette should be open.

3. Click on the MouseOver State Tab.
Alignment works only for MouseOver and MouseClick states. In both cases, you are changing how these elements are aligned in relation to the Default state of the Thing.

ThingMaker will display the MouseOver image in the Scene Window.

4. Click on the Alignment Tab at the bottom of the Settings Palette.
The program will continue to display not only the MouseOver graphic but also will display a faint representation of the Default graphic in the Scene.

Dragging an image to adjust the Alignment

5. Move the MouseOver graphic so that it sits on top of the Default graphic.
Using the Default image as a guide, you can adjust the alignment of the MouseOver graphic by simply clicking and dragging it until it sits on top of the Default graphic.

You can also use the arrow keys on the keyboard to move the graphic one pixel at a time.

6. Test it! Click Play to see if the alignment is correct.
Move the cursor over the Thing. Does the Thing appear to jump as it changes States? If it does, stop playback, go back to Alignment, click on the Thing and adjust it using the arrow keys on your keyboard.

During playback, watch the Thing to see where the graphic appears to jump as it switches to the MouseOver State. This way you have a better idea of how to move the MouseOver graphic when you are editing. You will actually want to move it in the opposite direction: even one pixel can make a huge difference. Use the cursor keys for fine adjustments. In the beginning, alignment takes time getting used to. There's art in the fine tuning process, but mastering it will come with practice.

Edit the Animation Sequence
The animation you've just imported works pretty well, but look carefully. One of the Frames is actually out of place. Now you can use the Animation Editor to change the order of the Frames in the animation. The Animation Editor lets you change Frames, reorder Frames, and change the length of time that an individual Frame is displayed. You can also adjust the alignment of individual Frames.

1. Switch the Scene to Edit mode (if it isn't already).

2. Open the Settings Palette and select the Thing labeled "dog" in the Scene.

3. Click on the MouseOver Tab.

4. Click on the Editor Tab.
You will see the Editor Settings Sheet data under "Animation Settings." This Settings Sheet displays individual thumbnail Frames in a Frame Sequence Editing Tray. The thumbnails comprise the Frames of the animation Thing "dog1" that appears as an icon in the Settings Tray at the top of the Setting Palette.

5. Click on each Frame in the sequence.
Note that as you click on the Thumbnail in the Frame Sequence Editing Tray, the Thing in the Scene Window changes to show that Frame.

6. Drag Frame 2 behind Frame 3.
You'll want to move the second Frame so that it becomes the third Frame. To move a Frame, click and drag on it in the Frame Sequence Editing Tray. As you drag on it, you'll see that a smaller Icon appears under the hand cursor. Move the cursor to the right of the last Frame in the sequence. A yellow arrow appears above the Icon tray. This arrow indicates where the Frame will be inserted. Release the mouse and the second Frame will automatically move to last position. Frames two and three have switched places.

Moving a frame in the sequence

7. Click each Frame and verify the order in the Scene Window.
Click each Frame and watch the Thing in the Scene Window. The sequence should now have a more logical flow. Test the Thing using the Play Button.

If the Thing is still not right, go back to the Editor to check the order of the Frames. Change them if you need to.

While in Editor mode you cannot add Actions to the Thing. Switch to Basic or Detail mode in the Settings Sheet before trying to add actions to your Thing.

<--Previous | table of contents | Next -->