The past couple weeks we have received lessons on both HTML5 and CSS in which we practiced both text, layout, images, and spacing. However, this time the purpose of this particular workshop was to practice our skills in CSS coding to animate an illustration of ours.
I chose to illustrate something in relation to my upbringing and culture to motivate and interest me more in the actual coding part of this small project. At the moment, I am not the biggest fan of coding, as I still haven’t gotten the hang of it, but I know that with more practice and time, it’ll come. Before the lesson, I brainstormed at home some potential illustrations I might want to go with. I was torn between an Onigiri (a rice ball) and a Kappa (a Japanese mythical creature that lives by the river). After several attempts to create an onigiri, it didn’t turn out how I wanted it to, so I went with the Kappa. I illustrated a cute Kappa with short legs and blushed cheeks.
One of the 12 principles of animation I implemented was appeal (giving a character personality to make them real and interesting), and the reason for this is because the Kappa is a mythical creature, but giving it the behaviour of joy over a cucumber can create a connection with my audience, just like how we get excited over certain foods.
Keeping this characteristic in mind, I created my storyboard.
Storyboard
The first phase of my storyboard was sketched out on paper with a thin pen. I wanted to give my Kappa a little dance by jumping side to side and waddling its arm with a small cucumber in its hand. I outlined after my sketch in a thicker pen to make sure the facial expression stood out of my Kappa.
Adobe Illustrator
Following the examples given to us in class, I followed a simple number of frameworks. I have given myself five frameworks to work with in Adobe Illustrator, as I know I would be able to easily manage them but also not get overwhelmed by them. Knowing that I would use 5 frames, I adjusted my artboard to 500 x 2500 (5*500) and equally distributed it to their respective spaces. I did a little readjusting to my illustration to make it more cute and not so duck-looking. A last-minute idea came to me that I wanted to display two different facial expressions: a neutral one and a blushed happy one. Keeping in mind that I only have 5 frames, I only made harsh and big movements to my illustration to ensure I would actually see it move.
CSS Coding
I was more than relieved knowing the code was given to us, as I knew if I had to figure it out from scratch, I would struggle a lot. I followed the code precisely on VisualStudio and named my respective HTML and CSS documents correctly in relation to my animation.
Trial and error
After following each and every code correctly, there were still some things that did not satisfy me or look right. On my first run, I had my animation, but it was extremely choppy, and I had the still animation on top of it, making it a little unorganised. Before asking for help from my peers and teachers, I wanted to figure it out myself through trial and error to see if I could fix it. I played around first with background positions.
CSS: Background Position
I noticed that I could see the animation come from the left, as if it were moving on a converter belt. I edited the background position from -500 to -2500, the total width of my artboard animation. This created a seamless animation instead of a conveyor belt transition.
HTML: Line 9 Code
This was pure luck for me. I was irritated with the still image on top of my animation, as it made the page look tacky. I looked at the html file and decided to completely remove line 9 of my code since my logic was that it was sourcing an additional image on top of my animation, which is sourced separately from my CSS, and if deleted, it should delete the still image, which it did.
At first, when figuring out how to make these small changes in the lines of code, I was overwhelmed, as I knew my skills and knowledge in code were very limited. However, from a prior coding class we had earlier in the week, our teacher suggested that if we wanted to play around with our code or conduct a trial-and-error experiment, we should make a copy of our code to ensure that the working code isn’t messed with. That is exactly what I did, and I noted down what I did so that in the future I can understand why I did it and what the code did.
Once I got the hang of both the illustration and coding on my own, I decided to improve my animation. I changed it from 5 to 12 frames and added an additional facial expression of sadness because my Kappa has dropped his cucumber. Similar to stop motion, the more frames you have and the smaller the movements you make between the frames, the smoother it’ll be.
Overall, I was very pleased with this small project because when you use an illustration that speaks to you, you become more motivated and interested in making it actually work. There were instances where I was just going to call it a day and have those extra things on my page, but I knew if I thought outside the box, I would be able to do it. Considering I have limited knowledge and experience in the language of coding in general, I implemented my knowledge of math and simple ‘logic’. At first, it seems that they have no relation whatsoever; however, the more I looked at the code, the more it started to make sense. Trial and error also helped me through the process a lot because, through each small edit, I could see how that impacted the background position and the play time.
Obviously, I only did this trial and error because I knew I had a large time frame to work with, so I had the opportunity to create those mistakes on my own and experiment. However, if I were given an hour or two, I would have taken a look at the code myself until I couldn’t anymore and asked those around me or the teachers for help. There is a time and place for experimentation, but when given the time, it should be used to the fullest extent, as we learn greatly from the mistakes we make.
Leave a Reply