Search Results for "minimalcomps"

Apr 02 2010

MinimalComps: RangeSlider

Published by under ActionScript,Components

I know I’m supposed to stop making new components and clean things up for 1.0, but this got in my head and I had to bang it out. It’s basically a slider with two handles. You get a lowValue and a highValue. Good for specifying a range with a low and high boundary. I thought it was pretty important to have labels for the two values, but wasn’t sure the best way to do it. Finally came up with these sliding labels that match the position of each handle. They can be always on, always off, or just show up when you move the handles. You can also specify the position of the label.

Get Adobe Flash player

Shown here is the HRangeSlider. There’s also a VRangeSlider which works about as you’d suspect.

The code is checked into SVN. Will update the site, SWC, docs, and code download later, probably tomorrow.

10 responses so far

Mar 26 2010

Custom List Items for MinimalComps List and ComboBox

Published by under Components,Flash

I checked in some changes to List and ComboBox that allow you to create custom list items. Here’s an example:

Get Adobe Flash player

This is enabled through the listItemClass property on List and ComboBox. In it, you pass in a class that must extend the ListItem class. Here’s the code for this example:


package
{
import com.bit101.components.*;

import flash.display.Sprite;
import flash.events.Event;

public class Playground extends Sprite
{
private var list:List;
private var label:Label;

public function Playground()
{
Component.initStage(stage);

label = new Label(this, 120, 10);

list = new List(this, 10, 10);
list.listItemClass = CheckListItem;
for(var i:int = 0; i < 20; i++) { list.addItem({label:"item " + i, checked:i % 2 == 0}); } list.addEventListener(Event.SELECT, onSelect); } protected function onSelect(event:Event):void { label.text = list.selectedItem.label + ". checked: " + list.selectedItem.checked; } } }[/as3] Here, I'm saying list.listItemClass = CheckListItem; We'll see the CheckListItem class shortly. As I add items, I give each one a label property and a checked property, which is true or false. And when an item is selected, I read these properties and assign them to a label. So here's my custom list item class: [as3]package { import com.bit101.components.CheckBox; import com.bit101.components.ListItem; import flash.display.DisplayObjectContainer; import flash.events.Event; public class CheckListItem extends ListItem { protected var _checkBox:CheckBox; public function CheckListItem(parent:DisplayObjectContainer=null, xpos:Number=0, ypos:Number=0, data:Object = null) { super(parent, xpos, ypos, data); } protected override function addChildren():void { super.addChildren(); _checkBox = new CheckBox(this, 5, 5, "", onCheck); _label.visible = false } public override function draw():void { super.draw(); if(_data is String) { _checkBox.label = _data as String; } else if(_data.label is String) { _checkBox.label = _data.label; } else { _checkBox.label = _data.toString(); } if(_data.checked != null) { _checkBox.selected = _data.checked; } } protected function onCheck(event:Event):void { _data.checked = _checkBox.selected; } } }[/as3] In the addChildren method, I create a CheckBox and turn the existing Label invisible. In the draw method, I assign the _data.label value to the CheckBox and use _data.checked to set whether it is checked or not. As you can see, there is some additional testing for various possible label values that I basically just copied over from ListItem. When the CheckBox is clicked, it sets _data.checked to its own checked state. Since data is typed as a generic object, you can pass any property to it. For instance, if you want to display an icon or image, you might pass in an icon class or a url and use that within your list item class to instantiate or load a bitmap and display it. One thing to note is that any display objects you create in the list item may become the target of mouse click events. In checking for a list selection, the target must be the list item itself, not a child of the list item. For example, notice that when you click the CheckBox, it checks/unchecks the CheckBox, but does not select the list item. You have to click somewhere off the CheckBox to select the item. So if you have any display objects that may be capturing click events, you can set them to mouseEnabled = false, and maybe mouseChildren = false, to have them ignore clicks. The click target will then be the list item itself instead of the child. If you have children that need to be interactive, like the CheckBox in this example, make sure you leave enough space to allow for a selection-causing click as well.

9 responses so far

Mar 25 2010

MinimalComps Fixes

Published by under ActionScript,Components

As I mentioned the other day, I’m going to spend the next couple of weeks addressing any bugs or enhancements to the components. In the last few days, here are some of the things I’ve added and fixed:

