Sprites for Flash

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|376\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Article Home -> Graphics 2D

Jayenkai	Created : 17 August 2007 Edited : 19 July 2016 System : Cross Platform Language : Flash Sprites for Flash Loading 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. // Set up Sprites var Trees=25; for (n=0;n<Trees;n++) { y=random(5); // Different Y's for a Parallax effect. TemplateTree.duplicateMovieClip( // Make a clone of TemplateTree "TreeSprite"+n, // Name it TreeSprite+n (y1000)+n,{ // Stick it into a layer, so that the closer ones are drawn before the further ones. _x:random(464)-64, // Random X position between -64 and 400. _y:(y20)+100, // The y position, plus a bit more for a bit of spacing out. _xscale:y32, // Make the further trees look a bit smaller. _yscale:y32, _alpha:y10+60 // And alpha them out a bit. Should make the rear ones look a little darker. }); } --v 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. // Move Sprites for (n=0;n<Trees;n++) { cx=getProperty("TreeSprite"+n,_x); // Grab the X position of the sprite cy=getProperty("TreeSprite"+n,_y); // Grab the Y position if (cx<-64) {cx=400;} // if the X is less than -64, then move it over to the right. setProperty("TreeSprite"+n,_x,cx-(((cy-100)/20)+1)); // And then shift it across a bit, moving closer ones faster, and further ones slower. } --v Frame 3 will be our looping frame. gotoAndPlay(2); --v 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. cx=this._x; // Grab the X position of "this" cy=this._y; // Grab the Y position if (cx<-64) {cx=400;} // if the X is less than -64, then move it over to the right. this._x=cx-(((cy-100)/20)+1); // And then shift it across a bit. --v 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.

Sprites for Flash

Comments