Kwik 2 Game Physics - Digital Art and Design

In this tutorial, we will learn how to use one of the most popular animation features in Kwik 2, game physics (also know as simulation physics). We can use Kwik to create a next-to-life environment where the object on the page responds to aspects of this environment such as gravity, force and collisions.

In our sample app, we will use gravity to make an object fall down the page as soon as the page loads. If the reader does not interact with the object, it will continue to fall until it hits the bottom of the page. When it collides with the bottom it will bounce and then come to a halt. However, if the reader clicks and drags the object, it will respond to that force and move in the direction of the drag. Once it has come to a halt from that force, it will again continue to fall from its new position on the page.

This may sound quite complicated but Kwik makes it easy for the non programmer. Our first step is to set up the physics environment and then tell the object, a pocket watch, how to interact within this environment.

Open your project into Photoshop.

Select page2 from the list of pages in the Kwik panel. In the Page/Components section of the Kwik panel, you should see "@ page2" at the top of the section.
From the mockup file, copy the watch graphic.
Paste the watch on to a new layer on the page. Name that layer "watch_pg2".

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.

Now let's set up the physics environment.
Click the Physics icon in the Categories bar.
Select the Environment Properties tool in the Toolset to open the Physics Environment dialog box.
Gravity: We will keep the real-world gravity settings.

X 0
Y 9.8
Scale 30
Check the box for Invert Physics on Screen Rotation. This will cause the ball to fall in reverse when the device is flipped.
Keep the Normal setting for display mode.
We want to keep the watch within the page boundaries. Check the box for Create Virtual Walls around the Screen and check the boxes for Top, Left, Bottom and Right.
Click Save.

Now we can set the physics body properties for the watch.
With the watch_pg2 layer selected, click the Set Body Properties tool in the Toolset to open the Physics Body dialog box.
Keep the default setting for Dynamic because we want the watch to be influenced by the physical environment.
Keep the default settings for Density, Friction and Bounce.
Set the Shape to Circle because our watch is round. If your object is of a different shape, you should use the best choice.
Click Save.

At this point, the watch is set to fall in response to gravity. But we still need to tell it how to respond when the reader drags the watch.
Select the Set Force Properties tool from the Toolset to open the Physics Apply Force dialog box.
We want the watch to respond to the click and drag event. Set the Impulse to Push.
Do not check the Curved Trajectory box.
Do no check the Apply Only Force from Impulse.
Set the X and Y Force to 50. Depending on your object, you may need to adjust this setting.
Click Save.

Let's test your physics. Save the changes to page2.

Click on the

Export Current Page Only icon and the Publish button to test your animation.

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.

|