– exposed numVisibleItems on ComboBox
– fix for stage click to close ComboBox
– exposed items array for List and ComboBox
– more accurate leap year calculation in Calendar
– Sliders now dispatch a change event when you set their values programmatically
– HBox and VBox now calculate their own width and height based on their contents, so you can now nest these
– Knob has 3 modes of reacting to the mouse: vertical, horizontal, and rotate
– fixed some visual jumpiness that occurred when resizing components
– made internal event listeners use weak references
– on text components, if text is set to null, it will be changed to an empty string rather than throwing an error

If you have any other bugs or enhancements, please feel free to submit them: http://code.google.com/p/minimalcomps/issues/list. I’m paying close attention to this list and addressing each item as soon as possible. Again, I’m not adding any new components in the near future, just addressing bugs and enhancement requests to existing ones.

Comments are off for this post

Mar 22 2010

Font issue in MinimalComps

Published by under Components,Flash

It was brought to my attention today that there was a possible issue in the MinimalComps regarding font embedding. If you were to compile the component source with the Flex 4 SDK, no labels on any components would show up. If you use the precompiled SWC, you’d be fine, as this was compiled with the 3.4 SDK. But if you were using the zipped source checked out the source with SVN and compiled under SDK 4.x, you’d hit this problem.

With a quick bit of research, I learned that with Flex 4, there is a new type of embedding for fonts. Traditional font embedding is called DefineFont3. The new stuff is called DefineFont4. Let’s call them DF3 and DF4 for short here. It turns out that the new text components in Flex 4 require DF4. Yet, the old fashioned TextField requires DF3. Guess what the default is? Yes, DF4. This means that using the exact same syntax for embedding will now make embedded fonts in TextFields not work. The solution is, when embedding a font, to tell it to NOT use DF4. The original syntax for this was to add cff="false" to the Embed tag. The current syntax is embedAsCFF="false". So, in that sense, this is an easy fix.

With FlashBuilder 4 and Flex 4 being officially released today, I decided to upgrade the SWC to use the Flex 4 SDK for compiling. I changed the Embed tag as above. So now, compiling in FlashBuilder 4 or otherwise using the 4.x SDK should work fine. Of course, this creates the opposite problem. If you are compiling in Flex Builder 3 or a 3.x SDK, it will not recognize embedAsCFF in the Embed tag and your code will not compile. I looked into conditional compiling, but as far as I can tell, that’s not going to be a real solution in this case unless I can inject a compiler definition. But since I’m just distributing source, not a build system, I don’t see a way to do that.

So the two choices are:

A. Don’t use embedAsCFF and compile the SWC under 3.x.
B. Use embedAsCFF and compile the SWC under 4.x.

Either way, anyone using the other SDK will have a problem. However, if I go with A, the people using 4.x will not see the font show up, but will get no useful error of any kind. If I go with B, the people using 3.x will get a compiler error pointing them to the Embed statement in Component.as. That is much more useful.

So, if you look at Component.as, you will now see this:

    // NOTE: Flex 4 introduces DefineFont4, which is used by default and does not work in native text fields.
    // Use the embedAsCFF="false" param to switch back to DefineFont4. In earlier Flex 4 SDKs this was cff="false".
    // So if you are using the Flex 3.x sdk compiler, switch the embed statment below to expose the correct version.

    // Flex 4.x sdk:
    [Embed(source="/assets/pf_ronda_seven.ttf", embedAsCFF="false", fontName="PF Ronda Seven", mimeType="application/x-font")]
    // Flex 3.x sdk:
//  [Embed(source="/assets/pf_ronda_seven.ttf", fontName="PF Ronda Seven", mimeType="application/x-font")]
    private var Ronda:Class;

So, if you are using 4.x, all should be well. If you are using 3.x, you’ll get an error which should take you right to this exact point. Hopefully you’ll be able to figure things out from my detailed explanation and fix it.

Again, if you are using the precompiled SWC, it shouldn’t matter what SDK you are using, at the SWC is all wrapped up in its own little package. This will only be a problem if you are linking to the source classes themselves.

I know this whole thing presented a problem for Adobe, but I feel they broke some fundamental rules here. They broke a commonly used API. If you have function foo() that makes ThingX’s, you don’t just suddenly change it so it makes ThingY’s instead, and add a new parameter that you can use to force it to make ThingX’s again. You either make a foo2() function or allow foo to take an optional parameter to force it to make the new ThingY’s. You don’t break existing code. Anyway, that’s what we’re stuck with, and I did the best I could with it.

18 responses so far

Mar 03 2010

Announcing www.minimalcomps.com

