(26 votes, average: 4.12 out of 5) 
Loading ...I like to make my custom UI elements easy to skin. If we wanted to create a check box class that was easy to skin, one thing we could do is create an FLA based AS3 component. Unfortunately to do that takes advanced programming skills. If you're an intermediate programmer you might want to be able to create a skinnable UI element without all of the AS3 component architecture.
One way to achieve this is by creating a custom class that uses Library elements as assets. To increase flexibility (for swapping skins, for example), you can create each graphical element of your check box, store them in your Library, assign a linkage class name to each element, and then pass those linkage class names into your custom class.
In the above library you'll see that the movie clips GreenBg and YellowCheck have associated linkage classes of the same names. Wouldn't it be nice to simply pass the names of each linkage class into the constructor of a check box class? The SWF below demonstrates this idea:
Download Skinnable Check Box (9.2 KB, 2,092 hits)
The checkbox in the above SWF is created with the following code:
-
var cb:SkinnableCheckBox = new SkinnableCheckBox(GreenBg, YellowCheck);
-
cb.x = 465;
-
cb.y = 120;
-
addChild(cb);
The GreenBg and YellowCheck linkage classes are passed into our custom class called SkinnableCheckBox. SkinnableCheckBox is a flexible class with the ability to create new instances of any linkage class passed in to its constructor. Let's take a look at the inner workings of SkinnableCheckBox:
-
package {
-
-
import flash.display.*;
-
import flash.events.MouseEvent;
-
-
public class SkinnableCheckBox extends Sprite {
-
-
private var BgSkin:Class;
-
private var CheckSkin:Class;
-
-
private var _bg:MovieClip;
-
private var _check:MovieClip;
-
-
public function SkinnableCheckBox(bgSkin:Class, checkSkin:Class) {
-
BgSkin = bgSkin;
-
CheckSkin = checkSkin;
-
build();
-
buttonMode = true;
-
addEventListener(MouseEvent.CLICK, onToggle, false, 0, true);
-
}
-
-
private function build():void {
-
_bg = new BgSkin();
-
_check = new CheckSkin();
-
addChild(_bg);
-
addChild(_check);
-
}
-
-
private function onToggle(evt:MouseEvent):void {
-
_check.visible = !_check.visible;
-
}
-
}
-
}
Lines 8 and 9 create private properties used for storing references to the linkage classes we want to instantiate. These classes come in to the constructor through arguments seen in line 13 and are assigned to class properties in lines 15 and 16. The build() method on line 17 is responsible for creating the new instances and adding them to the display list. SkinnableCheckBox extends Sprite and is, itself, added to the display list (as seen in line 4 of the previous code block). So, using addChild() for the skin parts is akin to adding children to a parent Sprite. It's important to note that this class is not meant to be a fully functional check box class. It's just meant to illustrate a possible skinning method.
Here is an example of this same class being used with a few different skins:
Download Skinnable Check Box (9.2 KB, 2,092 hits)
We can easily use the same custom class with numerous skins:
-
var cb0:SkinnableCheckBox = new SkinnableCheckBox(BlueBg,
-
LightBlueCheck);
-
cb0.x = 50;
-
cb0.y = 50;
-
addChild(cb0);
-
-
var cb1:SkinnableCheckBox = new SkinnableCheckBox(FlatGreyBg,
-
FlatWhiteCheck);
-
cb1.x = 100;
-
cb1.y = 50;
-
addChild(cb1);
-
-
var cb2:SkinnableCheckBox = new SkinnableCheckBox(BigBg, BigCheck);
-
cb2.x = 150;
-
cb2.y = 40;
-
addChild(cb2);
-
-
var cb3:SkinnableCheckBox = new SkinnableCheckBox(SketchBg, SketchCheck);
-
cb3.x = 220;
-
cb3.y = 45;
-
addChild(cb3);
In upcoming posts I'll be using this technique to build different UI classes. So, be sure to check back again.
Print This Post
Awesome quick tutorial
Thanks Jake. Glad you liked it.
Very nice, Zevan!
Looking forward to your upcoming post...
Or is it already somewhere?
Thx dude...!
Great tutorial and I really enjoy the brilliant yet understandable way all the tutorials and the wonderful book explain Actionscript 3.0. thanks so much!
thanks. Glad you guys liked the tutorial. Definitely a good deal more to come on this subject.
best,
z
It's Good Tutorial!Thank..
im newbie. thats really quick and understandable, thanx i like it.
This is actually a great example of class encapsulation, a concept that is difficult to maintain throughout Flash/AS Development.
I would like to add to the others comments and to whom who read your book. It's really enjoyable and it covers most of the topics you will encounter in your everyday ActionScript 3 development. I think brilliant is a good way of describing it.
Hi, this might be a bit off the topic.... I'm getting this weird error every time I try to use custom class:
Error: Error #2136: The SWF file file:///Cietais/Users/andrisfeodorovs/Documents/_Flash/AS3_maacos/_Learning AS 3.0/06_Classes/inheritance/90 Custom Class.swf contains invalid data.
at Main/::frame1()
Any thoughts - I have done everything according to the book. I downloaded example files on OOP chapter 6 and none of them worked too.... any ideas? I have Flash CS3 - could it be Flash bug or smthing like that?
I've done everything according to the book but still nothing works.......
Thnks...
how u included SkinnableCheckBox.as file in fla file.