basebutton-2.lzx

<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>

Cross References

Resources

Name	Source	Image
mybutton_rsrc	resources/basebutton/button-up.png
	resources/basebutton/button-over.png
	resources/basebutton/button-down.png