STORY LOOP FURRY PORN GAMES C SERVICES [?] [R] RND POPULAR | Archived flashes: 229671 |
/disc/ · /res/ — /show/ · /fap/ · /gg/ · /swf/ | P0001 · P2596 · P5191 |
This is the info page for Flash #30362 |
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 1stop();Frame 66stop();Frame 67stop();Frame 68stop();Frame 72stop();Symbol 8 Buttonon (release) { gotoAndPlay (2); }Symbol 23 Buttonon (release) { getURL ("http://www.albinoblacksheep.com", "_blank"); }Symbol 34 Buttonon (release) { gotoAndPlay (67); }Symbol 40 Buttonon (release) { getURL ("http://www.macromedia.com", "_blank"); }Symbol 42 Buttonon (release) { gotoAndStop (68); }Symbol 50 Buttonon (release) { nextFrame(); }Symbol 60 Buttonon (release) { prevFrame(); }Symbol 75 Buttonon (release) { enlargedtrace.nextFrame(); }Symbol 82 Buttonon (release) { gotoAndStop (1); }Symbol 84 MovieClip Frame 1stop();
Library Items
Symbol 1 Graphic | Used by:Timeline | |
Symbol 2 Graphic | Used by:8 33 34 42 50 60 | |
Symbol 3 Graphic | Used by:8 33 34 42 50 60 | |
Symbol 4 Font | Used by:5 45 57 140 141 | |
Symbol 5 Text | Uses:4 | Used by:8 33 34 42 50 |
Symbol 6 Graphic | Used by:8 33 34 42 50 | |
Symbol 7 Graphic | Used by:8 33 34 42 50 | |
Symbol 8 Button | Uses:2 3 5 6 7 | Used by:Timeline |
Symbol 9 Bitmap | Used by:10 | |
Symbol 10 Graphic | Uses:9 | Used by:Timeline |
Symbol 11 Bitmap | Used by:12 | |
Symbol 12 Graphic | Uses:11 | Used by:Timeline |
Symbol 13 Font | Used by:14 | |
Symbol 14 Text | Uses:13 | Used by:Timeline |
Symbol 15 Font | Used by:16 | |
Symbol 16 Text | Uses:15 | Used by:Timeline |
Symbol 17 Graphic | Used by:Timeline | |
Symbol 18 Font | Used by:19 20 21 37 39 41 43 | |
Symbol 19 Text | Uses:18 | Used by:Timeline |
Symbol 20 Text | Uses:18 | Used by:23 |
Symbol 21 Text | Uses:18 | Used by:23 |
Symbol 22 Graphic | Used by:23 | |
Symbol 23 Button | Uses:20 21 22 | Used by:Timeline |
Symbol 24 Graphic | Used by:32 | |
Symbol 25 Graphic | Used by:32 | |
Symbol 26 Graphic | Used by:32 | |
Symbol 27 Graphic | Used by:32 | |
Symbol 28 Graphic | Used by:32 | |
Symbol 29 Graphic | Used by:32 | |
Symbol 30 Graphic | Used by:32 | |
Symbol 31 Graphic | Used by:32 | |
Symbol 32 MovieClip | Uses:24 25 26 27 28 29 30 31 | Used by:116 128 Timeline |
Symbol 33 Button | Uses:2 3 5 6 7 | Used by:Timeline |
Symbol 34 Button | Uses:2 3 5 6 7 | Used by:Timeline |
Symbol 35 Font | Used by:36 | |
Symbol 36 Text | Uses:35 | Used by:Timeline |
Symbol 37 Text | Uses:18 | Used by:Timeline |
Symbol 38 Graphic | Used by:40 | |
Symbol 39 Text | Uses:18 | Used by:40 |
Symbol 40 Button | Uses:38 39 | Used by:Timeline |
Symbol 41 Text | Uses:18 | Used by:Timeline |
Symbol 42 Button | Uses:2 3 5 6 7 | Used by:Timeline |
Symbol 43 Text | Uses:18 | Used by:Timeline |
Symbol 44 Graphic | Used by:Timeline | |
Symbol 45 Text | Uses:4 | Used by:Timeline |
Symbol 46 Font | Used 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 EditableText | Uses:46 | Used by:Timeline |
Symbol 48 Text | Uses:46 | Used by:Timeline |
Symbol 49 Text | Uses:46 | Used by:Timeline |
Symbol 50 Button | Uses:2 3 5 6 7 | Used by:Timeline |
Symbol 51 Bitmap | Used by:52 | |
Symbol 52 Graphic | Uses:51 | Used by:Timeline |
Symbol 53 Font | Used by:54 62 69 87 97 119 | |
Symbol 54 Text | Uses:53 | Used by:Timeline |
Symbol 55 Text | Uses:46 | Used by:Timeline |
Symbol 56 Text | Uses:46 | Used by:Timeline |
Symbol 57 Text | Uses:4 | Used by:60 |
Symbol 58 Graphic | Used by:60 | |
Symbol 59 Graphic | Used by:60 | |
Symbol 60 Button | Uses:2 3 57 58 59 | Used by:Timeline |
Symbol 61 Graphic | Used by:Timeline | |
Symbol 62 Text | Uses:53 | Used by:Timeline |
Symbol 63 Text | Uses:46 | Used by:Timeline |
Symbol 64 Font | Used by:65 92 95 101 103 117 | |
Symbol 65 Text | Uses:46 64 | Used by:Timeline |
Symbol 66 Bitmap | Used by:67 | |
Symbol 67 Graphic | Uses:66 | Used by:Timeline |
Symbol 68 Graphic | Used by:Timeline | |
Symbol 69 Text | Uses:53 | Used by:Timeline |
Symbol 70 Text | Uses:46 | Used by:Timeline |
Symbol 71 Text | Uses:46 | Used by:Timeline |
Symbol 72 Text | Uses:46 | Used by:Timeline |
Symbol 73 Bitmap | Used by:74 77 | |
Symbol 74 Graphic | Uses:73 | Used by:75 |
Symbol 75 Button | Uses:74 | Used by:Timeline |
Symbol 76 Text | Uses:46 | Used by:Timeline |
Symbol 77 Graphic | Uses:73 | Used by:84 |
Symbol 78 Graphic | Used by:82 | |
Symbol 79 Graphic | Used by:82 | |
Symbol 80 Graphic | Used by:82 | |
Symbol 81 Graphic | Used by:82 | |
Symbol 82 Button | Uses:78 79 80 81 | Used by:84 |
Symbol 83 Text | Uses:46 | Used by:84 |
Symbol 84 MovieClip | Uses:77 82 83 | Used by:Timeline |
Symbol 85 Text | Uses:46 | Used by:Timeline |
Symbol 86 Graphic | Used by:Timeline | |
Symbol 87 Text | Uses:53 | Used by:Timeline |
Symbol 88 Font | Used by:89 98 120 | |
Symbol 89 Text | Uses:88 | Used by:Timeline |
Symbol 90 Bitmap | Used by:91 | |
Symbol 91 Graphic | Uses:90 | Used by:Timeline |
Symbol 92 Text | Uses:64 | Used by:Timeline |
Symbol 93 Bitmap | Used by:94 | |
Symbol 94 Graphic | Uses:93 | Used by:Timeline |
Symbol 95 Text | Uses:64 | Used by:Timeline |
Symbol 96 Graphic | Used by:Timeline | |
Symbol 97 Text | Uses:53 | Used by:Timeline |
Symbol 98 Text | Uses:88 | Used by:Timeline |
Symbol 99 Bitmap | Used by:100 102 | |
Symbol 100 Graphic | Uses:99 | Used by:Timeline |
Symbol 101 Text | Uses:46 64 | Used by:Timeline |
Symbol 102 Graphic | Uses:99 | Used by:Timeline |
Symbol 103 Text | Uses:46 64 | Used by:Timeline |
Symbol 104 Bitmap | Used by:105 | |
Symbol 105 Graphic | Uses:104 | Used by:Timeline |
Symbol 106 Text | Uses:46 | Used by:Timeline |
Symbol 107 Text | Uses:46 | Used by:Timeline |
Symbol 108 Text | Uses:46 | Used by:Timeline |
Symbol 109 Text | Uses:46 | Used by:Timeline |
Symbol 110 Text | Uses:46 | Used by:Timeline |
Symbol 111 Text | Uses:46 | Used by:Timeline |
Symbol 112 Text | Uses:46 | Used by:Timeline |
Symbol 113 Text | Uses:46 | Used by:Timeline |
Symbol 114 Graphic | Used by:Timeline | |
Symbol 115 Text | Uses:46 | Used by:Timeline |
Symbol 116 MovieClip | Uses:32 | Used by:Timeline |
Symbol 117 EditableText | Uses:64 | Used by:Timeline |
Symbol 118 Graphic | Used by:Timeline | |
Symbol 119 Text | Uses:53 | Used by:Timeline |
Symbol 120 Text | Uses:88 | Used by:Timeline |
Symbol 121 Bitmap | Used by:122 | |
Symbol 122 Graphic | Uses:121 | Used by:Timeline |
Symbol 123 Text | Uses:46 | Used by:Timeline |
Symbol 124 Bitmap | Used by:125 126 127 129 | |
Symbol 125 Graphic | Uses:124 | Used by:128 |
Symbol 126 Graphic | Uses:124 | Used by:128 |
Symbol 127 Graphic | Uses:124 | Used by:128 |
Symbol 128 MovieClip | Uses:32 125 126 127 | Used by:Timeline |
Symbol 129 Graphic | Uses:124 | Used by:Timeline |
Symbol 130 Text | Uses:46 | Used by:Timeline |
Symbol 131 Text | Uses:46 | Used by:Timeline |
Symbol 132 EditableText | Uses:46 | Used by:Timeline |
Symbol 133 Font | Used by:134 | |
Symbol 134 EditableText | Uses:133 | Used by:Timeline |
Symbol 135 Font | Used by:136 138 139 | |
Symbol 136 EditableText | Uses:135 | Used by:Timeline |
Symbol 137 Font | Used by:138 | |
Symbol 138 Text | Uses:137 135 | Used by:Timeline |
Symbol 139 EditableText | Uses:135 | Used by:Timeline |
Symbol 140 Text | Uses:4 | Used by:Timeline |
Symbol 141 EditableText | Uses:4 | Used by:Timeline |
Symbol 142 Font | Used by:143 | |
Symbol 143 Text | Uses:142 | Used by:Timeline |
Symbol 144 Font | Used by:145 146 | |
Symbol 145 Text | Uses:144 | Used by:148 |
Symbol 146 Text | Uses:144 | Used by:148 |
Symbol 147 Graphic | Used by:148 | |
Symbol 148 Button | Uses:145 146 147 | Used by:Timeline |
Instance Names
"enlargedtrace" | Frame 71 | Symbol 84 MovieClip |
Special Tags
Protect (24) | Timeline Frame 1 | 0 bytes "" |
|