Path

With Kinemac you can create a 3D path and set a camera, a light or any other sprite, to smoothly move along that path. In the sample here below we explain how to link the eye-camera to a path.

Create a Path (download this animation sample)

  1. Firstly set the Top view pressing the t key or set the 4 Views mode selecting the menu item Views:4Views and work on the Top view.

  2. Activate/deactivate the grid pressing the g key or selecting the menu item Views:Show Grid.

  3. Hold down the 2 key then click & drag up and down the mouse on the Stage in order to zoom in/out to accommodate the view.






  1. Create a sprite Path selecting the Path icon on the Stage toolbar or selecting the Objects:Path menu. Kinemac will automatically create an empty sprite Path in the Sprites Window.




  1. Be sure the sprite path is selected on the Sprite window and the pen tool on the Stage toolbar is selected too.

  2. Now trace your path on the Top view. Click on the Stage to create the first point, and without releasing the mouse button, drag the mouse a little bit to create its control point (orange). Release the mouse button.

  3. Create the next points clicking and dragging as per the first point. In case you need, press the delete key in order to delete the selected point.







  1. Press the f key to select the Front view. Your path will look that way.



 

Edit the points on the Inspector panel

You can edit a selected point of a selected path on the Inspector:Path panel. You can edit separately the end point (blue) and its control points (orange and green) entering a value in the X Y Z text fields, clicking on the steppers or dragging the sliders to the left or to the right. When editing an end point (blue) you will always move its control points too.

When you edit a control point (orange or green) using the Inspector panel outlets, you can activate the lock button (click on the lock icon on the top-left corner) in order to have the 2 control points move together.

Link the path to the sprite Camera

If you play the animation now (press the space bar), you will see a magenta point moving along the path. Now we have to link the path to a camera to have that camera moving together with that magenta point along the path. You can show/hide the magenta Link Point clicking on the magenta icon aside the Link Point label on the Inspector:Path panel.


  1. Create a sprite cube selecting the Objects:3D:Cube menu item or clicking on the cube icon on the Stage toolbar just to have an object on the scene.


  1. Create a sprite camera selecting the Objects:Camera menu item or clicking on the camera icon on the Stage toolbar.


  1. Order the sprites in the hierarchical sprite list as shown here aside, dragging the sprites up and down. Put the camera as first, then the path and the cube. The camera must be the first sprite if you want it shoots both the path-line and the cube.







  1. Go to the Inspector:Geometry panel and set the Camera Eye points X, Y, Z values to 0 (zero) and the Camera Target points X, Y, Z to 0 (zero), as shown here aside. That’s very important if you want to link the eye exactly to the path line and get no offset from that path line.

  2. Select the menu item Path from the pop-up menu Link Eye. Your eye camera is now linked to the path. Now, on the Sprites window, click on the Path sprite to select it, then hold down the Command key and click to select the Camera sprite. The 2 sprites are now selected so you should see on the Stage window both the orange path and the green camera icon. If you play the animation now (press the space bar), you will see the green camera icon moving along the path.






  1. Press the s key to set the Sprite Cameras View (you can call it Composite View if you prefer so - it has a the green icon on the left-bottom corner) in order to see the scene from the sprite camera.

  2. Play the animation (press the Space Bar) to see the scene from your camera moving along your path.


 

Animate the Link Point

As we have seen, the Camera Eye moves together with the magenta Link Point. That’s because the Path sprite comes already with a couple of key frames on the Link Point parameter. Let’s see how it works.


Select the Path sprite on the Sprite window. You might notice that it has 2 key frames on the Sprites ruler view, at the start frame and at the end frame. These 2 key frames create the animation of the magenta Link point. Go to the frame Zero then look at the Link point value on the Inspector:Path panel. It’s 0%. This means that at the frame Zero of the animation, the Link Point will be placed on the 0% of the Path length, so at the beginning of the Path. Now hit the TAB key to jump to the next key frame of the Path sprite. Look at the Link Point value on the Inspector:Path panel. It’s 100% of the Path length, so at the end of the Path.


If you now drag the Time Marker
on the Sprites ruler view to the left and to the right, moving through the frames of your animation, you will see the Link Point values on the Inspector:Path panel going from 0% to 100% of its length. Let’s modify this animation.


  1. Go to the frame 400.

  2. Click on the Link Point key frame icon
    and set the 100% value.
  3. Go to the frame 600.

  4. Click on the Link Point key frame icon
    and set again the 100% value.
  5. Go to the frame 800 (the last frame of the Path sprite).

  6. There is already a key frame on the Link Point. So just set the 0% value.

  7. Now go to the frame Zero (Command-Left-Arrow) and play the animation (Space Bar).


You will see the Camera Eye moving from the beginning of the Path to the end of the Path in the first 400 frames, then standing on that position between the frames 400 and 600, then moving back to the beginning of the Path. This is the way to animate the Path link point and get your Camera go ahead, stop, go back, slowly or fast.

 

Create a strip film

