Adobe Flash: Walking Animation

Adobe Flash: Walking Animation

As part of our Interactive Media assignment on Flash, we had to create a walking animation. We could have been as creative as we had liked, but I chose to go simple. Originally I misunderstood what we had to do so I started designing my own character and getting really stressed out about how I wasn't lining anything up correctly and how nothing would animate and so on... Out of my annoyance I quit flash and didn't save it, thinking it would be useless and not worth doing anything with. Then I realized I could have used it in this blog post to show my improvements.

After speaking with my lecturer, he explained to me how I could trace over a previously made animation which you could get on a website on Photoshop. I did just that, I found a 4-bit animation which was just 4 pictures (similar to above) and I copied each into Photoshop and traced round them.

After this it came to making the head look like myself, I first tried to draw it in Photoshop, but that didn't work out at all. I then had the idea of what I had just done with the body and trace over my head, so I got a friend of mine to take a picture of the side of my head and I traced round it in Photoshop and colored it in to match, I just used color picker except for my skin-tone because the lighting was terrible. After this I filled in the body and saved each image separately and to the same size and resolute to make this easier for me in flash.


I opened up Adobe Flash and set up to the require settings. Because there is only 4 frames I set the frames per second (FPS) to 4. I then added a line for 4 frames (as shown below and to the right) to act as a guide for the feet to sit and then imported each frame and aligned them. When I exported, the line was removed as it was just a guide! Also to note, because each image has a white background on it the line would get lost behind the image, so I put it above so I could align the feet. 

Below is my finish animation product: