The Warrior's New Clothes: Using AS3 in Flash Builder to Create Sprite Graphic Classes
Code your own Sprite classes
When I’m working on an example, I’ll use a combination of Flash Pro and Flash Builder. However, using Flash Pro, all of my drawings are in the Flash Library and may not be accessible to Flash Builder users. Besides, my drawings are pretty simple composed of basic shapes—rectangles, circles and triangles. These images are transformed into Sprite classes in the Symbol Editor of Flash Pro, and the type is changed from the default MovieClip to Sprite. If I coded the images as Sprites using ActionScript 3.0, the Flash Builder users would be able to more easily use them and the Flash Pro users could use them with equal ease.
Let’s face it, my graphics are not going to get any better whether I code them or draw them; so why not code them? So that’s what I’ve done. In the previous post on the Decorator design pattern for beginners, I had three graphic “armor” pieces that were used with concrete decorator classes. All I’ve done for this mini-post is to provide the “armor” sprites as pure code. From now on when I have a Sprite image, I’ll just code them up in ActionScript 3.0 as Sprite classes and make it easy for everyone. Here’s the Shield, BodyArmor and Helmet classes: (Next page.)
Shield
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | package { import flash.display.Sprite; import flash.display.Shape; public class Shield extends Sprite { private var shield:Shape = new Shape(); public function Shield() { shield.graphics.lineStyle(1,0x0066ff); shield.graphics.beginFill(0x0033ff,.50); shield.graphics.drawCircle(25, 30,31.25); graphics.endFill(); addChild(shield); } } } |
Body Armor
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | package { import flash.display.Sprite; import flash.display.Shape; public class BodyArmor extends Sprite { private var bodyArmor:Shape = new Shape(); public function BodyArmor() { bodyArmor.graphics.lineStyle(1,0x990000); bodyArmor.graphics.beginFill(0x999999,.50); bodyArmor.graphics.drawTriangles(Vector.<number>([0,0, 116,0, 58,100])); bodyArmor.graphics.endFill(); addChild(bodyArmor); } } } |
Helmet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | package { import flash.display.Sprite; import flash.display.Shape; public class Helmet extends Sprite { private var helmet:Shape = new Shape(); public function Helmet() { helmet.graphics.beginFill(0xcc0000); helmet.graphics.moveTo(0, 25); helmet.graphics.curveTo(30, -20, 60, 25); helmet.graphics.endFill(); helmet.graphics.lineStyle(2,0x996600); helmet.graphics.moveTo(2, 25); helmet.graphics.lineTo(2, 0); addChild(helmet); } } } |
I realize that this is pretty simple stuff, but if it helps beginners working with OOP and classes, not to mention design patterns, it’s worth it. Now, all that you have to do is to create the Warrior!!
Related posts:
Bill Sanders
Hi,
why don’t you just publish your .fla in Flash Pro as a .swc and use that in Flash Builder? That way, you can comfortably use all your Sprites from your symbol library, if you made them accessible through ActionScript.
Hi Sven,
Why didn’t I think of that? Thanks for the great idea. I’m trying to work in both Flash Builder and Flash Pro to get a sense of each in the development process.
Do you have some ideas that Flash Builder users (who do not have Flash Pro) might employ to create their own graphic classes without having to program them but can still use them as Sprite classes?
Kindest regards,
Bill
Hi,
unfortunately, no. Other than embedding images you will probably always need some kind of graphical tool to make graphics, if you don’t want to code them. As far as i know, though, the Flash IDE is the only tool beside the compc, which can generate .swc files.
Cheers
Sven
Hi Sven,
Since our Flash Builder users may not have tools for making vector graphics that do not have to load like an external file, I’ll go ahead and keep providing coded Sprite classes. Maybe one of our readers will know of a way to place drawn graphics into a class like Flash Pro does.
Thanks again,
Bill
one can always download vectorian(free), just came across it. Might actually be useful, it seems a nice way to create assets(yes, you can actually bind your asset to a ‘class’)
http://vectorian.com/
Nice job on the decorator pattern article btw. Design patterns usually leave a bad taste in my mouth, but the way you explained it, it actually seemed useful.
Hi Meinte,
Thanks for that! Let me play with that for a while.
Tell me why design patterns have left a bad taste in your mouth. Your site and examples are fantastic, and I’d think someone with your talent would warm up to design patterns. I am very glad that the Decorator example was helpful!
Kindest regards,
Bill
my preference for working with graphic assets is to publish an FLA as a .swc as well, however this is still an awesome tutorial for working with actoinscript 3.0 graphics api, particularly for beginners who are interested in as3… thanks for the tut!
Hi Hayesmaker,
A lot of people have suggested using .swc when publishing FLA files. I think I’ll include .swc files as a regular part of the download packages.
I’m hoping to get some further ideas from Flash Builder/Flex designers so that it’s easier to do artwork that can then be automatically changed into a coded class. In that way, a client can automatically bring in graphics as Sprite objects into a pattern without having to use the Loader class.
Kindest regards,
Bill
Just a late reply, on your question why design patterns(sometimes) left a bad taste. I guess what it boils down to is that of all principles, the keep-it-simple one is the most important one,well that and the explainability/shareability of code. And while some design patterns aim to do excactly that.. A lot seem to complexify problems that are just so straightforward. I just read up on the Null object design pattern for instance, and that kind of stuff just makes me sad.
Hi Meinte,
Some design patterns are more complex than others, but within that complexity lies simplicity. For example, the posts on the Video Game State Machine is a much more complex way of accessing video than a single class. However, as the application grows in size, it’s very easy to update and change even the most complex game.
I am not familiar with the Null design pattern.
Kindest regards,
Bill
Just wanted to offer another option which is to export FXG files for each of the assets for import into Flash Builder. You can do this straight out of Flash Pro and the code that gets exported out is very clean in comparison to doing an export out of Illustrator or Fireworks. It allows you to separate the assets and load only the assets you need.
Example Code of how to import an FXG into Flash Builder (http://www.ubacoda.com/?p=32)
import Flower;
var flower:Flower = new Flower()
addChild(flower);
Hi Quy,
I tried using your code 5 ways from Sunday and had no luck with it at all. I even used your example files from your blog, and it did not work.
I think that it would be an important tool to have available since FXG files are very handy.
For the time being, though, I’m going to stick with coded drawings for FB or load external images. See if you can find out why it is not working with others. Send the full FB file and I’ll see if it’s a matter of different versions.
By the way, I also tried exporting a FW file in fxg format, and had no better luck.
This is an important addition if you can figure out the magic wand required to get it working.
Thanks,
Bill