Thinking in Code » Actionscript http://www.michelboudreau.com Michel Boudreau's Personal Blog Wed, 25 Apr 2012 20:18:24 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 An Evening with Mike Chambers and Lee Brimelow http://www.michelboudreau.com/2012/04/01/an-evening-with-mike-chambers-and-lee-brimelow/ http://www.michelboudreau.com/2012/04/01/an-evening-with-mike-chambers-and-lee-brimelow/#comments Mon, 02 Apr 2012 03:07:11 +0000 Michel Boudreau http://www.michelboudreau.com/?p=880 Adobe is doing a North American tour to talk about the Flash Player and some of the latest changes to the platform.  Mike Chambers and Lee Brimelow will swing by at our usual location on April 12th, so please sign up.  The marketing spiel after the break.

Join us for an evening with Mike Chambers & Lee Brimelow from Adobe.  This will be a good opportunity to speak directly with Adobe, ask questions, and discuss recent changes around the Flash Player.

The Future of Flash – Mike Chambers

In this session, Mike will lead a discussion around recent changes and announcements around the Flash Platform. He will then spend some time laying out the roadmap for the Flash Player, and discuss the direction in which the player will evolve, including the general focus of the player and the ActionScript language and AVM (ActionScript Virtual Machine). In addition to discussing the Flash roadmap, we will be showing off the latest Flash and Adobe AIR content, give some sneak peeks on upcoming releases, and setting aside plenty of time for open discussions and Q&A.

Adobe Gaming Technology – Lee Brimelow

In this session Gaming Evangelist Lee Brimelow will reveal the latest technologies being worked on by Adobe for game developers. They will show how these technologies allow developers to create casual 2D games in addition to AAA 3D games. Current best practices will also be discussed.

This will also be streamed on my ustream channel for those who can’t attend in person.

]]> http://www.michelboudreau.com/2012/04/01/an-evening-with-mike-chambers-and-lee-brimelow/feed/ 0 Actionscript Label Statements for Loops http://www.michelboudreau.com/2011/08/28/actionscript-label-statements-for-loops/ http://www.michelboudreau.com/2011/08/28/actionscript-label-statements-for-loops/#comments Sun, 28 Aug 2011 07:04:59 +0000 Michel Boudreau http://www.michelboudreau.com/?p=747 I have to say that I’m ashamed that I didn’t know about this beforehand. I’ve recently discovered a little feature in Actionscript called label statements.  I always expect to learn new things in the industry since it’s every-changing, however I did not think I would learn something new about Actionscript since I’ve used it since AS1 and have thoroughly studied AS3 when it came out.

Let’s give a quick example of a simple problem: You need to find the index of a string within a 2D array and do something with that index.  Here’s how I would do it normally:

private function findIndex(text:String):void
{
	var row:Array;
	var index:Point;
	for(var y:uint = 0, ylen:uint = array.length; y<ylen; y++)
	{
		row = array[y];
		for(var x:uint = 0, xlen:uint = row.length; x<xlen; x++)
		{
			if(row[x] == text)
			{
				index = new Point(x,y);
				break;
			}
		}
		if(index)
		{
			break;
		}
	}
	// Do something with index
}

You’ll notice that within the example, the second I find the index, I break out of the loops to reduce the run time of the function. The external loop always looks to see if ‘index’ is not null and breaks out if it is. I’ve never liked this approach because it adds more code than needed and sometimes its not as easy as just checking if a variable is not null. You could always use ‘return’ if your function is done with its purpose, but that’s not always possible.

The alternative to this is using label statements. What you can do is simply ‘label’ your loops and then when you want to break, you can specify which loop that needs to be broken. Take our current example and let’s add label statements in it:

private function findIndex(text:String):void
{
	var row:Array;
	var index:Point;
	outer:for(var y:uint = 0, ylen:uint = array.length; y<ylen; y++)
	{
		row = array[y];
		for(var x:uint = 0, xlen:uint = row.length; x<xlen; x++)
		{
			if(row[x] == text)
			{
				index = new Point(x,y);
				break outer;
			}
		}
	}
	// Do something with index
}

That is much better and cleaner. I’ve seen this done before in Java, but I have never encountered or read about it for Actionscript. This method can also be used with the ‘continue’ operator so that it skips the rest of the code to the next iteration or with block statements like so:

doSomething: {
	var x:uint = index.x;
	if(x > 100)
	{
		break doSomething;
	}
	trace(x);
}

