During this lesson, I completed my animation. Firstly, I drew the graphics of the glass of the milkshake and the text. I then drew a graphic of the whipped cream can, and used the classic tween to animate the movement of it moving above the chocolate milkshake as it added the whipped cream. Next, I used the bowl image, which I used in scene 2 previously, to animate it moving across the top of the glass as it added the chocolate sauce to the milkshake. Finally, I used drawing tools and a frame by frame animation to show the chocolate sprinkles falling on to the whipped cream. There were no changes made to the design.

I reinforced my skills from the previous lessons to create this scene again, which means that I used the same tools for the same purposes. This included the drawing tools to draw the milkshake, the toppings, and the whipped cream can: (paintbrush, eraser, line tool, fill tool). I also used the classic tween to animate the ingredients as they moved by the milkshake, and the frame by frame movement to animate the actual whipped cream being added, the chocolate sauce, and the chocolate sprinkles.

During this lesson, I completed animating scene 2 and scene 3. For the second scene, I simply added tweens and frame by frame animations to the spoon and ingredients to animate them being added to the bowl and mixed. For scene 3, I added all of the text and buttons as intended in my design idea. I also drew a blender and ingredients, where I then used tween and frame by frame to animate the ingredients being added to the blender and mixed.

One change that I made to my design was that I did not include any transitions between the scenes with the contents moving out and back in. This was because in my first scene, I had already chosen to give the text an effect when it comes into the scene. If I were to add more effects and transitions to the elements of the next scenes when they further move in and out of the stage, my animation would have too many effects and things going on to look at, which would make it too confusing. Instead of placing the focus of the viewer onto the transitions, I have chosen to place emphasis on the actual animations of the recipe being made within the scenes instead. This will make my animation more clear, straightforward, and less confusing. Another change that I made to my design in scene 2 is that I included an extra step of the ingredients being whisked. I decided to include this step as it was actually an essential part of the recipe and I had forgotten to include it in my plan. For scene 3, I made another change to my plan that was the same as in scene 2 – I decided to include graphics of the ingredients to make what is being used clear to the viewer. Rather than just showing random substances being poured into the blender, showing the packaging of the ingredients made the sequence of the recipe much easier for the viewer to follow. Finally, I had planned to make both scene two and scene three loop the sequence of the recipe once it has been played. However, when planning, I did not realize that I need to make the sequence of the scene stop playing in order for the button that transitions to the next scene to work. I have therefore chosen to make the sequence of each scene only play once to keep the recipe straightforward and to keep the buttons working.

For scene 2, I used the classic tweeen to animate the ingredients that were being added into the bowl. Starting with the first keyframe, I simply drew all the graphics of the ingredients, the spoon, and the bowl that will be used. Then, I dragged the cursor across the timeline and created a new keyframe a few frames later. On this keyframe, I used the selection tool to place the spoon into a new position inside one of the ingredients. I then right clicked on the timeline and created a classic tween This automatically created a sequence where the spoon moves across the screen into the can of one of the ingredients, such as the coconut oil. Then, I added more classic tweens to animate the spoon moving out of the can, down to the bowl, and then rotating so that it is ready to tip the ingredients into the bowl. The use of the classic tweens allowed me to animate the movement of the spoon and the maple syrup smoothly as the ingredients are added to the bowl smoothly. I also used these tweens to animate the ingredients being added to the blender in scene. Additionally, I used a frame by frame animation with the drawing tools to animate the actual ingredients being added into the bowl. When the spoon tips down, the first thing I did was use the paintbrush tool to draw a small, thick line to represent the coconut oil. Next, I created a new keyframe, where I added another few lines to show that more of the coconut oil was falling off the spoon. I then repeated this step for about 4-5 more keyframes. Once I decided that enough coconut oil was falling off the spoon, I animated the step by step downward movement of it falling into the bowl. On the keyframe I was on, I erased some of the top of the coconut oil. Then, I drew another small part of it further down. This gives the effect that it is falling into the bowl. I repeated this step until the coconut oil disappeared. Furthermore, I learned how to use the color tint tool for scene 3. As the cocoa powder was being added to the blender and was being mixed, I learned how to use the color tint tool to darken the color of the rice milk to show that the ingredients are being mixed together. Firstly, after the rice milk was added and covered up the bananas, I converted the milk in the blender into a symbol. This allows me to edit is as one graphic together and not make any adjustments to the shape. Then, a few scenes after the cocoa powder was added, I inserted another keyframe. Next, I used the selection tool to select the milk milk symbol. On the properties tab, I went to “color effect”, selected “tint” under the “style”, and changed the tint color to a dark brown. I then adjusted the tint to 68% so that the white had a darker shade of brown in it. Finally, I added a classic tween in between these starting and ending frames to create a smooth movement of the milk color turning a chocolate-brown. I repeated this progress for when the ingredients were blended.

