I taught an animation workshop today at the Taste of Tech 2017 conference. Below are the lessons we tried to cover and links to the resources. Click on the Thinglink image to go directly there. Thumb through the slideshow for quick tips. Page 1. Page 2.
I was able to attend Kim Darche's session about questioning techniques. To help me remember the great ideas she was sharing, I made this sketchnote.
Digital Carpet Painting:
Before you can go on a magic carpet ride like Aladdin, you need your digital carpet painting in perspective so that you can view it from the side so you can climb aboard. I added my painting into the superimpose app over a plain color background. I found the tool mode for the foreground layer and chose perspective (the default). The configuration needed could be pulled and stretched by grabbing the handles on the image or you can chose a pre-created configuration at the bottom of the screen. I chose the one all the way on the right. Then, chose the checkmark to apply.
Moving Background Video:
One really fun way to extend this lesson into geographic/cultural studies is to have each student draw a landmark that they could fly over: Eiffel Tower, Big Ben, Statue of Liberty, Mt. Rushmore, The Pyramids, Great Wall of China, Stonehenge Grand Canyon, Red Woods, Golden Gate Bridge, Taj Mahal, Hohenzollern Castle, The Leaning Tower of Pisa, etc. See this list of 15o famous landmarks.
Film the Green Screen:
Paper Cut Version:
BACKGROUND: This version of the magic carpet ride lesson includes a paper cut landscape that shows foreground, middle ground, background in paper pieces. These will be animated traveling across the field of view through stop motion animation. It would be a great opportunity for students to show an understanding of foreground, middle ground, and background in the pieces they create and how they animate the scene.
GROUP ANIMATION: I'm thinking that the background animation would be a group project. Each group would work on designing, drawing, cutting, and animating their landmark landscape. Each student would make their own magic carpet video of themselves flying over their group landmark landscape. Therefore, the class compilation video will only have six backgrounds but 24 videos.
MAGIC CARPET MADE FROM PAPER: A digital magic carpet wouldn't look right with a paper cut background. So, they would need to make a paper carpet in perspective. This is a great opportunity to teach students about a vanishing point, converging lines, and how pattern would be small in the back and large in the front (relative size).
Since you are not going to use stop motion for the carpet, I just took a digital picture of the paper drawing and erased the background in the Superimpose app. It needs to be digital for the green screen effect where a student rides the carpet.
This link takes you to a travel website featuring 150 famous landmarks. Every student can feature a different landmark in the background video/animation. This would make the class video even more exciting as they fly over scenes from around the world.
View this safeshare.TV link of the "Whole New World" scene from Aladdin.
One trick I've noticed ever since I was a young cartoon viewer happens most noticeably in running scenes. Instead of the character entering and exiting the frame of view, the character remains in the center of the frame while the background moves. This is very effective but sometimes completely silly since the background is looping over and over giving the impression that the space is a never ending and always repeating. I set out today to try to make a character run like Scooby or any Hanna-Babera character would.
STEP ONE: Running character
STEP TWO: background drawing
STEP THREE: fixing the background
At drew this background thinking I could make it loop somehow in the app. I wasn't able to figure out how to do that. So I took this image, duplicated it, line them up on edge and cropped awu the door. I wanted to make an image that started and ended the same way from left to right so I could loop it. Does that sound confusing? It was. But, now that I know the solution, maybe it won't be hard to replicate it.
STEP FOUR: Creating the animation
The biggest challenge was getting the background image to loop behind the running animation. Now that I fixed the image to match from left to right all I had to do was line it up to start and end with the same looking background.
Second try-new idea for background:
I had trouble making my background loop on my first try. I think the problem was that I learned while going through the process that the image needed to repeat perfectly. So, this time I made it easier on myself. I did the whole drawing and duplications in Brushes Redux app. I drew one piece of a background (house) and copied the layer, resized it, and placed it next to the first until I had 4 houses in a row. I put this tiny tutorial together so you can see that the biggest trick next is to get the running figure to start and end over the same exact background image. Then, it loops nicely.
Karaoke of Scooby-Doo Theme Song:
Sing along or change the words to what you learned while making a running animation.
Fly like Mighty Mouse Might
This idea works for fling if you make the object remain in the frame as the sky (clouds) whiz by. Here is what it looked like when I gave it a try.
View this Animation as a Hologram:
Check out my post about how to set up your animated hologram here.
..and other Individual Rotoscope Animation Ideas
One of the super cool things about Do Ink Animation and Drawing app is that you can pull in photos or videos and draw over them. Drawing over each frame of a video is a technique called Rotoscope Animation. You probably have seen this technique in the famous music video from the 80's A-Ha's Take Me On. I also LOVE this music video and song by Andrew Huang, Every Night I Dream of Dancing, which is a rotoscope collaboration using 30 artists crowdsourced through the internet.
I tried many ways to instruct my students to create rotoscope animations collaboratively, but I've yet to have them create their own...until now. I think I've come up with some ideas that can make this project manageable for very little people.
Plan One: 1 second loops
Tutorial for Rotoscoping in Do Ink app
Plan Two: Color the Loop
Plan Three: Add Rotating Mandalas
I began a new drawing (still in the Do Ink Animation app) and chose a fill and border color, and dragged out a shape to fill the screen. Then I added line or/and shape pattern.
I made two of these patterned mandalas so that I could rotate them behind my rotoscope in opposing directions. The centers won't show much, so I focus the design on the edges.
Plan four: Dancing Sketches
Since the rotoscope animation has a built in transparency (the background is empty and see through) while it remains in the app, you could use this to create some very cool effects. One idea I've been playing with is to layer the rotoscope line drawing animation over a sheet of notebook or sketchbook paper. Since my drawing looks like it was made using a sharpie marker, I try to enhance that illusion by either leaving a marker on the notebook when I take the still image, or write with a sharpie marker alongside the animation. Below is my first rotoscope done this way, "How to Whip."
Did you see the video of the kids showing up at the end? That was an added step using the green screen app by Do Ink. I exported my sketbookbook video and put it in the green screen app and layered on the original green screen video, lined them up with the drawings. The only problem is that GS app limits you to three layers. I needed 4. So I "flattened" the video effect when I had two kids in place by exporting it. Then brought it back in to a new project and finished the third child's effect.
More Advanced ideas: animated sketchnotes
Mini Digital Stories:
My collaborative Rotoscope Projects:
In 2012, my 5th grade students did a collaborative rotoscope animation project with every one of my 100 students drawing over 330 frames of video pieced back together to make the animation shown in the video below. We entered it into the McGraw-Hill STEMie national online contest and won the $5000 second place prize. This money became the seed money for our 1:1 iPad art room. As you can see from the post, the process was very complicated on my end since there wasn't an iPad app (yet) that allowed students to work over video. We filmed a video then ran it through a program (mpeg streamclip) to break it down frame by frame. Students were assigned frames, pulled it into their iPad from the dropbox, drew over it in Brushes app, turned it back into the dropbox with a number that placed it back into the sequence. I pieced it all back together on my computer using a gif maker to turn it into video. They explain below:
This past school year, I tried a different kind of collaborative rotoscope animation with my 5th graders: a rotoscope in a mutoscope (digital art made physical). This time we made 4 small videos (one per class) that would loop nicely into a hand cranked mutoscope kit by Flipbookit.com. These turned out to be very cool. The work again, fell mostly on me. I had to purchase and assemble the kit, prep the video through their online tool, print the images onto labels, and stick them on flip cards. The students each made one frame of the rotoscope, so they finished in one class period. I love the results, but the kit costs over $40, so students don't get to keep their work individually. However, they do have their still image posted on Artsonia with links to their video.
Connections: Kinetic Art & Automations
Make a Whirly-bird: plan
The challenge is to make a bird from cardboard that has moveable parts. There is a clear connection between drawing a bird and designing a whirly-bird since you just have to break everything down into shapes: head, beak, eye, legs, body, wings, tail. Each shape can be a piece to add back to the whole bird with brads instead of glue. The brads keep the pieces of the bird moveable like a whirligig. However, this whirligig isn't going to be able to move with the wind. It will move through the magic of stop-motion animation.
Since I work with 100 students in each grade level, I have to figure out a way to manage resources and materials efficiently. This guide (below) can be printed on 8.5'x11" paper to help students make good choices for size, shape, and placement of holes/brads. This may help avoid mistakes from misplaced holes, working too small, or wasting valuable space on their cardboard sheet. I will encourage students to create their own designs and not use my sheet as a tracer so I will need to provide extra cardboard for their ideas.
Build a Whirly-bird: lay out and attach
Paint: prime, balance color, add pattern
Assemble & test: add brads & try it out
Whirly-bird ideas: dance & weathervane
I wrote a post about using this app for a collaborative dance video. It's very similar, so it can help you through the steps of using Do Ink, layering video, and organizing files.
This project would teach SO many concepts: silhouette, landscape, atmospheric effects, monochromatic, size, movement, pattern, balance, stop motion animation, and layering. I have a post and tutorial for creating a digital appalachian mountain landscape here.
This same concept translates well as an insect too. If students made a whirlygig insect then the lesson can have a science component to learn about the parts of an insect as they build. No, that's not a tail-it's a stinger. Sorry for the confusion.
Step 1: pose
Step 2: import photo and draw
In the Do Ink Drawing and Animation app, touch the + in top right corner and choose "New Drawing". Click on the layers tab (top middle, it has three lines stacked), use the camera icon to import the photo. The photo defaults to the top layer so grab the three lines on right of layer and drag it to the bottom. Touch the empty layer to select it and do your drawing (tracing) first. Then add your extras to transform the photo into a superhero or fairy. In the screenshot above you can see that I took the opacity of the photo layer down to 0% so that it doesn't show. I drew the figure three times and change it slightly in each. I use the + button in the bottom right to make the next frame and redraw over the last with slight changes like blowing hair, cape, and shirt. These changes are seen as a ghost effect from one layer to the next. That can be turned off in the settings if you prefer. I made each of my lines in my drawing connect so that I could use the pour bucket to color everything. I use the Preview button (looks like an arrow head) to see how my animation is looking. It will animate too fast since it is only 3 frames long. That's okay. We can make adjustments to the timing in the next step. If it looks good, choose gallery button top left.
Step 3: layer the flipbook animation
Prepare a background image or animation to make your character "fly" across. I had a castle drawing in my camera roll on my iPad. Again, in Do Ink animation app, I touched the + in top right corner and chose "composition" this time. If you background is a photo bring it in using the camera icon, if it's another Do Ink drawing, bring it with star icon. Then bring in you animated superhero/fairy with the star icon. It will be too big at first. Use a corner handle to rize (do not touch the green dot yet) and place it in a starting position. Take a look at your timeline. It may have defaulted to only 2 seconds long. Touch the diamond and drag out each layer as long as you want. I used 4 seconds above. Before you animate you may want to slow down the flipbook style animation. Touch the gear in the lower right and slide the timing down to half speed (0.5). Now create an animation path by touching and dragging the green dot (see my green line above). Use the play button to preview. If it looks good, touch gallery. This is where you can find the share button by touching the gallery thumbnail and export your animation a as a video. I would create a class video from their short clips like the ones I made for first graders.
Need a tutorial? See my Fugleflip page and follow Draw & Compose tutorials.
Step 4. Turn these into holograms
Now that you have these little flipbook animations, make them into a custom hologram. I wrote up all the steps for creating this effect in this previous post.
One of the ways I love to integrate technology is by extending physical art creation with a digital element. This idea relies heavily on both physical art and digital manipulation since it begins with drawing and ends with animation. Here are the results below:
The time-lapse: iMotion App
First I practiced my drawing. I had done lots and lots of insect drawings with my 1st graders this school year, so I didn't have to practice long. See this post for drawing resources if you want to try an insect too. I set up the iPad on a tripod and opened up the iMotion app, set it to time-lapse (take a picture every second), and started my drawing.
When I was done I exported the video to the camera roll. It was 7 seconds long.
TIP: It is important to start the video with the blank sheet (no hand) and end with just the image with just the drawing (no hand) to help out your animation steps coming next.
Stills from time-lapse: Green Screen App
You need to capture an image of the blank sheet from before you begin drawing and the final image of just the drawing. (See below). These two images are needed for the next step. There are a few ways to capture these images but my favorite way is by using the Green Screen app by Do Ink. I load in the video, toggle the timeline indicator to the first frame, select "image" and "save" to the camera roll. I do the same for the last image. It's a clean clear image and you can control it very nicely. Taking screenshots might work too.
Clean up the Drawing: Superimpose App
Before you can animate you have to isolate the image by erasing the background and saving it that way in a PNG format. You can do this very easily in the Superimpose App. I pick a color for the background, bring in the drawing for the foreground, then use the magic wand (default) to select the background. If it takes away too much I can draw it back in with the eraser or erase away mistakes with the paintbrush (counter intuitive, I know). Then I touch the house icon, find the share button, and "save mask as PNG". This puts just the foreground image (your drawing) with transparent background into the camera roll as a png. See my image below. Use the beginning of this tutorial to help you.
Make an animation plan and end image:
Since my drawing is an insect, I thought it would fly and land on my finger. So I posed and took a picture that leaves room for the insect to be added back in later. Now with this in my iPad camera roll I have all the elements to begin animating.
Animation: Do Ink Drawing & Animation App
My steps below explain how I put together the animation using the Do Ink Drawing & Animation app in the composition mode. If you rather see a tutorial start at 53 sec mark.
After previewing the animation (using the triangle shaped play button) I saved it to the gallery and shared it as a video to the camera roll. Now, I have a time-lapse video and animation to combine in a movie editing app like iMovie or Pinnacle.
Similar Idea: Make it and Move it
This post maps out ideas for making art projects physically like a paper collage or painting, then making a digital image of them animate. Click the image to see post.
Finished Dance Video:
Stayed tuned to the very end to see the students dancing along at the last day of school assembly. Thanks Mrs. Quick for taking the footage.
All Dryden students were completely energized by trying to dance along with our 1st and 2nd graders. Love that they had a chance to lead with their fancy moves!
Still Image Gallery on Artsonia: View
That's right! What if students made art that could move through the magic of stop motion? These little movement videos could be layered over kaleido free backgrounds and put in a collaborative dance movie too. First you would need to do the stop motion animation in front of green screen. The subject could be, for example, their cardboard whirligigs. See this post for how to make them.
Custom Animated Hologram
with Do Ink Drawing and Animation App
A year ago I learned about using a smartphone to view holograms. The idea definitely interested me but it needed to be tweaked to work for my art room.
First, I needed the idea to work on iPads since that is what students have access to. Secondly, I wanted my students to be makers, not just consumers, so I needed a way for them to make their own hologram videos in the style of these examples.
Today, I finally got around to working on solving these problems. I looked to an old favorite app Do Ink Animation and Drawing app and remembered how easily you can copy and paste layers, rotate animations, and work over a black background: all things needed for this effect.
I downloaded the template (on left) and traced it onto a piece of transparency, folded it and made a pyramid viewer. Then, I made a video tutorial showing how to make one flipbook style animated ghost became four in a rotationally symmetrical design so that you can view it as a hologram through the pyramid.
Next, I want to see if I can make this effect work with video using the Green Screen app by Do Ink. It will take some more steps because it only allows 3 layers at a time and one of those would have to be the black background. Hmmm...sounds like another post. (Update: look below...)
Other themes for your class holograms:
Custom Video Hologram
with Do Ink Green Screen App
WHOA! I hoped it was possible, and now that I've experimented, I know it is....
Custom Video Holograms!
To make these I used the Green Screen app by Do Ink and went through a few steps.
First: I took green screen video of a student doing a movement that would loop nicely.
Second: I imported it into the top two layers of the green screen app. I made them small (the same size) by pinching and rotated one until it was a reflection. Since I will need the video four times, I exported this video of just two to "flatten" it.
Third: I imported the "flattened" two image video on the bottom level then rotated the other two levels to make the four videos into a radial design.
Fourth: After checking that the images were matched in size and well placed, I exported the video to the camera roll.
Unlike the Do Ink animation app, the Green Screen app doesn't loop videos when you hit play. So, there are a few more steps before you can view the hologram.
Fifth: Export the movie TWICE. The slideshow feature in photos on the iPad doesn't work with only one image or video. You have to have two copies of it.
Sixth: Make an album in photos and select the two copies of your hologram video.
Seventh: Click on the album and choose slideshow, click on the options to make it repeat.
I couldn't figure out a way to keep the album name from NOT showing. So I just gave it a one letter title to minimize it. DONE! Put on the viewer and enjoy!
Transition from physical to digital
View the Gallery of Critter Sketches here
Coloring in Colorscape App
Making these critters fly in Do Ink App
Students took a nature photo on the school grounds with their iPad and used it as the background for these short flying animations. They were then turned in to me and complied into a class movie (see below). Their individual screen shots from their animations are on artsonia in this exhibit.
View a similar project:
Internet Safety Contest
(Won the 2nd Place Prize)
Tricia Fuglestad, NBCT 07
is the K-5 art teacher at Dryden Elementary School in Arlington Heights, IL. with a masters in K-12 technology integration. Tricia has been recognized for her innovative teaching in 2010 with the PBS Teachers Innovation Award, won Illinois Art Teacher of the Year in 2011, awarded Teacher of Distinction in 2012 by the Golden Apple Foundation, received Western Region Elementary Art Teacher of the Year 2013, selected to become a Jacobs Educator 2014-15, and was presented with the NAEA Art Technology Outstanding Community Service Award in 2016. Learn more here.
Allow Us To Illustrate
Artist Of The Week
Artist Trading Cards
Beyond The Art Room
Blah Blah Oops
Book Creator App
Bubble Gum Day
Cat In A Hat Ify
Compare A Twist
Contour Line Drawing
Crazy Photo Booth
Cultural Arts Fair
Different Is Good
Don't Crush My Dreams
Dont Crush My Dreams
Doodle 4 Google
Drawing From Experience
Eat Your Veggies
Elements Of Art
Face On Stamp
Family Reading Night
Family Steam Night
Funny Movie Maker
Getting To Know
Google Art Project
Hall Of Fame Raffle
Houghton Mifflin Harcourt
I Am Art
Ipads In Art
Ipads In Art
Lets Be Green
Lima Bean Monster
Long Red Fingernails
Make It Move It
Make Your Mark
Man Of Steel
Natural Child World
One Ipad Art Room
Pigasso Met Mootisse
Pin The Feature
Principal Of Design
Read Across America
School Library Journal
Screen Test Jr
Show Of Hands
Son Of Man
Spect Art Acles
Spoof O Matic
Team Screen Test
Tech News World
The Glue Blues
The Mannequin Challenge
The Snow Flurry Fairy
The Teaching Palette
Try Your Best
Visual Art Standards
What Is Art
Year In Review
Young Sloppy Brush
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.