myTextAreaComponent.setStyle("upSkin",Sprite);

This was great, but if the user clicked anywhere within the text area, there would be this blue border that appeared.. so to get rid of that, I used this line of code:

myTextAreaComponent.setStyle("focusRectSkin",Sprite);

package
{
	// Components Used:
	// --------------------
	// Yahoo! Alert Manager
	// Button
	// CheckBox

	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import com.yahoo.astra.fl.managers.AlertManager;
	import fl.controls.Button;
	import fl.controls.CheckBox;

	public class Main extends Sprite
	{
		private var cb:CheckBox;
		private var cb2:CheckBox;
		private var checkBoxStatus:String = "";
		private var cbArr:Array;

		public function Main()
		{
			// CHECK BOX 1
			cb = new CheckBox();
			cb.label = "Checkbox 1";
			cb.x = 10;
			cb.y = 10;

			cb.addEventListener ( MouseEvent.CLICK, alertCheck );

			addChild ( cb );

			// CHECK BOX 2
			cb2 = new CheckBox();
			cb2.label = "Checkbox 2";
			cb2.x = 100;
			cb2.y = 10;

			cb2.addEventListener ( MouseEvent.CLICK, alertCheck );

			addChild ( cb2 );

			// NEW BUTTON
			var button:Button = new Button();
            button.width = 150;
            button.height = 30;
            button.move ( stage.stageWidth / 2 - button.width / 2, stage.stageHeight / 2 - button.height / 2 );
            button.label = "Check Checkboxes";  

            addChild(button);  

            button.addEventListener(MouseEvent.CLICK, alert);
		}

		//event handler to trigger the alert
       	function alert(m:MouseEvent):void
		{
			cbArr = new Array();

			if ( cb.selected ) cbArr.push ( cb.label );

			if ( cb2.selected ) cbArr.push ( cb2.label );

			if ( cbArr.length > 0 )
			{
				checkBoxStatus = "Checked Boxes: " + cbArr;
			}
			else
			{
				checkBoxStatus = "No checkbox values found.";
			}

			AlertManager.createAlert(this, checkBoxStatus, "ALL CHECKBOXES",["close alert"]);
		}

		function alertCheck (m:MouseEvent)
		{
			AlertManager.createAlert(this, m.currentTarget.label + " was checked - the value is: " + m.currentTarget.selected, "Checkbox Status",["close alert"]);
		}
	}
}

package
{
	import flash.display.MovieClip;
	import flash.text.TextFieldAutoSize;
	import fl.controls.Label;

	public class LabelComponent extends MovieClip
	{

		public function LabelComponent()
		{
			var myStr:String = "This is a test of the Label Component - This is a test of the Label Component";
			var myLbl:Label = new Label();

			myLbl.move(10,10);
			myLbl.width = stage.stageWidth;
			myLbl.height = stage.stageHeight;
			myLbl.text = myStr;
			myLbl.autoSize = TextFieldAutoSize.LEFT;
			addChild(myLbl);
		}
	}
}

package {
    import flash.display.Sprite;
    import flash.display.DisplayObject;
    import flash.events.FocusEvent;
    import flash.events.IEventDispatcher;

    public class FocusEvents extends Sprite {
        private var gutter:uint = 50;
        private var childCount:uint = 5;

        public function FocusEvents() {
            var child:Sprite;
            for(var i:uint; i < childCount; i++) {
                child = new CustomSprite();
                configureListeners(child);
                addChild(child);
            }
            refreshLayout();
        }

        private function configureListeners(dispatcher:IEventDispatcher):void {
            dispatcher.addEventListener(FocusEvent.FOCUS_IN, focusInHandler);
            dispatcher.addEventListener(FocusEvent.FOCUS_OUT, focusOutHandler);
            dispatcher.addEventListener(FocusEvent.MOUSE_FOCUS_CHANGE, mouseFocusChangeHandler);
        }

        private function refreshLayout():void {
            var ln:uint = numChildren;
            var child:DisplayObject = getChildAt(0);
            var lastChild:DisplayObject = child;
            for(var i:uint = 1; i < ln; i++) {
                child = getChildAt(i);
                child.x = lastChild.x + lastChild.width + gutter;
                lastChild = child;
            }
        }

        private function focusInHandler(event:FocusEvent):void {
            var target:CustomSprite = CustomSprite(event.target);
        }

        private function focusOutHandler(event:FocusEvent):void {
            var target:CustomSprite = CustomSprite(event.target);
        }

        private function mouseFocusChangeHandler(event:FocusEvent):void {
            var target:CustomSprite = CustomSprite(event.target);
        }
    }
}

