the next important thing: how do re access and change the parameters we set in the 'Components Definition...'
first we need to declare the variable we will be using to store the parameter, for example i am going to use a parameter from Components Definition named rainyness:
in the class file i am going to name the variable
private var _rainyness:Number;
next we need to give flash some functions for dealing with it:
we need to add an Inspectable tag for each parameter followed by a set and get function
[Inspectable(defaultValue=10,type=Number)]
public function set rainyness(r:Number):Void
{
_rainyness = r;
invalidate();
}
public function get rainyness():Number
{
return _rainyness;
}
the inspectable tag to me seems to be going againts the AS syntax, but nvm; there are 3 things you can set in the Inspectable tag
first is defaultValue: this is the defaultValue giving to the parameter
second is type: this is the datatype for the parameter whether it be Number, String or whatever
third is enumerator: this is used when the datatype is Array and is a quote-enclosed comma-delimited list
for example
[Inspectable(type="Array",enumeration="a,b
,c,d,e,f,g")]
When you update the parameters for a class by adding, removing, or modifying [Inspectable] metatags, you must open the Component Definition dialog box and click OK again for Flash to update with the new information.
//
the set and get functions: these are simple functions flash calls upon when accessing or setting parameters from flash in AS
you do not actually have to call a function to access or set these parameters, all the user needs to do is this:
componentinstane.rainyness = 10; (this will call the set function)
var a:Number = componentinstance.rainyness; (this will call the get function)
/////
pretty much last of all are events: (the use of listeners by the user)
events are very simple to add:
all you need to add in your class to register an event that the listener the user creates will pick up on is this:
dispatchEvent({type:"raindrop",rainmolecul
e:10}); for example, this will call the listener with the event raindrop with the included rainmolecules variable in the eventObject sent with the event to the function as a parameter
ie. t.raindrop = function(a:Object){ trace(a.rainmolecule) };
you must also add this line of code into the init() function to enable events
mx.events.EventDispatcher.initialize(this)
;
the class will also inherit the addEventListener etc.. functions
///
-------------------
the last thing which isnt important but looks nice is one last metatag which goes outside of the class
this metatag is a reference to a .png image to be used as your component icon in the Components tab
the .png file must be 10*10 pixels
[IconFile("rainydaysIcon.png")]
so altogether the class now looks like this:
[IconFile("rainydaysIcon.png")]
class RainyDays extends mx.core.UIComponent
{
private var mc_hello:MovieClip;
private var mc_happy:MovieClip;
private var bounding_box:MovieClip;
private var _rainyness:Number;
[Inspectable(defaultValue=10,type=Number)]
public function set rainyness(r:Number):Void
{
_rainyness = r;
invalidate();
}
public function get rainyness():Number
{
return _rainyness;
}
function RainyDays(){};
private function init():Void
{
super.init();
mx.events.EventDispatcher.initialize(this)
;
bounding_box.swapDepths(1);
bounding_box.removeMovieClip();
}
private function createChildren():Void
{
attachMovie("abcd_hello","mc_hello",1);
attachMovie("abcd_happy","mc_happy",2);
mc_happy.onPress = function()
{
_parent.mc_hello._visible = false;
_parent.dispatchEvent({type:"raindrop",rai
nmolecule:_parent._rainyness}); //lol such a stupid component this is ^^
}
mc_happy.onRelease = function()
{
_parent.mc_hello._visible = true;
}
}
private function draw():Void
{
var min:Number = Math.min(width,height);
var offsetX:Number = (width-min)/2;
var offsetY:Number = (height-min)/2;
mc_hello._width = mc_hello._height = min;
mc_hello._x = offsetX;
mc_hello._y = offsetY;
mc_happy._width = mc_happy._height = min/2;
mc_happy._x = offsetX+min/4+_rainyness;
mc_happy._y = offsetY+min/4;
}
public function setSize(w:Number,h:Number):Void
{
__width = w; //note how its __width and not width or _width
__height = h;
invalidate();
}
}
--------------------
compiling our component:
to compile the component we simply right click on the first movieclip in the library and click export SWC file
to test the component you can simply test the movie
or you can convert to compiled clip to test other aspects:
i will probably make another AS thread on creating MXP files and creating xml files for syntax highlighting and documentation etc (probably, im not promising anything)
i know this is a pretty big tutorial but hopefully ive explained everything clearly enough: if your component isnt working, i would first check linkage names and variables in the components definition first making sure they are right before going to the AS file:
here is a sample .zip with the .as and .fla file of the RainyDays component (haha such a useless thing it is) [in mx2004 format for you losers that dont have flash 8]