Today, I started creating my final animation for this project! During the lesson time we had, I finished designing the first scene and half of the second scene. For the first scene, I drew the final outcome of the recipe, which is the milkshake. I also added and animated all text and the button. For the second scene, I added all of the text and buttons as planned, and drew the ingredients and the spoon that will be used to demonstrate the making of the recipe. I also found a copy-free image of a bowl that I will use to add the ingredients into. I was only able to complete adding all of the elements for my second scene, as there was no time left for me to actually animate them.

One change that I made in the first scene from my design idea was that I was unable to animate the glass of the milkshake so that it rotates around because I realized that this was too much of a challenging task for me to complete within the given time to design the animation. Making the glass look like it rotates around would require me to make huge changes to the milkshake drawing for each keyframe where it turns, as I would have to draw the lines on the glass, the angle of the straw, and the shadows of the whipped cream differently to make the rotation movement appear realistic. This frame by frame animation would require me to be very precise and spend a lot of time drawing, which would certainly cause me to be unable to finish my animation within the given class time. Furthermore, I changed the font of the title, subtitle, and body text. Although I had planned to use the font arapey, I was unable to find it in the properties section. By scrolling through the fonts that animate provided, I decided to use the font baskerville instead, which looks very similar to what I had planned to use. To keep a consistent house style and make my animation look organized, I have decided to use this new font for all text that will be used in my animation. Additionally, I changed the font-size of the body text for scene 1. Although I had planned to use font-size of 18pt, I realized that this was way too small and made the text quite unappealing for the viewer to read. Instead, I used font-size 22pt to make the body text stand out more and easier to read. Finally, I realized that the first scene looked quite boring for the viewer, as there was no kind of animation or interaction going on at all. To make this more interesting, I decided to give all elements in the scene revealing effect. When the scene is played, the text reveals itself letter by letter until it is fully displayed. This text effect makes the scene look more interesting and so keeps the viewer interacted. I also made some changes to my design when animating scene 2. In my plan, I said that I would animate just a spoon adding the ingredients of the recipe into the bowl. However, I realized that the ingredients would not be recognizable for the viewer if they were just shown on the spoon, as they look like they could be any type of substance. Therefore, before adding the ingredients straight into the bowl, I traced the packaging of the ingredients. The spoon will then be animated to take the ingredients from the package and then place them into the bowl. This will make the ingredients that are being added much easier to identify for the viewer.

On tool that I used was the paintbrush tool. I used this to trace the outside lines of the milkshake, spoon, and ingredient drawings, and then draw the details of the graphic on top. I also used the fill tool to fill the background colors of the milkshake, spoon, and ingredient drawings in. This allowed me to speed the drawing process up and draw precisely within the lines. I learned how to use the line tool because sometimes, such as when I was drawing the glass of the milkshake, I was unable to accurately trace the straight lines using the paintbrush tool. Therefore, I used lines to represent the drawing of the milkshake glass, which made the form look more realistic. I also used the rectangle tool to make the shape of the shape of the buttons. Finally, I learned how to use the eraser tool more precisely to make the revealing effect of the text. To do so, I first wrote the full text out. Then, in each new keyframe, I erased half of a letter. This created an effect where the letters were un-revealing themselves through a frame by frame animation. However, I wanted the letters to appear, and not erase out of the screen. I therefore also learned a new feature, which is the “reverse frames”. This feature can be found by using the cursor to select a number of frames on the timeline, right-clicking on them, and then selecting “reverse frames”. This will automatically mirror the order of the selected frames, and so creates a revealing effect for the text.

