Monday 9th December 2013

Walk Cycle Completion

Walk Cycle

So today I made it my goal to complete my walk cycle fully, so now the cat has facial features and I also redrew the shape of the head to make it appear more like a cat. To redraw the head and neck I used the onion skin tool again. 

This is what my cat now looks like. I don't intend to add colour to the cat and instead plan to keep it white. However if I have time once I have finished my animation I may consider add colour.

As you can probably notice there is a blue border around the cat, this is because I have also made the walk cycle a symbol so I can use it whenever I need to and it'll loop constantly when put into the time line of my animation. This particular symbol is a movie clip. There are two types of symbols I could use for my animation - graphic and movie clip. I chose to use a movie clip over a graphic as a graphic is only used for static images, whereas movie clips are like small little animations designed to loop is put on the timeline for long enough. To create a symbol you need to go to Modify and then select Convert to Symbol. Then a small window will open and you can select which type of symbol you wish to use.

Once you have finished the symbol will appear in the Library and then you'll be able to access it at any time and put it onto your stage whenever you need it.

So after selecting the first frame of the walk cycle and converted it into a movie clip I still need to add all of the other frames or otherwise the walk cycle will be incomplete. So all I needed to do was highlight all of the frames (excluding the first frame because it is already part of the movie clip). Once highlighted I right clicked and selected Copy Frames. Then I needed to double click on the image which was the symbol to get inside the movie clip and paste the frames onto the timeline (Right click on the frame and click Paste Frames).

The last objective I needed to complete to finish off my walk cycle was to again alter the frames in the move clip. I have been working at 13 fps during the walk cycle, however, I will not be able to work at 13 fps during my animation. I need to be working at 24/25 fps as this is industry standard. But I cannot just put the animation to 24 fps and just leave it because this will slightly alter my walk cycle. What will happen is that the walk cycle will turn out to be nearly two times faster than it is supposed to be. This is because when playing the movie the walk cycle will be playing nearly twice a second as 13 frames is now just over half a second.

So this is what I have done to fix the issue caused by putting the frames per second up. I have added a frame to each keyframe so now each image plays for two frames. However this now means the movie clip is now 26 frames instead of 24. It may seem like a problem but it will not actually make a difference as the cat is going to be on screen for much longer than one second. If the cat was only on screen for one second it would mean the animation would cut off the last two frames of the walk cycle but this won't be an issue for an animation longer than one second.

Scrolling Backgrounds

Adobe Flash Tutorial: Scrolling Background

So as I was finished with my walk cycle I then needed to learn how to make a scrolling background effect in Adobe Flash. After watching the above video I learned very quickly which is really good to know it's very easy. To make a scrolling background all you need to is have a background that is larger than your stage size.

Here's an explanation:

I am working at a stage size of 1280 pixels by 720 pixels (width x height). I want to use a side-scrolling background so that would mean I need a background with a width greater than 1280 pixels but the height would still need to be 720 pixels. For the purpose of explanation lets suppose I use an image of the ratio of 2560 x 720. I would need to then set a keyframe at a certain frame, for now I'll use frame 150 but in my animation I would need to set it at a specific frame because the background would need to match the speed of the cat.

This is my 2560 x 720 image.

The next part would be to right click on the timeline and select Create Classic Tween. Once the tween is set the background is then completed.

This is just a simplified version of how I intend to use my backgrounds. Just like it was explained in the online tutorial I will need to set different speeds for my background, midground and foreground to give a better effect. I will most likely also use a looping background which will mean that the background I use will need to be able to provide this effect.