I don’t think I would ever use it with block statements since these could be simply replaced with ‘if’ statements, but knowing about it can be beneficial. I know I will be using label statements in nested loops from now on.

]]> http://www.michelboudreau.com/2011/08/28/actionscript-label-statements-for-loops/feed/ 1 EventDispatcher vs. Signals http://www.michelboudreau.com/2010/12/31/eventdispatcher-vs-signals/ http://www.michelboudreau.com/2010/12/31/eventdispatcher-vs-signals/#comments Fri, 31 Dec 2010 15:49:35 +0000 Michel Boudreau http://www.michelboudreau.com/?p=628 At our last Flex Meetup, Adam Spektor did an overview of AS3Signals (by Robert Penner) which brought up some interesting questions about why developers would use Signals over regular Events.  I decided that I would test it out and benchmark both methods, meanwhile evaluating the pros and cons of each.  To be able to test the results, I created a FlexUnit project that would test the creation and dispatch of one event, and then the dispatch of a thousand events.  In one test case, I would test a single Signal and in the other test case I would just create a central EventDispatcher to try to mimic Signals.  You can find the project here, but the real important part is the execution time of each one.

Results

Event Dispatcher Signals
1 event 1000 events 1 event 1000 events
Trial 1 26ms 15ms 9ms 25ms
Trial 2 15ms 55ms 11ms 20ms
Trial 3 47ms 18ms 19ms 16ms
Trial 4 51ms 15ms 15ms 25ms
Average
 34.75ms 25.75ms 13.5ms 21.5ms
Total 60.5ms 35ms

Now, a few things about this data.  The Signals library was very consistent in the times outputted, however the EventDispatcher was very erratic.  You can see it a little here within the results, but these results were fairly tame.  During testing, I’ve seen spikes going both high and low.  I’ve also seen it several times being faster than Signals.  I’ve tried to find an explanation about why and all I could think of is because the EventDispatcher is so intertwined with Flash Player and that could affect the test somehow but this is all speculation.

Because of this inconsistency, it’s hard to interpret the data for the EventDispatcher, so instead let’s concentrate more on the Signals side.  You’ll notice that the time taken is fairly consistent and would work as expected (one event is faster than a thousand).  When I first heard of Signals, my first thought was that this would be faster than normal events, and the data clearly shows this by 173%.

Signals is fast, there’s no doubt about it, but will incorporating it in your project actually increase overall speed?  Will it actually benefit development?

Personally, I don’t think I would personally use it in my project for a few different reasons:

  1. It’s not native to Flash/Flex.  Some may dismiss this point, but when you have a whole system based upon EventDispatcher and Events, it’s hard to ignore.
  2. Lack of bubbling and capture.  Signals is working on bubbling, but I doubt they will get it working as well as the native implementation.
  3. There is no meta-data possible for Signals.  This severely limits the possibility of using signals in MXML.
  4. Need to recreate all event variables for Signals all over again.  Signals tries to reduce boiler-plate code by dismissing custom Event classes, but you still need to create new variables in the class for the event which essentially cancel each other out.
  5. Keeping two separate standards for events in one system is a maintenance nightmare.
  6. Little speed gain for the amount of extra work needed to get it working in a system.

All and all, I think Signals is a very good idea for performance and extra utility, however it seems to me that the concept is Utopian.  If we could swap out the native event mechanism of Flash, then I’d be all for it, but in my current situation it isn’t very realistic to replace a current system that works (very well I might add) with another that’s slightly faster and more convenient.  The pros simply do not outweigh the cons.  If I were to use Signals, it would be in a very small Actionscript only project.

]]> http://www.michelboudreau.com/2010/12/31/eventdispatcher-vs-signals/feed/ 1 Flex/Actionscript UML Tool: UML4AS http://www.michelboudreau.com/2010/08/18/flexactionscript-uml-tool-uml4as/ http://www.michelboudreau.com/2010/08/18/flexactionscript-uml-tool-uml4as/#comments Wed, 18 Aug 2010 19:08:39 +0000 Michel Boudreau http://www.michelboudreau.com/?p=389 Anyone remember Saffron?  I was never certain if this project was ever going to come to fruition, so lately I was thinking excessively about making my own.  I started searching for inspiration in other UML tools so I could design a better user interface.  Low and behold, I stumble across UML4AS, a brand spanking new project that does just what I was planning of doing.

It integrates completely with Eclipse (and Flash Builder) and has this neat feature called CodeSync that makes sure your model and code is always persisted between each other.  In other words, everything works together in an integrated workflow to save you time.

I’ll have to dig deeper, try this out on projects and do a complete review.  In the meantime, please support this initiative by registering and posting on the forum.

]]> http://www.michelboudreau.com/2010/08/18/flexactionscript-uml-tool-uml4as/feed/ 0 RichTextArea Component http://www.michelboudreau.com/2010/03/18/richtextarea-component/ http://www.michelboudreau.com/2010/03/18/richtextarea-component/#comments Thu, 18 Mar 2010 21:31:09 +0000 Michel Boudreau http://www.michelboudreau.com/?p=232 A few months ago, I was working on a project that needed a CMS backend to create content that will be displayed in Flex. We used a RichTextEditor component to create appropriate HTML so that it would display like we wanted to on the frontend.

