S. Friss – Design + TechnologyFreelance Interactive Design and Development

I just ran across this on Senocular's blog.  It's a comprehensive Actionscript 3.0 reference, I'm surprised I never ran across this before, the beauty of it is that it allows to browse by platform and provides other filtering options as well.  If you are a FP (Flash Platform) developer, check it out --> AS3 Ref.  Also, check this out too, for your documentation needs --> DOC?

It's pretty simple, just do the following

1.) Make sure your SDK supports it.  I used 3.4 which you can download here.

2.) After you have done this go to your Flex preferences and add it to "Installed Flex SDK's"

3.) Now go to your project properties and under "Flex Build Path" under the "Library Path" tab remove playerglobal.swc from under the Flex SDK

4.) Click "Add SWC" and navigate to where your SDK is installed which will looks something like this Flex Builder 3\sdks\3.4.0.3794\frameworks\libs\player\10 and add playerglobal.swc from there

5.) Under the new playerglobal.swc you will see Link Type: merged into code click edit and select "external" from the drop down.

6.) Last thing is under "Flex Compiler" make sure your check is for flash player 10.

That's it.

I ran into a PDF online from taiga.jp that has a great, quick overview of Flex 4, as well as a presentation from insideRIA which was very informative as well as Adobe's overview.  I decided to put together a quick "note" style posting about Flex 4, more for self reference than anything, but I'm sure it will come in handy.  It has the new namespaces, Spark class listing and then some. More to come...

Namespaces

Read the rest of this entry »

I've been trying to play with Gumbo, but my trial ran out.  I decided to try and link Flex 3 to the Flex 4 SDK to ease my development efforts.  So here is how you do it.

1.) Right click your project and choose "properties" Read the rest of this entry »

I ran across this method while building an application I am currently working on and it struck me as incredibly simple and elegant.  I didn't realize how easy and flexible Flex really is until I came across this.  So basically, you want to populate something from an XML file.  Well, Flex has built in mechanisms, which make this incredibly easy and are surprisingly flexible.

So say your XML is a file called items.xml containing the following lines of code:

 
<?xml version="1.0"?>
<items>
   <item thumb="thumb1.jpg" source="test1.jpg">an item</item>
   <item thumb="thumb2.jpg" source="test2.jpg">another item</item>
</items>
 

Now, your main application will contain something like this:

 
   <mx:XML id="xml" source="items.xml"/>
   <mx:XMLListCollection id="myXMLList" source="{xml.items.item}" />
   <mx:TileList id="waistbandsTL" y="0"
    	dataProvider="{myXMLList}"
        itemRenderer="CustomRenderer"
        itemClick="itemClick(event);"/>
 
   <mx:Script>
      <![CDATA[
                       import mx.events.ListEvent;
                       private function itemClick(e:ListEvent = null):void
                       {
                            //Event handling code
                       }
               ]]>
   </mx:Script>
 

What this basically does is load an XML file, binds a part of it to an XMLListCollection, which in turn is bound to the TileList. The beauty in this is that the custom renderer can be any component. Here is an example implementation:

 
<mx:Canvas>
   <mx:Image id="thumb" source="{data.@thumb}"/>
   <mx:Object id="imageSource" data="{data.@source}"/>
   <mx:Label id="label" text="{data.toString()}" />
</mx:Canvas>
 

And the data of the renderer is automatically bound as well. Very simple, easy and powerful.

I just came across this and I love it.  When it comes to coding I'm a sucker for "survivalist" code practices.  That is, self contained projects.  This debugger works like many others but has the option to export the needed class from the menu.  This is great as all you need is the application and all of the classes and examples are self-contained.  The thing I love most about this debugger is it's simplcity.  Basically here is what you need in your code:

import nl.demonsters.debugger.MonsterDebugger;
private var debugger:MonsterDebugger;
debugger = new MonsterDebugger(this);
MonsterDebugger.trace(this, "Hello World!");

Instead of "Hello World!" you can put objects or anything else as the second argument and have it trace out.  Pretty sweet.

CHECK IT OUT

I've always hated how Flex lags when the browser is resized and how the background shows. I recently came across some code that showed me how to not do this. It appears that it's for the sake of efficiency and that the resizing actually happens "late" so as to save resources. To get around this all you need to do is call validateNow(), like this:

addEventListener(Event.RESIZE, onStageResize);
function onStageResize(e:Event = null):void
{
	this.validateNow();
}

I added the null default value so you that you don't have to have an event to call this function. Enjoy. (original post)

I've been using TweenMax for a while but I always want to add motion blurs to everything.  I've seen a few approaches where you would detect if the movie is moving and just apply a generic blur, but I didn't like those.  Here is a little utility class that comes in handy.  It will apply horizontal and vertical blurs perfectly but since there are no real directional blurs in Flash, I've cancelled the diagonal blurring since it will only blur out the ball completely.  To add that just surround the statements on lines 23-24 with a Math.abs. This class makes it really easy to add motion blurs to tween with code that looks like

