View Full Version: BlackDevilX's Spriting Tutorial 1

HellBlaze Cafe > Hellblaze Tutorials > BlackDevilX's Spriting Tutorial 1


Title: BlackDevilX's Spriting Tutorial 1
Description: Covers starting for beginners


BlackDevilX - August 10, 2005 02:02 PM (GMT)
In this Tutorial Ill be covering basic Spriting, Step by Step instructions
and FAQ's so without further ado, lets begin!

First of all, YOU NEED FLASH silly!
http://www.macromedia.com/cfusion/tdrc/ind...lash_mx2004_pro
<--- click that link to get Flash. Youll need an account
first so sign up for a free one. Download flash for your operating
system windows or mac. make sure you have plenty of room..so laptops
arent reccomended unless its good. Also I am aware of the fact its a 30
day trial but 30 days should be long enough to master it. If your
interested in flash then I.M me or Virus Zero and well take it from
there Once youve done that proceed on
Now this is where it all starts. Open Flash and go to File>New and
then click on New document.
user posted image
Step 1: Getting the Background Ready
Now your ready to begin! first of all to make a good sprite flash you
need some backgrounds so just use any ol' pic on your computer or go
and use this one
user posted image
Save it to Desktop and proceed.

Next lets import the background. Go to File>Import>Import to
library and import your background
user posted image
Next we need to get the background! So First of lets do one thing
before we do! at the top right side of the screen you should see the
number 100% Thats what your seeing 100% of the big white area. Change
that number to 50% so you can see what your doing.
user posted image
Now that you have a better view of what your doing. Click on the grey
area in flash, and press CTRL+L and the Library should pop open on the
right hand side of the screen.
user posted image
Next Drag Image onto the stage and click on it. Next press CTRL+K to
open up the align window. Click on your image and press CTRL+G. Now go
to the align Box. Click the buttons shown below. Also read the detailed
explaneation of what the buttons do.
user posted image
Good now tha thats out of the way lets go add a sprite!

Step 2: Adding sprites
Now lets get some sprites going! Open up your sprite sheet in
PAINT

Q: Why not import the whole sprite sheet in flash?

A: The process of which were going to do is going to only need one
sprite. If you do this to the whole sheet your looking add some major
problems. Theres nothing wrong with it, but if u do this make sure u
have a REALLY fast computer! If you dont have sprites then use this
attached image at the bottom.
Open up the sprite sheet in pain and cut ONE Sprite out using the cut
tool located at the top left hand side of paint. (It looks like a
dotted square so i dont need to do paint help)
After you cut your sprite Right click on it and copy the image. Next
take the sprite and paste it into flash. as soon as you do it, Delete
it by hitting backspace.

Q: Why do i delete it?

A: It appears in your library!
Lets open up the library again by pressing CTRL+L. Or if its already
open take the newest bitmap out and drag it onto the GREY AREA of the
document. It will be SMALL AS HELL so i suggest zooming in if u need to
by clicking the magnifying glass at the right hand side in flash. Q:
Why is it a bitmap? A Dont worry anything you cut and paste becomes
automatic bitmap. Doesnt mean they are.

Q: Why the grey area and not the background?

A: Because were going to remove that aful color from the background of
the sprite, and when u do this on the image on the stage, it will
dissapear behind the image.

Q: Why is the blasted sprite so small?