Published by under Components

This is long overdue. Minimal Comps have been a sort of side project of mine, and have various posts here related to them, but enough people are using them and apparently liking them, that it seemed they deserved a home of their own.

http://www.minimalcomps.com

The site is nothing fancy (minimal?), and it seemed fitting to use the components to make the site, but at least it serves as a single point where people can go to find out what they are, where to get them, see demos and examples, get documentation, find out where to report bugs, etc.

Also, note that I had been pretty remiss about addressing bugs and issues in the past. I didn’t have the issue tracker set up to notify me about new issues, so had no idea there were so many in there. I think I handled almost all of the ones that were in there now, and should be notified of any new ones.

11 responses so far

Aug 14 2009

MinimalComps advanced Color Chooser

Published by under ActionScript,Components,Flash

Well, we have the first major contribution by someone other than myself. Rashid Ghassempouri decided to revamp the color chooser to allow for a color panel popup so you can choose a color with the mouse. Actually, he added all kinds of cool options to it, but in the interest of keeping minimal minimal, I cut it back a bit. 🙂

Anyway, now you can specify “myColorChooser.popup = true;” and you’ll get a default gradient color popup that you can choose just about any color from with a click of the mouse. You can also pass an instance of any display object to the “model” property, and that display object will be used as the popup. Finally, you can specify “popupAlign” as either “top” or “bottom” (ColorChooser.TOP, ColorChooser.BOTTOM), and the popup will appear in that direction. Here’s a bit of a demo:

Get Adobe Flash player

In the third chooser, “BoatImage” is an 100×100 pixel png, embedded as so:

[as][Embed (source=”boats.png”)]
private var BoatImage:Class;[/as]

Finally, here’s the full class for the above demo:

[as]package
{
import com.bit101.components.*;

import flash.display.Sprite;
import flash.events.Event;

[SWF(backgroundColor=0xeeeeee, width=500, height=320)]
public class Playground extends Sprite
{
private var cc1:ColorChooser;
private var cc2:ColorChooser;
private var cc3:ColorChooser;
private var cc4:ColorChooser;

[Embed (source=”boats.png”)]
private var BoatImage:Class;

public function Playground()
{
new Label(this, 10, 10, “No popup (original)”);
cc1 = new ColorChooser(this, 15, 30, 0xff0000, onColor);

new Label(this, 120, 10, “usePopup = true”);
cc2 = new ColorChooser(this, 125, 30, 0xff0000, onColor);
cc2.usePopup = true;

new Label(this, 230, 10, “model = new BoatImage()”);
cc3 = new ColorChooser(this, 235, 30, 0xff0000, onColor);
cc3.model = new BoatImage();

new Label(this, 340, 110, “popupAlign = ColorChooser.TOP”);
cc4 = new ColorChooser(this, 345, 130, 0xff0000, onColor);
cc4.usePopup = true;
cc4.popupAlign = ColorChooser.TOP;

draw();
}

private function onColor(event:Event):void
{
draw();
}

private function draw():void
{
graphics.clear();
graphics.beginFill(cc1.value);
graphics.drawRect(10, 200, 100, 100);
graphics.endFill();

graphics.beginFill(cc2.value);
graphics.drawRect(120, 200, 100, 100);
graphics.endFill();

graphics.beginFill(cc3.value);
graphics.drawRect(230, 200, 100, 100);
graphics.endFill();

graphics.beginFill(cc4.value);
graphics.drawRect(340, 200, 100, 100);
graphics.endFill();
}
}
}[/as]

This is checked into svn now.

http://code.google.com/p/minimalcomps/

Update: Here are a few more possible images that you can use for popups:

swatch1 swatch2 swatch3

Just download them, embed them in your project or import them to your library, instantiate them and assign the instance to model.

15 responses so far

Aug 12 2009

MinimalComps now in wonderfl

Published by under ActionScript,Components,Flash

I just noticed that my Minimal Components have been added to wonderfl.

http://wonderfl.net/blog/2009/08/added-some-libraries-and-checkmate-vol2-started.html

If you’re not familiar with wonderfl, it’s a site that allows you to type ActionScript into the page and compiles and runs it right there. You can then save and share your own creations and modify the creations of others. It contains a bunch of libraries for different effects and functionalities, and now contains my components.

8 responses so far

Apr 06 2008

New MinimalComps. And now on Google Code

Published by under Components,Flash

