µSprite AS3 MXML Scripts

µSprite Script Examples

Below is a sample drawing created in µSprite. To view it copy the sample to the clipboard. Run µSprite, choose a theme color, click the open eyes to get a blank drawing area and then the Scene Script button. Click in the script window and right-click Select All and Paste. Or use keyboard shortcuts (Ctrl/A and Ctrl/V on Windows). To compile the program with mxmlc paste it into a file named AppBlue.as.

package
{
    import flash.display.Sprite;
    import flash.display.Shape;
    import flash.display.LineScaleMode;
    import flash.display.CapsStyle;
    import flash.display.JointStyle;
    import flash.display.GradientType;
    import flash.display.SpreadMethod;
    import flash.display.InterpolationMethod;
    import flash.geom.Matrix;

/**
    * AppBlue Sprite class.
    * Generated by µSprite version 0.5.1 Alpha.
    */
    [SWF(width="300", height="300", frameRate="60", backgroundColor="#FFFFFF")]
    public class AppBlue extends Sprite
    {
        public var Blue:Sprite = null;
        public var SunGlasses:Shape = null;

/**
        * Constructor for AppBlue.
        * Generated by µSprite version 0.5.1 Alpha.
        */
        public function AppBlue()
        {
            initializeAssets();
        }

/**
        * initializeAssets sets scene parent/child relationships.
        * Generated by µSprite version 0.5.1 Alpha.
        */
        private function initializeAssets():void
        {
            Blue = createBlue();
            this.addChild(Blue);
            SunGlasses = createSunGlasses();
            Blue.addChild(SunGlasses);
        }

/**
        * Creates Blue DisplayObject.
        * Generated by µSprite version 0.5.1 Alpha.
        * @return a Sprite object
        */
        private function createBlue():Sprite
        {
            // Coordinate system: (0, 0) - (300, 300).
            var box:Matrix = new Matrix();
            var newBlue:Sprite = new Sprite();
            newBlue.name = "Blue." + newBlue.name;
            newBlue.graphics.lineStyle(0., 0x000000, 0.);
            box.createGradientBox(400, 400, 0., -50, -50);
            newBlue.graphics.beginGradientFill(GradientType.RADIAL,
                [0xF20707, 0x000000], [1, 1], [0., 255], box);
            newBlue.graphics.drawRect(0., 0., 300, 300);
            newBlue.graphics.lineStyle(2, 0x4C4C4C);
            newBlue.graphics.endFill();
            box.createGradientBox(300, 300);
            newBlue.graphics.beginGradientFill(GradientType.LINEAR,
                [0x000000, 0x4DC8EA], [1, 1], [0., 255], box);
            newBlue.graphics.moveTo(49, 101);
            newBlue.graphics.curveTo(49.50, 250, 150, 251);
            newBlue.graphics.curveTo(250, 251, 250, 101);
            newBlue.graphics.curveTo(250, 50.50, 150, 50);
            newBlue.graphics.curveTo(49.50, 50.50, 49, 101);
            newBlue.graphics.lineStyle(2, 0x286B7F);
            newBlue.graphics.endFill();
            newBlue.graphics.beginFill(0xF9F6B1);
            newBlue.graphics.drawEllipse(75, 109, 51, 31);
            newBlue.graphics.drawEllipse(225, 109, -51, 31);
            newBlue.graphics.lineStyle(2, 0x756335);
            newBlue.graphics.endFill();
            newBlue.graphics.beginFill(0x42F4F1);
            newBlue.graphics.drawCircle(100, 123, 12.21);
            newBlue.graphics.drawCircle(200, 123, 12.21);
            newBlue.graphics.lineStyle(2, 0x4C4C4C);
            newBlue.graphics.endFill();
            newBlue.graphics.beginFill(0x000000);
            newBlue.graphics.drawCircle(100, 123, 8.06);
            newBlue.graphics.lineStyle(2, 0x756335);
            newBlue.graphics.drawCircle(200, 123, 8.06);
            newBlue.graphics.moveTo(110, 201);
            newBlue.graphics.curveTo(132, 194, 140, 187);
            newBlue.graphics.lineTo(151, 189);
            newBlue.graphics.lineTo(160, 187);
            newBlue.graphics.curveTo(168, 193, 190, 201);
            newBlue.graphics.curveTo(168.50, 213, 151, 213);
            newBlue.graphics.curveTo(137.50, 213, 110, 201);
            newBlue.graphics.moveTo(129, 167);
            newBlue.graphics.curveTo(139.25, 162.95, 141, 167);
            newBlue.graphics.curveTo(141.50, 171.40, 134.65, 171.35);
            newBlue.graphics.lineTo(129, 167);
            newBlue.graphics.moveTo(171, 167);
            newBlue.graphics.curveTo(160.75, 162.95, 159, 167);
            newBlue.graphics.curveTo(158.50, 171.40, 165.35, 171.35);
            newBlue.graphics.lineTo(171, 167);
            newBlue.graphics.endFill();
            box = null;
            return newBlue;
        }

/**
        * Creates SunGlasses DisplayObject.
        * Generated by µSprite version 0.5.1 Alpha.
        * @return a Shape object
        */
        private function createSunGlasses():Shape
        {
            // Coordinate system: (0, 0) - (300, 300).
            var newSunGlasses:Shape = new Shape();
            newSunGlasses.name = "SunGlasses." + newSunGlasses.name;
            newSunGlasses.graphics.lineStyle(1.90, 0x756335);
            newSunGlasses.graphics.beginFill(0x000000, 0.70);
            newSunGlasses.graphics.drawEllipse(60.10, 114.67, 75.60, 37);
            newSunGlasses.graphics.drawEllipse(241.90, 114.67, -75.60, 37);
            newSunGlasses.graphics.lineStyle(1.90);
            newSunGlasses.graphics.moveTo(135.70, 133.67);
            newSunGlasses.graphics.curveTo(151, 126.17, 166.30, 132.67);
            newSunGlasses.graphics.curveTo(151, 129.25, 135.70, 133.67);
            newSunGlasses.graphics.endFill();
            return newSunGlasses;
        }
    }
}

To transform the AS3 samples into haXe script click on the Settings tab and select the generate haXe button then switch back and copy the haXe script to your editor. See the readme in the source download doc/samples/haxe for details on how to compile with haXe.

Next is an example of how to create a custom MXML cursor class. I have not found it documented that cursors can be Shape objects but it works. To create your own custom cursor paste the µSprite generated Shape method into a class similar to the following, call it from the constructor and replace the 'new Shape()' with 'this' so it is drawn in the instance itself. To view the sample cursor in µSprite, paste the createCustomCursor method into the script window and zoom with the grid controls to (-6, 30).

package
{
	import flash.display.Shape;
    import flash.display.LineScaleMode;
    import flash.display.CapsStyle;
    import flash.display.JointStyle;
    import flash.display.GradientType;
    import flash.display.SpreadMethod;
    import flash.display.InterpolationMethod;
    import flash.geom.Matrix;
    import flash.filters.DropShadowFilter;

public class CustomCursor extends Shape
	{
		public function CustomCursor()
		{
			// To draw in this instance replace: 'new Shape()'
			// with 'this' in the createCustomCursor method.
			createCustomCursor();
		}

/**
        * Creates CustomCursor DisplayObject.
        * Generated by µSprite version 0.5.2 Alpha.
        * @return a Shape object
        */
        private function createCustomCursor():Shape
        {
            // Coordinate system: (0, 0) - (30, 30).
            var box:Matrix = new Matrix();
            var newCustomCursor:Shape = this;
            newCustomCursor.name = "CustomCursor." + newCustomCursor.name;
            newCustomCursor.graphics.lineStyle(0., 0x000000, 0.);
            box.createGradientBox(28, 28, 0.79);
            newCustomCursor.graphics.beginGradientFill(GradientType.LINEAR,
                [0xF98807, 0xF90F07], [1, 1], [0., 255], box);
            newCustomCursor.graphics.moveTo(0., 0.);
            newCustomCursor.graphics.curveTo(3.60, 10.53, 0., 20.79);
            newCustomCursor.graphics.curveTo(3.46, 15.66, 5.54, 15.25);
            newCustomCursor.graphics.curveTo(9.15, 16.91, 13.86, 27.72);
            newCustomCursor.graphics.curveTo(14.62, 20.58, 17.32, 17.32);
            newCustomCursor.graphics.curveTo(20.30, 14.48, 27.72, 13.86);
            newCustomCursor.graphics.curveTo(16.77, 8.87, 15.25, 5.54);
            newCustomCursor.graphics.curveTo(15.52, 3.74, 20.79, 0.);
            newCustomCursor.graphics.curveTo(10.53, 3.60, 0., 0.);
            newCustomCursor.graphics.moveTo(3.48, 3.48);
            newCustomCursor.graphics.curveTo(5.52, 9.45, 3.96, 13.46);
            newCustomCursor.graphics.curveTo(5.43, 11.21, 6.45, 11.51);
            newCustomCursor.graphics.curveTo(8.78, 12.29, 12.01, 19.42);
            newCustomCursor.graphics.curveTo(12.44, 16.16, 14.31, 14.42);
            newCustomCursor.graphics.curveTo(15.54, 12.47, 19.19, 12.01);
            newCustomCursor.graphics.curveTo(12.60, 8.49, 11.69, 6.36);
            newCustomCursor.graphics.curveTo(11.14, 5.46, 13.43, 3.94);
            newCustomCursor.graphics.curveTo(9.45, 5.52, 3.48, 3.48);
            newCustomCursor.graphics.endFill();
            var customCursorFilters:Array = new Array();
            var shadowFilter:DropShadowFilter = new DropShadowFilter(4,
                90, 0x660401, 1, 4, 4, 1, 1, false, false, false);
            customCursorFilters.push(shadowFilter);
            shadowFilter = null;
            newCustomCursor.filters = customCursorFilters;
            customCursorFilters = null;
            box = null;
            return newCustomCursor;
        }
	}
}