A: Because Macromedia Loves making us work :)
Now right click on that tiny image and go down to free transform. The
image should now tuen into a lil black box. That little black box is
grabable for strecthing. (or if you zoomed in you should see 8 black
squares around the image.
user posted image
Depending on what angle you grab the box is how you will strech it out.
diagonal up or down left or right. Strecth the image out to about 1 1/2
inches. DO NOT INVERT! make sure the image s facing the same way you
cut it out of paint. If not, then fix it by grabbing the apropreate
black square and change the image direction. OR go to Modify at the top
Transform>Flip horizontal.
Now when you have th esprite streched out, click on it and go to Modify
at the top, bitmap>Trace bitmap. Set all the values to 1 and click
on the Top drop down boxes and set it to Pixels and hit ok.

Q:I dont see/ the trace bitmap isnt highlighted.

A: Did u click on the image? Now you should see lots of dots on the
sprite. Click the stage to remove them. Now you can remove the
background from the sprite. just click on the Background part and press
delete! If you mess up just hit CTRL+Z to undo. When your done taking
the background color off the image, highlight the image and press
CTRL+G to group them! Now drag the sprite on the BG and your done.

Q: The color is distorted! What did i do wrong!?

A: Remeber i told you dont invert the image?now you have to Undo it
until Before you traced the bitmap

Q:Wait how do i create animation like you do?

A: Lets take it one step
at a time before we start asking for things. Any more question you have
feel free to ask!

FFsonic - December 12, 2005 06:47 AM (GMT)
Dude, this is fucking genius. Now why couldnt all the other tutorials say it simply like you did. Jesus.... Your way is awesome. Checks for more tutorials* :dance:

Life Priest - December 13, 2005 03:29 AM (GMT)
I like how this tutorial is? but it feels like computer class.

BlackDevilX - December 13, 2005 04:14 AM (GMT)
Well godo to know becaus eyou learn something in class right? Also you can comeback here if you get stuck, or go visit VZs tutorial

FFsonic - December 13, 2005 02:40 PM (GMT)
Whens the next one, I should have mastered this part.

Life Priest - December 14, 2005 10:04 PM (GMT)
yea u do learn stuff in class but im goin through school so i can get to college and make games.

BlackDevilX - December 17, 2005 04:00 AM (GMT)
The next one? Hmm i guess i can shoot out another one if you request something REASONABLE!!! i betet rnot here, OMFG HOW DO YOU MAKE GAMES i will no longer make tutorials, dont ask me how to program a game because its not something u learn in 2 seconds or by reading a tut

Black Angel - December 17, 2005 05:55 AM (GMT)
i would like to know how to do a website in flash.. much like new your flash template on your site.. except using one off my templates.. i remember you saying that you did not use action script in it all at all so i suppose that i can assume that it wont take me long to learn it.. :)

BlackDevilX - December 18, 2005 10:47 PM (GMT)
I used MINOR Actionscript. nothing but some gotoand play actions and the showmenu code

VirusZero - December 19, 2005 04:48 AM (GMT)
while this is BDX's spriting tutorial, i suggest if you want more actionscript stuff ( keep in mind i'm not a pro actionscripter ) check out my tutorial ( or i will explain here or somewhere if you want )

Dictator - February 4, 2006 05:49 AM (GMT)
This tutorial is genius! I've looked at a ton of other tutorials and they don't tell you how to set things up. You've just made my life a hell lot easier!

neo - February 7, 2006 10:35 PM (GMT)
Thats pritty cool. It's just I don't have any other things beside msp.

Same-San - February 9, 2006 09:57 PM (GMT)
If I had known about this tuttorial I wouldn't have needed photoshop. Very informative

neo - February 10, 2006 08:13 PM (GMT)
The trial takes like 1 hour to load!

VirusZero - February 10, 2006 08:26 PM (GMT)
load as in download or load as in start up? because if its a slow dl then its your net connecion speed coupled with the load on the server which would cause that.
if its a slow start up then that is your computer alone, try closing unnecessary programs when starting it if that doesn't help then you just have to deal with the load times as they are.

neo - February 10, 2006 08:37 PM (GMT)
downloading. But the time is shered up. It sade 55 min. left at 38% when at 4% it sayed 1 hr 05 min. left.

A.J. The Echidna - June 25, 2006 12:49 PM (GMT)
QUOTE (FFsonic @ Dec 12 2005, 01:47 AM)
Dude, this is fucking genius. Now why couldnt all the other tutorials say it simply like you did. Jesus.... Your way is awesome. Checks for more tutorials* :dance:

Watch your language, but other wise, good tutorial. Now how do we make sprite comics(For those of us who don't know how)?

ffdarkside - July 11, 2006 03:15 AM (GMT)
[QUOTE=BlackDevilX,Aug 10 2005, 09:02 AM] In this Tutorial Ill be covering basic Spriting, Step by Step instructions
and FAQ's so without further ado, lets begin!

[URL=http://www.macromedia.com/cfusion/tdrc/index.cfm?

i cant get to the site can is their a athough site i can go to

Sephiroth - July 11, 2006 10:26 AM (GMT)
This tutorial is awsome...now i won't have any kind of trouble anymore....

ffdarkside - July 12, 2006 12:12 AM (GMT)
I get it now but u make it said so easy
But love this Tutorial

blazing_heartnix - July 26, 2007 11:31 PM (GMT)
thank u BDX!!!! now i can make Sunfire's first sprite animation! wait for it it'll be great(but not as good as yours of course atleast not the first time) and sunfire is moving COOL!!! :multidance:

BlackDevilX - October 12, 2007 03:13 AM (GMT)
Hey guys, i know this is old, but i fixed the pictures on the first page, so you can see them A LOT better

Soul_Gatherer3000 - October 12, 2007 04:51 AM (GMT)
*sigh* Wish I had flash :idontknow: .




Hosted for free by InvisionFree