Using Flash to Skin Flex Components

I’ll add more later… busy…

package
{
	
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.display.DisplayObject;
	import flash.geom.ColorTransform;
	import flash.geom.Matrix;
	
	import mx.core.UIComponent;
	
	[DefaultProperty("children")]
	public class FlashSymbolContainer extends UIComponent
	{
		
		private var _children:Array;
		private var childrenDirty:Boolean = false;
		
		public function get children():Array { return _children; }
		public function set children(value:Array):void
		{
			if(value != null)
			{
				_children = value;
				childrenDirty = true;
				invalidateProperties();
			}
		}
		public function FlashSymbolContainer()
		{
			super();
			
			width 	= 300;
			height 	= 200;
		}
		
		protected override function commitProperties():void
		{
			super.commitProperties();
			
			if(childrenDirty)
			{
				childrenDirty = false;
				redraw();
			}
		}
		
		private function redraw():void
		{
			if(_children == null)
				return;
			
			var len:int = _children.length;
			if(len == 0)
				return;
			
			for(var index:int = 0; index < len; index++)
			{
				var obj:DisplayObject = _children[index] as DisplayObject;
				if(obj == null)
				{
					throw new Error("Children must be of type DisplayObject.");
					return;
				}
				
				if(obj.parent)
					obj.parent.removeChild(obj);
				
				addChild(obj);
			}
		}
	}
}

Comments

22 responses to “Using Flash to Skin Flex Components”

  1. as3isolib Avatar

    This seems like an improved workflow over constantly having to update PNG assets and migrating them over. I’d be curious about two things a) maintainability from the designer’s standpoint and b) benefits in compiled app’s SWF size

  2. Graeme Avatar
    Graeme

    Awesome. That is incredibly handy, thank you for sharing. Why didn’t you narrate though? Add some music or something ;)

    1. JesterXL Avatar

      Spur of the moment thing; spent 10 minutes on it for a friend’s email question. I’ll do a more formal one later, just no time this week ’cause of work + RIA Unleashed.

  3. Alex.G Avatar
    Alex.G

    Just missing a bit of measure() logic :)

    1. JesterXL Avatar

      lol, oh yeah. I remember the one Grant Skinner did awhile ago where he measured enterFrame. Made a lot of sense at the time, but nowadays, I and others are just using Flash for the artwork in Flex, so this assumes absolute position. Definitely don’t want to go that route.

  4. Paul Avatar
    Paul

    Thanks for the post mate! However, what’s the difference between using FlashSymbolContainer with MovieClips and a typical Flex container and UIMovieClips (created using the Flex Integration Kit)? Cheers

    1. Guillaume Malartre Avatar

      UIMovieClip use the ENTER_FRAME event and allow timeline transition while this FlashSymbolContainer seems to be a lightweight solution.

  5. JesterXL Avatar

    @Guillaume UIMovieClip does a lot more. The whole purpose of the enter frame is to measure the component as it animates so that it’ll work in Containers (VBox/VGroup, etc). If you’re not creating animations, there is zero point to run an enter frame event every frame. Worse, it creates a brand new event listener for every graphic. For larger Flex applications, this doesn’t scale at all. Third, and also important for continuous integration purposes, it actually requires you to compile inside of the Flash IDE. 11 years later and we still can’t really integration the Flash IDE into an automated build process without insanity. Thus, the only solution is to remove all code from the FLA. Most source control systems expect ASCII code, and this solutions no code goes into the resulting SWC, just graphics.

    1. Guillaume Malartre Avatar

      In most of the case where I used UIMovieClip I always avoided the measurement feature by extending the class and removing it (removing the enterFrame if not in transition) since it cost too much in computation, and I get all the state + state transition sugar (and it does work in large project). I understand the need to remove the code from the fla but since your still bound with the class linkage system I think you remain coupled to the Flash IDE and in the insanity circle =).

  6. Nick Tsitlakidis Avatar

    Is there any reason why someone shouldn’t use the SpriteVisualElement class to wrap the flash symbol instead of the FlashSymbolContainer? It is supposed to be a very light-weight class that exists for reasons like these and some FXG use cases.

    1. JesterXL Avatar

      SpriteVisualElement is a heavy weight class for handling all Flex container measurement, layout, and invalidation. This includes all the basic DisplayObject features as well as some enhanced shader abilities. It cannot, however, be used via MXML to layout children that I’ve found. It has no [DefaultProperty] annotation to automatically assign children, thus, you need to use ActionScript which isn’t very designer friendly. If I wanted to use ActionScript to lay things out, I’d go back to pure ActionScript 3 and MinimalComps, not Flex.

      I just want to show a vector graphic on the screen, strongly typed, with the ability to have a quick and easy workflow. Most all of the graphics are skins, and thus are not animating MovieClips, and therefore don’t need to be measured. While you can use constraints or percentage based layouts internally in a skin, the graphics themselves can be hardcoded to the size they are for absolute positioning within the skin parts.

      If that’s all you need, to show a graphic on the screen using MXML, my class is the way to go.

      1. Nick Tsitlakidis Avatar

        I have to admit I haven’t noticed that you’re adding it through mxml. Somehow I missed a pretty big detail :D. I get what you mean and I think I’m gonna try the class as well. Thanks and keep them coming.

  7. Netphreak Avatar

    Hi Jesse!

    Great tutorial – followed it to the letter, but i get a [Slider-client (Flex)] Could not resolve to a component implementation – error.

    Any ideas, what might be wrong?

    1. JesterXL Avatar

      Not a clue; can you post source to a pastebin.com somewhere, and email me the link?

  8. Netphreak Avatar
    Netphreak

    Maybe it’s a compiler problem related to IntelliJ?

  9. Netphreak Avatar

    And i’m using the fla from the DarkRoom skin available at Scalenine.com.

  10. Netphreak Avatar

    Turns out the compiler did not include the swc, as no components were on stage.

    Got it to display a button skin – although the skin does not scale to fit the button text?

    1. JesterXL Avatar

      Heh, that’s a rabbit hole topic. Bottom line, what you design in Flash is what you see in Flex. Scaling graphics is a large topic. Do you want it to scale? What about maintaining aspect ratio? Is it vector? Do the strokes scale correctly? Is this for mobile? Blah blah blah.

      Suffice to say, the quick solution is something like:

      http://pastebin.com/C7K2Mqrv

  11. Netphreak Avatar
    Netphreak

    I’m looking for something like 9 slice scaling for buttons etc.

    1. JesterXL Avatar

      The Flash IDE cannot do scale9 for bitmaps, only for vector. If you do it for vector, it should work. If you need it for bitmaps, you’ll have to use the [Embed] tag so mxmlc can do his magic.

      1. Netphreak Avatar
        Netphreak

        It’s for vector graphics.

        Are there any tutorials on this topic Flash scale9 to Flex?