You can create a strip film using a path.


  1. Firstly set the Front view pressing the f key or set the 4 Views mode selecting the menu item Views:4Views and work on the Front view.

  2. Activate/deactivate the grid pressing the g key or selecting the menu item Views:Show Grid.

  3. Hold down the 2 key then click & drag up and down the mouse on the Stage in order to zoom in/out to accommodate the view.




  1. Create a sprite Path selecting the Path icon on the Stage toolbar or selecting the Objects:Path menu. Kinemac will automatically create an empty sprite Path in the Sprites Window.




  1. Be sure the sprite path is selected in the Sprite window and the pen tool on the Stage toolbar is selected too.

  2. Now trace your path on the Front view. Click on the Stage to create the first point, and without releasing the mouse button, drag the mouse a little bit to create its control point (orange). Release the mouse button.

  3. Create the next points clicking and dragging as per the first point. In case you need, press the delete key in order to delete the selected point.






  1. Press the w key to set the Work view (axonometric projection - look at the violet view icon on the bottom-left corner of the view). That’s your 3D path. You can hold down the 1 key and drag on the Stage to rotate the view. Hold down the 2 key and drag to zoom. Hold down the 3 key and drag to pan the view. Double click on the violet Work View Icon on the left-bottom corner of the Stage to reset the view.



 

Last step, let’s animate the textures we have just applied.

  1. Go to the frame 0 (Command-Left-Arrow).

  2. Click on the Text Offset key frame icon
    and set the 0% value. This means that on the frame 0 the the texture offset will be 0% of the path length.
  3. Go to the frame 200.

  4. Click on the Text Offset key frame icon
    and set the 100% value. This means that on the frame 200 the the texture offset will be the same of the path length.
  5. Now go to the frame 0 (Command-Left-Arrow) and play the animation (Space Bar). You will see the the strip growing from 0% to 100% of the path length and the texture moving together with the strip.




 

You can vary the width of the strip entering a value in the field Strip Width.

To modify the points of the path please look at the paragraph Create a Path at the top of this page.

Let’s see how to animate the strip.


  1. Go to the frame 0 (Command-Left-Arrow).

  2. Click on the Strip End Point key frame icon
    and set the 0% value. You will see your strip disappear from the Stage. This means that on the frame 0 the the strip length will be 0% of the path length.
  3. Go to the frame 200.

  4. Click on the Strip End key frame icon
    and set the 100% value. This means that on the frame 200 the the strip length will be the same as the path length.
  5. Now go to the frame 0 (Command-Left-Arrow) and play the animation (Space Bar). You will see the the strip growing from 0% to 100% of the path length.


Let’s see now how to apply a texture on the strip and how to animate it.

  1. Drag this image onto the selected path. It’s an image of a film.

  2. Press Command 5 to open the Textures Option panel. Select the front Texture Well with the film, set the Area Fill to Tile and the Width to 10%.  This means that the film will be drawn 10 times on the X axes along the Path length (100% / 10% = 10 tiles).




Your film will look like that. We have set the Background color to white to better see the holes of the film.





We are going to apply the movie texture on the path.

  1. Drag a movie file onto the selected Path. Our movie size is 246 x 246 pixel. That is 10 pixels less than 256 or any other power of two number (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048...). This gap will guarantee a 10 pixels distance between each tile of the film on the strip.

  2. Press Command 5 to open the Textures Option panel. Select the front Texture Well with the movie, set the Area Fill to Tile and the Width to 10%. The movie will be drawn 10 times along the Path length (100% / 10% = 10 tiles).

 
  1. Now go to the Inspector:Path panel and select the Stripe menu item from the Profile pop-up menu. Your path will be looking as shown here below.


 
  1. Select the Arrow tool on the Stage toolbar or press the a key.

  2. The selected point is blue (see the picture here above), and its control points are orange and green. Now click on the blue point and drag it to the bottom. Hold down the Shift key when dragging to constrain the movement to one direction only.






  1. Now click on the white point on the right side of the window and drag it to the top. Hold down the Shift key when dragging to constrain the movement to one direction only.






  1. Now click on the white point in the middle and drag it to the top. Hold down the Shift key when dragging to constrain the movement to one direction only.






  1. Press the w key to set the Work view (axonometric projection - look at the violet view icon on the bottom-left corner of the view). That’s your 3D path. You can hold down the 1 key and drag on the Stage to rotate the view. Hold down the 2 key and drag to zoom. Hold down the 3 key and drag to pan the view. Double click on the violet Work View Icon on the left-bottom corner of the Stage to reset the view.






To move the points of the path on a 3D view you should follow the same rules you already use to move any object on a 3D view.


  1. Drag horizontally to move the points along the X axis (hold down the Shift key to constrain the movement along one axis only).

  2. Drag vertically to move the points along the Y axis (hold down the Shift key to constrain the movement along one axis only).

  3. Drag vertically holding down the Option key to move the points along the Z axis.


or


  1. Click on a point (white or blue) or control point (orange or green) holding down the x key and drag to move that point along the X axis only.

  2. Click on a point (white or blue) or control point (orange or green) holding down the y key and drag to move that point along the Y axis only.

  3. Click on a point (white or blue) or control point (orange or green) holding down the z key and drag to move that point along the Z axis only.


You can Import a 2D SVG path (created by Illustrator or such a software) clicking on the button Import Path on the Inspector:Path panel, then you can modify it as shown here above.

 
KINEMACkinemac.html