In the last tutorial, we created a single sprite that moved forward through the stage space.  In this tutorial, we will increase the speed of that animation and provide a continuous flow of the object through the space by copying the sprite and offsetting it within the sprite window.

Importing a sprite

Open Kinemac with a new stage.  We’ll be importing the sprite you created in the last tutorial.  Go to the Objects menu, select Import, then Sprite or press command+control+I.  This will open the Import Sprite dialogue box.  Navigate to your Sprites folder (where you saved your sprite at the end of the last tutorial), select it then click on Open.  This will import the sprite at the Time Marker (the green thing).

Shortening the play time

Because we are going to duplicate the sprite and have more movement, the first thing we need to do is to shorten the play time for the sprite.  Clicking and dragging the end of a sprite will shorten or lengthen it.  Shorten the sprite (move the end of it) to 400.  Notice that all the keyframes stay proportional, that is, they move within the length of the frame so the keyframes which were at 200, 400, 600 and 800 are now at 100, 200, 300 and 400.  We have shortened the length of the animation and the speed at which it plays, but the movement within the sprite is exactly the same.

Duplicating sprites

There are three ways of duplicating the sprite.  The first is to select the sprite, press command+C for copy, then command+V for paste.  Moving the Time Marker will paste the sprite at that point.  The second way is to go to the Sprite menu and select Duplicate or command+D.  This will reproduce the sprite in exactly the same place which can then be moved to the correct starting point.  The final way of duplicating sprites is the Duplicate Multiple command for which there is no keyboard shortcut, but which offers the most powerful way and duplication.  Select Duplicate Multiple from the Sprite menu, select the Delay tab, enter the number 4 (to duplicate the sprite 4 times) set the start sprite point to 200 and press okay.  Don’t worry to much about the other settings yet, we’ll get to them in another tutorial.

You will now have 4 new sprites exactly the same as your first sprite.  Kinemac places the sprites above the existing sprite.  For simplicity, select the original sprite (now at the bottom) and move it to the top by dragging its name in the Sprite list.  You will now have 4 similar sprites starting at 0, 200, 400 and 600.  The final sprite goes beyond the end of the animation so we’ll want to reduce the size of this.  There are two ways to do this, the first is to option+click+drag the end of the sprite, but because it ends after the end of the animation, the end of the sprite cannot be seen.  This leads to the other method of shortening the sprite which is to use the inspector panel.  To shorten the sprite using the inspector panel, change the end sprite value from 1000 to 800.  This will change its duration to 200, but will not change any keyframes.

Playing your animation now will show your object moving towards you and being replaced by a duplicate which also moves towards you.  There’s just one tiny flaw with this animation.  The beginning doesn’t seem to fit the flow of objects.  There’s a break as the animation loops back to the beginning.  To fix this, we need the last half of a moving object inserted at the beginning.  This is where the option drag method of changing is used.  Create another duplicate sprite as above, by copying and pasting or selecting duplicate from the menu (or command+D).  Option+click+drag the beginning of the sprite to 200 ticks.  The pop-up assistant will show the values for the beginning and end of your sprite.  When your sprite is 200 ticks long, release the mouse button.  This gives a sprite with just the last part of the object’s movement.  Drag the object to the beginning of the animation.  You can also move this sprite to the top to give a cleaner layout of sprites in the sprite window.

Play your animation and watch your objects move closer to you.  Switch between the Default camera (press D) and the Working camera (press W).  If you select four views (press /), you can see the movement from the left, front and top.  Notice that viewing from the front, does not show the sprite getting larger, but shows a seemingly static view of the object.  This is an anomaly I cannot yet explain.  Perhaps someone from Kinemac (or with more animation experience) can.

Grouping objects

Before we finish this tutorial, and in preparation for the next tutorial which introduces multiple cameras, select all the objects in the Sprite list (click the top one then shift click the last – selecting works similarly to other applications) and group them using the Group Sprites command on the Sprite menu or pressing command+G.  You can expand or contract a group making it easier to work with complex animations. Don’t forget to save your animation.

Enjoy!

In the previous tutorial, you started to get to know how the stage functions as a space for developing your animation.  This tutorial will build upon that by introducing the Z axis and developing your 3D eye.

Moving forward (and backward)

Create a new Kinemac animation by opening Kinemac or pressing command+N if Kinemac is already open.

Create a 3D object, for instance a text object.  For a text object, make sure you use a simple, short word.

Kinemac automatically creates all sprites (objects) 800 ticks long.  At 60 ticks per second, this gives an animation length of just over 13 seconds.  Position your object at 0, 0, 0 in the position section of the Object inspector.

Create a series of keyframes as follows:

1. At zero ticks with Z value at -1000
2. At 200 ticks with Z value at -500
3. At 400 ticks with Z value at 0 (zero)
4. At 600 ticks with Z value at 500
5. At 800 ticks with Z value at 1000