import flash.display.Sprite;
import flash.events.MouseEvent;

class CustomSprite extends Sprite {
    private var size:uint = 100;
    private var bgColor:uint = 0x336699;

    public function CustomSprite() {
        buttonMode = true;
        useHandCursor = true;
        addEventListener(MouseEvent.CLICK, clickHandler);
        draw(size, size);
    }

    private function draw(w:uint, h:uint):void {
        graphics.beginFill(bgColor);
        graphics.drawRect(0, 0, w, h);
        graphics.endFill();
    }

    private function clickHandler(event:MouseEvent):void {
        var target:Sprite = Sprite(event.target);
        stage.focus = target;
    }
}

The CustomRowColors.as file grabbed from: http://blogs.adobe.com/pdehaan/2007/06/setting_a_flash_data_grids_bac_1.html

You change fonts by setting a custom text format using a TextFormat object, and the setStyle() or setRendererStyle() methods. If you want to set the text format for a DataGrid component’s header, use the setStyle() method along with the headerTextFormat style. If you want to set the text format for each row in the DataGrid component, use the setRendererStyle() method along with the textFormat style. Here is the updated DataGridExample.as file:

package
{
	import flash.display.MovieClip;
	import fl.controls.DataGrid;
	import fl.data.DataProvider;
	import flash.text.TextFormat;
	import flash.events.MouseEvent;

	public class DataGridExample extends MovieClip
	{

		private var myDataGrid:DataGrid;
		private var myDP:DataProvider;

		public function DataGridExample()
		{
			var tfh:TextFormat = new TextFormat();
			tfh.color = 0xff0000;

			var tf:TextFormat = new TextFormat();
			tf.font = "Times New Roman";

			var myDP:DataProvider = new DataProvider();
			myDP.addItem({ID:"01", Name:"Morgan", Email:"Morgan@blah.com", Web:"manewc.com", rowColor:"green"});
			myDP.addItem({ID:"02", Name:"Ashley", Email:"Ashley@blah.com", Web:"google.com", rowColor:"red"});
			myDP.addItem({ID:"03", Name:"Michael", Email:"Michael@blah.com", Web:"yahoo.com", rowColor:"green"});

			var myDataGrid:DataGrid = new DataGrid();
			myDataGrid.setStyle("headerTextFormat", tfh); // for the headers
			myDataGrid.setRendererStyle("textFormat", tf); // for each row

			myDataGrid.setStyle("cellRenderer", CustomRowColors);
			myDataGrid.addColumn("ID");
			myDataGrid.addColumn("Name");
			myDataGrid.addColumn("Email");
			myDataGrid.addColumn("Web");
			myDataGrid.dataProvider = myDP;
			myDataGrid.width = 680;
			myDataGrid.move(10, 10);
			addChild(myDataGrid);
		}

	}
}

and the CustomRowColors.as file:

// found: http://blogs.adobe.com/pdehaan/2007/06/setting_a_flash_data_grids_bac_1.html
package {

    // Import the required component classes.
    import fl.controls.listClasses.CellRenderer;
    import fl.controls.listClasses.ICellRenderer;

	/**
	* This class sets the upSkin style based on the current item's rowColor value
	* in the data provider.
	* Make sure the class is marked "public" and in the case of our custom cell renderer,
	* extends the CellRenderer class and implements the ICellRenderer interface.
	*/
	public class CustomRowColors extends CellRenderer implements ICellRenderer
	{
		/**
		* Constructor.
		*/
		public function CustomRowColors():void {
			super();
		}

		/**
		* This method returns the style definition object from the CellRenderer class.
		*/
		public static function getStyleDefinition():Object
		{
			return CellRenderer.getStyleDefinition();
		}

		/**
		* This method overrides the inherited drawBackground() method and sets the renderer's
		* upSkin style based on the row's rowColor value in the data provider. For example,
		* if the item's rowColor value is "green", the upSkin style is set to the
		* CellRenderer_upSkinGreen linkage in the library. If the rowColor value is "red", the
		* upSkin style is set to the CellRenderer_upSkinRed linkage in the library.
		*/
		override protected function drawBackground():void
		{
			switch (data.rowColor)
			{
				case "green":
					setStyle("upSkin", CellRenderer_upSkinGreen);
					setStyle("overSkin", CellRenderer_upSkinWhite);
					break;
				case "red":
					setStyle("upSkin", CellRenderer_upSkinRed);
					setStyle("overSkin", CellRenderer_upSkinWhite);
					break;
				default:
					break;
			}

			super.drawBackground();
		}
	}
}