TweenMax.to(mc, 0.4, {x: 1000, onUpdate: BlurHelper.blur, onUpdateParams: [mc]});

With the BlurHelper class below

package
{
	import flash.filters.BlurFilter;
 
	public class BlurHelper {
 
		private static var _items:Array = new Array();
		private static var modx:Number = 0.5;
		private static var mody:Number = 0.5;
 
		public static function blur(aItem:*):void
		{
 
			var bl:BlurFilter = new BlurFilter();
 
			if(_items[aItem.name] == null)
			{
				_items[aItem.name] = new Object();
				_items[aItem.name].ox 	= 0;
				_items[aItem.name].oy 	= 0;
			}
 
			bl.blurX = (aItem.x - _items[aItem.name].ox)/modx;
			bl.blurY = (aItem.y - _items[aItem.name].oy)/mody;
 
			_items[aItem.name].ox = aItem.x;
			_items[aItem.name].oy = aItem.y;
 
			aItem.filters = [bl];
 
		}
 
		public static function killBlur(aItem:*):void
		{
			aItem.filters = new Array();
		}
	}
}

One of the biggest points of confusion for me (not really confusion, just curiosity really) regarding the difference between Flex and Flash is why can't I intermix the two more easily.  Well, one of the main things is that in Flex I have to use UIComponent whereas in Flash I can use whatever.   I researched a bit and came across this article, which basically explains that the Flex class hierarchy looks like this: Object -> EventDispatcher -> DisplayObject -> InteractiveObject -> DisplayObjectContainer ->FlexSprite -> UIComponent

All other components extend UIComponent.  I looked up the source for FlexSprite and it looks like this:

////////////////////////////////////////////////////////////////////////////////
//
//  Copyright (C) 2003-2006 Adobe Macromedia Software LLC and its licensors.
//  All Rights Reserved. The following is Source Code and is subject to all
//  restrictions on such code as contained in the End User License Agreement
//  accompanying this product.
//
////////////////////////////////////////////////////////////////////////////////

package mx.core
{

import flash.display.Sprite;
import mx.utils.NameUtil;

/**
*  FlexSprite is a subclass of the Player's Sprite class
*  and the superclass of UIComponent.
*  It overrides the <code>toString()</code> method
*  to return a string indicating the location of the object
*  within the hierarchy of DisplayObjects in the application.
*/
public class FlexSprite extends Sprite
{
include "../core/Version.as";

//--------------------------------------------------------------------------
//
//  Constructor
//
//--------------------------------------------------------------------------

/**
*  Constructor.
*
*  <p>Sets the <code>name</code> property to a string
*  returned by the <code>createUniqueName()</code>
*  method of the mx.utils.NameUtils class.</p>
*
*  <p>This string is the name of the object's class concatenated
*  with an integer that is unique within the application,
*  such as <code>"Button17"</code>.</p>
*
*  @see flash.display.DisplayObject#name
*  @see mx.utils.NameUtil#createUniqueName()
*/
public function FlexSprite()
{
super();

try
{
name = NameUtil.createUniqueName(this);
}
catch(e:Error)
{
// The name assignment above can cause the RTE
//   Error #2078: The name property of a Timeline-placed
//   object cannot be modified.
// if this class has been associated with an asset
// that was created in the Flash authoring tool.
// The only known case where this is a problem is when
// an asset has another asset PlaceObject'd onto it and
// both are embedded separately into a Flex application.
// In this case, we ignore the error and toString() will
// use the name assigned in the Flash authoring tool.
}
}

//--------------------------------------------------------------------------
//
//  Overridden methods
//
//--------------------------------------------------------------------------

/**
*  Returns a string indicating the location of this object
*  within the hierarchy of DisplayObjects in the Application.
*  This string, such as <code>"MyApp0.HBox5.Button17"</code>,
*  is built by the <code>displayObjectToString()</code> method
*  of the mx.utils.NameUtils class from the <code>name</code>
*  property of the object and its ancestors.
*
*  @return A String indicating the location of this object
*  within the DisplayObject hierarchy.
*
*  @see flash.display.DisplayObject#name
*  @see mx.utils.NameUtil#displayObjectToString()
*/
override public function toString():String
{
return NameUtil.displayObjectToString(this);
}
}

}

Basically there's nothing there.  This looks like "just in case" abstraction code, but now UIComponent is much more complicated and is really the departure point for Flex Components.  More to come...

Just a note, but use mouseOver NOT rollOver.  I was trying to detect which element was being rolled... I'm sorry, moused over after using a data provider and that tiny little subtlety cost me nearly an hour.  Children of a LinkBar do not fire rollOver but they do fire mouseOver.  One word, headache.