Lesson Plan

Intro to Digital Animation & GIFs

Basic introduction into Digital Animation
Katie L.
Technology coordinator
Mark Sheridan Math and Science Academy
Chicago, IL
Show More
My Grades K, 1, 2, 3, 4, 5, 6, 7, 8
My Subjects Math, Science
EdTech Mentor
Objectives

Students will be able to...
- Identify the process of how to create a basic digital animation
- Identify some basic digital animation vocabulary: Storyboard, CGI, etc
- Identify some basic voacabulary: stage, layers, keyframes, tweening, 
- Identify the similarities between digital animation, GIFs, and stop motion animation
- Create a short digital animation/GIF using Microsoft PowerPoint and a GIF Maker website

Subjects
Arts
drawing
film
script writing
Grades 3 - 8
All Notes
Teacher Notes
Student Notes

1 Digital Animation Intro VIdeo

BrainPOP
From $220

Step 1: Intro Video

1. Show the following free BrainPop video
https://www.brainpop.com/technology/computerscience/digitalanimation/

** Sometimes the videos give a lot of information in a short period of time so I often like to show the video twice, often stopping throughout the second run to discuss various parts of the video. 

2. Class discussion reviewing the basics of Digital Animation
- What is it
- How is it created
- Review and define some of the vocabulary from the movie
- Compare and contrast digital animation, GIFs, and stop motion animation

Student Instructions

1. Watch BrainPop Video

2. Optional:
Students could complete the following either during or after the movie: 
- Answer specific questions given by teacher
- Take basic notes

2 Story Creation

Activity: Creating

Step 2: Story Creation

1. Describe to your students that they will be making a short digital animation that "Shows a Change."

The first time doing digital animation is difficult therefore I suggest keeping the subject matter simple so that the students can master the technique. 

2. Brainstorm with the class a list of small changes that they see in the world:
- Clock: hands moving
- Leaf falling out of tree
- Ball bouncing
- Sun rising

3. Have each student make a list of "changes" that they see in the world.  Give them about five minutes .

4. After the five minutes is up, have each student circle their top three choices and put a star next to their top choice. 

5. Take some time to conference with each student to make sure they are picking a topic that is fairly easy to recreate using digital animation. If they have chosen a difficult topic try to steer them in a different direction. 

Student Instructions

1. Take out a piece of paper and pencil.

2. Make a list of as many "Changes" as you see in the world.

3. Circle your top three choices and put a star by your favorite.

4. Conference with your teacher to finalize your topic. 

3 Story Board

Activity: Creating

1. Hand out a story board template to each student. 
** I Love this handout created by Adobe Youth Voices. I copy this back to back on a piece of paper for students so that they have 12 spaces to fill in: 1 title, 1 credits, and 10 spaces for their change to occur. 

2. Give students at least 20 minutes to draw their "Change." They do not need to include any words or any description at this time. This is meant to be a rough draft.  Color is not necessary just basic pencil/black and white sketch is fine. 

Student Instructions

1. Get out a pencil

2. Create story board on handout
Include:
- 1 title space
- 10 "Change" spaces
- 1 credits space

4 GIF Creation - Step 1

Activity: Creating

1. Have students open up Microsoft PowerPoint.

3. Identify naming convention for project and have students Save As with the identified naming convention.
Ex: Last Name Grade-Homeroom Project Name

4. Have students create 1 Blank Slide.
**If there are any text boxes on slide make sure students delete them prior to moving to next step. 

5. Have students design Slide 1 ONLY. 
**Ex: Clock - Hands moving
Have students create the clock with all the numbers and any detail they want incorporated on the clock.  Finally have students add the hands to the clock.  

6. Once students are finished designing Slide 1, have them copy and paste that slide 9 times. 

7. Once they are done pasting they can begin changing slide 2 through 9 ever so slightly. 
Ex: Slide 2 - Hour hand and minute hand move slightly
Slide 3 - Hour hand moves less than minute hand

8. Students continue working on this until they have made changes to those 9 slides. 