Here is the document class

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.text.TextFieldAutoSize;
	import fl.containers.UILoader;
	import fl.controls.Label;
	import fl.controls.ProgressBar;

	public class ProgressBarDemo extends Sprite
	{
		private var url:String = "http://manewc.com/projects/flash/i/gahlord.jpg";
		private var myLabel:Label;
		private var myProgressBar:ProgressBar;
		private var myUILoader:UILoader;

		public function ProgressBarDemo()
		{
			myUILoader = new UILoader();
			myUILoader.autoLoad = false;
			myUILoader.source = url;
			myUILoader.move(10, 10);
			myUILoader.scaleContent = false;
			myUILoader.load();

			myProgressBar = new ProgressBar();
			myProgressBar.source = myUILoader;
			myProgressBar.move(myUILoader.x, myUILoader.y);
			myProgressBar.addEventListener(ProgressEvent.PROGRESS, progressHandler);
			myProgressBar.addEventListener(Event.COMPLETE, completeHandler);
			addChild(myProgressBar);

			myLabel = new Label();
			myLabel.text = "xx";
			myLabel.autoSize = TextFieldAutoSize.LEFT;
			myLabel.move(myProgressBar.x, myProgressBar.y + myProgressBar.height);
			addChild(myLabel);
		}

		function progressHandler(event:ProgressEvent):void
		{
			myLabel.text = event.bytesLoaded + " of " + event.bytesTotal + " bytes loaded.";
		}

		function completeHandler(event:Event):void
		{
		    myProgressBar.removeEventListener(ProgressEvent.PROGRESS, progressHandler);
			myProgressBar.removeEventListener(Event.COMPLETE, completeHandler);

			addChildAt(myUILoader, 0);
		}
	}
}

http://www.adobe.com/devnet/flash/quickstart/datagrid_pt3/#section14

http://www.communitymx.com/content/article.cfm?cid=88033

The XML files holds the location of the thumbnail image, the location of the .flv movie and a description node for a description of the movie. An example of the xml is:

<rss>
<channel>
<item>
<thumbnail>/path/to/thumbnail.jpg</thumbnail><flvurl>/path/to/flvmovie.flv</flvurl>
<description>Here is my description</description>
</item>
<item>
<thumbnail>/path/to/thumbnail.jpg</thumbnail><flvurl>/path/to/flvmovie.flv</flvurl>
<description>Here is my description</description>
</item>
</channel>
</rss>