You can use the custom cursor in an MXML application such as the little test program below. To try it paste the code from above into a file named CustomCursor.as and the code below into another file named TestCursor.mxml and place both in the same directory.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
		import mx.managers.CursorManager;

// Define a variable to hold the cursor ID.
		private var cursorID:int = CursorManager.NO_CURSOR;

// Define a variable to reference the custom cursor class
		private var customCursorClass:Class = CustomCursor;

// Define event listener to display the custom cursor.
		private function showCustomCursor():void {
			if (CursorManager.currentCursorID == CursorManager.NO_CURSOR)
				cursorID = CursorManager.setCursor(customCursorClass);
		}
		// Define event listener to hide the custom cursor.
		private function hideCustomCursor():void {
			if (CursorManager.currentCursorID != CursorManager.NO_CURSOR)
				CursorManager.removeCursor(cursorID);
		}
	]]>
	</mx:Script>

<mx:VBox>
		
		<mx:Button id="showButton" label="Show Custom" click="showCustomCursor()"/>
		
		<mx:Button id="hideButton" label="Show Standard" click="hideCustomCursor()"/>
	</mx:VBox>
</mx:Application>

Adding custom icons to MXML buttons require the same basic class as the cursor did. Additionally the class must implement the IFlexDisplayObject interface. This is shown in the sample script below. To try it, place the code in a CustomIcon.as file and add icon="{CustomIcon}" as an attribute to the first Button control in the MXML from above.

