The <frame> tag is used to define a single frame of a multi-frame <resource>. A multi-frame resource contains several images which can be toggled among by script commands. For example:

<resource name="mfr">
  <frame src="f1.jpg"/>
  <frame src="f2.jpg"/>
</resource>

Multiple frame tags can be declared consecutively to produce a single resource constructed of an unlimited number of frames. Such composed resources are often used to conveniently implement mouse rollovers, button states, or other UI elements where alternate views of a resource are required. Once a multi-frame resource has been defined and presented within a <view>, the developer can designate which frame is actively visible through the use of the view's setResourceNumber method.

Multi-frame resources can be used in conjunction with components such as <basebutton>, which pre-define complex button behavior using frames designated by the user.

The following example manually implements a simple button with mouse rollover and down state behavior:

<canvas height="120">
  <!-- create the multi-frame resource and give it a name -->
  <resource name="mybutton_rsrc">
      <!-- first frame is the mouseup state of the button -->
      <frame src="../images/basebutton/button-up.png"/>
      <!-- second frame is the mouseover state of the button -->
      <frame src="../images/basebutton/button-over.png"/>
      <!-- third frame is the mousedown state of the button -->
      <frame src="../images/basebutton/button-down.png"/>
  </resource>

  <!-- include the resource in a view with mouse behaviors -->
  <view resource="mybutton_rsrc" onmouseover="setResourceNumber(2)" onmouseout="setResourceNumber(1)" onmousedown="setResourceNumber(3)" onmouseup="setResourceNumber(2)"/>
</canvas>

Flash

HTML5