Tricia Fuglestad's Blog

Animate Your Lessons #TOT17

7/31/2017

Making a custom animated hologram in Do Ink Animation app

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.

Stop motion animation made in iMotion app

my notes:

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.

0 Comments

Running Like Scooby-Doo Would Do

7/12/2017

0 Comments

Run, run run like Scooby-Doo would do. Run as if the house is never ending, full of repeating furniture, and HUH? why so many doors?

When I saw this bumper sticker, I asked myself the same question. Now I know the answer!

Shaggy and Scooby-Do endlessly running

Here is What Scooby Would Do!

Brainpop video about traditional animation

I grew up watching Hanna-Barbera cartoons like Scooby-Doo, The Flintstones, Yogi Bear, and the Jetsons. These silly cartoons were produced over a period of 30 years solidifying a technique called limited animation. See the Brainpop video to learn more.

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.

Running scene from Yogi Bear

Running scene from The Flintstones

Running scene from Scooby-Doo

In each of these scenes the figures are centered in the frame while the background moves and repeats (not just because you're watching a gif). This in combination with the bodies changing poses in it's sequence, gives the illusion of running fast.

STEP ONE: Running character

My running guide

To make a running animation in Do Ink animation app, I began by drawing the four running poses of my character. I use the guide to help me figure out each arm and legs. I used the ghost frame option to help match my drawing from one pose to the next.

A screenshot from the 4 running poses in drawing mode in Do Ink Animation App

pose 1

pose 2

pose 3

pose 4

STEP TWO: background drawing

My original background drawing made in Brushes Redux app on the iPad

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.

I used the superimpose app to layer the image so it starts on the left the way it ends on the right

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.

setting up the running animation and background in the composition mode of Do Ink

Running the way Scooby-Doo would do.

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.

Running like Scooby-Doo Would Do from Tricia Fuglestad on Vimeo.

Figure in four running poses (drawing mode of Do Ink app)

I drew one house and duplicated it all in the Brushes Redux app

Looping animation layered and timed in composition mode of Do Ink app

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.

I made a three-framed superhero in a flying pose. No need for moving parts, just flying cape and blowing hair. Then I made one cloud that I would duplicate and resize.

P. S. This animation would be fun to view as a hologram. See my post about it here and view the example below.

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.

0 Comments

MAKE IT then MOVE IT: animated GIF

7/7/2017

1 Comment

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.

1 Comment