package
{
	import flash.display.Shape;
    import flash.display.GradientType;
    import flash.display.SpreadMethod;
    import flash.display.InterpolationMethod;
    import flash.geom.Matrix;
	import mx.core.IFlexDisplayObject;

// CustomIcon implements IFlexDisplayObject as required by Flex2
	public class CustomIcon extends Shape implements IFlexDisplayObject
	{
		public function CustomIcon()
		{
			// To draw in this instance replace: 'new Shape()'
			// with 'this' in the createCustomIcon method.
			createCustomIcon();
		}

/**
        * Creates CustomIcon DisplayObject.
        * Generated by µSprite version 0.5.2 Alpha.
        * @return a Shape object
        */
        private function createCustomIcon():Shape
        {
            // Coordinate system: (0, 0) - (30, 30).
            var box:Matrix = new Matrix();
            var newCustomIcon:Shape = this;
            newCustomIcon.name = "CustomIcon." + newCustomIcon.name;
            newCustomIcon.graphics.lineStyle(0.20, 0xE58407, 1, true);
            box.createGradientBox(20, 20, 0.79, 0.20, 0.20);
            newCustomIcon.graphics.beginGradientFill(GradientType.RADIAL,
                [0xFDEB72, 0xF7910C], [1, 1], [0., 255], box,
                SpreadMethod.PAD, InterpolationMethod.RGB, -0.70);
            newCustomIcon.graphics.drawCircle(10.20, 10.20, 10);
            newCustomIcon.graphics.lineStyle(0.20, 0xE58407);
            newCustomIcon.graphics.endFill();
            newCustomIcon.graphics.beginFill(0xF7E1C5);
            newCustomIcon.graphics.drawEllipse(5.20, 5.80, 3.60, 6);
            newCustomIcon.graphics.lineStyle(0.10, 0x1507E5);
            newCustomIcon.graphics.endFill();
            newCustomIcon.graphics.beginFill(0x000000);
            newCustomIcon.graphics.drawCircle(7, 9.90, 1.20);
            newCustomIcon.graphics.lineStyle(0.20, 0xE58407);
            newCustomIcon.graphics.endFill();
            newCustomIcon.graphics.beginFill(0xF7E1C5);
            newCustomIcon.graphics.drawEllipse(15.20, 5.80, -3.60, 6);
            newCustomIcon.graphics.lineStyle(0.10, 0xCC1408);
            newCustomIcon.graphics.endFill();
            newCustomIcon.graphics.beginFill(0xF71B0C);
            newCustomIcon.graphics.moveTo(5.20, 15.20);
            newCustomIcon.graphics.lineTo(15.20, 15.20);
            newCustomIcon.graphics.curveTo(10.30, 20.20, 5.20, 15.20);
            newCustomIcon.graphics.lineStyle(0.10, 0x1507E5);
            newCustomIcon.graphics.endFill();
            newCustomIcon.graphics.beginFill(0x000000);
            newCustomIcon.graphics.drawCircle(13.40, 9.90, 1.20);
            newCustomIcon.graphics.endFill();
            box = null;
            return newCustomIcon;
        }

/*
		** The following properties and methods are required by
		** IFlexDisplayObject. See its documentation for details.
		*/
		public function get measuredHeight():Number
		{
			return height;
		}

public function get measuredWidth():Number
		{
			return width;
		}

public function move(xPos:Number, yPos:Number):void
		{
			x = xPos;
			y = yPos;
		}

public function setActualSize(newWidth:Number, newHeight:Number):void
		{
			scaleX = width / newWidth;
			scaleY = height / newHeight;
		}
	}
}

You can also create code in µSprite to use as a basis for programmatic skins for MXML buttons. It requires quite a bit of manual coding to make the shapes resizable etc. so for details see the 'Flex 2 Developer’s Guide', 'Using skins' especially the 'Programmatic skinning' chapter. Using ActionScript is generally easier, just use addChild to add your Shape to the display list.