My students made beautiful patterned figure paintings to show movement. See their gallery on Artsonia. These paintings are also the backdrop for a stop-motion digital extension lesson where students animated a mannequin to show movement over their movement paintings. See this lesson and results here.
Here is the new digital extension animation plan: Import the digital picture of student art into Brushes Redux. On a layer over the image, recreate the center figure by tracing. Save this image as a png with a transparent background. Then mask out the same figure from original painting and redraw the color and pattern the figure had covered. This forces the student to consider the elements of foreground, overlapping, color, and pattern in a dynamic way. Save the masked painting to the camera roll. Import both images into the Do Ink animation and drawing app in composition mode. Set an animation path and add rotation to the figure. Save this as a video. Here is a quick overview tutorial of all the steps here.
I've been thinking that the figure without pattern would be best to isolate in this process. But, what if that figure is not in the foreground. Does it still work? Why not just isolate the most foreground figure regardless of pattern. Students could redraw the pattern digitally. I wasn't planning on this digital extension when I was instructing students in the design of their lesson. (Download the lesson here from TpT) If I were to do this again, I would have students make the unpatterned figure in the center also in the foreground to make this digital animation a bit easier for them.
5th graders will be dynamically demonstrating the concept of movement over their paintings about movement through the magic of stop motion animation and green screen. Here is the post about this lesson from when we first tried it. One big difference this time around is that we have 6 Dewey iPad stands (thanks to an ABC/25 grant) that gives us lift and stability.
Step One: Painting about Movement
Click here to view their gallery of finished art on Artsonia.
You can download this lesson (step by step ppt) from TPT here.
Step Two: Green Screen Stop Motion
I put together a guide for setting up this lesson and a step by step powerpoint for creating the figure painting here:
Download the green screen stop motion lesson from TpT here.
You can also download the figure drawing painting ppt lesson from TpT here.
Step Three: Layer image and video
HINT: Here is what it looked like in 2014 when the 4th graders gave this a try.
Student Results: 2018 5th graders
The Do Ink Animation app allows you to save files in their original format, export animations as movies, or create stills from the movies. If you save them in the original format you can only view them by pulling the file into the app. But this also means you can SWAP your animations from one iPad to another so you can layer effects or try this cool trick. What you're seeing below is one animation shared out with two other iPads. I change the animation path on each one and set the timing to make it look like the sprite is flying from one screen to the next.
Swap for storytelling and collaborations
I had the privilege of leading an iPad workshop with art teachers, technology specialists, and administrators using the lessons I've developed for my students at Dryden. I love knowing that the things we are doing in our art room can influence and maybe inspire other young artists and their teachers. I taught from my growing collection of 222+ STEAM art lessons found here. You download my presentation. When you see numbers next to a lesson it refers back to the number in my STEAM art lessons collection where you will find resources, student examples, tutorials, and/or handouts.
First graders are learning the parts of fish as they designed their own. Then they randomly chose a monochromatic color to paint it. Students mixed to make tints and shades to add contrast to their fish. When the paint was dry, students traced the fish and added scales as visual texture. See the GALLERY of finished monochromatic fish here.
1st graders used the Superimpose app to erase the backgrounds on their fish paintings. These were put into the Do Ink Animation app on the art room iPads to animate their fish. Watch their class videos below.
To animate your fish PNG (erased background), open up a new composition in the Do Ink animation app. Select a background color (under the "i" button). Import the fish from the camera roll (using the camera button), resize and place it off stage. Then touch the green dot on the fish and drag out an animation path. Click play (blue triangle) to preview. Put it back in the gallery and export as a movie. Done!
First Grade Class Movies:
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.
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.
..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.
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.
I'm super excited to have found the Flipbookit in my Twitter feed a month or so ago. The discovery came at a time where I was thinking about how to display our class animations as I was preparing for rotoscope animations lesson with my 5th graders. What a perfect solution. The flipbookit is a DIY kit that creates a retro styled mutoscope, an early motion picture hand cracked flipbook device. This box has a crank that spins a rolodex of cards that you can customize through their online tool printed on labels. It took me 1 hour to put the box together and 1/2 hr to print, stick, and load the art. They are too expensive to have each student make their own, but because of their design, they make for a really simple all class rotoscope collaborative project. I'll try to explain.
The Flipbookit animation is only 24 frames long. That is a pretty short video.
It would be best if the video loops too since the crank allows you to view it over and over again. So, I asked one 5th grader from each of the 4 classes to volunteer to be filmed performing a short dance move that would easily loop. Here they are below.
1. Film a short looping video
I filmed them before green screen and used the Green Screen app by Do Ink to clean up the background so my animators would be undistracted by the background and better able to focus on the dancers when they draw their rotoscope.
2. Prepare the 24 frames of video
3. Preparing the tools to draw
Since the class is going to make one collaborative animation, we need each of the 24 frames of the video to look similar. The size of the image, color of the pen, thickness of the pen, and style of the drawing need to be similar enough that the illusion of movement is created. I set some parameters ahead of time when I created my example. Here is the handout to set up the drawing in the Brushes Redux app.
4. Turn in and rename digital files
----VIEW STUDENT IMAGES HERE----
4.5 (optional) Made an animated gif
I wanted to see how the 24 drawings would look as a digital animation so I loaded them into https://ezgif.com/maker to make an animated gif from the images.
5. Print and load the flipbookit
I followed the online directions for converting the 24 drawings into a pdf that would be printed onto the special sized labels that came with the DIY Flipbookit. I stuck them on the blank cards and loaded them into the rolodex to see the magic of Mutoscope animation from our collaborative rotoscope animation.
Digital animation made physical
Displaying the Mutoscopes:
Every Night I Dream Of Dancing by Andrew Huang is a music video collaboration of thousands of drawings from 30 different artists. The song is fun and the artwork is very inspiring. It has much more color and creativity than this project, but now that we've learned the process, perhaps next time we can take it further.
Drawing from Experience
This lesson requires student to create a CONTOUR LINE DRAWING. Allow the old and wise (and very little from all the years of sharpening) Grandpa Pencil explain more.
Extension: Build a Mutoscope Viewer
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.