Animating The Robot

To animate the Robot I first needed to create a new Movie Clip with all of the Robots body parts in, this was so that I could play around with them within the movie clip and then the animation would be saved in there, I used a very useful and common technique of motion tweening which basically creates the animation of the character moving by analysing where you have moved the body parts to in each keyframe, this therefore creates a smooth animation, as shown below:

Frame 1



Frame 30



As you can see the body was moved up and when the motion tween is applied it will fill all of the empty frames between frame 1 and 30 with the different stages of the animation, to make this animation seem more realistic, I used the ease in/out feature which basically slows things down more realistically when coming to a halt as opposed to stopping suddenly, this is a good feature of Flash and came in very handy with my animations.

There is some ActionScript in this Animation scene also which basically controls the animation of the Grow that I made for the Robot, there is a GO button and a STOP button and these are simple to make as they only require a short amount of code as shown below:

stop_bt.addEventListener(MouseEvent.CLICK, onStopClick, false, 0, true);
grow_bt.addEventListener(MouseEvent.CLICK, onPlayClick, false, 0, true);

function onStopClick(evt:MouseEvent):void {
growbody_mc.stop();
}
function onPlayClick(evt:MouseEvent):void {
growbody_mc.play();
}

As can be seen the "grow_bt" button was linked to making the "growbody_mc" Movie Clip play and the "stop_bt" was linked to making the animation stop, this is good for controlling the different movie clip animations that you could include in a larger scale file.

ActionScript 3.0

This is the new version of ActionScript and is different to any previous versions, as some of the commands that I wanted to achieve in this piece of work were different, so therefore I had to do some research and read some tutorials on how to get the effects that I wanted.

Drag And Drop

The first effect that I wanted to incorporate was the Drag and Drop capability of the different spare parts for the robot, this process was simpler than I first thought as it only requires a short amount of code to do,

There are several different ways to get the same effect, but some of them have problems with frame rates etc.. so I found one that was smooth and easy to manipulate, the code as shown below, simply says, when movie clip is clicked pick up and drag and when the mouse is let go drop it, this can be applied to any of the movie clips by simply giving the movie clip an instance name and including this in the ActionScript, this code is shown below:

eyeclosed2_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
eyeclosed2_mc.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseDownHandler(evt:MouseEvent):void {
var object = evt.target;

object.startDrag();
}

function mouseUpHandler(evt:MouseEvent):void {
var obj = evt.target;
obj.stopDrag();
}

Another thing that I used ActionScript for was to give a movie clip a link to another scene that was in my fla file, in this case I wanted the button at the top to link to the scene with the animation on it, this was also done very simply and again only required a small amount of code as shown below:

open_mc.addEventListener(MouseEvent.CLICK, nextscene);

function nextscene (evt:MouseEvent):void {
gotoAndStop(1,"Animation");
}

This basically says when "open_mc" is clicked go the 1st frame of the "Animation" scene and stop there

This completes the ActionScript for the Drag and Drop scene next I will talk about how the character was animated with his walking cycle and how the Grow and Stop buttons work.

Creating The Character In Flash CS3

The first thing that I needed to do was to draw the character (Robot) on the Flash Interface, to do this properly I needed to draw one part at a time and save it as a Movie Clip so that it could be easily reused and animated at a later stage, also each body part of the Robot was made on a different layer this allowed for more flexibility and was easier to see which layers were what.

Shown below is the process of the drawn body being turned into a movie clip,

First of all, everything needs to be selected by pressing CTRL + A (whilst all other layers are locked) this will select everything on the current working layer, with this done go to Modify > Convert To Symbol (F8) and it will bring up the below menu asking for a name, and asset type when done click OK and it will be then saved in the Library window on the right hand side, where it can be dragged onto the main scene whenever another of that movie clip is needed.

Drawing



Convert To Symbol Menu



Library



Once all of the body parts of the Robot had been made and saved as individual video clips I had the result that is shown below:



Now that I had all of these I could create the background which was a simple use of rectangles filled with the appropriate colours, and could move on to the ActionScript and animation.

Planning

The first step was to plan what I wanted to make in Flash, this needed me to do some research into current characters and see different positions etc... and look into how they worked and all of the different parts that are attached to one character, different arm positions etc...

I made 2 documents that illustrate 2 popular game characters in a variety of different stances and views, this gave me a good idea of what my character needed to be like...

Master Chief - Research



Mario - Research



With this in mind I made a few sketches of different characters that I had thought of, one was a furry monster, one was a shark, and one was the robot that I have picked for my final piece,

There were several reasons why the first 2 were not picked for my final piece, these included, being difficult to animate and draw, and nothing that they could really do except move around, this is why the Robot was a good idea as it allowed for me to create the spare parts which can be swapped and changed around to allow for the user to create the robot themselves using different parts of its character model, and there were more options for animation if any were to be incorporated.

The initial sketches are shown below:

Shark



Robot

Monster

Once the character of the Robot had been finalised as my final choice I proceeded to make a storyboard for the characters animations and interactivity, this storyboard outlined all of the major assets that were to be used and what each button/asset did on the main scene

Storyboard

Now that planning was complete I could go into flash and start building my character.