FListBox - rollOver, rollOut and Double Click

[pragathikanth]

Hi All,

I have a couple of questions here.

1) Is it possible to call a function on rollover and rollout of items in a list box?

2) Is it possible to capture a double click on selection a item in the list box?

Can anyone help me with these two problems? I need to achive this functionality in the listbox.

Thanks for your time

[tyard]

Yes. Find the FSelectableItem in your library:

Flash UI Components > Core Assets - Developer Only > FUIComponent Class Tree > FUI Component SubClasses > FSelectableList

In the init() function, place the code for your handlers:

this.onRollOver = function() {
	trace(this._parent._parent.labels[this.itemNum]);
};

this.onRollOut = function() {};

This function will obviously apply to all items, so you'll have to have to use the itemNum variable to create different actions (if needed).

For a double click, find the setSize method in the same symbol and change the highlight_mc.onPress (around line 65) to be:

this.highlight_mc.onPress = function()
{
	if (this.controller.enable && (getTimer() - this.firstClick < 1000)) {
		this.controller.controller.clickHandler(this.controller.itemNum);
	}
	this.firstClick = getTimer();
}

[djungle]

Hi,
Sorry to barge in, but its kind of related.

Is it possible to get the hand to show (when over the listBox) instead of the arrow?

Thanks

[tyard]

Somewhere in the code you'll find:

xx.useHandCursor = 0;

(xx will be an instance name)

Do a search for "useHand" and you'll find it. Comment this line out and you should get the hand back.

[djungle]

Thanks, Worked like a charm.

[pragathikanth]

Thanks a ton tyard, It works .

What I want to know is how to apply this only to a single component. Or make a custom component so that it does not effect the default functionality of the other components. As I am using list box component in more than one instance. It will not be fesable to edit the actual component itself. Any work around for this.
A custom component with change handlers for on RollOver, onRollOut and, double Click. Where we can set the change handlers from outside insted of defining them in the FSelectableList.

I am not much of a programmer and I do not know how to create custom components I am strugging to get these things to work.

Can you pleas help me with this, how do I go about making a custom component with (rollOver, rollOut and double click) functionality. I would be really greatful for all your help.

Thanks a lot for your time.

[tyard]

Well, I believe you could just extend the component with another movieclip. Just conjecturing, but try to create a new symbol in your library (duplicate the ListBox component symbol so you have all of its contents) and use code like this inside:

#initclip 3

myListBox = function() {
	this.init();
};

var p = myListBox.prototype = new FListBoxClass(); // not sure of the Class name, so double check

p.onRollOver = function() {
	// new code
};

p.onRollOut = function() {
	// new code
};

p.onPress = function() {
	// new code
};

Object.registerClass("myListBox", myListBox);

delete p;

#endinitclip

Be sure to export the symbol as "myListBox". This should create a new symbol that inherits everything from FListBox so you can safely overwrite certain methods.

Again, I'm writing off the top of my head, so this isn't guaranteed to work as written, if at all. It's just a possibility.

[pragathikanth]

Thanks tyard,

I still need to work on that, but what you have suggested makes sense Will get back to you if I face any more problems Thanks again for all the help.

Cheers,
PK

[flashdudette]

Here is an example:
All I wanted was a rollover movieclip that shows a fading in.
Step 1:
Duplicate FListBoxItem in library and call it FCUstomItem (or anything else).

Step2:
Create a movieclip (instance name rollOver_mc) as follow:
- first frame : empty,
- next 4 frames have a fading in.
action for frames:
- frame 1: stop();
- frame 5: stop();
Add this mc into the FCustomItem into a new layer. (make sure the registration point is at the right place so the width will match the listbox).

Step 3:
The class is extended by adding the following code in the FCUstomItem action layer :

#initclip 3
/*
        FCustomItemClass
        EXTENDS FSelectableItemClass
        This is a customized LIst Item.
*/
function FCustomItemClass() {
    this.init();
}
FCustomItemClass.prototype = new FSelectableItemClass();
Object.registerClass("FCustomItemSymbol", FCustomItemClass);

// code for rollOver
FCustomItemClass.prototype.onRollOver = function() {
    this.rollOver_mc.gotoAndPlay(2);
    this.rollOver_mc._width = this.fLabel_mc._width+this.icon_mc._width+15;
};

step 4
Do not forget Linkage Id for FCUstomItem symbol. Go to the library. Right clik on FCUstomItem, clik on linkage, type in identifier:FCustomItemSymbol and check Export in First Frame.


Hope this helps.

[flashdudette]

Sorry about that - You do need to add your onPress function for it to work.