Flex 2.0 SVG Support

by Josh Tynjala

I’m finding all sorts of little gems in the Flex 2.0 help files. Flex 2.0 supports embedding SVG files just like other images like JPEG or PNG using the [Embed] meta tag:

Flex supports a subset of the SVG 1.1 specification to let you import static, two-dimensional scalable vector graphics. This includes support for basic SVG document structure, Cascading Style Sheets (CSS) styling, transformations, paths, basic shapes, and colors, and a subset of text, painting, gradients, and fonts. Flex does not support SVG animation, scripting, or interactivity with the imported SVG image.

With that in mind, it’s now possible to visually build vector art assets for Flash using open source programs. That’s one of the big things the OSFlash movement has been missing. If you’re looking for a nice SVG program, I’d recommend Inkscape. Does anyone know of other good choices?

Finally, access to "super" getters and setters

by Josh Tynjala

While looking through the Flex 2.0 help files, I discovered a great little section on inheritance. Near the bottom, I found a section that covers overriding getters and setters. It included the following code:

package
{
    import flash.display.MovieClip;
    public class OverrideExample extends MovieClip
    {
        public function OverrideExample()
        {
            trace(currentLabel)
        }

        override public function get currentLabel():String
        {
            var str:String = "Override: ";
            str += super.currentLabel;
            return str;
        }
    }
}

You’ll notice that the currentLabel getter calls super.currentLabel. That never worked in AS2. It makes me happy. :)

MXNA Dashboard updated to Beta 3

by Josh Tynjala

Note: This project has since been updated, and it will work with the official release of Flash 9. Source code is currently unavailable.

I submitted a more advanced version of my MXNA treemap application to the Flex Developer Derby a couple weeks ago. I’m not sure why I never got around to posting about it here. If you haven’t already seen it on the Derby showcase page, you can find the MXNA Dashboard here. As the post title says, you’ll need Flash 9 Beta 3 to view it.

Scoping Issues in Flex 2.0 Beta 3

by Josh Tynjala

I hadn’t faced a situation like this one in the previous builds of Flex 2.0, but I’m working with some new code. For some reason, I’m getting errors when I use the same variable name but different types for variables that are in different scopes. It’s a pain because its the “i” variable in a for loop. This issue seems to happen only within a single function.

private function scopingIssue():void
{
	if(this.width == 100)
	{
		for(var i:Number = 0; i < 1000; i += 10.2)
			this.doSomething(i);
	}
	else
	{
		//The variable "i" here should not be related to the other one at all
		for(var i:uint = 0; i < 10; i++)
			this.doSomethingElse();
	}
}

Both those for loops are in different scopes, so they should work as different types, but I get the error, "A conflict exists with definition i in namespace internal". This is definitely a bug. Can someone remind me where to find the bug submission form?

ActionScript 3: Handling Inheritance

by Josh Tynjala

I’m working to migrate some code to ActionScript 3, and I’ve come across an annoying problem with inheritance. I’d like some ideas for how to work around it. It’s not a big deal, but I’d prefer not to add a lot of weird casting everywhere.

Here’s a basic example. FruitTree is my base class. It contains a variable called myFruit of type Fruit. I extend FruitTree to make AppleTree. In AppleTree, myFruit becomes an Apple, which is a subclass of Fruit. In AS3, I can’t seem to redeclare myFruit as an Apple inside AppleTree. Just rewriting the declaration in AppleTree (with Apple instead of Fruit) gives me an error, “A conflict exists with inherited definition FruitTree.myFruit in namepace public”. It seems to me that since Apple is a Fruit, things should stay compatible with the super class. I’d prefer to use this method because allows me to use myFruit as an Apple without casting it every time I need to use it.

Here’s an example of what worked fine using AS2:

class FruitTree
{
	public var myFruit:Fruit;

	public function doSomething():Void
	{
		this.myFruit.getEaten();
	}
}

