And today, wordpress is refusing me the ability to just simply put a flash file in as part of my post… Grrr. Clicky here for the story of Charlie the Bear!
This was my example to my students today of what project #2 should look be like.
How is it the world of spam commenters seems to know one and only one post I’ve written to tag fake comments to? it’s a daily ritual now to come in here and mark as spam all kinds of comments!
Today, I started time-lapsing the construction of the new construction at Wolf Point in Chicago.
Not even sure how long it takes to build one skyscraper, much less three skyscrapers. Construction officially started on Monday, today is friday, so apart from missing part of the destruction of a parking lot ramp, haven’t really missed much.
I’ve been teaching animation, using Flash for a about 10 months now – and wow… it’s been that long! One thing I’ve noticed is that animation, and this is for the simplest sense of the word down to the most complex, is that many students just kind of expect things to happen on their own. Like those old cartoons, where Daffy gets tormented by the hand of the animator – all you have to do is draw a static figure of a duck and the rest just happens.
Hell, I wish it was that easy.
But animation is a progression, it’s not just getting something from point A to point B, it has to consider time as well. And that’s something that seems to get lost.
Many of my students seem to see time as an intangible. It’s something that we exist in, but can’t manipulate. Of course, this may seem true in most instances, but I know I have the power to make time slow down, in a very real sense, when I get to the lectures about coding (if/else anyone?). So if time is a progression, and we can measure it with clocks (or cell phones), why can’t we manipulate it? Odd question I’ve always wondered, every other dimension we can go in any direction, but time leaves us stuck going forwards (I’m guessing we can take rights and lefts, but no steps back).
In animation, we get to break that rule – to a degree. Once we place our object to animate, be it animal, vegetable or mineral at a point in time, we can in fact revisit that time and location and alter it to fit our needs better. In fact, with Flash I constantly go backwards and forwards to shape my animation’s outcomes to my needs. Sounds almost godlike!
Then there’s the other bit that deals with time – just like all of us weren’t all introduced into each other’s lives at the very beginning, we don’t have to have our characters all sitting around at the beginning, waiting to enter from stage left like actors in a play.
So taking these observations in mind, we begin to see that animation has rules that need to be met and pushed. We can introduce our characters one by one, change when they meet, and under what circumstances. These are all parts of telling a story, deciding how things conceptually interact. But what about the bit when we just need something to move across the room? Here we get to see time at its most basic. Now we have train A leaving the station and heading to station B 20 miles away. How long will it take?
Well, how fast is it going? With animation we measure time the way we measure distance, with a yardstick – we break down seconds into smaller divisions called frames (no milliseconds yet!).
———————- break —————————
Hell, I don’t know where I was going with this anymore. My site got hacked and taken down for a day. Sitting at home now, with a cat purring on my lap, Janis Joplin on the radio, and a need to go make dinner soon.
So I found this clip recently (actually, it found me – home screen of my Boxee box one fine day this past weekend). It’s a great clip, Terry Gilliam runs through (so fast, he might as well been running…) his cut-out style animation for Monty Python Flying Circus.
What I love about this movie is that he’s showing exactly how great, fast and funny Flash animation is done – you don’t need to mess around with huge amounts of frame by frame animations or make perfect realism. Sometimes, animating things in the bare bones is the best. And it helps if you’ve got a sick and twisted sense of humor. Best part is, Mr. Gilliam here (one day I would love to have him say to me, “call me Terry, please”) shows how to animate with small static pieces – just like breaking up your stuff into little bits in Flash. While he had to shoot frame by frame, the basic concept is the same we have now with motion tweening. This is the best lesson for students trying to learn the basics.
So that’s why I showed this to my class last night. I started it out by asking, “Who here has seen Monty Python stuff before?” A few hands went up. One girl asked, “is that like an anaconda or something?” Another said, “I’ve heard of ‘Monty Python and the Holy Grail’ but I’ve never seen it.” The one student who actually is older than me rolled his eyes (I was too, in case you’re wondering). Another student said, he’d only seen it because his girlfriend insisted he watch it (hope for the younger generation I guess!).
Still – I played this, there was glorious silence for 15 minutes, interjected by me yelling out things like, “we can do that with Photoshop now!” and “that’s basically motion tweening!” By end of class, I saw one girl redoing her project using black and white pictures cut out and put into Flash – and a few mentioned they were going to look for more Monty Python stuff over the weekend.
So I’ve been thinking of an idea that’s been baking around in my skull for a while, and I’m thinking of building it out as a Flash game to start.
There’s a lot to keep track in this game idea, and so, just like I tell the students, this isn’t something where you throw everything into a pot and let it simmer — you have to prep first. Thing is, I don’t know what all the ingredients are.
So what do you do if you don’t know where to start? Turn on Flash and stare blankly at the screen? Nope. I’m going back to the basics. I have my pages and pages of notes. I have vague ideas about levels and mini-games in the game. I’m going to grab pencil and paper. When I can’t draw out Evil Onion backgrounds and imagery any more, I’ll switch over to this. When I’m tired of trying to figure out how to get lots of little bits and pieces to interact, I’ll go back to the onion.
I think that when I’m ready, what I have to do is come up with the game dynamics, fake some animation (little blocks instead of fully fleshed out characters) and get them to move and behave how they have to. Once that works, I’ll go back and make clean animations. This is what usually kills me. I jump straight to the icing, forgetting the cake underneath. Let’s see if I can be any better this time around.
I’ve taken a week off from updating this as I’m trying to catch up with everything that always seems to be barreling down my way.
I’m still working on the new onion story, trying to come up with some new interesting backgrounds – right now, I’m playing with poster ideas, using various sketch software on the iPad to try and come up with something. Hell, I even played with 123D Sculpt to try and make a 3D onion…. that’s not coming out as well as I had hoped. If only I could just sculpt him in real clay, then scan him in. Because, you know, I have access to all that kind of equipment … or even clay. For now, here he is, squashing a flower.
One thing that keeps coming up (thanks in part to Theresa bringing it up on occasion) is, what other kinds of rude things will the evil onion do. She wants him giving the finger. What finger? Do I have to give him arms first?! Will he need legs too? Will he end up looking like Chairface Chippendale, except an onion and not a chair? This is a slippery slope, innit?
Still, today is the first night of class, and I’m going to see where this new batch takes me. Teaching is always an odd thing to me, since I’m working off topics that are very familiar to me, I don’t really feel like I’m teaching as much as I’m just explaining the obvious (yes, I know, obvious to me), but I generally feel that this stuff should be fairly easy to pick up once they give it a chance, and I should be there to just elaborate on the simplicity (or complexity) of the general ideas.
This is my second quarter teaching Flash, and I think it’s going to help me get to the ball rolling faster on the onion. I think I’ll be taking the iPad and sketching during lab time a lot this quarter.
So I’ve been struggling with what to do with the onion – where do we find the onion, 12 years down the line? Is he still in the suburbs (the most foul and evil place on earth)? Has he turned a new leaf? Given up on his evil ways? Did he turn that leaf back over and go back to being evil? Is there a Mrs. Onion? Does he work in IT? Twelve years later, have his hopes and aspirations been fulfilled?
Fade in, our onion, now an elder statesman in his oniony community, his comfortable life ensured by his misdeeds throughout the years. No. That won’t work. Maybe he’s like other cartoon characters, never aging?
Fade in, the onion sits at a desk. There are posters on the wall behind him, calling for donations, onions smile down from these posters. He’s working for some kind of charity… but what kind?
More later. I think I have the beginnings of a new cartoon finally…
I’ve been thinking about it. I use the cooking analogy a lot in class – both Flash and HTML/CSS. I think I use it a lot in other situations too. Basically, I boil it down to this: in order to understand a thing, you have to be able to break it down into the basic ingredients and see how they combined in the first place.
Since my Flash class is almost over, I’ll use it as an example. When you decide you’re going to build something, like say, a cartoon, you start out with your basics – the concept, maybe a few paper sketches, initial storyboards, etc. None of these have anything to do with Flash or ActionScript coding. Thing is, can’t go any further into Flash until you have these bits done.
That’s like your trip to the grocery store, just to get:
That’s an extensive list, you need to keep your kitchen better stocked… As you can see, the basic concept is a pasta of some kind. Now what? Can’t throw it all into a pot and magically have everything come out tasty. Just like Flash, you have to do some prep work. So first you have to identify ingredients (cooking) or identify animations (have a cat running across the screen? How will it animate? Should you separate out the limbs into their own animations?
If you’re animating a cat running down an alley, that’s like the sauce for our pasta. The alley is the pasta, and any assorted bit and pieces might be the garnish at the end. Hey, it’s not a perfect analogy, but it works…
Your pasta (the alley scene) needs to be prepped and ready to go for when the kitty (or sauce) runs through it and really mixes up this metaphor all to… (dare I say it?) pot.
I don’t know how you plan on drawing this alley, but like pasta, it needs to be cognizant of the kitty that’s going to run through it (or mixed into it, whatever). A good pasta will complement the sauce, in the same way a good background really makes your animation punch out. And you definitely want the pasta ready when the sauce is ready, so let’s get a pot of water boiling. Toss in the Angel Hair and keep an eye on it, you want it al dente. Once it’s ready, drain and put back in the pot. Once your background is ready, make it a movie clip and save it for later.
So, if the garlic represents the legs of the cat, you can animate these individually, so you don’t have to built it all at once. In the case of garlic, smash with the broad side of a chef knife (or a santoku – I like those better), THEN remove the peels (they come off easier this way). Now dice and set aside (I’m assuming you have prep bowls?
In Flash, FYI, the prep bowls are the library… and what each little bowl holds are movie clips, graphics and or buttons.
Back to this kitty running down the alley – does the head need to animate? Maybe not, so you draw a single image of the head (kinda like opening the can of tomato sauce and moving to the side by the prep bowls).
The kitty’s tail will move around a lot, you’ll want to animate that. Like tomatoes that need to add textures to the sauce. Chop up the tomatoes. Into a prep bowl!
The kitty’s body may not need to be animated, like the ground beef, it waits for the other bits to influence it. Draw it and put it in a prep bowl to the side!
Now we combine all these bits. The running kitty (or the pasta sauce) both need to be set up properly. In the case of the sauce, we need to saute the garlic first. One large sauce pan over high heat, use the light olive oil, and brown the garlic. In flash, make a new movieclip and put the kitty’s legs in the first layers. Once the garlic is browned, add in the ground beef. Or put the kitty body layer over the legs (since the front facing legs may need to be in layers above the kitty’s body, you’ll want to put the body layer in-between the legs – or in the sauce, stir till the beef browns).
What’s next? The kitty needs it’s head, so put that into the movie clip in it’s own layer. That’s the tomato sauce, FYI… Tail gets placed in too. Toss in the chopped tomatoes. Spruce up the kitty, go back and add some nice touches maybe to the striping on the head and tail. That’s the oregano, and other spices. Still needs a little extra oomph? Pour in some of that red wine. Now, let the fully animated kitty sit in your library. Or let the mixed sauce simmer for a little – lastly add the basil (tear it by hand).
Now let’s grab that background alley (or pasta), put it into the main timeline (or bring it in front of you), add the kitty (or sauce) on a layer on top (pour it on!). Get any little extra bits on a layer above the kitty, to add depth (say, garbage cans to run between). With the pasta, you’re adding those mozzarella balls.
In flash, you may want to add a “start” button or something for the animation to start. In cooking, that’s called a fork. Please also notice, no onions were needed to make a delicious pasta.
I’ve gone and rambled again… So, the thing I seem to ask all the time, both to students and friends in general. Did I just make any sense?
Now step back.
That’s today’s lesson in class. I’ve shown animation, shape and motion tweening. I’ve shown how to use timeline code to control different movie clips. Last week I introduced code logic and variables. Today I told them to, well, basically draw.
All those bits up there are for moving things around, getting user interactivity working, but that’s no good if you can’t come up with something for it to do. For the final project, they have to come up with an interactive something. A something that uses if/else, buttons, etc. Still, before they can get to the if/else, before they can make a button do something, they have to plot out what those somethings are.
So tonight we discussed final projects. Most chose to do a flavor of the following:
Quite a few started worrying about the code, but seriously, that can come later. First do the fun stuff, draw out storyboards, figure out animations, deal with the coding later.
Once all the little bits that make the animation cool are ready, then settle in to the coding part. It’s like cooking, get all the necessary ingredients, mix the right bits together THEN worry about what goes in the oven and what goes in the saucepan.