Here is the main document class used:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLLoader;
    import flash.net.URLRequest;
	import fl.controls.DataGrid;
	import fl.controls.dataGridClasses.DataGridColumn;
	import fl.data.DataProvider;

	public class Main extends Sprite
	{
		private var myDataGrid:DataGrid = new DataGrid();
        private var dp:DataProvider;
		private var xml:XML;
		private var fpp:FLVPlaybackPro = new FLVPlaybackPro();

		public function Main()
		{
			var loader:URLLoader = new URLLoader();
            loader.addEventListener(Event.COMPLETE, DataGridLoad);
            loader.load(new URLRequest("/path/to/xml/file.xml"));
		}

		private function DataGridLoad(e:Event):void
		{
			xml = new XML(e.target.data);
			var il:XMLList = xml.channel.item;

			var dp:DataProvider = new DataProvider();

			for (var i:uint=0; i
The FLVPlaybackPro
package {

    import fl.video.FLVPlayback;

    public class FLVPlaybackPro extends FLVPlayback {

       public function FLVPlaybackPro(){
          super();
       }
    }
}

The cell renderer class for the data grid component used:
package {
    // Import the required component classes.
    import fl.containers.UILoader;
    import fl.controls.listClasses.ICellRenderer;
    import fl.controls.listClasses.ListData;
    import fl.core.InvalidationType;
    import fl.data.DataProvider;
    import flash.events.Event;

    /**
     * This class creates a custom cell renderer which displays an image in a cell.
     * Make sure the class is marked "public" and in the case of our custom cell renderer,
     * extends the UILoader class and implements the ICellRenderer interface.
     */
    public class LoaderCellRenderer extends UILoader implements ICellRenderer {
        protected var _data:Object;
        protected var _listData:ListData;
        protected var _selected:Boolean;

        /**
         * Constructor.
         */
        public function LoaderCellRenderer():void {
            super();
        }

        /**
         * Gets or sets the cell's internal _data property.
         */
        public function get data():Object {
            return _data;
        }
        /**
         * @private (setter)
         */
        public function set data(value:Object):void {
            _data = value;
            source = value.data;
        }

        /**
         * Gets or sets the cell's internal _listData property.
         */
        public function get listData():ListData {
            return _listData;
        }
        /**
         * @private (setter)
         */
        public function set listData(value:ListData):void {
            _listData = value;
            invalidate(InvalidationType.DATA);
            invalidate(InvalidationType.STATE);
        }

        /**
         * Gets or sets the cell's internal _selected property.
         */
        public function get selected():Boolean {
            return _selected;
        }
        /**
         * @private (setter)
         */
        public function set selected(value:Boolean):void {
            _selected = value;
            invalidate(InvalidationType.STATE);
        }

        /**
         * Sets the internal mouse state.
         */
        public function setMouseState(state:String):void {
        }
    }
}

]]>
			http://manewc.com/2008/04/07/video-player-with-xml-and-the-flvplayback-and-datagrid-components/feed/
		2
		
		
		
		http://manewc.com/2008/03/17/as-3-color-picker-with-the-colorpicker-component/
		http://manewc.com/2008/03/17/as-3-color-picker-with-the-colorpicker-component/#comments
		Mon, 17 Mar 2008 17:29:14 +0000
		admin
				
		

		http://manewc.com/2008/03/17/as-3-color-picker-with-the-colorpicker-component/
		
	
	
	
	

Here is the Document Class file ColorPickerComponent.as:

package
{
	import flash.display.Sprite;
	import flash.display.Shape;
	import fl.controls.ColorPicker;
	import fl.events.ColorPickerEvent;
	import flash.geom.ColorTransform;

	public class ColorPickerComponent extends Sprite
	{
		private var bg:Shape; // for the background
		private var tf:ColorTransform;
		private [...]]]>
			Of course to begin don’t forget to drop this component in your library. A simple demonstration of assigning a color to an object being added to the stage.



Here is the Document Class file ColorPickerComponent.as:
package
{
	import flash.display.Sprite;
	import flash.display.Shape;
	import fl.controls.ColorPicker;
	import fl.events.ColorPickerEvent;
	import flash.geom.ColorTransform;

	public class ColorPickerComponent extends Sprite
	{
		private var bg:Shape; // for the background
		private var tf:ColorTransform;
		private var holder:Sprite;

		public function ColorPickerComponent()
		{

			colorBox("000000");

			var myColorPicker:ColorPicker = new ColorPicker();
			myColorPicker.addEventListener(ColorPickerEvent.CHANGE, changeHandler);
			myColorPicker.move(10, 10);
			addChild(myColorPicker);
		}

		private function changeHandler(e:ColorPickerEvent):void {
    		colorBox(e.target.hexValue);
		}

		private function colorBox(color:String)
		{
			if (numChildren != 0) // check to see if there are any shapes
			{
				removeChildAt(0); // removes the shape
			}

			var bg:Shape = new Shape();
			bg.graphics.beginFill(0x336699);
			bg.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);

			var tf:ColorTransform = bg.transform.colorTransform;
			var newcolor = "0x" + color;
			tf.color = newcolor;
			bg.transform.colorTransform = tf;

			addChildAt(bg,0);
		}
	}
}
]]>
			http://manewc.com/2008/03/17/as-3-color-picker-with-the-colorpicker-component/feed/
		2
		
		
		
		http://manewc.com/2008/02/21/as-3-tilelist-component/
		http://manewc.com/2008/02/21/as-3-tilelist-component/#comments
		Thu, 21 Feb 2008 18:40:21 +0000
		admin
				
		

		http://manewc.com/2008/02/21/as-3-tilelist-component/
		
	
	
	
	

Here is the document class TileListDemo.as:

/*
Reference
http://www.adobe.com/devnet/flash/quickstart/tilelist_component_as3/
*/
package
{
	import flash.display.Sprite;
	import fl.controls.TileList;
	import fl.controls.ScrollBarDirection;
	import flash.text.TextFormat;

	public class TileListDemo extends Sprite
	{
		private var tlc:TileList;

		public function TileListDemo()
		{
			// create TileList instance
			var tlc:TileList = new [...]]]>
			A simple example of loading in some images in the TileList component. Make sure you add the TileList component to your library in or for this to work.



Here is the document class TileListDemo.as:
/*
Reference
http://www.adobe.com/devnet/flash/quickstart/tilelist_component_as3/
*/
package
{
	import flash.display.Sprite;
	import fl.controls.TileList;
	import fl.controls.ScrollBarDirection;
	import flash.text.TextFormat;

	public class TileListDemo extends Sprite
	{
		private var tlc:TileList;

		public function TileListDemo()
		{
			// create TileList instance
			var tlc:TileList = new TileList();

			// create TextFormat object to style labels
			var tf:TextFormat = new TextFormat();
			tf.font = "Verdana";
			tf.bold = true;
			tf.color = 0xFF6666;
			tf.size = 14;

			// add content to the TileList
			tlc.addItem({label:"Image 1", source:"http://manewc.com/projects/flash/TileList/1.jpg"});
			tlc.addItem({label:"Image 2", source:"http://manewc.com/projects/flash/TileList/2.jpg"});
			tlc.addItem({label:"Image 3", source:"http://manewc.com/projects/flash/TileList/3.jpg"});
			tlc.addItem({label:"Image 4", source:"http://manewc.com/projects/flash/TileList/4.jpg"});
			tlc.addItem({label:"Image 5", source:"http://manewc.com/projects/flash/TileList/5.jpg"});
			tlc.addItem({label:"Image 6", source:"http://manewc.com/projects/flash/TileList/6.jpg"});

			// set column and row values
			tlc.columnWidth = 500;
			tlc.rowHeight = 300;
			tlc.columnCount = 1;
			tlc.rowCount = 1;
			tlc.height = 320;
			tlc.width = 500;

			// enable scrolling
			tlc.scrollPolicy = "on";

			// position
			tlc.move(stage.stageWidth/2 - tlc.width / 2,stage.stageHeight/2 - tlc.height/2);

			// add to the display
			addChild(tlc); 

			// set style for labels
			tlc.setRendererStyle("textFormat", tf);
			tlc.setRendererStyle("imagePadding", 5);
		}
	}
}
]]>
			http://manewc.com/2008/02/21/as-3-tilelist-component/feed/
		0
		
		
		
		http://manewc.com/2008/02/14/as-3-data-grid-component/
		http://manewc.com/2008/02/14/as-3-data-grid-component/#comments
		Thu, 14 Feb 2008 19:11:36 +0000
		admin
				
		

		http://manewc.com/2008/02/14/as-3-data-grid-component/
		
			I was never a huge fan of Flash Components back in the day, now I find that they are essential in building flash applications. Here is an example of using the Data Grid Component. In this example we add data to the grid by applying the addItem method. You can also add data via an xml file or an array. To get this to work you simply just add the DataGrid component to your library. I just accomplished this by dropping the component out of the component panel, placing it on the stage, then deleting it. This automatically adds it to the library.

You should roll your mouse over the table below to demonstrate the methods of the DataGrid Component.


package
{
	import flash.display.MovieClip;
	import fl.controls.DataGrid;
	import fl.data.DataProvider;

	public class DataGridExample extends MovieClip
	{

		private var myDataGrid:DataGrid;
		private var myDP:DataProvider;

		public function DataGridExample()
		{
			var myDP:DataProvider = new DataProvider();
			myDP.addItem({ID:"01", Name:"Morgan", Email:"Morgan@blah.com", Web:"manewc.com"});
			myDP.addItem({ID:"02", Name:"Ashley", Email:"Ashley@blah.com", Web:"google.com"});
			myDP.addItem({ID:"03", Name:"Michael", Email:"Michael@blah.com", Web:"yahoo.com"});

			var myDataGrid:DataGrid = new DataGrid();
			myDataGrid.addColumn("ID");
			myDataGrid.addColumn("Name");
			myDataGrid.addColumn("Email");
			myDataGrid.addColumn("Web");
			myDataGrid.dataProvider = myDP;
			myDataGrid.width = 530;
			myDataGrid.move(10, 10);
			addChild(myDataGrid);
		}
	}
}
]]>
			http://manewc.com/2008/02/14/as-3-data-grid-component/feed/
		7