Unit 10:Characteristics and contexts in art & design
Google Doodles
30th Anniversary of PAC-MAN
Soccer 2012
This interactive google doodle made for Pac-Man's 30th birthday lets you play a google themed level of Pac-Man after clicking the insert coin button.
This interactive google doodle lets you play as a goalkeeper trying to stop as many shots as possible after clicking the play button.
Halloween 2012
This halloween themed interactive google doodle plays different animations depending on the objects that you decide to click on.
Ideas
Gaming
A google doodle based on video games where classic and iconic characters appear and do a small and short animation when clicked on. The interactivity would be similar to the Halloween 2012 example that I used where the characters appear and do an animation when clicked on.
Sport
A google doodle based on a sport, for example football, where you click play and an animation plays where a football player scores a goal.
Storyboard
Experimentation
I experimented with buttons and scripting in Animate to try to create something simple. What I did was script the scene so that the animation would play when the button was pressed. I had three layers. One for the button, one for the animation and one that was for the actions and script.
This is the script that I used to make sure the animation would be stopped at the first frame and that it would then play when the button for it to play was pressed.
These screenshots show how I modified the button so that it would change when it was pressed and when it was hovered over. Red indicates that it is being hovered over while green indicate that it has been pressed.
Script
Button
This is the coding that I used for my project. I took most of it from the code snippets that animate provided and combined some to create the effects and functions that I was looking for. I also used three different scenes as I created three different possible outcomes, and each of these scenes required separate coding
Actionscript
Doodle
This shows how I coded this circle that I made so that it would follow the mouse's movement wherever it went. I converted the circle into a movie clip and then went into the actions tab in a different layer called actions to introduce the required code. I tried two different variations of this in which the circle followed the mouse differently. I also messed around with the speed to see how it would affect the circle's following.
These screenshots show the bouncing ball that I made. To do this I created a circle and converted it into a movie clip. Then, in a different layer which I called "actions", I went into the actions menu and introduced coding so that the ball would bounce when the animation started.
Variation 2
Variation 1
Mouse Follow
Bouncing Ball
Motion Tween
These screenshots show how I created the animation that would be played for experimentation. I created a motion tween and adjusted the number of frames to adjust how fast the animation would play. I moved the circle on the last frame so that it would go in that direction throughout the frames.
At the end of each shot I added a button to restart the animation. I did this by writing down the word Restart using the text tool and then converting it into a button. After this I adjusted it so that it changed colours when hovered over and clicked. I added a code to it that made the animation go the first frame when it was clicked.
This is the third shot. For this one I once again dragged the motion tween line to make the path seem more realistic and natural as well as adding rotation to make it seem like a real and more natural shot.
Here is the second shot. As it is more simple and goes in a straight line I had a lot less adjustments to make in this case didn't add any rotation to the motion tween.
This is my first animated shot. I used motion tween to make it go into the part of the goal that I wanted. I figured out that I could drag the line of the motion tween to make it bend and take a different path, and used this to my advantage to create a more realistic shot. I also added rotation to the motion tween so that it looked like the ball got spin when it was kicked, which makes it more realistic and natural.
In this screenshot I am showing the interactive section of the project. There are three balls and depending on which one you click you will trigger a different animation. For the ball on the right I used a code that made it go to a specific frame when clicked as the animation was in the same scene. For the ball in the middle I had to use a code that went to a different scene. As the animation was in the scene that came after I used a code that triggered the next scene. For the ball on the left I used a code that let you choose which scene it triggers, which of course was the one with the corresponding animation in this case.
This is the first animated part, which will be the ball slowly falling onto the field. I used a motion tween and gave this a rotation so that the ball will look more realistic when falling as if it had a spin, otherwise if I had kept it the same the ball would just fall straight and would seem less natural that way.
Here I am showing what will be used as the play button. I drew the google letters and then made them into a button. I coded it so that the rest of the animation will play when it is pressed. I used motion tween to make it slowly get smaller as well as using code to make it slowly fade away after a certain frame.
This is the start of the animation that stays consistent throughout the whole of it. It resembles a football stadium as it is a sports themed animation based around this specific sport.
Animation