Buttons, in Adobe Animate, are another kind of symbol, which contains four frames. Buttons are useful in animation, as they allow interaction for users. Other than just having to sit and watch an animation play, users can investigate what new scene appears when certain buttons are clicked on, and what happens to the visual state of a button when it is scrolled over or clicked on. The following is a short tutorial on how to create buttons.

Button Tutorial

1. Start off by opening Adobe Animate and create a new ActionScript 3.0 file. On the stage, the first thing to do is to draw a graphic that will represent a button. For my animation, I have used the rectangle tool to create a rectangle button shape. I have also included text on top of the shape so that users can identify the rectangle as a button. Remember that you can customize the colors, and size of these tools in the properties section.
2. Once you have a graphic of a button set up, the next step is to convert it into a symbol. Firstly, using the “selection tool”, drag the cursor so that all objects/items that you wish to represent the button are selected. Now right click on what you have selected, and press on “convert to symbol”. Next, you should see a new small window showing up. You can rename the button to make it more recognizable, but know that you must change the “type” of the symbol to a “button”. Once you have done this, press “ok”. The blue outline and circle in the center of your shape now show that you have created a symbol, which can be used as a button.
3. Now, to make the buttons functioning like in my animation as displayed above, you will need to create a new scene. This is necessary because whenever a button will be clicked on, the setting of the animation will change to the next scene. To create a new scene, go to the bar at the top of your screen, select “insert”, and click on “new scene”. You can transfer between different scenes by clicking on the movie clip symbol, which is displayed on the top right hand side next to the stage of the animation. On the new second scene, you can insert whatever you like to appear after the first button is pressed on. This can be another button, like in my animation, or simply any kind of graphic.
4. Next, click on the movie clip symbol and go back to scene 1. Here, find the keyframe where you have drawn your button, and right click on it on the timeline. Press on “action”. This will bring you to the action dialogue box, which lets you access all actions that will control your animate movie.
5. After you have opened the actions panel, an empty script should appear. In the first row, type “stop()”. This is the stop statement, which stops the timeline at the frame it is played on. This is useful for our button animation, as it will stop the movie from looping between different scenes.
6. The next step is to insert a code snippet into the actions panel, which will tell animate that the next scene should be played after a button is clicked on. Inside the actions, panel, find the symbol with two arrows next to each other and click on it. Then select “action script”, double click on “timeline navigation”, and then select “click to go to scene and play”. This will insert a code that links your button to the next scene because when clicked on, animate will go to the next scene and play it. Look at the bottom of the code, where “MovieClip(this.root).gotoAndPlay(1, “Scene 3″)” is written, that the correct scene that you wish to transfer to is selected in the brackets. If not, be sure to edit the code so that this is correct.
7. And there you have it! You can test out your animation by going to “control” at the top of your screen and clicking on “press”. If you want to make a longer animation like mine in the example above, simply repeat the above steps while creating new scenes each time.

The shape tween is another tween used in animating to create the illusion of an object/shape morphing (transforming) into another. This tool is useful because just like the other tweens, Adobe Animate automatically generates keyframes for the transformation that makes its neat and realistic, which makes the shape tween simple and easy to use. Furthermore, morphing different shapes/objects allows you to create special effects in animation that make it interesting and fun to watch. For example, you could morph an image of a fish into an image of an elephant, or you could morph different letters of a word into shapes. The following are two quick tutorials on how to create a basic shape tween and morph text into shapes.

How to Create a Basic Shape Tween Animation

