Lesson Plan. Course Title: Web Technologies Session Title: Motion Graphics & Animations

Transcription

1 Lesson Duration: 4 hours Lesson Plan Course Title: Web Technologies Session Title: Motion Graphics & Animations Performance Objective: Upon completion of the lesson, students will be able to use an image manipulation program to create simple custom and automated animated GIFs for the web. Specific Objectives: Students will be able to create an animation Students will understand the process of creating an animation Students will understand the components of an animation Students will be able to create a custom animation from individual image layers TEKS Correlations: (c) Preparation (3)(B) explain the key functions and applications of software programs (5)(C) identify, create, modify, and use available file formats such as text, image, video analog and digital, and audio files (7)(B) select, create, modify, and integrate effective multimedia content such as vectorbased and raster graphics, motion graphics, video, and audio (7)(D) demonstrate proper use of folder structure hierarchy Instructor/Trainer References: Using your favorite internet browser, perform a web search for image manipulation program. Instructional Aids: Web Animation Presentation Lab 1 Handout: Automated Animations Lab 2 Handout: Custom Animations Motion Graphics & Animations Quiz Motion Graphics & Animations Quiz - KEY Student Files folder Materials Needed: Copies of Lab 1 and Lab 2 Copies of quiz Each student will need a copy of the Student Files Folder provided with this lesson. Equipment Needed: 1

2 Each student will need a computer with the latest version of an image manipulation program. To find a program, the student can perform a web search for image manipulation program. Introduction Introduction (LSI Quadrant I): The instructor should ask students about websites that have animation on them. The instructor should also emphasize that animation on a website can be very distracting to the visitor, and the web designer should carefully consider what type of animation to include. Outline Outline (LSI Quadrant II): Instructor Notes: I. Animations overview A. How animations work B. What are animated GIFs? C. Required software D. Required knowledge E. Methods of creating animated GIFs II. Creating custom animation A. Preparing an image for editing B. Combining two images C. Creating multiple frames for the animation D. Editing each frame of the animation E. Merging layers and frames F. Previewing the animation G. Saving the animation III. Using the built-in animation tools A. Adding text B. Applying the animation filter C. Saving the animation IV. Combining two animations A. Importing an animation as a new layer B. Saving and finalizing the animation V. View animation in a web page VI. Students complete hands-on labs A. Using animation filters B. Creating a custom animation Provide each student with a copy of the Student Files Folder prior to showing the presentation. Students should follow along and complete a practice animation together during the presentation. 2

3 Application Guided Practice (LSI Quadrant III): During the presentation, students will create a custom animation together as a class. Students will also add an automated animation feature to their custom animation. Independent Practice (LSI Quadrant III): Following the presentation, the instructor should provide the students with two hands-on labs they must complete on their own. The first lab will walk the students through creating an animation. The second lab will walk the students through creating a custom animation. Summary Review (LSI Quadrants I and IV): Students will incorporate all the concepts introduced in the lesson by completing the hands-on labs. Students will then practice these concepts. Evaluation Informal Assessment (LSI Quadrant III): The instructor should periodically check during the presentation to make sure students understand the concepts and are successfully keeping up with the group exercise. Formal Assessment (LSI Quadrant III, IV): The students should complete the labs individually to reinforce and ensure an understanding of the concepts introduced. The final product the students produce from the labs should resemble the completed labs in the instructor s key folder. Extension Extension/Enrichment (LSI Quadrant IV): Students will gain a basic understanding of animations and how they work. Following the lesson, students can learn more complex animation topics. Because this lesson introduced animation for the web, students should also learn web development. The HTML Scripting lesson will introduce students to creating web pages using HTML and will go through inserting images. Once both lessons are complete, students can create their own websites with custom animations on banners and logos. 3

4 Icon Teaching Strategies Verbal/ Linguistic Logical/ Mathematical Visual/Spatial Musical/ Rhythmic Bodily/ Kinesthetic Intrapersonal Interpersonal Lecture, discussion, journal writing, cooperative learning, word origins Problem solving, number games, critical thinking, classifying and organizing, Socratic questioning Mind-mapping, reflective time, graphic organizers, color-coding systems, drawings, designs, video, DVD, charts, maps Use music, compose songs or raps, use musical language or metaphors Use manipulatives, hand signals, pantomime, real life situations, puzzles and board games, activities, roleplaying, action problems Reflective teaching, interviews, reflective listening, KWL charts Cooperative learning, roleplaying, group brainstorming, cross-cultural interactions Personal Development Strategies Reading, highlighting, outlining, teaching others, reciting information Organizing material logically, explaining things sequentially, finding patterns, developing systems, outlining, charting, graphing, analyzing information Developing graphic organizers, mindmapping, charting, graphing, organizing with color, mental imagery (drawing in the mind s eye) Creating rhythms out of words, creating rhythms with instruments, playing an instrument, putting words to existing songs Moving while learning, pacing while reciting, acting out scripts of material, designing games, moving fingers under words while reading Reflecting on personal meaning of information, studying in quiet settings, imagining experiments, visualizing information, journaling Studying in a group, discussing information, using flash cards with other, teaching others Naturalist Existentialist Natural objects as manipulatives and as background for learning Socratic questions, real life situations, global problems/questions Connecting with nature, forming study groups with like-minded people Considering personal relationship to larger context 4