class AppleTree extends FruitTree
{
	//An Apple is still a Fruit, but I want to access some special functions
	//In AS2, this works:
	public var myFruit:Apple;

	public function doSomething():Void
	{
		this.myFruit.removeStem(); //extra functionality
		this.myFruit.getEaten();
	}
}

In AS3, here’s the only way I’ve found to make it work, but requires a lot of extra code because I have to cast myFruit as Apple all the time.

public class FruitTree
{
	public var myFruit:Fruit;

	public function doSomething():void
	{
		this.myFruit.getEaten();
	}
}

public class AppleTree extends FruitTree
{
	//We can't redeclare the variable myFruit as an Apple because we get an error.

	public function doSomething():void
	{
		//Since we can't redeclare it, we have to cast it here
		//I'd rather not have to do this sort of casting a million times
		var myFruitAsApple:Apple = this.myFruit as Apple;
		myFruitAsApple.removeStem();
		myFruitAsApple.getEaten();
	}
}

I also tried building a getter and setter for the property as a work around, but changing the type in the overriding function gives an “Incompatible override” error. It’s probably for the same reason as the code above. Can anyone give me any insights into a way to do what I want? Could this be classified as a bug?

Introduction to Particle Systems in Flash 9 and Actionscript 3

by Josh Tynjala

I’ve always been fascinated by the magical and organic effects that particle systems can help create. In video games, whenever you see smoke, flames, or steam, they’ve probably been made using particles. Systems can range anywhere from couple dozen to hundreds of particles, and span a wide range of effects. Simple changes to size, color, or transparency can cause surprisingly different results. Now, thanks to Flash 9′s performance increases, particle systems can provide a new level of realism within websites or Flash movies.

Screenshot of the flames particle system in Flash

Let me warn you that I am just starting to experiment with particle systems. The code for this project doesn’t necessarily reflect the most optimized way of handling them. I plan to come back to this subject again soon using bitmaps instead of vectors to demonstrate the differences. Both systems will have pros and cons, I’m sure. For today, the vector-based particles perform pretty well. Mainly it depends on your parameters. The more particles on the screen, the slower the swf will run. Likewise, blurring and transparency can slow things down too. It’s important to keep things simple. Many cool effects can be made without needing a lot complexity.

Let’s dive right in!

//Instantiate a SteamParticleSystem
//Note: There are constructor parameters, but the defaults are good for most situations
var steam:SteamParticleSystem = new SteamParticleSystem();

//Optional parameters
steam.lifetime = 500; //how long a particle will be visible
steam.size = 10; //the size of an individual particle
steam.color = 0xffffdd; //the color of a particle
steam.transparency = 0.5; //particle transparency
steam.baseBlur = 20; //the starting blur
steam.blurRange = 10; //additional blur added to the base over time
steam.jitter = 10; //horizontal velocity (randomly changes between 0 and jitter)
steam.baseVelocity = new Point(0, -2); //vertical velocity

//Standard Sprite stuff
steam.y = this.stage.stageHeight;
steam.x = this.stage.stageWidth / 2;
this.addChild(steam);

//Start up the system!
steam.start();

Several parameters allow you to tweak the system and give you different effects. Larger steam particles could mean that a valve on a steam pipe is open wider. Flames with a higher jitter might make them look like they’re burning wildly in the wind. These systems are flexible, and experimentation will help you achieve the look you want. All three of the effects I built actually run from very similar code. The particles are circles with low alpha that have been blurred. The smoke is the most basic effect that only features movement. Steam adds size changing to the mix, and the flames take it a step further to change the color too.

Working on this project was a lot of fun. I spent a good deal of time tweaking things here and there, so it takes some patience, but seeing so many different effects with such basic changes feels very rewarding. I encourage you to download the source code, and build your own cool effects based on my examples.

TreeMaps in PHP/HTML

by Josh Tynjala