1. Start by opening Adobe Animate and creating a new HTML 5 on canvas project. Firstly, create a keyframe and insert a shape on it. To find out more about using shapes, check out my previous tutorial. For my animation, I have inserted a shape of a blue-pink pentagon on the top left side of the screen.
2. Now find a section on the “timeline” where you wish the animation to end, and insert a blank keyframe on this section. The reason we are using a blank keyframe is because we don’t want to copy the shape, but we want to morph it into something else.
3. On the ending keyframe, insert another shape that you wish your first shape to morph into. I have inserted a yellow-pink circle on the bottom right side of the screen. This means that in my animation, I am going to morph the shape of a blue-pink pentagon on the top left side of the screen to a yellow-pink circle on the bottom left side of the screen. While the shape morphs into the other, it will also move across the screen to the new desired position.
4. Now, find any space between the starting and ending keyframes on the timeline, and right click on this spot. Then, select “create shape tween”. What happens now is that the frames turned green to let us know that Adobe Animate had created a shape tween. In this process, we have created the starting and ending keyframes, while Animate has inserted all of the frames in between. If you scrub your playhead all the way from frame one down to your ending frame, you will be able to see the two shapes your are using slowly morphing into each other. And there you have it!

How to Morph Text into Shapes

1. This tutorial is similar to the one above. Start by creating a new project or a new layer to the previous one, and insert text, which is found in the “tools” section. Once you have done this and customized the color, font, and size of the text in the “properties” section for how you wish them to be, we must break the text apart. This is because you still have text that is editable, which cannot be morphed into a shape because text that is editable is not a shape. Therefore, with the text selected using the “selection tool”, go to “modify” at the top of your screen and press “break apart”. The first time. you break it apart, it will break into all of the different letters of the text. Therefore, with the letters selected, go to “modify” and chose “break apart” again. It should now look like the letters were created in merge drawing mode as indicated by the little dots when selected, which means that it is no longer editable text. What this does mean though, is that the text is now a shape, meaning that it can be morphed using the shape tween.
2. Now, following the same steps as in the previous tutorial, you can morph the text into any shape by choosing an ending frame and inserting a shape of your choice to morph into. In between the starting and ending frames, you can right click and select “insert shape tween”, and there you will have it!
3. If you want to make your animation even more complex and animate each letter of a word individually as shown above, you can cut and paste each letter from the word onto its own layer. To do so, use the “selection tool” to select and individual letter, and go to “edit” at the top of your screen and press “cut”. Then, create a new layer for the letter, go to “edit” again, and select “paste in place” so that the letter is in the same position as in the previous layer. Now, using the same technique as before, insert a shape at an ending frame to morph into and create the shape tween in that new layer. Repeat this step for each letter, creating new layers each time, to create a text animation like mine in the video above.

Now that we know some of the basic features of Adobe Animate and how to design a frame by frame animation, we can extend our skills by learning some more advanced animation features. A tween allows you to specify the beginning and ending of an animation and the program will fill in the remaining frames. Classic tweens are for symbols and are usually used to create color, scale, and motion effects. Motion tweens are an updated version of classic tweens that use a more advanced system which allows you too customize the motion path. Tween features are useful as they are lot less time consuming than the process of designing a frame by frame animation. All you need to do is tell Adobe Animate where to change the appearance of an object, and it will fill in the blanks in between the starting and ending frames to create a neat and smooth animation movement as intended. Tweens therefore do not require you to design each individual frame to create the illusion of movement, which makes them a lot easier and faster to use. The following are two quick tutorials on how to use the classic and the motion tween.

Classic Tween Tutorial

To start off, open Adobe Animate and create a new HTML 5 on canvas file.