I know people are using these. It’s fun randomly running into them here and there on the web. I even have people submitting changes and fixes for them. And, I’ve been continuing to add to them. So it’s time to make them a little more accessible. You can now get the MinimalComps set right on Google Code:

http://code.google.com/p/minimalcomps/

As alluded to in recent posts, there are a few new components. Meet the Meter, Rotary Selector, and Indicator Light.

Meter displays a value within a certain range, like an old volt meter.

Rotary Selector allows you to select one of a number of choices. Same basic functionality as a Radio Button Group. You can click on the right or left side of the knob to "turn" it left or right, or click directly on one of the choices to jump to that. Choice labels can be alphabetic (A, B, C), numeric (1, 2, 3), or Roman Numerals (I, II, III). Maximum of 10 choices. I'll probably open it up to custom labels later.

Indicator is either lit or not, or flashing at a user-definable rate. Color is also configurable.

Also, as mentioned earlier, the Pushbutton component now has a "toggle" parameter, which makes the button toggle-able - either up or down, as well as a "selected" property to tell you whether it is up or down (if it is a toggle button).

Oh, and one last thing. I changed the license from Creative Commons, which is actually rather restrictive and not really well-suited for code libraries, to MIT, which seems to be pretty open. Enjoy.

15 responses so far

Apr 05 2008

Popforge + MinimalComps = MinimalSynth

Published by under Components,Flash

A couple of nights ago I downloaded the Popforge audio library and had a play with it. I couldn’t get a peep out of it. But then last night dug around a bit more and found the sample files in the repository. This gave me the kickstart I needed to actually start doing something.

A couple hours later, and I had this:

All I'm using is the AudioBuffer class to play back a set of samples based on various settings of sliders. When the set is finished, I jump to the next slider in the sequencer and crete the next set of samples. As I'm creating the samples, I'm also drawing the graph.

I know nothing about sound, but I know a bit about trig and how to manipulate a sine wave. 🙂 There are probably names for the various things I'm doing. No idea. I just know it has a certain look and makes a certain sound. Pretty neat.

Also, you can see a new MinimalComp, the IndicatorLight, and a new feature of the PushButton - it is toggleable. I have a couple other new MinimalComps I'll be releasing soon too. Personally, this is the exact type of app I had in mind when creating the components. So this is especially fun for me.

Eventually, I'd like to see if I could begin to replicate something like the Kaossilator in Flash! Or at least a small percentage of it. 🙂 If anyone has a spare Kaossilator kicking around, or a couple hundred bucks to donate to the research, send it my way!

10 responses so far

Jan 16 2008

MinimalComps v0.91

Published by under Components,Flash

Get the new version here: MinimalComps v0.91

A few additions and changes. Now you see the VUISlider and HUISlider, which contain a label, slider and value label with settable precision, and a basic Text component. Many of the components take another optional parameter in the constructor for the initial value or label of the component, so you can now set up a button even easier:

[as]new PushButton(this, 10, 10, “Click Me”, onClick);[/as]

I know this is an API change that will break earlier code, which is a big no-no, but screw it, I don’t think that many people are using these things yet. 🙂

I messed around a while trying to get the SWC to work with CS3, without much luck. I could create a component SWC in CS3 and get it to show up in the components panel. And by dragging that into the library, the component classes were available, but still no font. Best bet is to install the PF Ronda Seven font on your system, then add a font symbol to your FLA library and export it first frame, then add the class path to your FLA. That works for sure.

Also, I moved from a direct call to draw() to a invalidate-and-wait-a-frame method. This was part of my trying to get layout containers working. If you see any glitches in rendering, let me know.

Someone asked me in the comments of the earlier post, why do I bother doing something like this, when there are “tons” of other solutions out there I could contribute to. Well first of all, I’d like to see the “tons” of other non-Flex, AS3 UI components. Other than AsWing (which is the only one the commenter mentioned by name) and the CS3 components, I don’t know of any other packages that fit that bill.

Also, I’m going in a very different direction with these components, as I think is obvious. These are not the kind of things you’d probably want to use on a large, enterprise level RIA. But I think they are awesome for quick apps, experiments, proof of concept pieces, etc. From the amount of positive responses I’ve gotten on these, they definitely seem to fill a niche. In fact, it’s the positive responses that got me to do more work on them, so if you want more, keep it up. 😉

I’ll probably get the source up on Google Code over the weekend, as I’m starting to get requests for that.

15 responses so far

« Newer posts Older posts »