SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Flash to Javascript Communication

 

The javascript action can be used to send messages to any javascript function:

<slickboard>
 
   <!-- a button with an action that calls a javascrpt function -->
   <object>
      <rect x='200' y='80' width='80' height='20' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='200' y='81' width='80' height='20' align_h='center'>Javascript</text>
      <action>
         <item type='javascript' call="my_function('Hello', 100)" />
      </action>
   </object>   
   

   <filter>
      <shadow id='default' />
   </filter>   
</slickboard>

<HTML>

<!-- javascript in the web page -->
<SCRIPT LANGUAGE=JavaScript>
   function my_function( var1, var2 ){               
 		
      alert ("Argument 1: "+var1+". Argument 2: "+var2+".");   
 		
   } 
</script>

<BODY>

<!-- your board here -->

</BODY>
</HTML>

 


Done Loading

To alert javascript that the board or an individual object is done loading, set a timer that sends any message to any javascript function:

<slickboard>
   
   <object>

      <rect x='340' y='20' width='40' height='40' />   
      
      <action>
      
         <!-- timer that sends javascript a message when the object is done loading -->
         <item type='javascript' call="My_Function('done loading')" event='timer' delay='0' />   
         
      </action>
      
   </object> 
 
</slickboard>

 


Slider

To send the value of a slider (after it is released) to javascript, send a message to any function and use _slider_value_ as an argument to be replaced by the tool with an actual value between 0 and 1:

<slickboard>
   
   <!-- slider background -->
   <rect x='350' y='20' width='20' height='150' fill_color='555555' shadow='hole' /> 
   
   
   <!-- blue circle -->
   <object id='blue_circle'>
      <circle x='100' y='75' radius='50' fill_color='8888ff' shadow='low' /> 
   </object>

   
   <!-- blue slider -->
   <object>
      <!-- slider handle -->
      <rect x='340' y='20' width='40' height='40' fill_color='8888ff' shadow='low' state='hit' />   
      
      <!-- constrain the handle vertically -->
      <constrain x='350' y='20' width='20' height='150' reflect='0' />
      
      <action>
      
         <!-- make the handle draggable -->
         <item type='drag' />
         
         <!-- adjust the alpha (transparency) of the blue circle when moving the slider -->
         <item type='adjust_alpha' target='blue_circle' event='slider' />
         
         <!-- send the slider value to the My_Slider javascript function -->
         <!-- replace _slider_value_ with a slider's value (from 0 to 1) -->   
         <item type='javascript' call='My_Slider(_slider_value_)' event='drag_end' />
         
      </action>
      
   </object> 
   
 
   <filter>
      <shadow id='low' distance='1' alpha='.5' blurX='5' blurY='5' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>
   
</slickboard>

<HTML>

<!-- javascript in the web page -->
<SCRIPT LANGUAGE=JavaScript>
   function My_Slider( slider_value ){               
 		
      document.output.slider.value=slider_value;
 		
   } 
</script>

<BODY>

<!-- your board here -->

</BODY>
</HTML>

Slider Value:

 

 

 < previousnext > 


Copyright © 2010-2017, maani.us