1. One the first layer, insert a photo of the object that you wish to draw by dragging it into Adobe Animate from your desktop. You can adjust the size and crop the photo using the “free transform tool”, and you can adjust the position using the “selection tool”, which are both found in the “tools” section. Because I am going to show you how to move the bird from one side to the other, I have placed it on the left side of the stage. Now create a new layer on which you will trace the actual object that you wish to animate. To do so, you can use the “brush”, “pen”, “fill”, and “erase” tools, which have been explained in the previous tutorial.
2. Once you have completed the drawing of the object you wish to animate, delete the bottom layer with the photo on it so that you are left with your drawing. Now select your object using the “selection tool”, go to “modify” at the top of your screen, and click on “convert to symbol”. You can change the name of the shape, and also make sure to select the type of symbol to be a “movie clip”. This is necessary as artwork and text created in Adobe Animate does not directly get added to the library (which is necessary to allow them to be animated), meaning that it must be done so manually.
3. Create a new keyframe where you want the section of movement to end, and move the object to a new desired spot on the screen using the “selection tool”. For my animation, I have created step by step movements of the bird flying upwards towards the top right section of the screen. For this step, I therefore moved the bird slightly upwards and to the right. Leave the ending keyframe selected.
4. Now right click anywhere in between your starting and ending keyframes, and select “insert classic tween”. The object will now smoothly move from its position in the first keyframe to the position in the last selected keyframe. To make my animation more realistic, I moved the bird across the screen in several steps using several classic tweens. This makes the bird look like it is flying smoothly in smaller steps rather than just moving diagonally across the screen in a straight line.

Motion Tween Tutorial

To start off, open Adobe Animate and create a new HTML 5 on canvas file.

1. Firstly, insert a shape or a drawn an object that you wish to animate. In this tutorial, I will demonstrate how to animate shapes using the motion tween. However, you may chose to animate an image using this tween. To learn how to trace images and draw, check out my previous tutorials. On the first layer, I have started by inserting the shape of a yellow star on the tope left side of the screen. You can do this by using the “polystar” tool found in the tools section, clicking on “options” in the properties section with the shape selected, and selecting a star as the type. You can also change the number of sides and star point sides to get some really unique stars. Other shapes that can be used such as a normal polystar, a rectangle, or an oval, are also found in the tools section “tools” section. To customize these shapes, select the “free transform tool”, to adjust the size, the “selection tool” to move the shape, and the “fill” option in the “properties” section to change the color.
2. Once you have inserted a shape or an image of your choice to animate, select the shape using the “selection tool”, go to “modify” on the top of your screen, and press “convert to symbol” as in the previous tutorial. You can change the name of the shape, and also make sure to select the type of symbol to be a “movie clip”.
3. Now create a normal frame where you want the section of movement to end. Find a space on the “timeline” that is anywhere in between your starting and ending frames, right click, and press on “create motion tween”.
4. Your tween has now been created, so all you need to do now is move your object around. Move your playhead to the ending keyframe you have created on the “timeline”. With the playhead in place, select your object and move it to a new disked spot on the stage. In my tutorial, I have moved the star to the bottom right hand side of the screen so that it will move downwards from the top left side.
5. You should now see another keyframe dot on the “timeline” on your ending frame, and you should see a motion path, which is direction you have chosen for your shape/object to move. This means that Adobe Animate created a tween for you and moved the object from it’s beginning to ending spot, and created a number of frames to do so in between.
6. You can now customize the path that your shape/object travels using the motion path. Notice that when you hover over the motion path, you can see that your mouse has abs arch next to it, so that when you drag the line with your cursor, you can change the path so that it curves. Using the “direct selection tool” to click on the ends of the motion path, some handles will appear. You can drag the ends of these around with your cursor to create more complex curves.
7. And there you have it! You can repeat these steps several times by using different shapes/objects on different layers like I did in my animation.

Animation – a mix of imagination, creativity, colors, meaning, and a story.

Sounds fun, right?

Creating a successful and advanced animation however, is not that easy. To start off, it is important to be knowledgeable about the basics of an animation. The following is a quick guide on how to create a very simple and short animation of a flower as displayed below.

Before we begin, the first thing you will need to ensure is that you have the Adobe Animate application installed. This application will be used to design the animation.

