Luke's magic pocket
Case Study
Description
For my web 3 class, I had to create a small story with 4 different type of animations, 1. Sprite sheet 2. JavaScript library 3. JavaScript Loop 4. Photoshop frame by frame (Animation of my choice).
The main idea was to create a story that people could relate easily but with a small little twist. If you have seen Doraemon, imagine him as a stick human. Here is Luke and his magic pocket.
Tools used:
Other than coding, I used illustrator and photoshop to create these animations, there were some elements created with procreate.
Sketches
Challenges
I had a couple challenges for this project. Since, I am still learning how to properly draw human beings, and the deadline for this project was somewhat close. I decided to chat with my client to make sure he would be okay with the idea of stickman instead of a real human. Luckly he accepted it.
For the spritesheet it was fairly simple because my character was walking, and having an idea
Once I had to work with JavaScript I needed to understand how the SVG image would create the animation. I knew how to create the elements that would surround the animation, but once it came down to the animation it was pretty challenging make transition from bright to dark colors.
In order to achieve these animations I had to make an extended research, trial and error was my best friend for a couple of weeks.
Example
This:
Turns into this:
Final Product
As for the final product, I showcase the story for the project. Displaying the animation, writing a small paragraph explaning wha is happening on that frame and the type of animation used.