Press the space bar to see the animation. Notice the difference in views between the default camera (press D) and the working camera (press W).  The default camera will show the object getting larger as it moves towards you, while the working camera will show it in perspective with the object moving diagaonally across the screen.

Smoothing the movement

You may notice that the movement of the object seems to slow as it approaches each keyframe.  This is because the keyframe defines a point where objects are essentially stationary.  Kinemac respects the stationary position and therefore slows the object.  However, you can make the movement more smooth buy invoking the bezier control window (command+3).

The Bezier window

The Bezier control window shows the movement of objects through space on each axis and in every attribute.  For this exercise, while the bezier window is open, press the Z key to show only the Z axis position.  Notice that the line representing the movement of the object through the Z axis has curves which flatten through each keyframe.  This is the object slowing to the keyframe position.  To smooth the movement, select the dot on the line at the position you want to smooth.  Notice that two bezier handles appear.  You can move these around to  speed up or slow down the movement.  Try to get the handles lying over the path.  This will give a very smooth movement through the point.  Do this for each point, including the first and last.

Play your animation again with the smooth movement.

Set the camera back to Default Static Camera on the View menu (press “D”) to see the effect of camera position.  You may have to zoom out to see the whole animation.

By now, you will be getting to know the way in which objects can be moved around the stage.  This is essential for developing great animations.

Export your sprite

The next tutorial will start working with multiple sprites so before you close Kinemac, export the sprite you have just created using the Export Sprite command on the File menu, or pressing command+shift+E.  Save your sprite to a folder where you can easily find any exported sprites.  This will help in creating future animations by enabling the re-use of sprites.

Enjoy!

Kinemac is a powerful animation tool.  For those of us with little experience, but lots of ideas, getting to know Kinemac can be overwhelming.  This series of tutorials will help you work through the processes of gaining an understanding of how each of the parts come together to create great animations.  If you’ve watched the Mac Mediacast Kinemac Tutorials, and found yourself need to pause and try[1], you may need to move slowly through the interface and options.  Luckily, there is a transcript of the tutorial at the above link.  These tutorials will complement Mac Mediacast’s tutorials by providing a slower, more leisurely, introduction.

Get to know Kinemac

The Kinemac web site has a great support/help site to explain the interface to Kinemac.  This is very useful for individuals who have some experience with animation already, and for whom, Kinemac is just another tool in their toolbox, albeit a very powerful and relatively simple tool.  For these people, the page, creating an animation, explains everything needed.  For some of us, it raises more questions than it answers.  The tutorial below elaborates Kinemac’s tutorial to help orient a beginning animator to the power of Kinemac.  Work through Kinemac’s tutorial, then try the activity below or, for the less adventurous, try the activity below then go to Kinemac’s tutorial.

Starting

Open Kinemac.  Kinemac automatically opens a new stage.  This is the animation space – the place where all the activity happens.  The main parts are the stage window, the inspector panel (on the right) and the sprites window (at the bottom).  If there is only the stage window, press command+2 for the sprites window and command+4 for the inspector window.  You can keep these grouped by pressing command+ctrl+1.  All of these windows are listed in the Window menu.  We’ll meet the Bezier and the Textures windows in later tutorials.

The Grid

If you select Show Grid from the View menu (press ‘G’), the grid appears with three coloured arrows.  The coloured arrows represent

• Red = X axis – Points to Right (positive values – like a 2D graph)
• Green = Y axis – Points to Top (positive values (up) – like a 2D graph)
• Blue = Z axis – Points to Front (positive values – getting closer to the viewer)

You can view a single view or 4 views from the View menu (press “/”).  For this exercise, go to 4 views to see the object moving in each dimension simultaneously.

Moving an object around on the stage.

To get a feel for how objects move about in the space, create an object as indicated by creating an animation, then, reset the position to 0, 0, 0 in position section of the Geometry tab of the Inspector panel.  This will place the object in the very centre of the screen. Make sure the top left view is set to ‘Front’ in the View menu (press “F”).  Kinemac takes the values you enter at each keyframe as a point of reference and constructs the movement path between those two points.  To set up an animation, use the following values for your keyframe locations, positions and rotations.

1. Using your mouse, move the object to the top left corner.  Set a keyfame at zero ticks (click where the green marker is above the ruler when the counter display shows 0000000) then set its position to approximately -1000, 1000, -1000. Using precise values will help you learn the size of the stage.
2. Move to your next keyframe (at 200 ticks – counter displays 0000200). Provided no slider value is selected, you can tab between keyframes once they are set.
3. Move the object to the top right corner.  Set your keyframe position approximately 1000, 1000, -1000.  Set the rotation keyframe to 180, 180, 180 to rotate the object.
4. Move to your next keyframe (at 400 ticks – counter displays 0000400).
5. Move the object to the bottom right corner, keyframe position approximately 1000, -1000, -1000.  Set the rotation keyframe to 360, 360, 360.
6. Move to your next keyframe (at 600 ticks – counter displays 0000600).
7. Move the object to the bottom left corner, keyframe position -1000, -1000, -1000.  Set the rotation keyframe to 540, 540, 540.
8. Move to your next keyframe (at 800 ticks – counter displays 0000800).
9. Move the object back to the top left corner, keyfame Position approximately -1000, 1000, -1000. Set the rotation to 720, 720, 720.
10. Hit the space bar to play.

