{"id":430,"date":"2008-07-16T11:04:27","date_gmt":"2008-07-16T10:04:27","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/?p=430"},"modified":"2010-09-16T12:37:51","modified_gmt":"2010-09-16T11:37:51","slug":"lite-components-from-bit-101-minimalcomps","status":"publish","type":"post","link":"https:\/\/www.matthijskamstra.nl\/blog\/2008\/07\/16\/lite-components-from-bit-101-minimalcomps\/","title":{"rendered":"Lite components from BIT-101: Minimalcomps"},"content":{"rendered":"
Update #1:<\/strong> there has been another update New MinimalComp: WheelNav<\/a>, but I’m pretty sure I won’t been using this one very much…<\/div>\n

I’m using this for some time now, and it’s time to share this with you all: Minimalcomps from BIT-101<\/a>.<\/p>\n

This lite-weight components set is great, I can see what the code is doing, it’s easy to use and its simplicity is beautiful (and I love pixel font in Flash, I should use it more). <\/p>\n

\nMinimal ActionScript 3.0 code only UI components\n<\/p><\/blockquote>\n

Do you need some reading material? Some documentation and introduction can be found on Keith Peters (BIT-101) site: read the first post about the Minimalcomps<\/a>.<\/p>\n

But in short:
\nThis are some of the examples (since the first post there are some new components<\/a> created, but they are not as frequently used as this set);<\/p>\n

[swf]http:\/\/www.bit-101.com\/minimalcomps\/ComponentPlayground.swf, 500, 500[\/swf]<\/div>\n

For lazy readers (and a reminder for myself: the site of BIT-101 doesn’t have a very useful search, and the google code page doesn’t have documentation), here some code to create what you see above<\/strike> not entirely true, but I will keep the code here:
\n[as collapse=”true”]
\nvar panel:Panel = new Panel(this, stage.stageWidth \/ 4, stage.stageHeight \/ 8);
\npanel.setSize(stage.stageWidth \/ 2, stage.stageHeight * 3 \/ 4);<\/p>\n

var checkBox:CheckBox = new CheckBox(panel, 20, 20);
\ncheckBox.label = &quot;Check it out!&quot;;<\/p>\n

var label:Label = new Label(panel, 20, 40);
\nlabel.text = &quot;This is a label&quot;;<\/p>\n

var pushbutton:PushButton = new PushButton(panel, 20, 60);
\npushbutton.label = &quot;Push Me!&quot;;
\npushbutton.width = 100;<\/p>\n

var hSlider:HSlider = new HSlider(panel, 20, 90);
\nvar vSlider:VSlider = new VSlider(panel, 130, 20);<\/p>\n

var inputText:InputText = new InputText(panel, 20, 110);
\ninputText.text = &quot;Input Text&quot;;<\/p>\n

var _progressBar:ProgressBar = new ProgressBar(panel, 20, 140);<\/p>\n

var radio1:RadioButton = new RadioButton(panel, 20, 160);
\nradio1.label = &quot;Choice 1&quot;;
\nvar radio2:RadioButton = new RadioButton(panel, 20, 180);
\nradio2.label = &quot;Choice 2&quot;;
\nvar radio3:RadioButton = new RadioButton(panel, 20, 200);
\nradio3.label = &quot;Choice 3&quot;;<\/p>\n

var colorchooser:ColorChooser = new ColorChooser(panel, 20, 230);
\ncolorchooser.value = 0xff0000;
\n[\/as]<\/p>\n

This is the code you want to use, to create all the components (minus wheelnav… ) in a document class.
\n\"MinimalComps
\n[as]
\npackage
\n{
\n\timport com.bit101.components.*;
\n\timport flash.display.*;
\n\timport flash.events.*;<\/p>\n

\t\/**
\n\t * @author Matthijs Kamstra aka [mck]
\n\t *\/
\n\tpublic class MainCube extends MovieClip
\n\t{<\/p>\n

\t\tpublic function MainCube():void
\n\t\t{
\n\t\t\ttrace( &quot;MainCube.MainCube&quot; );<\/p>\n

\t\t\tvar panel:Panel = new Panel(this, 20, 20);
\n\t\t\tpanel.setSize(stage.stageWidth * .75, stage.stageHeight * .75);<\/p>\n

\t\t\tvar _CheckBox:CheckBox = new CheckBox(panel, 20, 20, &quot;Check it out!&quot;);<\/p>\n

\t\t\tvar _Label:Label = new Label(panel, 20, 40, &quot;This is a label&quot;);<\/p>\n

\t\t\tvar _PushButton:PushButton = new PushButton(panel, 20, 60, &quot;Push Me!&quot;);
\n\t\t\t_PushButton.width = 100;<\/p>\n

\t\t\tvar _HSlider:HSlider = new HSlider(panel, 20, 90);
\n\t\t\tvar _VSlider:VSlider = new VSlider(panel, 130, 20);<\/p>\n

\t\t\tvar _VUISlider:VUISlider = new VUISlider(panel, 150, 20, ‘VUISlider’);
\n\t\t\t_VUISlider.value = 55.5;
\n\t\t\tvar _HUISlider:HUISlider = new HUISlider (panel, 20, 260, ‘HUISlider’);<\/p>\n

\t\t\tvar _InputText:InputText = new InputText(panel, 20, 110, &quot;Input Text&quot;);<\/p>\n

\t\t\tvar _ProgressBar:ProgressBar = new ProgressBar(panel, 20, 140);
\n\t\t\t\/\/trace( &quot;_ProgressBar.maximum : &quot; + _ProgressBar.maximum );
\n\t\t\t_ProgressBar.value = .75;<\/p>\n

\t\t\tvar radio1:RadioButton = new RadioButton(panel, 20, 160, &quot;Choice 1&quot;, true);
\n\t\t\tvar radio2:RadioButton = new RadioButton(panel, 20, 180, &quot;Choice 2&quot;);
\n\t\t\tvar radio3:RadioButton = new RadioButton(panel, 20, 200, &quot;Choice 3&quot;);<\/p>\n

\t\t\tvar _ColorChooser:ColorChooser = new ColorChooser(panel, 20, 230, 0xff0000);<\/p>\n

\t\t\tvar _IndicatorLight:IndicatorLight = new IndicatorLight (panel, 250, 20, 0xff00ff, &quot;IndicatorLight&quot;);<\/p>\n

\t\t\tvar _Knob:Knob = new Knob (panel, 350, 20, &quot;Knob&quot;);<\/p>\n

\t\t\tvar _Meter:Meter = new Meter (panel, 200, 100, &quot;Meter&quot;);<\/p>\n

\t\t\tvar _RotarySelector:RotarySelector = new RotarySelector (panel, 270, 220, &quot;RotarySelector&quot;);<\/p>\n

\t\t\tvar _Text:Text = new Text (panel, 80, 170, &quot;Text what ever you want to place in here&quot;);
\n\t\t\t_Text.setSize (100, 50);<\/p>\n

\t\t}<\/p>\n

\t} \/\/ end class<\/p>\n

} \/\/ end package
\n[\/as]<\/p>\n

And it quite easy to create buttons:
\n[as]
\nvar myButton:PushButton = new PushButton(this, 10, 20, onClick);
\nfunction onClick (e:Event){
\n trace (‘onClick’);
\n \/\/ do something else
\n}
\n[\/as]<\/p>\n

You can download the MinimalComps set at: http:\/\/code.google.com\/p\/minimalcomps\/<\/a>
\nThe set includes a CheckBox, PushButton, HSlider, VSlider, InputText, ProgressBar, RadioButton, ColorChooser (text input only) and Panel.<\/p>\n

One big fat tip from me:<\/strong>
\nin the zip you will find a folder named ‘assets’ and in there is a truetype font called ‘pf_ronda_seven.ttf<\/a>‘. You need to install that on your computer (Windows: C:\\WINDOWS\\Fonts , Apple: ??) and<\/strong> add it to your Flash file.\n<\/div>\n

How to add a font to the Flash Library<\/h3>\n

Goto your library, add a “New Font”
\n\"Library
\n(sorry for the strange looking Flash, it has something to do with my screenshot programm)<\/em><\/p>\n

Name:<\/strong> “PF Ronda Seven” (you need to spell this exactly as here, without the quotes (“))
\nFont:<\/strong> search for “PF Ronda Seven”, if you can’t find it, you probably need to restart Flash.
\nSize:<\/strong> 10<\/p>\n

\"Font
\n(use this screenshot as an example if you don’t know what I mean)<\/em><\/p>\n

You need to embed the font from the library into the .FLA : search the font you just created in the library and Right Click >> choose Linkage. Just check “Export for Actionscript” (“Export in first frame” will be activated to). I didn’t change anything, press “OK”
\n\"\"<\/a><\/p>\n

and you done!<\/p>\n","protected":false},"excerpt":{"rendered":"

Update #1: there has been another update New MinimalComp: WheelNav, but I’m pretty sure I won’t been using this one very much… I’m using this for some time now, and it’s time to share this with you all: Minimalcomps from BIT-101. This lite-weight components set is great, I can see what the code is doing, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,3,6],"tags":[68,51,398,171,170,169],"class_list":["post-430","post","type-post","status-publish","format-standard","hentry","category-as3","category-flash","category-open-source-freeware","tag-actionscript","tag-download","tag-flash","tag-keith-peters","tag-minimalcomps","tag-ui-components"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t