Flash AnimationAt the beginning of this unit, we will be learning basic animation techniques through a few very quick and easy projects. After you have learned the fundamentals of Adobe Flash, you will apply your skills to create descriptive animations that accurately portray a complicated process to your audience. Finally, we will finish by learning frame-based techniques to produce a project that resembles an animated game. Being able to use a high-powered animation software like Adobe Flash is a skill that can be applied in many different workplace settings. We will begin by completing a few basic tutorials as you learn the basics of the software. Then we will create a descriptive animation demonstrating a complicated process. Finally, we will use frame-based techniques to create an animation that will closely resemble a 2-D video game.Animations can take many different forms. During this unit, we will learn the characteristics of several types of animations, and what each is commonly used for. We will also learn the correct process for producing professional animations and information about file types. All of this information will help you create industry-standard animations.
The techniques and knowledge to create interesting, effective animations can be used in a very wide variety of workplace settings. You could make attention-grabbing advertisements, interactive games, or impressive flash websites. We will be learning basic 2-D animation techniques, leading up to the possibility of exploring 3-D animation in the more advanced levels of Digital Media. Making objects and text move in order to catch the eye is a skill that not everyone has, so it can be highly marketable and profitable when properly applied in the real-world.The software we will be using in Digital Media to create animations is Adobe Flash. It is an industry-standard program that is highly capable and versatile. Flash uses a timeline-based interface that can incorporate both frame-based and vector animation techniques. It can also utilize ActionScript coding to create interactive features like buttons and controls. It is rather expensive, especially for the amateur animator, but it is considered the best in the industry.
The first project we will complete with Adobe Flash will help you learn the basics of creating objects on the stage and making them move from place to place. It utilizes computer generated formulas between keyframes to define the path and speed of movement. This is known as vector animation.* PresentationsAnimation & Procedures1- https://www.lee.k12.nc.us/cms/lib/NC01001912/Centricity/domain/651/pshop powerpoints/flash presentations/dm_104.01_p_animation.pdf2- https://www.lee.k12.nc.us/cms/lib/NC01001912/Centricity/domain/651/pshop powerpoints/flash presentations/dm_104.02_p_animation_procedures.pdf*Bouncing Balls ProjectTutorial link:https://www.lee.k12.nc.us/cms/lib/NC01001912/Centricity/domain/651/flash tutorials/Flash CS5 bouncing ball tutorial.pdf*Flying Text ProjectAnimating text is a great way to attract attention and direct the eye to an advertisement. Luckily, there are several tools and features of Adobe Flash that make this process rather easy and quick. In this project, you will be animating your name to make it fly around the stage and assemble itself into order.You have been provided with a PDF tutorial with screenshots and descriptions to guide you through the creation of this project. Teaching yourself is an important skill to have, as you will not always have a teacher to walk you through the creation of your digital media projects.https://www.lee.k12.nc.us/cms/lib/NC01001912/Centricity/domain/651/flash tutorials/Flash CS5 Flying Text tutorial.pdfSnowboarder ProjectThe previous projects we use computer generated formulas to define the movement (called tweens). In this project, we will learn frame-based animation techniques. It can be a little bit more time consuming, but it is easier to create exactly the type of movement your envisioned.This project will teach you how to utilize the onion skin feature of Adobe Flash. It is useful to create smooth, consistent movement with the frame-based technique. You will also learn how to create separate scenes within one animation project. Use the provided files and video tutorials to learn how to create this project.https://www.lee.k12.nc.us/cms/lib/NC01001912/Centricity/domain/651/pshop powerpoints/flash presentations/Snowboarder Project Tutorial PART 1.mp4https://www.lee.k12.nc.us/cms/lib/NC01001912/Centricity/domain/651/pshop powerpoints/flash presentations/Snowboarder Project Tutorial PART 2.mp4Use this image for animation:Car Audio ProjectAdding audio to an animation is a great way to take it to the next level and appeal to more of the audience's senses. It can help describe the action that is going on, and make it seem more realistic. Adobe Flash has an extensive sound library with free-to-use audio clips that can seamlessly incorporated into your animations.
In this project, you will learn how to effectively add audio to a project. You will also learn how to ease tweens in or out to specifically define animation according to the type of movement being portrayed. Use the given PDF tutorial for the project to help you complete this animation. You may use any picture of a car that you would like, as long as the orientation lends itself to your scene.https://www.lee.k12.nc.us/cms/lib/NC01001912/Centricity/domain/651/flash tutorials/car_audio_tutorial.pdfcar starting sound: https://www.lee.k12.nc.us/cms/lib/NC01001912/Centricity/domain/651/flash tutorials/start.wavcar engine sound: https://www.lee.k12.nc.us/cms/lib/NC01001912/Centricity/domain/651/flash tutorials/engine.wav*Flash Tutorial Resources:
*Create an Animated Car Banner using FlashIn this tutorial, you will learn how to create an animated banner using Flash. You will learn how to create a car moving on a road with its tires spinning.
Here we will create a banner of size 728x300.
1. Open a new flash file. Choose Window > Properties from the main menubar the PROPERTIES panel is displayed.
Choose the Edit button under the PROPERTIES area in the panel, the Document Settings window is displayed. Set the dimensions as 728(WIDTH) and 300(HEIGHT) and choose the OK button to make the changes.
2. Rename the existing layer as buildings and choose File > Import > Import to Library from the main menubar and import the files downloaded at the starting of the tutorial.
3. Choose Window > Library from the main menubar; the LIBRARY panel is displayed. Pull the building images to the stage area and align it.
4. Select the image and choose Modify > Convert to Symbol from the main menubar and name this movieclip asbuilding_animation.
5. Double-click on the movieclip and select the building image and create a moviclip again and name it as building. Rename the layer as anim_building.
6. Select frame 460 and add a keyframe. Select the building movieclip and open the PROPERTIES panel and se the X value to -1450. Publish the file to see the animation. If at any point of time you find a jerk in the animation please adjust the position and frames of the building movieclip accordingly.
7. Go to the main stage area and create a new layer named road. Choose the Rectangle Tool from the Tools panel and create a box at the bottom of the building area and align it as shown in Figure below. Make sure that the color of the road is set to #171717.
8. Next, create a new layer named road strip and create a grey and white rectangular pattern using the Rectangle Tool from the Tools panel, as shown in Figure below. Make sure that the length of the road strip pattern is almost equal to that of the buildings.
9. Select the road strip and choose the Free Transform Tool from the Tools panel and distort the road strip as shown in Figure below. Make sure that the color of the grey part in the strip pattern is similar to that used in road.
10. Choose Modify > Convert to Symbol from the main menubar and name it as road strip. Select the movieclip and choose Modify > Convert to Symbol again and name it as road strip animation. Place this animation in the center of the road.
11. Animate the road strip as you did for the building movieclip. But make sure that the speed of the road strip is double as compared with the moving speed of the buildings. Publish the flash file to see the transition in the animation.
12. Next, move back to the main stage area and create a new layer and name it as logo. Drag the logo.jpeg file from the LIBRARY panel and place it in the scene by first scaling it down.
13. Create a new layer in the main stage area and rename it as footpath. Create the footpath using the Rectangle Tool as shown in Figure below. Make sure to match the length of the footpath series with the road strip.
14. Align the footpath.
15. Animate the footpath similar to the road strip with the same speed. Publish the flash file to see the effect.
16. Next, in the main stage area create a new layer and rename it as car. Choose Modify > Convert to Symbol and rename it as car. Double click on the car movieclip and create a new layer and rename it as tire_front. Zoom in the to the front tyre area in the screen and create a pattern using the Rectangle Tool.
17. Make this pattern as a movieclip and renmae it as tire_mask. Double click on this movieclip and rename the existing layer as bg and selec the cross pattern again and choose Modify > Convert to Symbol from the main menubar and rename it as spokes. Choose Window > Properties from the main menubar and add blur filter to it.
18. Next, create a new layer over it and rename it as mask. Create an oval shape exactly the shape of the rim of the car.
19. Activate the bg layer and create keyframes at frames 3 and 6. Rotate the spokes movieclip at frame 3 by around 180 degrees and add motion tween between the keyframes.
20. Next, activate the mask layer and chose frame 6 and press F5 to extend the frames. Now, right click on the mask layer and choose Mask from the drop-down list, spokes will be visible only in the rim area.
21. Similarly, add the same effect to the rear wheel. Move back to the main stage area and double click on the car_animationmovieclip and create a keyframe on frame number 40. Move the car movieclip a bit in the top right position. Next, add another keyframe at frame number 75 and place the car in the bottom right position. Add one more keyframe at frame 115 and place the movieclip in the top left position. Add the last keyframe on frame 190 and place the moviclip at the same position as it was on frame1. Add motion tween between the all the keyframes.
22. Position the car on the main stage area.
23. Publish the flash file to see the banner animation.
24. You can also use this banner animation for creating an banner advertisement for mercedes benz. To do so, create one more layer in the stage area and rename it as text and add it in the scene and make it fly in the stage area and then stop.
25. Publish the flash file as a .gif to get the animation.
Four basic ways to use Tweens in animate: