How to Make a Photo Sprite Flash Movie Or Comic

For Dummies...

That said and done, it's time to learn how to do what we did/are doing/failed miserably trying.

It's tough being a genius, not everybody accepts my greatness and...stop looking at me like that.

Tools of the trade:

1. Flash MX, preferrably 2004, but as long as it is flash, it'll do. We did ours in Flash MX (Flash version 6).

2. Photoshop or Fireworks MX or a similar high-powered photo editing software. Paint ain't gonna cut it with this.

3. A digital camera. (duh) More importantly, one that can hook up to your computer (dubble duh)

4. Actors' guild. What, no actors? Put out an ad, or gather up some gullible/pliable/easily duped friends.

5. At least 3gig of hard-drive space. More is always better.

6. Internet Connection. Why? Because you're gonna need to download stuff from time to time, and upload your finished product.

7. (Optional) DVD or CD burner with software. So that way you can send it to a film festival.

8. Weapons. You're not making a drama here, are you?

9. A Flash to Video converter. Get one that doesn't have the watermark and does let you change background color. Muy importante.

Once you have your tools, your next step is the most important and least thought of: Plot.

You know. What do you want to have happen in your story.

Once you have that, make a script. Be as detailed as possible. Why? The more detailed the script, the less time you will have to waste figuring out what you want your character to do in a scene and such. For fight scenes, we didn't choreograph them ahead of time, so we made them up as we went along. If you are creative enough to handle that, then go ahead. But otherwise it's best to do things 'blow-by-blow' so you know exactly what you want to animate.

Filming:

This is where the mustard hits the mayo...whatever that means. Follow the steps below.

Pre-filming:

You will need to do the following things, in this order.

  1. Scout places to serve as your backgrounds. It can be open fields, lakes, inside buildings, and such. Whereever you want the movie to take place in, find your spots. Take pictures when no one is around, or with people standing to the sides or far away. There is a reason for this, in that when you put your 'sprite' in the layer above the background in flash, it will appear in front of the background. If there is something you want in the shot and you put a sprite in front of it, it will block it, just like in regular photography. To avoid copyright and tresspassing allegations, alter your background or choose places so vague and nondescript that no one will no or care. Don't use other people's photos unless you have their permission. That means no fight scenes in the Land of Middle Earth or wherever Mordor is.
  2. Assemble your actor's costumes, attire, and weapons. Have them become familiar with them. This may take a day, week, month, whatever. Usually, it only takes a day. For our movie, our actors had extensive weapons and combat training prior to filming. Hey, it's what we do. Attire-wise, since it's the post-apocalyptic world of the future, we chose their street clothes since its not like the GAP's gonna be open in 2020. What this means for you is knowning that your actors can fit in their costume, and move in the costume.
  3. Speaking of moving, you need to figure out what 'moves' you want your character to do. In any movie, you're going to need the following shots: ducking, standing normal, emotional poses (angry, pointing finger, etc), physical poses (hit hard, injured, unconcious, etc), sitting down, walking, jumping, running, aiming weapon (You wouldn't believe how prevalent weapons are in romance stories), blocking, holding mouth, stuff like that. Write down what moves you want your characters to have, such as punches, blocks, and kicks. If you want a character to fly and do energy blasts, make sure you include poses for this. Our best advice is to look at video game sprite sheets and emulate those.
  4. Find a place to take your shots. The best place is in a studio, but failing that, pick a wall on the outside of a house or school. Set up a background screen, like a bedsheet or sheet of large construction paper, or photographic backdrop. Either way, you will need to have something that keeps unwanted elements (like wallpaper, siding, trees) out of your shot. This is most important as it will save you time later on, during sprite build. Tip: Choose a sheet that is of a radically different color from your actor's costumes and weapons.

Filming the Sprites:

Time to put the money where the mouth is. Clear off some time, because you're gonna need at least a day. Make sure you set up a schedule with your actors and have them come prepared. Setup your equipment and test it prior to filming time. You wanna make sure everything's a go. Set up your sheets against a wall, make sure the lighting is okay, and have your person stand in front of the sheet. Make sure your camera is far back enough to see the entire body. Include some space to record movements that may go above their head or slightly below their feet. I'd say 1.5ft for every 6ft of actor, so make sure you have some room behind, in front, above, and below. See, told you that sheet would come in handy. Hope you chose one big enough.

Phase 2 depends on your digital camera. Some cameras let you take a series of pictures while you hold the button down. If you have that feature, use it but make sure you adjust it for the light conditions, otherwise your shots will come out too dark (we had that problem). Also important is whether or not there is a delay between when you push the button and when the camera starts taking pictures. If that is the case, press the button and then say go to cue your actor. For non-motion shots, you don't need to worry about this. If you don't have the mult-shot feature on your camera, then you can just have your character move, then stop, then move, then stop.

Phase 3 is shooting the motion. In the case of a walking shot, have your actor walk across the shot from left to right or right to left, (as long as they is walking against the wall) while you take a pic of every step and while the foot is in the air. The more shots, the better. In the case of jumping, have the actor bend their knees a little, take a pic, have them jump, take a pic, then have then bend their knees a little upon landing and take a pic. For running shots, this may be a little difficult in that your actor may have a wide stance. Have them either run in place or run slowly across your shot. For punches and kicks, it'd best to use the multi-shot, but if not available, just have them stop at each 'stage' of their attack. (think of it like this, one pic as the fist is pulled back, one pic as the fist extends, one pic fully extended).

Phase 4 is shooting the poses. VERY IMPORTANT. Make sure the actor's is facing to the right or the left, 90 degrees or so and not looking at the camera, for the majority of the shots. It's the same for the motion shots. You have to remember that you are taking the 3D world and putting it on 2D animation. Look at it like this: In the video games, the characters look at and face each other, not the camera. There can be some poses and motion where the actor is facing the camera, or 180 from the camera, but the majority of the shots will be with your character facing right or left. So that way, the characters are facing each other.

Once you have photographed all the movements, your next step is to build the sprites. But first, load the photos into the computer.

Building the Sprites:

Your next duty is to prepare your pictures for spriting. Once all of your pictures are loaded, separate them in folders according to character. Then load up your photo editing software. This can be Fireworks, Photoshop, whatever.

Step 1: Open up a photo of a character. Start whichever you want.

Step 2: Use magic wand or whatever tool. Click on the background and delete it. This should leave behind a transparant sheet called alpha or index transparancy. It might even appear white. If your character photo has lost something in the delete, undo the delete, use the erase tool, and erase the background around the part that got deleted by accident. Make sure your magic wand is set to a low or medium low number like 20 or something pixels. We had a problem with Ryu's socks, the program kept deleting them. So for every shot we had, we would erase the background around the sock then magic wand the background away.

Step 3: Look over your photo and see if there's anything that needs to be digitally edited. Does your character's face need a scar or a boss tattoo? You can add it now. You can draw it in a separate window then paste it in place, or you can draw it direct. You can also adjust lighting at this point.

Step 4: MOST IMPORTANT!!!! Save the photo as a .png or gif, with alpha transparancy. If you don't, you will have a photo with an unsightly white background. You want only the character to be saved, not the background. With alpha transparancy, you can add it to Flash without background.

Step 5: Repeat for all character shots until done.

Step 6: Open Flash MX version 2 billion or whatever they call the damn thing these days. I don't care.

Step 7: Set your background color, and size up in "modify", then view the library. It should be empty. Go to file->Import to library. Go to the folders that hold your character's .png or .gif photos. Select them all and import them all into your library. Create a new folder in your library, give it that character's name and move all the photos into that folder. This is called 'organizing the masses'. Repeat for all character photos.

Step 8 is the frame rate. We are not experts on this. We had ours running at 12fps b/c 7 was too slow. Video files normally run at 24fps or higher, so keep that in mind. Also keep in mind that Flash has a built-in limit of 16,000 frames per movie or somewhere in that range. If you put 24 into 16,000 you have 666 seconds for your movie, or about 11 minutes. For our movie we didn't do it in one file, we had 17, or one for every scene. That way we didn't lose everything if a file got corrupted. Set a frame rate according to how fast you want your movie to go.

Step 9: Go to insert-> Create new symbol. Set it to graphic. Type in the name of the character (abbreviate if possible) and what the character is doing. Ex. Jin-Sen Point finger. Click ok. Drag the photo that the name refers to from the library into the middle of the screen. Resize the photo according to the size of your canvas. For example, we shrunk our photos down to 300 pixels in height. It should appear there without any background, if you saved it right. Once that is done, repeat for every non-motion pose.

Step 10: The motion sprites. Create new Symbol, set it to Motion clip. Type in character name and what character is doing. Ex. Jin-Sen Shoot. Now here's where things get tricky. Go up to the timeline section, move the mouse to the number on the timeline that is the same as the number of photos in the motion and right-click on the square that corresponds to that number. Left-click on "Insert blank Keyframe". A buncha little clear circles should appear in every frame from 1 to the number that you clicked. Next, click on frame 1 and then click on onion skin. Drag the first photo in the motion into the frame. Resize appropriately (I use ctr-alt-s to bring up the scale feature, then scaled the photos down to 35%, which made them around 300 pixels or larger or smaller, either way they no longer took up the whole screen). Postion in the middle of the screen, then go up to timeline, click on the second square with a circle in it (we call it a blank keyframe). The first photo will appear to be slightly ghostly. That's okay. Go to the library and drag the next shot in the motion sequence to the screen. Resize, click on the next blank keyframe, repeat. Do this until you have added all of the motion's shots. It should be same as the # of keyframes. Now, press enter. The motion clip will play. Analyze what you see. Does it match up? Is it too fast or too slow? If too slow, increase frame rate or delete a few unnecessary keyframes. If too fast, click on the first keyframe, go up to Insert-> frame (or press f5). Do this on the first 3 keyframes, then press enter. It will seem like it's stalling at the beginning, then moving normal at the end. You can adjust this effect by adding frames at various keyframes in the motion clip. This comes in handy for walking sprites. Repeat for all the motion sprites you want to create.

Step 11: Create your movie! Below are a few tips you might find useful

Conversion (and how I loved to start loving the bomb)

So now you've finished your movie. What do you want to do with it? It's up to you, but for now let's talk about Conversions.

To display on web, you just setup your .fla files to export to .swf. Pick a flash hosting site and upload. And you're done.

If you are going to make a DVD out of this, get ready for an annoying ride.

This is where that 'frame rate' issue can be a pain. Remember that MPEG runs from 23 to 30 frames per second. And unfortunately, there is no DVD burning software that lets you go straight from .swf to DVD. You will need to convert. In Flash MX, the export to avi function is all but useless if you have movie clips. Exporting to Quicktime might be possible, but sometimes it exports only the movie and the movie clips separate, which is an even greater pain.

In other words, get 30 bucks ready and go shopping. You will need to download a Flash Movie Converter. For our movie, we used Magic SWF to AVI, mainly because it had a 15-day trial without watermark. The other programs had watermarks and we didn't feel like paying for them. Magic SWF to AVI isn't the best, but it's not the worst. It is CLOSE to the worst, though.

Using Magic SWF to AVI to convert your swf to movie files.

There is a method to this madness. The first step is to set the SWF background to the same one that you had for the file you want to convert, otherwise it will be white and if that's not the canvas color/background, then you're gonna be in for a shock. Next step; decide which format you want to set it to. Most DVD-Video making software can handle .avi and mpeg. It better! Anyway, you can adjust much more with .avi, and get a smaller file size. If you export to DVD, you will have to decide on PAL (not US format) or NTSC(a US format) and 704x480 width x height or 740x480 width and height. VCD setting are smaller, 352x240 width x height. A dissent; I should probably warn you about this earlier, but DVD aspect ratio is usually 4x3, so your movie will zoom in a little and cut off characters and word on the very edges of the flash movie. Adjust accordinly.

Sound is a real problem here. Sound will become out of sync, but you can fix this. The program creates the video+audio track (in DVD mpeg or .avi) and the audio track (usually a .wav). To re-sync your sound, you will need the following.

Then we noticed that Magic SWF to AVI inserts a 0.4 second gap at the start of the audio track. Fix this by deleting that 0.4 second gap, then remove the native audio from the video (or mute it) and add in the fixed track. Finally you export to whatever format your DVD burning software can handle or whatever format you want for uploading. How you design your DVD is up to you. For the majority of our files, we exported to .avi, replaced the sound track, and then built a menu and burned with Ahead Nerovision 3.whatthehell version.

Conclusion

This guide is not an all and end-all. Be creative and patient. You will need it, so good luck.

Home      Humor

WARNING: Buckets of Blood is hosted on Comic Genesis, a free webhosting and site automation service for webcomics.