Neurofuzzy released some sourcecode for treemaps the other day. He uses PHP to build them with DIVs in HTML. Having built my own treemap implementation in Flash, it’s interesting to see an alternative approach.

Restyling Slashdot: First Draft

by Josh Tynjala

Being an almost-daily reader of Slashdot, I’m glad I didn’t miss Rob “CmdrTaco” Malda’s announcement of the Slashdot CSS Redesign Contest. I can’t pass up the chance to win a new MacBook Pro, so I’m going to see what my design skills can cook up. I’ll take a nice progressive approach and share my thoughts and results here over the next couple weeks. Comment on the designs if you want. You can tell me I suck or give encouragement. I’m game for any sort of feedback. So, without further ado… here’s my first Photoshop mockup:

Screenshot of the modified Slashdot layout

Obviously, it isn’t overly ambitious. I wanted to start small. I kept the same general layout, but I polished things up all around. CmdrTaco specifically stated that he’d like the logo’s font and the site’s base color (#006060) to stay the same if possible. A little depth and shine to the logo makes a big difference. Likewise, the slightest shift in color makes things look better. Some gradients help a little too.

Screenshot of the modified Slashdot logo

I’d like to change more. CSS is pretty powerful, and I could do quite a bit with the existing content. Look at the Zen Garden if you want proof of flexibility. I think for my next draft, I’m going to try changing a lot more. Then, I’ll take ideas from both drafts to determine the final result. Once I’m happy with the look, I’ll dive into the actual CSS and produce what will hopefully be the winning entry. ;)

Dynamic bleeps and bloops in AS3

by Josh Tynjala

I noticed an awesome hack on Flashcoders today. David from Robots w/Lasers shows off a way to dynamically generate sounds in AS3. He actually builds a SWF in a ByteArray at runtime and passes it into a Loader object. With a little work to refine this approach, ambitious Flash developers could put together some sort of music sequencer. A full game soundtrack would be pretty cool. The sounds have a nice retro feel that would go well with many of the Flash games out there. It reminds me of my days playing with BASIC or Assembly. I’m sure there are hundreds of other possibilities.

If you’ve got some time, David is interested in seeing any improvements that can be made. I might take a look at his code later this weekend. It seems like a fun little project.

FlashDevelop HelpPanel 1.4 Beta

by Josh Tynjala

The HelpPanel plugin for FlashDevelop is getting complex enough that I feel I need to do a beta release this time around. I’m excited about this release because it’s my first public version that is powered by Apache Lucene. Lucene is the search system that powers Eclipse, among other things.

What does this mean for you, the ambitious FlashDevelop user? Well, thanks to Lucene, searches complete almost instantaneously. If you blink, you’ll miss it! This great speed improvement comes from Lucene’s indexing features. Lucene analyzes your help files and saves certain information about each one. Instead of using the old method of actually reading all the help files for every search, Lucene uses the single index file and a little black magic to spit out results for you.

Why is this a beta release? Well, honestly, it’s because I’d like feedback. I’m pretty sure I’ve stabilized my codebase, but I’m not entirely sure about the user interface implementation. Right now, when you run your first search in a default source (Flash’s help files), it will automatically create the index and show a simple progress dialog. Should I include a message that says this process will only need to happen once? Where would be a good place for it? I’d rather not create a message box specifically for this message. Perhaps it will be best if I placed it on the indexing dialog.

I’m also unsure if the behavior for adding a new source is the best choice. Instead of waiting for the first search to create the new index, I do it right away when the Help Source Manager is closed. I felt it would be good to do it so that you don’t have to wait for it during your first search. Yet, I wonder if it would be better to make the behavior match that of the default sources?

Please let me know what you think of this beta version. Also, if you have any thoughts about other things I can do to improve the HelpPanel, I’d be happy to hear them. You can download the HelpPanel plugin from the FlashDevelop plugins page.

Pages: Prev 1 2 3 ... 11 12 13 14 15 16 17 18 19 20 21 Next