Thursday, February 11, 2010

Editing properties of a component using actionscript

I am sure people have wanted to use /edit properties of a display object using AS 3.
Let me assure you guys that you are minutes away from doing just that, and its really easy and intuitive.

There are two set of properties you would see in any object:
1: Those which are under the section properties in the API documentation
2: Those which are under style under the style section in the API reference

For the ones which are under properties a simple
onjectID.proprtyname=newvalue;
will suffice.

But for the styles, you need to do the following:
objectID.setStyle("propertyname","newvalue");

For example:

Lets say we have a Panel by the ID mypanel , then we can change the properties like
width, height, alpha and all the attributes under properties section using mypanel.width=500, mypanel.height=800, mypanel.alpha=0.4 etc.
But lets say you need to change the backgroundColor, paddingTop, paddingBotton, etc then you need to use commands like mypanel.setStyle("backgroundColor","ff0000") then the backgroundColor of the panel would change to red, you can use the command as shown above for all the possible styles given in the styles section.

The code below shows you an example:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Button x="195" y="218" label="Button" click="changeWidth()"/>
<mx:Panel x="10" id="panel" y="10" width="250" height="200" layout="absolute">
</mx:Panel>
<mx:Script>
<![CDATA[


public function changeWidth():void
{

this.panel.setStyle("backgroundColor","ff0000");
this.panel.width=500;
}

]]>
</mx:Script>
</mx:WindowedApplication>


I hope this tutorial was useful to ppl.
Awaiting comments.

No comments:

Post a Comment