Rotation Widget in Kwik 2 - Digital Art and Design

Kwik has several widgets, which are pre-configured animations that you can apply to a layer, group or page in your storybook app. On page 10 of our sample app, we have four bats that are hanging from a tree. It would be nice to animate these bats to swing from the tree instead of just hang there.

We will use the Kwik Rotation Widget to rotate the bats. If we had all the bats on the same layer, we could only rotate them in unison. However, it would be nice if we could have each bat swinging individually. We can do this by putting each on a separate layer.

As you can see from the page10 psd mockup, we have four bats of varying sizes on four layers named bat1_pg10 - bat4_pg10. Let's animate bat1.

Open your project into Photoshop.

Select page10 from the list of pages in the Kwik panel. You should see "@ page10" at the top of the Page/Components section.
Add a new layer above the bottom layer and name it "bat1_pg10".

This layer doesn't have a shared object and will not be exported as a jpg image. Therefore, we don't need to set any layer properties.
Open the mockup psd in to Photoshop and copy the first bat graphic.
Paste the bat onto the new bat1_pg10 layer.
Using Photoshop's Free Transform tool, rotate the bat as far to the right as you wish. As you do so, notice the number of degrees in the Set Rotation box. In our sample app, we are rotating the bat to the right -15 degrees. This will be the starting position for our swinging bat.

As the bat swings, we have a total rotation of 30 degrees. He will move back those 15 degree to the left and then keep swinging another 15 degrees to the left.

Now we can animate the bat.
With the bat1_pg10 layer still selected, click the Animations icon in the Categories bar.
Click the Rotation Widget tool in the Toolset.
In the Rotation Widget dialog box, rename the animation "rotBat1".
Keep the bat1_pg10 layer selected.
As we mentioned above, the total degrees of the rotation is 30 degrees to the left. Set the Rotation to 30.
Anchor Point: We want the bat to swing from his feet which are handing from the tree branch. Use the drop-down menu to set the Anchor Point to the Top Center of the graphic.
For bat 1, let's set the Duration to 1 seconds and 0 Delay.
We want the bats to continue swinging as long as the page is visible. So we will set the animation to Loop forever.

At this point, the bat has rotated all the way to the left. We don't want the bat to jump back to the starting position. It's better if he swings back. We can do this by telling Kwik to play the animation in reverse.
Check the box for Reverse at Ending so the bat will swing back to the starting position.
We want the animation to start when the page loads. Let's use the When Page Starts setting.
Click Create to add the animation to the page. You will see that it has been added to the Components list.

We can create a little variety by using a different combination of degrees and duration for each bat.

bat2 - start position 20 degrees to left, end position -40 to right, duration 2 seconds
These settings will cause bat2 to swing from the left to the right 40 degrees. By setting the duration to 2 seconds, he will swing at the same speed as the first bat but in the opposite direction.
bat3 - start position -10 to right, end position 20 to left, duration .7 seconds
This is a smaller bat, so we will set him to swing a smaller amount of degrees. He will swing from right to left. He will also swing more quickly because of his size and the duration setting of .7 seconds.
bat4 - start position 10 to the left, end position -20 to the right, duration 1 second
This bat is also a smaller bat, so we made his swing the same 20 degrees as bat3 but the duration is longer.
Save the changes to your Photoshop psd file.

Once you have added a Rotation Widget to each bat layer, we are ready to preview our page. As before, we only need to export the graphics for this one page.

Go to your LearnKwik folder and make a backup copy of the Template project folder. Rename the backup folder by adding the current date to the end. (TemplateMM-DD-YY).

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|