Moving in 2D Space
Most 2D artists don't think about 2D space when they create their art. However, once those artists begin to animate their art, they soon need to learn a few facts about how objects move in 2D space.
As with web based art, art on mobile devices is measured in pixels. The new iPad retina display is 2048 pixels by 1536 pixels. Let's take a break from working on our project and open a new blank image window with these dimensions. If you don't already have the rulers visible, click View - Rulers from the Photoshop Menubar.
As you can see, we have both a horizontal and a vertical ruler for our image window. The horizontal ruler represents the X axis in 2D space and begins with a 0 at the top left corner and increases in pixels as you move to the right. The vertical ruler represents the Y axis in 2D space and also begins with a 0 at the top left and increases in pixels as you move downward. When determining the position of an object in 2D space, it is said to have both an X and Y position. We list the X position first followed by a comma and the Y position.
Now, add a new layer in the Layers panel and draw a black 300 pixels by 300 pixels rectangle at the top left corner of the image window. In 2D space, this rectangle's top left corner is at the 0 pixel location on both the X and Y axes (0,0). The top right corner is at the 300 pixel location on the X axis but still at the 0 pixel position on the Y axis (300,0). The bottom right corner is at the 300 pixel location on both the X and Y axis (300,300). And the bottom left corner is at the 0 pixel location on the X axis and the 300 pixel location on the Y axis (0,300).
In Kwik, we use the top left corner of an object as the point of reference. For our rectangle this is the 0,0 position in 2D space.
If we move this rectangle 100 pixels to the right, we would change the pixel location for the X axis. As you can see, the top left corner is now at the 100 pixel location on the X axis. However, the rectangle is still touching the top of the window and still at the 0 pixel location on the Y axis. Therefore the rectangle is now at the 100,0 position in 2D space.
Now let's move the rectangle 100 pixels down from the top of the window. This places the top left corner of the rectangle at the 100 pixels location on both the X and Y axis. That makes its position 100,100 pixels in 2D space.
How does all this apply to animation in 2D space? Let's take a look at a simple linear animation which will move an object from one point on the screen to a second point.
In our experiment, we will begin with the rectangle at its original 0,0 position and again move the rectangle right and down 100 pixels.
With the rectangle's upper left corner at 0,0 on both axes, we would have the following in the Kwik Linear Animation dialog box. As you can see, listed in the Properties section we have the name of the layer Layer_1 followed by its current position on the X and Y axes which is (x,y) 0,0. Also listed is the width and height of the rectangle. Kwik will use this 0,0 position as the starting point for the animation. To complete the animation, all we need to do is set the ending position for the upper left corner of the rectangle.
Also in the Properties section are two sliders that we can use to set the end position for the upper left corner. As you can see, there is a 0 in both the X and Y boxes. This will change as we move the rectangle 100 pixels to the right and 100 pixels down.
After moving the X slider 100 pixels to the right, we see the rectangle has moved so that the top left corner is at the 100 pixel position. Next we use the Y slider to move the rectangle 100 pixels down the Y axis.
As you would expect, moving the upper left corner of the rectangle to the left beyond the 0,0 position on the X axis will give us a negative number. We also get a negative number on the Y axis by moving the upper left corner above the 0,0 position.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Kwik product, the Kwik logo and Kwiksher are properties of Kwiksher.com - Copyright 2011. Screen shots used by permission.
These tutorials are for the older version of Kwik 2 and may not be much help when using Kwik 3 and above. If you are having trouble, please use the Kwik forum.
As with web based art, art on mobile devices is measured in pixels. The new iPad retina display is 2048 pixels by 1536 pixels. Let's take a break from working on our project and open a new blank image window with these dimensions. If you don't already have the rulers visible, click View - Rulers from the Photoshop Menubar.
As you can see, we have both a horizontal and a vertical ruler for our image window. The horizontal ruler represents the X axis in 2D space and begins with a 0 at the top left corner and increases in pixels as you move to the right. The vertical ruler represents the Y axis in 2D space and also begins with a 0 at the top left and increases in pixels as you move downward. When determining the position of an object in 2D space, it is said to have both an X and Y position. We list the X position first followed by a comma and the Y position.
Now, add a new layer in the Layers panel and draw a black 300 pixels by 300 pixels rectangle at the top left corner of the image window. In 2D space, this rectangle's top left corner is at the 0 pixel location on both the X and Y axes (0,0). The top right corner is at the 300 pixel location on the X axis but still at the 0 pixel position on the Y axis (300,0). The bottom right corner is at the 300 pixel location on both the X and Y axis (300,300). And the bottom left corner is at the 0 pixel location on the X axis and the 300 pixel location on the Y axis (0,300).
In Kwik, we use the top left corner of an object as the point of reference. For our rectangle this is the 0,0 position in 2D space.
If we move this rectangle 100 pixels to the right, we would change the pixel location for the X axis. As you can see, the top left corner is now at the 100 pixel location on the X axis. However, the rectangle is still touching the top of the window and still at the 0 pixel location on the Y axis. Therefore the rectangle is now at the 100,0 position in 2D space.
Now let's move the rectangle 100 pixels down from the top of the window. This places the top left corner of the rectangle at the 100 pixels location on both the X and Y axis. That makes its position 100,100 pixels in 2D space.
How does all this apply to animation in 2D space? Let's take a look at a simple linear animation which will move an object from one point on the screen to a second point.
In our experiment, we will begin with the rectangle at its original 0,0 position and again move the rectangle right and down 100 pixels.
With the rectangle's upper left corner at 0,0 on both axes, we would have the following in the Kwik Linear Animation dialog box. As you can see, listed in the Properties section we have the name of the layer Layer_1 followed by its current position on the X and Y axes which is (x,y) 0,0. Also listed is the width and height of the rectangle. Kwik will use this 0,0 position as the starting point for the animation. To complete the animation, all we need to do is set the ending position for the upper left corner of the rectangle.
Also in the Properties section are two sliders that we can use to set the end position for the upper left corner. As you can see, there is a 0 in both the X and Y boxes. This will change as we move the rectangle 100 pixels to the right and 100 pixels down.
After moving the X slider 100 pixels to the right, we see the rectangle has moved so that the top left corner is at the 100 pixel position. Next we use the Y slider to move the rectangle 100 pixels down the Y axis.
As you would expect, moving the upper left corner of the rectangle to the left beyond the 0,0 position on the X axis will give us a negative number. We also get a negative number on the Y axis by moving the upper left corner above the 0,0 position.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Kwik product, the Kwik logo and Kwiksher are properties of Kwiksher.com - Copyright 2011. Screen shots used by permission.
These tutorials are for the older version of Kwik 2 and may not be much help when using Kwik 3 and above. If you are having trouble, please use the Kwik forum.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