This moves the object around the front of the stage, so we’re not really using the 3D power of Kinemac yet (although we’ve implemented the 4th dimension of timing).  Watching how the object moves around in the space will help orient you to working with a sprite and keyframes.

You can also change the size of the object at any of the keyframes (or at other points by defining new keyframes for size) by changing the values in the size section of the Geometry tab of the Inspector panel.

Experiment with the X,  and Y positions and rotation at keyframe points to see the full effect of the movement on the stage.

Set the camera back to Default Static Camera on the View menu (press “D”) to see the effect of camera position.  You may have to zoom out to see the whole animation.

In the next tutorial, we will start investigating the Z axis or the depth of the field of view.

Enjoy!

1. then scratch your head, rewind, pause, try, look confused, pause, try, give up [↩]

Adults learn differently.  I know this, because, contrary to popular belief, I am an adult.  But most of what we do in teaching and learning is premised on pedagogy of the child.  This is not a complete waste of time and resources, but there are differences that are inherent in the way adults learn and the way children learn.

One of the primary differences between adults and children is the level of knowledge.  Now, many adults might point out an area such as computers to show that there are places where children know more.  Perhaps they do know more about the ins and outs of using a computer, but I’d hazard a guess, that the processes they used to get there are precisely the processing that adults possess in abundance.  Inquisitiveness and curiousity are perhaps the two key criteria that more children possess than adults, but there are a range of other skills that adults have that children don’t.

So why is it that adults are reticent to learn about computers?  What sorts of barriers to learning are there?  This is actually the subject of a great paper I am writing with a colleague (Arthur, who shall remane blogless).  What are the differences between adults and children when we design learning activities for them?  Part of this arose from my PhD and is based on Vygotsky’s work.  But we’ve taken it beyond what I found in my PhD and there are meta-levels that we’re looking at.

But, I’ve just come across some of the things we are elaborating.  I’ve been trying to learn Kinemac, but finding there are some things I just don’t get.  I tend not to be a visual thinker, I think in words, I create word pictures, so moving to learning a 3D animation process is somewhat of a challenge.  Working out the difference between what I know and what I think I need to know is exactly the process that is central to adult learning.  In some ways, particularly when we talk about learning computers, children are more likely to click something and think “what’s this do?”  Adults tend towards the “What does that button do? Where can I find out? How can I know before I do?” before clicking.  There’s a more considered (generally) and focussed approach which can lead to a more nuanced understanding.

For Kinemac, there is no guided tour that will build up my understanding of animation in parallel with my understanding of the program.  There are many examples out there.  Kinemac has a gallery of small projects, with both the movie and the project file.  But, each one of them is predicated on an understanding of 3D relationships (4 if you include the time aspect which is really breaking my brain).  It’s not an area I’ve worked in much.  It’s not something I understand.  It’s something I must learn.

That’s the problem I’m facing.  I’m an adult, and I’m learning.

Over a year ago, I came across an interesting post on Social Software and the need for it to be ‘in-the-flow’ of what we do.  I’d suggest that almost anything that we want to accomplish is much easier when it’s in-the-flow. It’s a concept that keeps me wondering.  Why didn’t something happen? Was it in my flow of work?  Did I remember it? Or was there just too many other things bubbling to the top that flowing wasn’t an option that day.  I’ve struggled with this and keep trying to get things flowing.  I recognise the importance of having certain activities, certain kinds of activities, become an unthinking achievement.  I don’t mean that to be that there is no thinking required, but that I don’t have to remember to do it.  It’s there, it gets done.

Which is perhaps why there is no new animation.  I haven’t yet figured how to have that extra little bit of fun (aka learnin’) on top of everything else there is.  Sometimes, there’s I can peek out to see things, sometimes not.

It won’t be helped by the two networks I’m trying to set up.  One is for the Griffith Business School Teaching and Learning Community of Practice (which for Web2.0 reasons I’m relabelling GBSTeachers) and the other is for Smart Water.  Both of these groups have communication problems and even though I’m not good at keeping up blogs and tweets and multiple updates going[1], I know the process and hopefully can get things going. Some of the activities I will delegate, some I will facilitate.  Hopefully there won’t be too many that I actually have to do.

And if all goes according to plan, I may find a few extra minutes a day to play.  What better things are there in life?

1. of course, the issue really is that I have very little that I think will be interesting to the good souls out there, I can tell by my site stats [↩]