0 ) { if ( this.subviews) { this.maxframes = this.subviews[0].totalframes; if (this.onresourceviewcount) { this.onresourceviewcount.sendEvent(); } } } } ]]> = this.downResourceNumber ) this.showDown(); else if ( this._msin && this.maxframes >= this.overResourceNumber) this.showOver(); else this.showUp(); ]]> 0 ) { for (var i = 0;i < resourceviewcount; i++ ) { this.subviews[i].setAttribute('frame', r); } } else { super.setAttribute('frame', r); } ]]> if ( this._enabled ){ this.showDown( ); } if ( this._enabled ){ if ( this.onclick ){ this.onclick.sendEvent(); } this.showUp( ); } if ( this.isinited ) { this.maxframes = this.totalframes; this._callShow(); } // now that subviews are created reset resourceviewcount super.init(); this.setResourceViewCount(this.resourceviewcount); this._callShow(); this.setAttribute( '_msin' , true ); this._callShow(); this.setAttribute( '_msin' , false ); this._callShow(); this.setAttribute( '_msdown' , true ); this._callShow(); this.setAttribute( '_msdown' , false ); this._callShow(); this.setAttribute('frame', this.downResourceNumber ); this.setAttribute('frame', this.overResourceNumber ); this.reference = r; if (r != this) this.setAttribute('clickable', false) setTint(this, s.basecolor); Abstract class for making buttons with up-over-down states.

A basebutton is a view that encapsulates the basic event mechanisms of a button (onclick, onmousedown, onmouseover).

There are no visual elements to a basebutton so it requires a multi-frame resource to work correctly.

The example below shows how to construct a basebutton and how to respond to its events.

First, the images that will be used are shown below:

<canvas height="150"> <!-- first create the multi-frame resource and give it a name --> <resource name="mybutton_rsrc"> <!-- first frame MUST be the mouseup state of the button --> <frame src="resources/basebutton/button-up.png"/> <!-- second frame MUST be the mouseover state of the button --> <frame src="resources/basebutton/button-over.png"/> <!-- third frame MUST be the mousedown state of the button --> <frame src="resources/basebutton/button-down.png"/> </resource> <!-- Second, assign the resource to a basebutton tag --> <basebutton resource="mybutton_rsrc"/> </canvas>

Using the example above, the basebutton will appear initially on screen in the 'mouseup' state and it will respond to the mouse events by showing the correct images associated with each event. In order to have the button do more than just switch images, a script needs to be added. There are three basic approaches for creating scripts to be executed by a basebutton once it has been clicked, and these approaches are shown below.

<canvas> <resource name="mybutton_rsrc"> <frame src="resources/basebutton/button-up.png"/> <!-- first frame MUST be the mouseup state of the button --> <frame src="resources/basebutton/button-over.png"/> <!-- second frame MUST be the mouseover state of the button --> <frame src="resources/basebutton/button-down.png"/> <!-- third frame MUST be the mousedown state of the button --> </resource> <!-- APPROACH 1: include a script in the event attribute, onclick --> <basebutton resource="mybutton_rsrc" onclick="this.animate('x', 100, 1000, true)"/> <!-- APPROACH 2: include a script in the onclick attribute that calls a method --> <basebutton resource="mybutton_rsrc" onclick="this.doMyMethod()"> <method name="doMyMethod"> this.animate('x', 100, 1000, true, {motion: 'easeout'}); this.animate('x', -100, 1000, true, {motion: 'easein'}); </method> </basebutton> <!-- APPROACH 3: have the handler respond to the onclick event directly --> <basebutton resource="mybutton_rsrc"> <handler name="onclick"> this.animate('x', 100, 1000, true, {motion: 'easeout'}); this.animate('x', -100, 1000, true, {motion: 'easein'}); </handler> </basebutton> <simplelayout axis="y" spacing="20"/> </canvas>

You can also use these approaches to respond to the other mouse events as well, if there is a need to do more then just switch images.