5 Motion Graphics & Animation Lab 1 Automated Animations 1. Open the Image Manipulation Program. 2. On the Toolbox, set the foreground color to e79c0a and set the background color to Open a new image. From the image window, click on File and select New. 4. In the Create a New Image window, set the width to 400 and the height to Click Ok to create a blank canvas for the image. 6. From the Toolbox, click on the Text tool. 7. After selecting the Text tool, the text options will appear at the bottom of the Toolbox window. Set the text to Sans, the size to Click in the center of the background and type your first and last name. 9. Click the Move Tool. 10. At the bottom of the Toolbox window, the properties for the Move tool will appear. Click on Move the active layer. Student Name 11. Use the move tool to position your name in the center of the image. 12. Merge the text down onto the background to create a single layer. To do this, we need to have access to the Layers window. To open the Layers window, click on Windows and go to Dockable Dialogs, and select Layers. 13. On the Layers window, you should see two layers: a text layer with your name and then the background layer. Merge the text layer down onto the background layer. 14. Right-click on the layer with your name. A shortcut menu will appear. Select Merge Down. The text layer should become part of the background layer, and there should now only be one layer shown in the Layers window. 15. You are now ready to apply an animation to the image. From the Filters window, select Animation. You will see the different built-in animation features available. 5

6 16. From the available animations, choose the Waves animation. This animation requires only one layer. 17. When you select the Waves animation, a window will appear that allows you to modify the default settings of the animation. You do not need to make any changes here; just click the OK button. 18. A new image will be created from the image you make. The text on the image will look smeared and swirled, but that is part of the animation. You will not be able to make out your name in the animation 19. To preview the animation, click the Filters menu at the top, move down to Animation, and select Playback. 20. The Animation Playback window will appear. At the top left is a Play button that looks like a triangle. Click it to run the animation. 21. To save the animation, click on File at the top of the image with the swirly letters, and select Save As. 22. Enter lab1.gif as the file name. The image should be saved to your Student Files folder. 23. Click Save. 24. Another window will appear asking how to export the file. You should select Save as Animation, and click the Export button. 25. Another window will appear that allows you to adjust the Animation Options. Because this is a built in animation, you do not need to modify the default settings here. Just click the Save button. 26. The image is now saved. To see your animation, open the web page named lab1.htm from your Student Files folder. Motion Graphics & Animation Lab 2 Custom Animations 6

7 For this lab, we will create a custom animated banner for a website. We will start with a simple banner to be used as the background of the animation. When the banner is loaded, the text Galveston! will appear one letter at a time across the top of the banner. 1. From your Student Files folder, open the image banner.gif in your image manipulation program. 2. You will need to change the mode of the image to RGB. From the Image window, select Mode, and choose RGB. 3. Make sure the Layers dialog window is open. If it isn t, you can open it by going to Windows -> Dockable Dialogs -> Layers. 4. Because each letter will require one frame of the animation, we need to create additional layers. There are 10 characters in the text that we will be adding, so press the Duplicate Layer button at the bottom of the Layers dialog 10 times. Because there are so many identical layers in the Layers dialog, you must make sure you are working on the correct layer while creating the animation. On the Layers dialog, there is a small icon of an eye to the left of each layer. When the eye is visible, the layer is visible; when you click the eye, the layer next to the eye will become hidden. This will allow you to hide layers you are not working on. 5. Click on the eye next to each of the layers, except for the bottom two layers. 6. Make sure that the second layer from the bottom is selected. The layer name should be Background copy. This will be the first layer we add text to. The animation will consist of the word Galveston! being typed onto the banner one letter at a time. Each frame in the animation will add one additional letter to the banner. The first background layer will be blank, so we will start working with the layer named Background copy. 7. Select the Text tool from the toolbox. 8. At the bottom of the toolbox, you can modify the text options. Change the font to Sans Bold Italic, the size to 25, and the color to white. 9. With the Background copy layer selected in the Layers window, use the Text Tool to add just the letter G to the banner. 10. When the text was added to the frame, a new layer was created between the Background copy layer and the Background copy #1 layer. We need to merge the text layer down onto the Background copy layer. 7