The problem with this approach is that we needed our application to be re-themeable between different clients that would be using this product, which meant that we also needed a way to style the html content without having to redo the html itself.

As much as I looked for it, I couldn’t find anyone else doing something similar to this, so I created my own. Essentially, I just extended TextArea which already handles htmlText and added my own html tag styling to it. I was surprised to see that you can actually set styles to the html within the TextArea, but you can only do it with Actionscript.

I looked at all the possible html tags that TextArea supports, and created CSS styles for it. I wanted to stick with the proper CSS convention of separating the words using a dash and used my own kind of standard ‘html-<tag>-<property>’, property being one of ‘color’, ‘weight’, ‘decoration’ or ‘style’. One exception to this rule is for the anchor tag, which can also do pseudo-classes (a:link, a:hover and a:active). If you need to reference those tags, you just need to use ‘alink’, ‘ahover’ and ‘aactive’. If someone has a better suggestion, I’m all ears.

package com.lab49.components
{
	import flash.text.StyleSheet;

	import mx.collections.ArrayCollection;
	import mx.controls.TextArea;
	import mx.styles.CSSStyleDeclaration;
	import mx.styles.StyleManager;

	// Set the style metadata - If adding another style/tag, add it here
	// Style names are in the of 'html-<tag>-<property>' exception is for pseudo-classes
	// which is attached directly to the tag name.
	[Style(name="html-a-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-a-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-a-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-a-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-ahover-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-ahover-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-ahover-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-ahover-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-aactive-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-aactive-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-aactive-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-aactive-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-alink-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-alink-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-alink-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-alink-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-b-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-b-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-b-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-b-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-font-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-font-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-font-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-font-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-i-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-i-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-i-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-i-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-li-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-li-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-li-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-li-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-p-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-p-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-p-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-p-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-span-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-span-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-span-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-span-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-textformat-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-textformat-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-textformat-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-textformat-color", type="uint", format="Color", inherit="no")]
	[Style(name="html-u-style", type="String", enumeration="italic, normal", inherit="no")]
	[Style(name="html-u-weight", type="String", enumeration="bold, normal", inherit="no")]
	[Style(name="html-u-decoration", type="String", enumeration="none, underline", inherit="no")]
	[Style(name="html-u-color", type="uint", format="Color", inherit="no")]

	/**
	 * RichTextArea Class, extends TextArea.  Displays html text, but styles them uniformily for
	 * easy theming.
	 **/
	public class RichTextArea extends TextArea
	{
		private var _stypePropChanged:Boolean = false; // Style property change flag.  Set to true when one of the html styles is set
        private static var _classConstructed:Boolean = classConstruct(); // Calls a static initializer function before anything else

        // All possible styles.  If adding a new one, must be added in this ArrayCollection with the proper metadata above.
        private const _styles:ArrayCollection = new ArrayCollection([	"html-a-style",
														            	"html-a-weight",
														            	"html-a-decoration",
														            	"html-a-color",
														            	"html-ahover-style",
														            	"html-ahover-weight",
														            	"html-ahover-decoration",
														            	"html-ahover-color",
														            	"html-alink-style",
														            	"html-alink-weight",
														            	"html-alink-decoration",
														            	"html-alink-color",
														            	"html-aactive-style",
														            	"html-aactive-weight",
														            	"html-aactive-decoration",
														            	"html-aactive-color",
														            	"html-b-style",
														            	"html-b-weight",
														            	"html-b-decoration",
														            	"html-b-color",
														            	"html-font-style",
														            	"html-font-weight",
														            	"html-font-decoration",
														            	"html-font-color",
														            	"html-i-style",
														            	"html-i-weight",
														            	"html-i-decoration",
														            	"html-i-color",
														            	"html-li-style",
														            	"html-li-weight",
														            	"html-li-decoration",
														            	"html-li-color",
														            	"html-p-style",
														            	"html-p-weight",
														            	"html-p-decoration",
														            	"html-p-color",
														            	"html-span-style",
														            	"html-span-weight",
														            	"html-span-decoration",
														            	"html-span-color",
														            	"html-textformat-style",
														            	"html-textformat-weight",
														            	"html-textformat-decoration",
														            	"html-textformat-color",
														            	"html-u-style",
														            	"html-u-weight",
														            	"html-u-decoration",
														            	"html-u-color" ]);

		// Sets default properties of RichTextArea
		[Inspectable(category="General", defaultValue="false")]
		override public function set editable(value:Boolean):void
		{
			super.editable = value;
		}

		[Inspectable(category="General", defaultValue="true")]
		override public function set selectable(value:Boolean):void
		{
			super.selectable = value;
		}

		[Inspectable(category="General", defaultValue="true")]
		override public function set condenseWhite(value:Boolean):void
		{
			super.condenseWhite = value;
		}

		// Constructor
		public function RichTextArea()
		{
			super();

			// Removes background, border and focus highlight of the TextArea
			this.setStyle('backgroundAlpha', 0);
			this.setStyle('borderStyle', 'none');
			this.setStyle('focusAlpha', 0);
		}

		/**
		 * This method is called a static initializer since it is called before the
		 * constructor since it's being referenced by a static variable.
		 * If anything needs to be set before the constructor runs, this is the place to do it.
		 *
		 * @return true
		 **/
        private static function classConstruct():Boolean
        {
        	// Check to see if style exists
            if (!StyleManager.getStyleDeclaration("RichTextArea"))
            {
            	// Set default empty style declaration
                var style:CSSStyleDeclaration = new CSSStyleDeclaration();
                style.defaultFactory = function():void {};
                StyleManager.setStyleDeclaration("RichTextArea", style, true);
            }
            return true;
        }

    	/**
    	 * Overrides the htmlText property to set the '_stylePropertyChanged' flag
    	 * since any new text being set will not be styled unless updateDisplayList()
    	 * is called.
    	 *
    	 * @param value:String The html text to be set
    	 **/
    	override public function set htmlText(value:String):void
		{
			super.htmlText = value;
			this._stypePropChanged = true; // Set the flag to style the text
			invalidateDisplayList(); // Call updateDisplayList() on next render
		}

		/**
		 * Override the styleChanged() method to detect changes in your new style.
		 * only set the _stylePropChanged tag to true if one of our custom styles has
		 * been changed.  If a new style is added, it must be added here as well.
		 *
		 * @param styleProp:String The new property name that has been set
		 **/
        override public function styleChanged(styleProp:String):void
        {
            super.styleChanged(styleProp);

            // Check to see if it's one of our custom styles
            if(this._styles.contains(styleProp))
            {
            	// Redo text styling
            	this._stypePropChanged = true;
	            invalidateDisplayList();
            }
        }

		// Override updateDisplayList() to update the component
        // based on the style setting.
        /**
         * Override the drawing function and resets the style on the html text if the _stylePropChanged flag is set to true.
         *
         * @param unscaledWidth:Number the width of the current component
         * @param unscaledHeight:Number the height of the current component
         **/
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            // Check to see if style changed.
            if (this._stypePropChanged)
            {
            	this._stypePropChanged = false; // set the flag back to false

                /*
				 * Adds new styles to the CSS for specific html content.
				 * More can be added, just add the tag name in the 'tags' array and
				 * add the css property 'html-<tag name>-<text property name>' in your stylesheet
				 * For instance, I can could do 'html-p-weight:bold'.
				 * Possible text property names are 'style', 'weight', 'decoration' and 'color'
				 *
				 * Only exception to the tag name is for the 'a' tag.  You can specify just 'a' or
				 * you can do the pseudo class 'hover', 'link' and 'active', but you need to specify the tag
				 * before, like so 'html-ahover-weight: bold;'.
				 */
				var style:Object, value:Object, tag:String, tagSplit:Array, ss:StyleSheet = new StyleSheet();

				for(var i:int = 0, len:int = this._styles.length; i < len; i++)
				{
					style = {};
					tag = this._styles.getItemAt(i) as String;

					// Convert into AS3 stylename format (camelCase)
					tagSplit = tag.split('-');
					tag = tagSplit[0] + String(tagSplit[1]).charAt(0).toUpperCase() + String(tagSplit[1]).slice(1) +
							String(tagSplit[2]).charAt(0).toUpperCase() + String(tagSplit[2]).slice(1);

					// Get style if there
					value = getStyle(tag);
					if(value)
					{
						style = ss.getStyle(tagSplit[1]); // Get style if one already exists so you don't override the previous one
						// Find the proper style name and save it
						switch(tagSplit[2])
						{
							case 'style':
								style.fontStyle = value;
								break;
							case 'weight':
								style.fontWeight = value;
								break;
							case 'decoration':
								style.textDecoration = value;
								break;
							case 'color':
								style.color = '#'+('00000'+Number(value).toString(16).toUpperCase()).substr(-6);
								break;
						}

						// Do the cases for the pseudo 'a' classes and set the style object
						switch(tagSplit[1])
						{
							case 'ahover':
								ss.setStyle('a:hover', style);
								break;
							case 'alink':
								ss.setStyle('a:link', style);
								break;
							case 'aactive':
								ss.setStyle('a:active', style);
								break;
							default:
								ss.setStyle(tagSplit[1], style);
								break;
						}
					}
				}

				styleSheet = ss; // Save stylesheet
            }
        }
	}
}
]]> http://www.michelboudreau.com/2010/03/18/richtextarea-component/feed/ 0