9. Now the students go back to Slide 1 and Preview their "GIF or short animation."

10. If they are happy with the way it looks they are ready to move on.  If not have them go back and edit each slide until they are happy with the results. 

Student Instructions

1. Open Microsoft PowerPoint.

2. Save project based on teacher's naming convention.

3. Create 1 blank slide, make sure to delete all text boxes. 

4. Design slide 1 ONLY using the draw/shape features within the presentation software. 

5. One you are finished with Slide 1, copy and paste that slide 9 more times.

6. Begin chainging Slide 2 - 9 ever so slightly. 
Ex: Ex: Slide 2 - Hour hand and minute hand move slightly
Slide 3 - Hour hand moves less than minute hand

7. Once you link you are finished Preview your 10 slides. 

8. If you are happy with your "GIF or short animation" you are ready to move on.  If not go back and edit the slides where you see fit. 

5 GIF Creation - Step 2

Activity: Creating

1. Now that the students are finished it is time to save the files in the correct file format. 

2. Have students Click on File > Save As > Change Save As Type to JPEG  (File Interchange Format).

3. Next Choose > Every Slide.

4. A folder will be created on your Computer or Memory Stick (depends on where you saved the original PowerPoint GIF file).  This folder contains 10 individual files. These 10 files were converted from the PowerPoint presentation.  

5. Go ahead to your Computer or Memory Stick to make sure those 10 files are there.  You will see that if you click on each one, it is a JPEG image of each slide.  They will be named slide 1 through slide 10.  If you are missing a slide, no need to worry.  Just delete all the slides and the folder and work through step 2 - 4 again.  

Student Instructions

1. Click on File > Save As > Change Save As Type to JPEG  (File Interchange Format).

2. Next Choose Every Slide.

3. A folder will be created on your Computer or Memory Stick (depends on where you saved the original PowerPoint GIF file).  This folder contains 10 individual files. These 10 files were converted from the PowerPoint presentation.  

4. Check your Computer or Memory Stick to make sure those 10 files are there.  You will see that if you click on each one, it is a JPEG image of each slide.  They will be named slide 1 through slide 10.  If you are missing a slide, no need to worry.  Just delete all the slides and the folder and work through step 1 - 3 again.  

6 GIF Creation - Step 3

Activity: Creating

1. Open up the GIF Maker website. 
http://picasion.com/

2. Under "Create an animated GIF" Click on > Choose File next to the number one. 

3. Go to where you saved those individual files and find the one that is named Slide 1. 

4. Now Click on > Choose File next to the number two.

5. Go to where you saved those individual files and find the one that is named Slide 2. 

6. Continue to do this for each box/slide 3 - 10.  
**You will have to click the link "Add One More Picture" to get a spot for 4 - 10. 

7. Next I suggest for the first time keeping both the Size and Speed at "Normal."
**After getting your first one complete, you can you have your students change those options when they create their second or third GIF. 

8. Click on > Create Animation
**It may take a second, but it will show up on the top of the website and you can watch it run through your animation. 

9. Click on > Save this Animation

10. This will download in the bottom left hand corner of your screen. Have the students save this on their computers or memory sticks.  
**It is saved as a really confusing name, so make sure to give them time to have them rename this file using the appropriate naming convention. 

Student Instructions

1. Open up the GIF Maker website. 
http://picasion.com/

2. Under "Create an animated GIF" Click on > Choose File next to the number one. 

3. Go to where you saved those individual files and find the one that is named Slide 1. 

4. Now Click on > Choose File next to the number two.

5. Go to where you saved those individual files and find the one that is named Slide 2. 

6. Continue to do this for each box/slide 3 - 10.  
**You will have to click the link "Add One More Picture" to get a spot for 4 - 10. 

7. Keep both the Size and Speed at "Normal."

8. Click on > Create Animation
**It may take a second, but it will show up on the top of the website and you can watch it run through your animation. 

9. Click on > Save this Animation

10. This will download in the bottom left hand corner of your screen. Save this on your computer or memory stick.  

11. Rename the file to your teacher's naming convention.