In reading The 12 Principles of Animation it seemed that all of these animation techniques seemed so obvious. Ollie Johnston and Frank Thomas talked about how a lot of these methods were not very obvious during the early days of animation. Through experimentation and time, eventually these principles were developed.
When reading through them, they all seemed so self-explanatory. I wonder if background in dance and choreography has something to do with this. It could be that dance is almost like live action animation.The principles that I think relate the most were staging, follow through, and timing. It could be that dance is almost like live action animation.
Moving closer to designing a functioning CSS-styled site. It is going slowly but surely. I don’t really care for the way my site is looking yet, but right now I am trying to get a candle on the html/css before I go ahead and trying to be creative visually.
Ah the process of creating an animatic!
I started off by creating a flip book consisting of 50 frames. Although it took an insane amount of time to draw each frame by hand, I thought the final product was pretty cool. I had never made anything like that before.
From there I developed the story a little further. I knew that I wanted the narrative to be a little more complex for my final animatic, so I drew out a story board. This would help me organize exactly what frames I would want to include in my animatic and eventually save me a lot of time.
Then the final steps were illustrating my frames in Illustrator and cutting them together with some sound in Final Cut Pro. I am pretty happy with the final product. Everytime I watch it I laugh.
Below are links to my two different programs written over the weekend. Damn they took a long time!
The first one has simple user interactivity.
Clicking the mouse lets you draw black circles.
If you press “G” you will see a square which changes color with every mouse click.
Press any other key to return to drawing the circles.
The second program is a drawing application.
Press “R” to change the color to red.
Press “G” to change the color to green.
Press “B” to change the color to blue.
“S” and “C” toggles the brush between square and circle shapes.
The UP and DOWN arrows increase and decrease the size of the brush.
The RIGHT and LEFT arrows increase and decrease the alpha channel of the color.
DELETE clears the canvas.
Response to the following reading:
1. Understanding Comics by Scott McCloud: Chapters 4 (Time) and 5 (Line)
2. The Cambridge Introduction to Narrative by H. Porter Abbott: Chapter 1
The readings stress importance of time and emotion in how they relate to narrative. Specifically in a 2-dimensional medium, such as graphic design, these elements are crucial to the success of the work. Most of my design work has been in interactive and print design, and even though this type of content doesn’t have such obvious narrative, it still uses a similar structure. I attempt to tell stories in my work, and the images, colors, and composition helps to do this. In Chapter 4 of Understanding Comics by Scott McCloud, he talks about how the eye scans over a single static image, dividing each segment into its own period of time. This intuitive behavior, works to the designers advantage, has they can construct their designs with this in mind. This is usually done by placing important elements from left to right, top to bottom.
In addition to the placement of elements to create sequence in design, emotions can be generated. This can be done by juxtaposing elements. This conflict of images, colors, etc. creates tension within a design that helps to convey a specific emotion. Another example given in the reading is the way that icons effect emotions of the viewer. Icons are contextualized by social context and our experiences, enabling the designer to express a deeper message with the use of one symbol.
The following three images are the initial paper prototype I developed for the documentation site that I will be developing. This prototype was tested to see if its role, as an easily navigated interface, was true.
Here is a storyboard of how I envisioned my typical user to use my prototype.
A classmate of mine, tested out this prototype, and “clicked” on the buttons that I had intended for the user to click on. Success! We did however discuss how the bottom navigation lacked a home button, so that will be added for the next version. In addition, there also needs to be a way for the user to return to a project summary if so inclined.
Here is a link to my css styling site regarding a very serious topic to all of us here in bootcamp.
So tonight was my first attempt as using Processing to draw and animate objects.
My first program just draws a simple picture. The objects are are proportionate to however large the canvas size is set to. You can check it out here!
My second program animates a ball which is constantly changing color at random. The ball bounces back and forth. There is another ball, whose position is based on the mouse location. You can check it out here!