8 11. Right-click on the text layer in the Layers window. It will be indicated by the letter G in the Layers dialog window. A shortcut menu will appear. Select Merge Down. This option will merge the text layer with the layer directly below it in the list. 12. We are now ready to add the second letter to the next frame (Background copy #1). Select Background copy #1 from the Layers dialog, but do not make it visible just yet. 13. Use the Text tool again, with the same settings, and add a text layer above Background copy #2 with the text Ga. 14. Use the Move tool to move the text layer so that both letter Gs are perfectly aligned on top of each other. (NOTE: After selecting the Move tool, select Move the active layer from the bottom of the Toolbox window.) 15. After the Ga text layer has been created and perfectly aligned, click to the right of Background copy #1 to replace the eye and make the layer visible again. 16. The text layer can now be merged down onto the Background copy #1 layer. Right click on the Text layer and select Merge Down. 17. To add the next letter, select the Background copy #2 layer and add the text Gal. 18. Move the text layer so that the Ga is perfectly aligned. 19. Make the Background Copy #2 layer visible and merge the Gal text layer down onto it. 20. Repeat the steps above with the remaining layers until Galveston! has been placed onto Background copy # After all the frames have been completed, the last step is to save the animation. From the File menu, select Save As. The file name should be lab2.gif. The image should be saved to your Student Files folder. 22. Click the Save button. 23. Another screen will appear asking you how to export the file. You should select Save as Animation. 24. Click the Export button. 25. The last window will ask you for the animation options. a. Take the check OFF of Loop forever b. Set the Delay to 200 milliseconds. c. Set the Frame disposal to replace. 26. Click the Save button to complete the animation. 8

9 27. To view the animation, open the webpage file from your Student Files directory called Lab2.htm. If you saved the animation correctly, you should see the text appear once at the top of the banner. 9

10 Motion Graphics & Animation Quiz 1. Which of the following image file formats allows you convert the layers of an image to animation frames to create an animated sequence? a. gif b. jpg c. mpeg d. png 2. To crop an image is to a. resize the image. b. remove part of the image. c. resize the image by removing part of it. d. None of the above. 3. What is the appropriate mode to use in animation? a. CMYK b. Grayscale c. RGB d. All of the above 4. Merging layers together in an image is called. a. distorting b. filtering c. editing d. flattening 5. The is the current selected layer in the Layers dialog window. a. layer dialog b. layer menu c. image menu d. active layer 6. When a new image is created in the image manipulation program, the layer is automatically applied. a. canvas b. foreground c. background d. transparent 10

11 7. Another term for graphic images that create the illusion of motion is. a. film b. motion graphics c. photographs d. vector 8. The frame rate of an animation is the a. number of frames in the animation. b. the size of each frame in the animation. c. the length or run time of the video. d. the length of time each frame is displayed. 9. Which tool in the image manipulation program will allow you to select all regions of the same color? a. The Select by Color tool. b. The Magic Wand tool. c. The Foreground Select tool. d. The Paths tool. 10. When you edit the frame properties, the image manipulation program will allow you to either or frames in the animation. a. keep or dispose b. stack or merge c. combine or replace d. combine or stack 11

12 Motion Graphics & Animation Quiz - KEY 1. Which of the following image file formats allows you convert the layers of an image to animation frames to create an animated sequence? a. gif b. jpg c. mpeg d. png 2. To crop an image is to a. resize the image. b. remove part of the image. c. resize the image by removing part of it. d. None of the above. 3. What is the appropriate mode to use in animation? a. CMYK b. Grayscale c. RGB d. All of the above 4. Merging layers together in an image is called. a. distorting b. filtering c. editing d. flattening 5. The is the current selected layer in the Layers dialog window. a. layer dialog b. layer menu c. image menu d. Active Layer 6. When a new image is created in the Image Manipulation Program, the layer is automatically applied. a. canvas b. foreground c. background d. transparent 12

13 7. Another term for graphic images that create the illusion of motion is. a. film b. motion graphics c. photographs d. vector 8. The frame rate of an animation is the a. number of frames in the animation. b. the size of each frame in the animation. c. the length or run time of the video. d. the length of time each frame is displayed. 9. Which tool in the image manipulation program will allow you to select all regions of the same color? a. The Select by Color tool b. The Magic Wand tool c. The Foreground Select tool d. The Paths tool 10. When you edit the frame properties, the image manipulation program will allow you to either or frames in the animation. a. keep or dispose b. stack or merge c. combine or replace d. combine or stack 13