Last year my fifth graders made collaborative rotoscope animations that we put into flipbookit.com mutoscopes. It was pretty amazing to see digital art become physical through this fun viewer. See the post with all the how tos here. Below is the display I set up this school year showcasing their flipbookits. I used this display to introduce the concept to my 4th graders.
I want to do a rotoscope movie making lesson with my 4th graders so we tried a collaborative rotoscope as a practice round. Each student was assigned one frame of a video to draw a contour line drawing over. They used the Do Ink drawing app this time since it will be the tool for their real animation. This picture shows them in action.
The animation was uploaded to the flipbookit site to be fitted for their mutoscope.
Here is an idea I'm playing with. I would love for students to write a statement about how they can be kind next to themselves looking as sweet as an angel with flapping animated wings and halo or other symbols of kindness.
1. Students pose angelically before green screen.
2. Import the image into Superimpose App. Use masking tools (magic wand and paint brush) to erase the background. Save using "mask as png" to retain transparency.
3. Using the Do Ink animation app, student can animate the wings and halo using this guide to see some steps for moving the wings.
Students open up a new drawing in Do Ink animation app. They need to make a three frame drawing with the progression above. Then click on the 2nd drawing and copy it (copy and paste are revealed when you click on the double arrows in the bottom right corner). Click on the third drawing and choose "paste". This will put the 2nd drawing after the 3rd drawing to make a 1-2-3-2- progression that loops nicely.
4. Open another drawing in Do Ink animation app and draw a halo. Click + and draw another slightly different. Repeat until you have 3 frames with small changes in each.
5. Now you're ready to put all the pieces together. Open a new composition in Do Ink animation app and begin layering in your pieces. Start from the back to the front: import the wings (use the star button). HINT: DO NOT TOUCH THE GREEN BUTTON ON AN IMAGE YOU IMPORT. Doing so will create an animation path. That is a different effect. Resize by grabbing a handle on the edge, place it where you need it by touching it anywhere else but the green dot, slow down the animation (under the gear tab) to about half the speed. Next bring in the PNG pose from the camera roll (using the camera button). Resize/place. Bring in the halo (using the star) & resize/place/slow down animation. Next, choose the "T" to write your text. Resize/place. Next, pick a background color from the "i" tab at the top. Click the play button to test it out. When you're finished save as a video to your camera roll.
6. Convert the movie to a moving meme in a GIF format by using EZGIF.com
Save the GIF to your camera roll. It can play a GIF in places like Twitter or website.
Our district is embarking on a ONE BOOK ONE SCHOOL event where every student reads (or is read to) the story, A Nest for Celeste by Henry Cole. Here are some ideas I thought of for connecting with the story through art, animation, and character counts.
Below is a handout I created to help students see the shapes in Celeste's form to help you draw. The original illustration by Henry Cole is a value drawing. The pencil strokes become the texture of the fur. He shows highlights and shadows by adding more or less graphite from the pencil. This technique looks more 3-D than just filling in the drawing.
Fly with Lafayette the Osprey
1. Fly using green screen video masked into a still image over a video of clouds
2. Digitally layer in a still photo into the basket and create an animation path in Do Ink.
Be as kind-hearted as an osprey
As Small as a Mouse
Henry Cole wrote and illustrated A Nest for Celeste. He was able to tell us with words and pictures about the characters, setting, and all the elements of the story. See this Fugleflick about the importance of Illustrations.
Resource: The Internet was Created for Good
My students made this PSA video on how to use the internet for good as their entry into an online student contest. They came in 2nd place nation-wide. The entire movie was animated using Keynote. See if you can identify the different builds and actions used.
Resource: I AM ART
This Fugleflick, I AM ART, was made using keynote animation with green screen effects in iMovie. It's an awesome resource for introducing categories of art to students.
Resource: Careers in Art
Careers in Art, winner of Nextvista.org's video of the year in 2011, was animated using keynote. The photos were outlined by the technique shown here and the intro was a cool discovery I explain in this tutorial.
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.
Try using the running poses in Scratch
Scratch is a visual drag and drop coding site by MIT. I had some students who were really excited about coding come and talk to me today. We put together the running animation in SCRATCH using the individual drawings set to code. View the project here. or below.
A long time ago I responded to Ian Sands on twitter asking for digital images of children's art that he could offer to his high school students to play with as they learn to animate. Some of his students selected my students "He Came with the Chair" paintings. The animations turned out SO adorable and inspiring-see example below or check them all out here. It has been one of my goals to figure out an elementary level lesson with a straightforward app that would give my students the experience of animating their own artwork in the same style. I think I might have figured it out. This technique isn't perfect, but, it will work.
If we had Procreate app: like photoshop
The Brushes Redux app (free) allows you to work with layers like photoshop; select and match colors, use different textured brushes, and save each layer individually-all things needed to make these animations. However, the app does not allow you to select parts of the image. That's how the feet were moved in the animation below. The artist selected the feet, rotated them a bit, and redrew the surrounding space to match. This is the element my students would need to work around unless we purchase Procreate app for the classroom which has all the tools we would need. Sounds like I should write a grant.
Alternative plan: Brushes Redux (free)
This alternative solution for making animated GIF using Brushes Redux is to redraw each change in the piece of art. You need to choose a piece of art that has colors, textures, and elements that can easily be REDRAWN since you can't select and move. So, let's look at these portraits of George Washington by second graders. They each have clear and solid black marker lines and a clean opaque paint. It would be easy to redraw the eyes, mouth, nose, or even the wig or shoulders. Here is my first run through:
After importing your original image into a layer of Brushes Redux, you need to size it and never change it again. Consistency is really key for making the art look like it is moving. I deleted the extra transparent layer and chose the DUPLICATE button (double square +) from the top bar in the layers. I could only see the top layer so the bottom one didn't distract me, but to make sure I didn't draw on the wrong layer, I LOCK the bottom layer when I'm done with it (touch the lock symbol next to the image layer). I can use the eyeball feature to reveal and hide layers to check on how my changes are looking from one layer to the other. I would try to keep this animation simple by not exceeding 5 layers/drawings. It's hard to see all the layers in the app at one time when you get beyond 4. That can confuse your little artists. When you're ready to save your work: 1. close the eyeball on each layer expect your original (bottom layer), choose save to photos. 2. Open the eyeball on second layer and save to photos. 3. Repeat this until finished. This makes the images in the camera roll stay in order.
Now students can go to ezgif.com on their iPads and upload their images into the GIF maker. You'll see above that my five images are made into a sequence of 8 so that it will loop nicely. 1, 2, 3, 4, 5 are the drawings. I copied 4 and placed it after 5 so I could start reversing the sequence, followed by a copy of 3 and 2.
Let's spell this out clearly for little artists:
1, 2, 3, 4, 5, 4, 3, 2 (sequence for 5 images in animation)
1, 2, 3, 4, 3, 2 (sequence for 4 images in animation)
1, 2, 3, 2 (sequence for 3 images in animation)
Here is how it looks: (I used the crop tool to trim off white edges)
Quick Video Overview:
Use this video to introduce the project and help students see what the process requires.
Thinking this through: (my notes)
Another approach I might go with is to add structure the process since everything about it would be new to young learners. We could all work from the same gallery of images so we can tackle similar problems together. If we worked on, for example, these Wild Things from 1st grade, I could demonstrate how I would animate the eyes, mouth, and the horns. They might make other creative choices, but the problem-solving I demonstrate would transfer easily to their creative solutions.
The fifth graders' 3/4 pose portrait paintings are perfect for this animation lesson by making subtle changes in the expression. It forces the artist to think about what faces do to express emotion and map out a sequence of drawings to create this expression. This is a different form of expressionism (HA! Art teacher humor).
The fifth grade Light Up Robot painting is fun to animate with moving and blinking.
These first grade Lima Bean Monsters are perfect for this idea with their big features.
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.
View our Entry for the What's Your Story
Internet Safety Contest
(Won the 2nd Place Prize)
View this musical tribute to the hard working teachers at Dryden and the students they love to teach.
Tricia Fuglestad, NBCT 07
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.