Mike Milo's Journal

I  read a question on a Flash forum recently asking for help in animating a logo of a person riding a bike. They uploaded the drawing they wanted and since I’m that kind of guy who tries to help I answered him…

Here’s what I wrote in case any of you want to learn this yourself!

Here's an image of the logo... ALL RIGHTS RESERVED

Here is what you should do:
Open your image in something like Photoshop and lasso the first wheel and hit CTRL-X to cut it from the image. The wheel will disappear. Then go to File> New and create a new file. Hit CTRL-V to paste the wheel into the new file you just created. Save it as “wheel 1″
do the same for the second wheel and save it as “wheel 2″
save the rest of your image as “bike”.

Open Flash
Hit F8 and a dialog box will come up. Call it “Bike animation”.
Now Hit F11 and your Library will come up. Double click the Bike Animation clip and it will open in the timeline. Nothing will be there yet though.
Now go to File> Import> Import Image
Navigate to the freshly created files on your computer and click OK
You images will appear on the timeline.
Click and drag to select them all or hold down Shift and click each one. then right click on the art on the stage and select “Distribute to layers” the files will now all be on their own layer.
Manipulate the two wheels to where you want them on the stage. If they are beneath the bike then reorder the layers how you want them to bem by dragging them above or below the others. Right Click on each wheel and select Transform. The blue box around your wheel should change to black and have little handles at each corner. There will also be a little white dot roughtly in the center of the image. This is your pivot point. If it is not already, move it to the center of your wheel. Do the same for the 2nd wheel.
Now go to the 8th frame on the timeline.
Hit F6 on your keyboard.
This will make the total length of the scene 8 frames long. You should have two dots one on the first frame one on the last frame. Do the same for each layer so they are all the same amount of frames.
Now select the two wheels and right click on the selected area and select “Motion Tween”.
Now your two wheel layers will be blue with an arror going form the first frame to the last frame.

Go to frame 4 on the first wheel and right click and select create keyframe from the pulldown menu that comes up. When you do you will see a new black dot.

Rotate the wheel by right clicking the wheel and selecting transform. When you move the mouse to one of the corners the mouse will change to a rotate icon. Rotate the wheel sideways.

Do the same for your other wheel.
Under the timeline to the left under the layers area you should see “Scene 1>Bike Animation” Click Scene 1 and the bike will disappear.
Now hit F11 again and the Library will come up again. Drag the bike animation clip from the Library onto the Stage.
Place it where you want it. You can also resize it.

Now hit Ctrl Enter and your little film should play. Tweak until it looks good to you.

If you want the bike to move up and down as it animates, then go to frame 8 on the main stage and hit F5 . This will give you a frame range of 8 frames again like we did earlier BUT it will not put a keyfraem at the end of the sequence. We’ll do that in a second.

Go to frame 8 and right click on it and select Create Motion Tween. Again your frames will change to blue etc.

NOTE: When a Tween is invoked in Flash, you can ONLY select a keyframe and not any fraem. it HAS to have a black dot on it for you to be able to select it.

Right click on the bike on frame 1 and select Transform and move the pivit point (white circle) to the bottom of the black box.   Now go to frame 4 and right click and select create keyframe. Now select the top middle controller on the transform box and squish your drawing slightly to make it seem like it’s lowering a bit. Only the top will squish and the bottom of the drawing will stay as is because of the pivot point’s position.

Hit CTRL enter and your little bike guy should animate and slightly go up and down as well!

Here’s what it essentially will look like.

The drawing itself is not the best to animate with mostly because of the odd shaped wheels  but you can clearly get the idea. He should also be able to animate his legs up and down but that’s a lesson for another time.

Original FLA file can be downloaded here.

You’re an animatin’ fool!

That’s about it.
I hope this helps

UPDATE: Flash is weird sometimes and tweening images especially a circle can be troublesome because if it rotates around too far between two keyframes Flash takes the shorter way and rotates the opposite direction so in order to get the wheels to turn correctly you have to do it in small increments by rotating a bit on the 2nd frame, then going to the 4th frame and rotating a little more and so on. Also when animating a wheel it’s hard to see the rotation correctly because it all pretty much looks the same so a trick you can do is to double click inside the wheel clip, place a small square at the top of the wheel and then go back tot he stage and animate the wheeel. this way you can see how far it turns each keyframe! When you’re done simply remove the square and you’re good to go!

Over the years I have had many instances where I have created vector art in Adobe Flash simply because I hate Illustrator’s interface. Unfortunately  if the art is for print media, eventually I will have to export the art out as either an .ai or an .eps file.

Herein typically lies the trouble.

The internet is littered with posts from people (even on the Adobe site itself) complaining of this well known problem.

The workflow is as follows:

• You draw something in Flash.
• You want to export that thing out to Illustrator as a vector file
• You go to Export>Image>Export as Ai> export as AI v6
• You scream and cry because when you open your exported file it’s been converted to CMYK colors instead of RGB!
• Nothing will convert it to RGB despite many attempts to change the Document Color mode or changing the Color Management. There are no color export settings for Flash.
• You hang your head and cry.

