|
SoCoder -> Article Home -> Graphics 2D |
|
|
|
|
Jayenkai
|
Sprites for FlashLoading multiple versions of an image into a Flash movie. |
|
Lets imagine you've drawn a tree, and you want a bunch of those trees to scroll about in the background. Draw a tree inside a 128x128 pixel frame, and give it an Alpha channel so that only the Tree exists, then save it as Tree.png (Alpha channel.. Use the Magic Brush, select all the tree, then click "Selection/Save to Alpha".. Or whatever it is, depending on your image editor.) Open up Flash. (I will be using SoThink SWF Quicker, so there might be small alterations needed between this tutorial and "Real Flash") Create a new blank swf, and save it. Give it a black background, and make it 320x240. These are in the Properties section of the movie. Create 3 keyframes inside the movie, at frames 1 2 and 3. Go to frame 1, and drag tree.png into the movie, from explorer (or Import to Library if you prefer menus!) You'll see it appear both inside the movie itself, and in the library on the right. Rightclick the movie version, and select "Convert to Symbol" Name the symbol TreeMovie. Drag it outside of the movie's visible area, so the user doesn't see our template tree, and in the Properties section give it the name TemplateTree. (You should now have Tree.png, TreeMovie and TemplateTree to contend with! This is why the Library has folders!!) In the actionscript of Frame one, we'll create multiple duplicates of the tree. Next, onto Frame 2. We no longer need our template tree. If it's still there, you can remove it from frames 2+3. (Ensuring they are Keyframes, first!) Frame 2 will be our main frame. In here we want to move all our sprites across the screen. Frame 3 will be our looping frame. Not much to that one! If you try to put the gotoAndPlay(2) into frame 2 it doesn't work! Not sure why that would be, but there you go! So always remember to add an extra frame for your gotos. If you now run your script, you'll see 25 trees scrolling from the left to the right. Object Orientated Trees Instead of having a loop in your main movie deal with each of the trees, we can get the trees to move themselves! Delete frames 2 and 3 of our movie, and open up TreeMovie from the library. Now, instead of the code we had running in 2 and 3, we'll put it directly into the sprite. Add a second Keyframe to the tree. In frame one, we place the movement code. You can see that it's more or less the same as earlier, except we no longer do our loop, and we also use "this" to track the information stored in the current movie clip. In frame two, stick our looper back, so that the trees repeat their movement. gotoAndPlay(1); Now, when we run, Frame 1 of our main movie will run. It'll duplicate our "Tree" movie several times, then stop running since there's no more frames to play. But once the Trees are duplicated, each tree will play out on it's own. It will loop over and over, moving slowly across the screen. [flash]https://socoder.net/board/trees.swf[/flash] Well done, you got your first set of sprites moving in Flash. |
|
|
|
|
Comments |
|
| Friday, 17 August 2007, 09:23 | |
|
Nolan |
Nice tutorial! Flash is neat, but I've often wished they would make the separation between flash and actionscript more complete. The language itself is beautiful, the development process is not. 
|
| Friday, 17 August 2007, 09:46 | |
Jayenkai
|
I definately agree with that.. If they just let Actionscript be a real language, with proper functions and labels and things, instead of having to split everything up into seperate "frames", the whole process would be sped up dramatically. As it is, it works.. But could be better.
|
|
|
| |||
|
| ||||