STORY   LOOP   FURRY   PORN   GAMES
• C •   SERVICES [?] [R] RND   POPULAR
Archived flashes:
228109
/disc/ · /res/     /show/ · /fap/ · /gg/ · /swf/P0001 · P2561 · P5121

<div style="position:absolute;top:-99px;left:-99px;"><img src="http://swfchan.com:57475/59128456?noj=FRM59128456-8DC" width="1" height="1"></div>

Sprite Animation Tutorial.swf

This is the info page for
Flash #30362

(Click the ID number above for more basic data on this flash file.)


Text
Continue

Sprite Animation

Tutorial

Hosted on:

www.albinoblacksheep.com

www.albinoblacksheep.com

This tutorial is for Macromedia Flash

Please stop emailing me asking what program
to use to make sprite movies

http://www.macromedia.com

Click the link for a free trial

This tutorial is designed for those moderately
familiar with flash basics.  If this is your first time
using the program, don't bother

So you want to make a sprite movie eh?

Keep in mind sprite movies are a lot of hard work, but not as much as normal movies

Before peeing your pants in anticipation of making your first sprite movie,
I've compiled a checklist of a few things you will need in order to get going.

1.  A program to make flash movies (Macromedia Flash)
2.  Sprite sheets
3.  Patience

Sprite Sheets - what are they?

A sprite sheet is exactly what it sounds like; a sheet with a bunch of
sprites on it.  You can find them all over the internet for various topics
such as video games, cartoons, and other types of things.  99% of the
time they will be in either gif or png format (since those formats provide
lossless quality and you can then resize your gifs to anysize without
worrying about them getting ugly).

As you can see, the sprite sheets give you almost every available
pose/view of a character from a video game.  You can use the ones on
the sheet or for more creativity you can make your own or edit pre-made
sprites.  Keep in mind the above image is only part of a full sprite sheet.

Previous

Getting your sprite sheet into flash

Just like any other sort of program, there are very many ways to go about doing this.
However, I will only be teaching you one method in this tutorial (because I feel it's
the easiest). Ok, so you have your sprite sheets saved on your computer.  Now we
have to get them into Flash to work with them and make a movie.

1. Go to File--->Import to Library.   Find your sprite sheet on your hard drive and import it.
2. Open up the library (Ctrl+L)and right click on your sprite sheet, click on properties.
3. Make sure "Allow Smoothing" is UNCHECKED and the compression is set to Lossless PNG/GIF.
4. Drag the sheet from the library onto the stage

Breaking Apart the Sprites

Ok.  Now your sprite sheet is on the stage.  The next step is to break the sheet apart
giving you a bunch of individual highlightable sprites.  To do this, follow the steps
below.

1. Click on the sheet, go to   Modifty--->Trace Bitmap
2. Input these settings in the trace bitmap space

click to enlarge

You will then notice that your sheet has been broken into individual pixels.
Also, the white background in between the different sprites should've
been removed as well.
The next step is to highlight each individual sprite pose/view/movement
that you want to use and convert it to a graphic.  Do this by either:
Going to Insert--->Convert to Symbol and select "graphic".
or
Pressing F8 on your keybard and selecting   "graphic".

Go Back

Now that you have learned to import a sprite sheet and break it apart to get the
individual sprites,  this next part of the tutorial deals with how to animate these
sprites for use in a movie.

Sprites and Movieclips

As any good animator will tell you, continuously repeated animation and movement such as
walking is best done using movieclips.  Instead of copy/pasting the animation over and over again
in the timeline (thus junking it up and adding a lot of uneeded frames), it is better to place the
animation in a movieclip because the clip will jump back to the beginning and loop once it is at the
last frame (unless any other actionscript tells it to do otherwise).
Sprites are no different.  Instead of pasting 100 frames of Mario running in place, pasting the 5-8
frame walk cycle into a movieclip and having the movieclip loop is a much easier solution. This is
what we will be covering next.

BAD BAD BAD BAD BAD BAD BAD BAD BAD

GOOD

Creating the Animation

If you haven't noticed already, in most sprite sheets the animation cycles will be set up in a straight
line with each other, making it very easy to pick out which frames you want to create an animated
sprite moving.

Once you have the sprites you want to use converted to graphics, create a new movie clip by
going to Insert--->New Symbol (Ctrl+F8) and selecting Movieclip, be sure to give it a name
referring to the animation it will be performing such as SoraLeftWalk