Ah, but there is a solution! It takes a few steps to do but it’s worth it!

The workflow is as follows:

• Draw the Mona Lisa in Flash
• export as an EPS
• What’s that you say? There is a pixel shift in your exported file creating horizontal white lines across your character or art?
• No worries, there’s a fix for that too!
• Select all of you art and then select the Live Paint bucket.
• Click on your art and Illustrator will convert the file to a Live Paint object.
• Now you will notice that your white lines have disappeared!
• rejoice that you have foundeth this here blog!

Shame on you Adobe… you can easily fix this and yet each version that comes out you ignore it. What happened to your great company? you’ve become as fat and bloated as Microsoft witht eh right hand not knowing (or caring) what the left hand is doing!

Shame! Shame! Shame!

Just messing around with my Cintiq and Flash.

Don’t expect much…

Here’s the first pass at the final banner I did for my latest client.

It’s pretty big eh? Not sure why they’re calling it a banner but they are. I think it will be the opener for a website. It was a lot of fun to do and I got to animate it all by hand in Flash on my Tablet PC. I soooo need to animate a scene with this thing. It’s so easy to use too. The cleanup can be a bit difficult unless you size up the scene to a huge size and then the pencil cleanup looks crisp and clean. the colring is pretty easy too. At first I had a bit of difficulty with the Paint Bucket and filling in the cleaned up lines but then I realized if I filled it in blocvks it might work and lo and behold it worked beautifully!

I know, it’s not really a logo per se but that’s what the client is calling it so that’s what I’m calling it. Anyway, if you want to see it bigger, click the picture below. Next I will be doing an animated banner for these guys with the dogs running through the screen and the man cleaning up after them.

I’m pretty pleased with the dog running so far which you can see below. It was entirely hand drawn animated in flash. Kinda cool no?

A special thanks to my brother Andy who set my blog up now so it can do Flash right in the posts! He’s cool huh?

A while back the place I worked for asked me to do a quick Zombie fight sequence in Flash. No direction or script just “Do a zombie sequence. Oh and add some dead politicians and a hot Spy chick in spandex. Fast!” Click the picture to see what I came up with.

P.S. You’ll need Flashplayer v8 to view this correctly which you can get here.

Wow! This is amazing! A group of geniuses have developed a First-Person shooter for the web called Phosphor using Macromedia Director and I have to say it’s outstanding! It’s not easy to play and sometimes it doesn’t work well in Firefox but fire it up in IE and it works flawlessly.

Like most FPS games, you are a soldier with an arsenal of guns running through buildings, valleys and over ravines etc. trying to find other players (the computer) to kill before they kill you. In Phosphor the IA characters are hell-bent on destroying you and waste no time in attack so you have to be really quick to get the jump on them first.

The graphics are pretty good considering the fact that you are streaming over the web and while they’re no match for a true console FPS remember it’s all free so you really can’t complain.

You even have options to choose from in that you can choose multiple guns, ammo and even tweak settings such as full screen and frame rate. It’s a pretty in depth application.

Phosphor is pretty fast paced and you die quickly unless you keep your wits about you but suffice it to say if you’re in to FPS games you’ll dig this one!

Well, I managed to make yet another episode of Joe Dugan-Mailman.

Check it out here!

Building slightly on my last post- Here are some Joe Dugan hands from my most recent film
Joe Dugan- Mailman. I just drew these directly and scanned them into Photoshop and imported to Flash. Then I ran Trace Bitmap on them and broke them up into individual pieces of art. Finally I encased them all in a Graphics clip so I could call to them in the timeline when needed! Fun stuff!

When I first started in Flash, one of the first films I made was a short called Angel Angles. It was a simple film about 3 angels and their happenings in Heaven where they worked for the Man. I just wanted to learn Flash and this seemed a perfect way to do it. You can see Angel Angles here.
It was a fun film for me and I really learned a lot about what NOT to do in a Flash film. Some of the layers in that film got up into the 100′s! Yeah, I’ve learned a bit since then.
Anyway, here are some of the Master sheets I did for the film. It illustrates a good way to separate a character for Flash.

Primarily, I did everything encased in what’s known as a “movie clip” but when I went to Warner Bros. to do The Jackalope Boyz, I learned that you can not export a Flash film to video when you do animation as a movie clip. It has to be a graphic clip. Hard to believe that a “movie clip” can’t be used to make a movie but that’s the case! Go figure!

Nowadays, I do not make Master sheets so much but really just draw the character parts and scan it in. I also do not color it before I break it up. It’s much easier to color in Flash that in Photoshop and you can vectorize artwork easier in Flash as well which makes for smaller file sizes! Sweet! Of course if you look at the plane in the first scene of Angel Angles you’ll clearly see I did not vectorize it first. Silly me!