I love AS3. Flex is cool, but not often so suited for the kind of work I like to do, which is usually more custom stuff, not so much form-based Flex-like applications. This brings up a problem though. I still have the occasional need for a button with a label, a slider, color chooser, checkbox, etc. I’m either forced to use Flex, jump over to the Flex Authoring tool for my coding, figure out how to hack the Flash CS3 components SWC into a Flex Builder AS3 project , or create my own components.
I don’t really want to use Flash Authoring as my compiler. As far as using the CS3 comps in Flex Builder, I assume it can be done, but haven’t tried. From my few attempts to use them in Flash CS3, I have not been so impressed with them to really want to use them in Flex builder.
So, in the end, I started making a few of my own components. There were a couple of personal projects I was playing around with a few months ago where I needed some basic components. And rather than just continue making one-off UI elements, I started making a set based on a common component class with similar interfaces, etc.
As these were just experimental projects, skinning, styling, and layout stuff, as well as advanced features like databinding weren’t really something I needed. So they are pretty minimal. That’s one reason for the name. Also, all the graphics are drawn with the drawing API. No gradients or rounded corners. There’s a single bitmap font embedded that all the components which need to display text use. So they have kind of a minimal look and feel. Finally, it’s a pretty minimal set of components. No list or combo box, data grid, text area, scroll pane, etc. So with those three factors, there wasn’t much question about the name. 🙂
Just so you know I’m not totally anti-Flex, one of the projects where I was using them started to become much more complex and really needed better layout and databinding, as well as some more advanced components. So I wound up migrating that over to a Flex project. The other project was just a larger experiment using sound visualization and wound up not really going anywhere.
So I recently realized that I had this component set sitting there on my hard drive not being used at all and others might possibly benefit from it. As they really are pretty minimal, and would really benefit from others’ contribution, I’m releasing them open source. I’ll just stick the code up here for now, but if there if some real interest in further development arises, I’ll put them on Google Code or OSFlash or something.
Anyway, here’s what they look like:
[kml_flashembed movie=”http://www.bit-101.com/minimalcomps/ComponentPlayground.swf” width=”400″ height=”400″ /]
The set includes a CheckBox, PushButton, HSlider, VSlider, InputText, ProgressBar, RadioButton, ColorChooser (text input only) and Panel. Other than changing some of the basic colors or messing with the code, what you see is what you get. But just to show how easy they are to use, here’s a snippet of the class that creates the above demo:
[as]var panel:Panel = new Panel(this, stage.stageWidth / 4, stage.stageHeight / 8);
panel.setSize(stage.stageWidth / 2, stage.stageHeight * 3 / 4);
var checkBox:CheckBox = new CheckBox(panel, 20, 20);
checkBox.label = “Check it out!”;
var label:Label = new Label(panel, 20, 40);
label.text = “This is a label”;
var pushbutton:PushButton = new PushButton(panel, 20, 60);
pushbutton.label = “Push Me!”;
pushbutton.width = 100;
var hSlider:HSlider = new HSlider(panel, 20, 90);
var vSlider:VSlider = new VSlider(panel, 130, 20);
var inputText:InputText = new InputText(panel, 20, 110);
inputText.text = “Input Text”;
_progressBar = new ProgressBar(panel, 20, 140);
var radio1:RadioButton = new RadioButton(panel, 20, 160);
radio1.label = “Choice 1”;
var radio2:RadioButton = new RadioButton(panel, 20, 180);
radio2.label = “Choice 2”;
var radio3:RadioButton = new RadioButton(panel, 20, 200);
radio3.label = “Choice 3”;
var colorchooser:ColorChooser = new ColorChooser(panel, 20, 230);
colorchooser.value = 0xff0000;[/as]
One thing you see there is that you can pass in the parent and x/y position for the component right in the constructor. So, rather than the repetitive task of create component, addChild, set x position, set y position, you can do it all in one line. Components that fire events such as click or change, also take a fourth parameter of defaultHandler so you can set up the event like so:
[as]myButton = new PushButton(this, 10, 20, onClick);[/as]
and it automatically takes care of adding onClick as a handler for the MouseEvent.CLICK event.
To use them, you can either add the source directory to your Source Path in Flex Builder Project Properties, or Class Path in Flash CS3. Or add the SWC to your Library Path in Flex Builder (recommended). The classes are somewhat documented, but I didn’t generate any docs yet.
[EDIT]I just realized that because the components use an embedded font, simply linking to the source folder won’t work unless you embed that font in your own project, or import it into your library in CS3 and export it for AS. Linking to the SWC in Flex Builder should work fine though. I guess to link to the SWC in CS3, you need to add it to the Components Panel, but I haven’t had much luck doing that yet. Might need to compile a different version in CS3 itself for use in CS3.[/EDIT]
I’m not sure if these will be useful to anybody, but if one person uses them, that’s better than them sitting on my hard drive until AS4 comes out and makes them useless. I think they are great for prototyping at least, as they are so easy to create and set up. I also think that while the style is set in stone, it can look kind of cool when you have a lot of them together. They are also REALLY tiny in terms of file size. The whole demo above is only 20k.
You can download the source here:
http://www.bit-101.com/minimalcomps/
It’s a zip file containing the whole Flex Library project – source, SWC, everything. Creative Commons Attribution-Share Alike 3.0 License. Enjoy.
Very cool! Perhaps this is something that could eventually make it’s way into the open source Flex SDK. I could see this kind of thing being especially useful for mobile applications as well. Thanks for sharing!
-James
Just what I’ve been after – thanks Keith!
Superb, that’s something very handy. Love to see more of them.
This set looks nice and light. It has a very mobile feel to them. Thanks!!
Very very nice, i’ll use them 100% 🙂
Keith,
thanks for sharing the full source of your component set! Diving into the code it’s very helpful to create and extend an own component set, too. That’s fantastic!
-sectore
—
http://www.websector.de/blog/
Keith, that’s absolutely brilliant! I needed something tiny like this to adjust params on the stage directly! Thanks!
sweet! I’m still thinking about creating a component set for game UI … if I only had the time!
Nice work Keith. One thing I thing you overlooked discussing is that these Components extend Sprite. Coders can easily use this to map their own custom handling if they prefer:
myButton = new PushButton(this, 10, 20);
myButton.addEventListener(MouseEvent.CLICK,onClick,false,0,true);
Again, really nice.
Oh, yeah, you can definitely add any event listeners you want. Passing it in through the constructor is just a handy shortcut for rapid development.
tried to compile in cs3 and got this error:
PushButton.as, Line 152 Warning: 1090: Migration issue: The onMouseUP event handler is not triggered automatically by Flash Player at run time in as 3……
Excellent idea and very convenient for prototyping and debugging. The design is also great. Thanks.
Don’t worry about the warning. I turn that one off in preferences.
yay – bit-101 components rule!
I could only say good work – from coding perspective. I really will never understand why people try to invent something when there are already tons of things exists that do the job. in this particular case i think it will be more valuable to contribute to projects like AsWing (http://www.aswing.org)…
Skitsanos. AsWing is impressive, and might be very familiar for someone who has used Swing in Java, but looks pretty foreign for many Flash / Flex developers who have been using V2 components, Flex components and other Flash-based component kits. Even a lot of Java developers are not big fans of Swing. My goal was to make something far more simple for myself, and now I am sharing it.
Also, I don’t see that there are “tons of things” that already exist in terms of AS3 components. Other than AsWing, I don’t know of a single other set of completed, non-Flex UI components for AS3. A lot of people have released various image scrollers, coverflow-like components, special menus, effects, etc. But in terms of a general use set of UI components – buttons, sliders, labels, text components, etc. AsWing is the only one I’ve found (other than the CS3 components, which I’ve mentioned already, of course).
Excellent stuff…is it possible to change the font for the checkbox, radio or pushbutton labels?
Currently, the font is pretty much hard coded and baked into the SWC. Possible to change by changing the code itself. Might make it dynamic in the future, but not on the top of my list.
awesome! these are very cool, thanx for sharing!
Thanks Keith,
I think these source files are a great intro to AS3 component creation.
Wow. I can’t believe how lucky I am. These components are working beautifully (overloaded Panel and it’s so easy to use). I feel like I’m working with JPanel in Java again.
Anyway, please consider HUISlider as you mention on the following post!
Thanks,
-Danny
Hey Keith
Using the radio button but was confused as to how to use more than one group of radio buttons in an app.
‘group’ isn’t exposed as a public setter…will I need to extend and modify the existing RadioButton class so each buttons array is unique??
Correct, the radio buttons only allow for a single group at this point. It’s something I’ll probably add eventually. But if you come up with a decent solution and want to send it over, I might implement it.
Ok people, I´m a curious starter, looking for flash comps all the time … Thinks it´s really nice, but I don´t know how to install them … What can I do ? Where do I put these files ? Thanks !
Waa!!! Cool!!! this is the very thing i’m looking for!!! thx a lot ya!!!
Fantastic! You are the man!
I love the simple components for rapid prototyping!
One problem I was having: If you use setSliderParams on the HUISliders and you init them to something that isn’t zero, the slider handles will move but the labels start out saying “0.0” until you reposition the handle (fire a CHANGE event). I fixed this by editing UISlider.as and adding:
public function setSliderParams(min:Number, max:Number, value:Number):void
{
_slider.setSliderParams(min, max, value);
formatValueLabel(); // Added by Hunter so will be initialized to the proper values
}
Great job, thanks!
Hunter
Thanks Hunter. I’ll add that to the next build.
Any idea why the labels for the radio buttons wont show up? I am using flash cs3.
why am I not getting the font to appear when using these in Flash CS3? Do I need to import it into the project some how or do anything special so it displays in Flash?
Corban, that is covered in the post above.
Note, that if you are using Flash CS4, you can link directly to the SWC and not worry about embedding the font.
Do not display objects in FF under MACOS. Safari, so good. The current version of Flash 10.0.0.87 debug
keith,
i have always wondered about overriding built in flash functions/getters/setters like height and width. especially not knowing how it ties into flash built in calculations like xScale,yScale. is this acceptable practice?
-db
Hi!
First of all, I must congratulate you for this great work, the components are very good and good looking.
I’m making an application that will be using smartboard, and by so, I need to increase the size, the font, and perhaps change the color of the components.
How can I do this? Is it possible?
Tester, maybe I can give you a hint… I think that is a bug in the version of the Flash Player that you have. I remember that I had a similar problem, but the way to prevent this, was to change the version parameter in the HTML code to the 10.0.0.65 version and things worked with no problem. Maybe something similar will work for you.
Thanks.
Hello,
Thanks much for sharing! I would like to know if we have your permission to apply a GPL 3.0 license to this code. Going by this reference: http://www.gnu.org/philosophy/license-list.html#OtherLicenses, the Creative Commons Attribution Share-alike license is not GPL compatible. What is your take?
Can it possibly be that these components don’t work in flash player 10 / CS4? The sliders display a flickering hand button and the color picker doesn’t do anything at all.
Great set of components. One question, why is the positioning ( move(x,y) ) implemented immediately and changing the size ( setSize(w,h) ) onInValidate, one frame later? I had expected that the positioning would follow the same pattern as resizing and the x/y position would change at the same moment the size would change, i.e. onInValidate.
Superior! Great thanks for your work!
Thanks for the components, helps a lot when developing
Thank you for your components.
If possible, do it and combobox!
Thank you for the inspiration, Keith. I agree to the demand of clean and small components outside of the big frameworks.
I would like to mention a similiar approach and another (complete) component set. In difference to the minimal components they focus more on customization and data intergration and are thus suitable also for production versions.
The set is called AS Data Provider Controls and can be found here: http://sibirjak.com/blog/index.php/asdpc/
nice components, is there any layout library available where its possible to have percentage height/width, using these minimal comps.
Hi!
Nice work.
Is there any way to use this in Flash CS4, not in Flex?
Will be great if you do a ComboBox.
yes, they work fine in CS4. Just add the SWC or classes to your class path.
in
————————————————–
MinimalComps Zipped Source Version 0.101
————————————————–
Warning: 1090: Migration issue: The onMouseUp event handler is not triggered
automatically by Flash Player at run time in ActionScript 3.0. You must first register this handler for the event using addEventListener ( ‘mouseUp’, callback_handler).
—————————————————-
Ignore that warning.
http://www.bit-101.com/blog/?p=1154
Thanks. Nice work.
Your calendar component really amazing…….
What an simple architecture………….
you are great! Thanks a lot.
Really love the minimal components! Thanks for your great work.
I found a small bug in the color chooser. By now the color value is not updated until the next redraw of the component, which is done in the next frame. Instead the color value should be updated before the CHANGE event is fired.
Adding the following line in the color choosers internal onChange() handler fixes the bug.
_value = parseInt(“0x” + _input.text, 16);
Sorry but don’t I get put it in ComponentPainel, how make?
I am using FLASH CS4, I copied to C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\Components\ but it don’t appear… =(
Hi i’m using this set of component!
It is so beautiful!
I LOVE IT!
THX!!
Hello!
Firstly thanks for your great work!
I have a problem setting some componnents height ( for exsample CheckBox and ScrollBar) method myComp.setSize(w,h) and myComp.height = x didnt work for me.
Any suggestion how to make it possible to change? (btw ScrollBar width changes correctly);