After you have your new movieclip created you will need to drag the sprites you made into graphics
earlier from the library onto the stage in the order of the animation sequence making sure there is
only one sprite per frame.  Each time you insert a new sprite into a frame be sure to align it in the
center of the movie clip (Open the align window, make sure "To stage" is pressed, then press the
middle button in each of the two sets to align it to the center
For the animation sequence, if you took the image from the previous frame and converted all those
to graphics from left to right you would name them like Sora1, Sora2, Sora3, Sora4 and so on, that
is the order of the animation sequence.

Frame
1

Frame
2

Frame
3

Frame
4

Frame
5

Frame
6

Frame
7

Frame
8

So now you know how to bring sprite sheets into flash, break them apart, make them into
individual graphics, and place those graphics into a movieclip to form an animation.  The next
step would be to drag your newly created sprite movieclip from the library and onto the stage,
positioning it where you want it.
By now you are probably thinking, "Ok I have an animated movieclip of a guy running...but he's
running in place..how do I make him actually move".      It's actually very simple.  All you have to
do is motion tween the movieclip and move it to where you want it.  If you don't know how to
motion tween, then go learn how to before continuing on.
So put your movieclip onto the stage, right click on the frame on the timeline and tween it, create
a keyframe of when you want the animation to stop, and then drag the movieclip itself to where
you want it to move to.
You should then have something like this

**NOTE: When previewing your movie from within Flash, your movieclip may appear to not be animating.  Don't worry simply publish your movie and view the .swf file and you'll see your sprite movieclip animating fine.

Changing Animations

Now that you have your sprite running across the screen, maybe you want to change the
animation once he reaches his destination?  This is very very simple to do.
All you have to do is create a new movieclip of the animation you want to switch to (or if you
don't want it to animate anymore but instead stand in a different pose or what not, create a new
graphic) and place it on the stage one frame after the last frame of animation.

This would then produce something like this

That's just about everything I can think of to include in this tutorial.
Hope you enjoyed it and learned some new things as well

Good luck with your new sprite movie madness skillz
feel free to ask any questions you have on the ABS forums in the
Flash Developer's section

The next page contains a list of many
many sprite resource sites.

Tutorial by: spork_man22

http://www.elementgaming.simgames.net/
http://www.emugifs.emuita.it/home.htm
http://www.explore-rpg.com/resources.htm
http://fated-circle.com/
http://www.fireball20xl.com/sprites.html
http://flashstand.com/sprites.php?mode=main
http://www.gaminggroundzero.com/
http://www.gamingw.net/
http://www.gsarchives.net/
http://www.molotov.nu/?page=graphics
http://pages.cthome.net/mnoni/webpage/spritesheets.html
http://www.panelmonkey.org/
http://rpgdragoon.2ya.com/
http://www.rpginfinity.com/
http://www.rpg2knet.com/resources/
http://tsgk.captainn.net/
http://www.sprite-town.tk/
http://www.odinsrealm.com/tatakau/
http://www.vgws.com/
http://www.gifsyndicate.com/
http://www.deekman.cjb.net/
http://www.psyguy.com/
http://www.bladeshotx.com/

Misc. Sprites
(Selectable - Copy/paste them)

NINTENDO SPRITES
http://clik.to/ninsprites
http://www.retrogamezone.co.uk/
http://www.mindspring.com/~hhkyl/vgames/sprites.htm

MARIO SPRITES
http://www.pipehouse.net/sprites.shtml
http://www.classicgaming.com/tmk/yellow.shtml

SONIC SPRITES
http://sfghq.emulationzone.org/sprites/sprites.php
http://www.sonic-gif.com/

ZELDA SPRITES
http://www.zeldaresources.com/
http://www.melorasworld.com/zelda/
http://www.purezc.com/

MEGAMAN SPRITES
http://www.planet-megaman.com/sprites/

POKEMON SPRITES
http://www.pokeschool.com/videogames/rubysapphire/sprites/
http://pokevalley.com/ps/main.php?id=P-Icon
http://www.serebii.net/

The End

<P ALIGN="CENTER"><FONT FACE="Haettenschweiler" SIZE="31" COLOR="#000000">kkozinski@gmail.com</FONT></P>

Feel free to email me any questions/comments

Shamless website plug: www.jkmd.net

Shamless website plug: www.jkmd.net

ActionScript [AS1/AS2]

Frame 1
stop();
Frame 66
stop();
Frame 67
stop();
Frame 68
stop();
Frame 72
stop();
Symbol 8 Button
on (release) { gotoAndPlay (2); }
Symbol 23 Button
on (release) { getURL ("http://www.albinoblacksheep.com", "_blank"); }
Symbol 34 Button
on (release) { gotoAndPlay (67); }
Symbol 40 Button
on (release) { getURL ("http://www.macromedia.com", "_blank"); }
Symbol 42 Button
on (release) { gotoAndStop (68); }
Symbol 50 Button
on (release) { nextFrame(); }
Symbol 60 Button
on (release) { prevFrame(); }
Symbol 75 Button
on (release) { enlargedtrace.nextFrame(); }
Symbol 82 Button
on (release) { gotoAndStop (1); }
Symbol 84 MovieClip Frame 1
stop();

Library Items

Symbol 1 GraphicUsed by:Timeline
Symbol 2 GraphicUsed by:8 33 34 42 50 60
Symbol 3 GraphicUsed by:8 33 34 42 50 60
Symbol 4 FontUsed by:5 45 57 140 141
Symbol 5 TextUses:4Used by:8 33 34 42 50
Symbol 6 GraphicUsed by:8 33 34 42 50
Symbol 7 GraphicUsed by:8 33 34 42 50
Symbol 8 ButtonUses:2 3 5 6 7Used by:Timeline
Symbol 9 BitmapUsed by:10
Symbol 10 GraphicUses:9Used by:Timeline
Symbol 11 BitmapUsed by:12
Symbol 12 GraphicUses:11Used by:Timeline
Symbol 13 FontUsed by:14
Symbol 14 TextUses:13Used by:Timeline
Symbol 15 FontUsed by:16
Symbol 16 TextUses:15Used by:Timeline
Symbol 17 GraphicUsed by:Timeline
Symbol 18 FontUsed by:19 20 21 37 39 41 43
Symbol 19 TextUses:18Used by:Timeline
Symbol 20 TextUses:18Used by:23
Symbol 21 TextUses:18Used by:23
Symbol 22 GraphicUsed by:23
Symbol 23 ButtonUses:20 21 22Used by:Timeline
Symbol 24 GraphicUsed by:32
Symbol 25 GraphicUsed by:32
Symbol 26 GraphicUsed by:32
Symbol 27 GraphicUsed by:32
Symbol 28 GraphicUsed by:32
Symbol 29 GraphicUsed by:32
Symbol 30 GraphicUsed by:32
Symbol 31 GraphicUsed by:32
Symbol 32 MovieClipUses:24 25 26 27 28 29 30 31Used by:116 128  Timeline
Symbol 33 ButtonUses:2 3 5 6 7Used by:Timeline
Symbol 34 ButtonUses:2 3 5 6 7Used by:Timeline
Symbol 35 FontUsed by:36
Symbol 36 TextUses:35Used by:Timeline
Symbol 37 TextUses:18Used by:Timeline
Symbol 38 GraphicUsed by:40
Symbol 39 TextUses:18Used by:40
Symbol 40 ButtonUses:38 39Used by:Timeline
Symbol 41 TextUses:18Used by:Timeline
Symbol 42 ButtonUses:2 3 5 6 7Used by:Timeline
Symbol 43 TextUses:18Used by:Timeline
Symbol 44 GraphicUsed by:Timeline
Symbol 45 TextUses:4Used by:Timeline
Symbol 46 FontUsed by:47 48 49 55 56 63 65 70 71 72 76 83 85 101 103 106 107 108 109 110 111 112 113 115 123 130 131 132
Symbol 47 EditableTextUses:46Used by:Timeline
Symbol 48 TextUses:46Used by:Timeline
Symbol 49 TextUses:46Used by:Timeline
Symbol 50 ButtonUses:2 3 5 6 7Used by:Timeline
Symbol 51 BitmapUsed by:52
Symbol 52 GraphicUses:51Used by:Timeline
Symbol 53 FontUsed by:54 62 69 87 97 119
Symbol 54 TextUses:53Used by:Timeline
Symbol 55 TextUses:46Used by:Timeline
Symbol 56 TextUses:46Used by:Timeline
Symbol 57 TextUses:4Used by:60
Symbol 58 GraphicUsed by:60
Symbol 59 GraphicUsed by:60
Symbol 60 ButtonUses:2 3 57 58 59Used by:Timeline
Symbol 61 GraphicUsed by:Timeline
Symbol 62 TextUses:53Used by:Timeline
Symbol 63 TextUses:46Used by:Timeline
Symbol 64 FontUsed by:65 92 95 101 103 117
Symbol 65 TextUses:46 64Used by:Timeline
Symbol 66 BitmapUsed by:67
Symbol 67 GraphicUses:66Used by:Timeline
Symbol 68 GraphicUsed by:Timeline
Symbol 69 TextUses:53Used by:Timeline
Symbol 70 TextUses:46Used by:Timeline
Symbol 71 TextUses:46Used by:Timeline
Symbol 72 TextUses:46Used by:Timeline
Symbol 73 BitmapUsed by:74 77
Symbol 74 GraphicUses:73Used by:75
Symbol 75 ButtonUses:74Used by:Timeline
Symbol 76 TextUses:46Used by:Timeline
Symbol 77 GraphicUses:73Used by:84
Symbol 78 GraphicUsed by:82
Symbol 79 GraphicUsed by:82
Symbol 80 GraphicUsed by:82
Symbol 81 GraphicUsed by:82
Symbol 82 ButtonUses:78 79 80 81Used by:84
Symbol 83 TextUses:46Used by:84
Symbol 84 MovieClipUses:77 82 83Used by:Timeline
Symbol 85 TextUses:46Used by:Timeline
Symbol 86 GraphicUsed by:Timeline
Symbol 87 TextUses:53Used by:Timeline
Symbol 88 FontUsed by:89 98 120
Symbol 89 TextUses:88Used by:Timeline
Symbol 90 BitmapUsed by:91
Symbol 91 GraphicUses:90Used by:Timeline
Symbol 92 TextUses:64Used by:Timeline
Symbol 93 BitmapUsed by:94
Symbol 94 GraphicUses:93Used by:Timeline
Symbol 95 TextUses:64Used by:Timeline
Symbol 96 GraphicUsed by:Timeline
Symbol 97 TextUses:53Used by:Timeline
Symbol 98 TextUses:88Used by:Timeline
Symbol 99 BitmapUsed by:100 102
Symbol 100 GraphicUses:99Used by:Timeline
Symbol 101 TextUses:46 64Used by:Timeline
Symbol 102 GraphicUses:99Used by:Timeline
Symbol 103 TextUses:46 64Used by:Timeline
Symbol 104 BitmapUsed by:105
Symbol 105 GraphicUses:104Used by:Timeline
Symbol 106 TextUses:46Used by:Timeline
Symbol 107 TextUses:46Used by:Timeline
Symbol 108 TextUses:46Used by:Timeline
Symbol 109 TextUses:46Used by:Timeline
Symbol 110 TextUses:46Used by:Timeline
Symbol 111 TextUses:46Used by:Timeline
Symbol 112 TextUses:46Used by:Timeline
Symbol 113 TextUses:46Used by:Timeline
Symbol 114 GraphicUsed by:Timeline
Symbol 115 TextUses:46Used by:Timeline
Symbol 116 MovieClipUses:32Used by:Timeline
Symbol 117 EditableTextUses:64Used by:Timeline
Symbol 118 GraphicUsed by:Timeline
Symbol 119 TextUses:53Used by:Timeline
Symbol 120 TextUses:88Used by:Timeline
Symbol 121 BitmapUsed by:122
Symbol 122 GraphicUses:121Used by:Timeline
Symbol 123 TextUses:46Used by:Timeline
Symbol 124 BitmapUsed by:125 126 127 129
Symbol 125 GraphicUses:124Used by:128
Symbol 126 GraphicUses:124Used by:128
Symbol 127 GraphicUses:124Used by:128
Symbol 128 MovieClipUses:32 125 126 127Used by:Timeline
Symbol 129 GraphicUses:124Used by:Timeline
Symbol 130 TextUses:46Used by:Timeline
Symbol 131 TextUses:46Used by:Timeline
Symbol 132 EditableTextUses:46Used by:Timeline
Symbol 133 FontUsed by:134
Symbol 134 EditableTextUses:133Used by:Timeline
Symbol 135 FontUsed by:136 138 139
Symbol 136 EditableTextUses:135Used by:Timeline
Symbol 137 FontUsed by:138
Symbol 138 TextUses:137 135Used by:Timeline
Symbol 139 EditableTextUses:135Used by:Timeline
Symbol 140 TextUses:4Used by:Timeline
Symbol 141 EditableTextUses:4Used by:Timeline
Symbol 142 FontUsed by:143
Symbol 143 TextUses:142Used by:Timeline
Symbol 144 FontUsed by:145 146
Symbol 145 TextUses:144Used by:148
Symbol 146 TextUses:144Used by:148
Symbol 147 GraphicUsed by:148
Symbol 148 ButtonUses:145 146 147Used by:Timeline

Instance Names

"enlargedtrace"Frame 71Symbol 84 MovieClip

Special Tags

Protect (24)Timeline Frame 10 bytes ""




http://swfchan.com/7/30362/info.shtml
Created: 19/5 -2019 09:50:35 Last modified: 19/5 -2019 09:50:35 Server time: 08/05 -2024 07:53:05