1. Prepare the animation stage. Start by opening the Adobe Animate application. To create a new animation, press on “file”, select “new”, and then chose the HTML 5 canvas file. You may want to adjust the size of the canvas based by changing the width and height, as this will determine how much space will be available for you to design the animation. For the animation I have created, I have left the canvas size on default mode. After selecting “ok”, a blank stage that looks like a white square will appear on your screen, which is is where you will design your animation.
2. Find the timeline, properties, and tools tabs. These tabs are essential when animating. If you do not have one of these, go to “window” and select the needed tab which will then appear on you screen. You can arrange the tabs by dragging them around with the cursor in any way you like.
3. Know how to use the timeline tab. This is where all the content for your animation will be organized in layers and frames. Layers are similar to multiple filmstrips placed on different levels and stacked on top of each other. Each layer contains its own drawings, animations, and objects, which can be worked on independently for each layer. In animation, lengths of time are divided into frames. The animation that we will be creating is a simple frame by frame animation where each frame will display different content in a certain order so that when put together, a sense of movement is created. The speed of the animation is measured in frames per second, which is usually 24. This means that every second, 24 frames are played after each other. A keyframe is a frame where a change occurs in the timeline, such as a new symbol or object. For our animation, we will be creating the illusion of movement by adding different keyframes depicting an object in different locations after each other.
4. As I will be teaching you an animation of a growing flower, it may be helpful to save an image to your desktop with a flower first, as we will be outlining this image throughout. This will make the drawing of the flower much easier.
5. We can now begin creating the animation. Start by inserting the photo of the flower into the animation stage by simply dragging it in from your desktop using your cursor. You can adjust the size off the image by selecting the free transform tool in the Tools panel, which will allow you too drag the corners and edges of the image to resize it.
6. Next, create a new layer. This is were you will draw your actual animation on top, so that you can delete the layer with the image later on. I recommend naming the layers to stay organized by right clicking their name and selecting “rename layer”.
7. Start outlining the growing flower. Do this by going to the “tools” section, and selecting the “brush tool”. The brush tool allows you to draw in any shape, size, color, form, and direction. You can customize these things by going to the “properties” tab, where you can use the “fill” option to adjust the color and the “stroke” option to adjust the thickness. To start off, I first drew the dirt in the first keyframe using a brown brush. A quick way of doing this neatly is to outline the whole dirt form to create a closed shape around it. Then select the “paint bucket” tool in the “tools” section. The “paint bucket tool” can fill in a closed object that does not have any gaps immediately. Simply select the same brown color in the “properties” section for it, and click inside the outlined dirt shape. This will fill it completely and neatly.
8. Now start drawing the stem of the flower. As this is the next step of the growing process, we will be working on a new keyframe to create this frame by frame movement. Go to the “timeline” tab, find the next empty box, right click on it, and press “insert keyframe”. You can also choose to insert a blank keyframe, but this will reset the previous drawing and will cause you to have to draw the dirt pile again. On this new keyframe, select the “paint brush” tool again, select a new green color and smaller thickness for it, and continue outlining a small section of the stem from your image. To draw precisely, you can zoom in or zoom out on the animation stage.
9. Now repeat the above step multiple times by creating new keyframes and drawing small sections of the flower according to the image each time. Use the playback button on the “timeline” to play your animation throughout to ensure that it looks correct and smooth. This is step is a bit tedious, so make sure to remain patient.
10. Once you have finished drawing all small sections of the growing flower on each keyframe, your mini animation is complete! You can now delete the first layer with the photo by right clicking on the layer name and selecting “delete layer”.

And there you have it! I hope you enjoyed this tutorial, and stay tuned for my next posts to learn even more animation skills!

Defining Animation:

According to Walt Disney, animation offers a medium of storytelling and visual entertainment which can bring pleasure and information to people of all ages everywhere in the world.

If I were to define this myself, I would say that animation is storytelling through sequencing images digitally or hand drawn to create the illusion of movement.