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

 < previous 

 

Javascript to Flash Communication

 

Some board functions can be controlled by sending messages to the tool from javascript.

Sending messages from Javascript to Flash (a board) is not supported by all browsers. Browsers supporting it are Internet Explorer 5.0 and higher, Netscape 8.0 and higher, Mozilla 1.7.5 and higher, Firefox 1.0 and higher, Safari 1.3 and higher.

The Full Screen mode must be activated by a user action (mouse click). It cannot be activated with external javascript commands. This is a flash security feature that the tool itself cannot work around.

 


Web Page Preparation

Before using javascript, give each board in the web page a unique ID to determine which board to send messages to. Add the ID in 3 different places in the flash code of each board:

'FlashVars', 'board_id=my_board_1&xml_source=sample.xml',   
'id', 'my_board_1',
'name', 'my_board_1',

 


Done Loading?

If a javascript message is sent to the board before the board is fully loaded, some browsers generate a "not a function" error. To verify that the board is fully loaded before sending it javascript messages, add an action inside any board object to alert javascript when it has been fully loaded:

<slickboard>
 
   <object>
   
      <rect x='200' y='80' width='80' height='20' />   
      
      <!-- send javascript a message to alert it that the object is fully loaded -->
      <action>
         <item type='javascript' call="my_function('done loading')" event='timer' />   
      </action>
      
   </object>   
   
</slickboard>

Similar errors might be generated if the tool is on a hidden DIV or when the tool is outside of the javascript reach. If you hide the tool through DIVs, some browsers hide it from javascript even when it becomes visible again. To fix this problem, both the javascript function and the tool must be part of the same web page component and ready to communicate with each other.

 


Update URL

To update an object from javascript by sending it an update URL:

<!-- web page -->
<HTML>


<SCRIPT LANGUAGE=JavaScript>
  
   function My_Function (){
      
      // the ID of the object to update
      target = "red_square";
      
      // the update url to download the xml update from
      url = "http://your_server/update.xml";
   
      // show a spinning wheel while downloading the update
      spinning_wheel = true; 
   
      // number of seconds to wait before a download times out
      timeout = 30; 
   
      // number of times to try downloading before displaying an error
      retry = 2; 
   
      document.my_board_1.Update_URL( target, url, spinning_wheel, timeout, retry );   

   }
 
</script>


<BODY bgcolor="#FFFFFF">

<!-- your board here -->

</BODY>
</HTML>

 


Update XML

To update an object from javascript by sending it XML code:

<!-- web page -->
<HTML>


<SCRIPT LANGUAGE=JavaScript>
  
   function My_Function(){
      
      // the ID of the object to update
      target = "red_square";
      
      // the update xml code without line breaks
      xml = "<object><rect fill_color='FF0000' /></object>";   
   
      document.my_board_1.Update_XML( target, xml );   

   } 
</script>


<BODY bgcolor="#FFFFFF">

<!-- your board here -->

</BODY>
</HTML>

 


Javascript Source

To create a board with javascript without using an external XML source file:

 

1. Omit XML source from FlashVars and give your board a unique ID in the web page:

<!-- web page -->

'FlashVars', 'board_id=my_board_1', 
'id', 'my_board_1',
'name', 'my_board_1',

 

2. When the XML source is omitted, the tool automatically sends a message to a Loaded_Board javascript function. This function can be used to send the XML code back to the tool like this:

<!-- web page -->

<SCRIPT LANGUAGE=JavaScript>
  
   function Loaded_Board( id ){

      if( id=="my_board_1" ){ 
         
         // the ID of the object to update  
         // in this case, this must be set to "slickboard" to update the entire board    
         target = "slickboard";
      
         // the board's xml code without line breaks
         xml = "<slickboard><object><rect fill_color='FF0000' /></object></slickboard>";   
   
         document.my_board_1.Update_XML( target, xml );
      
       }
   }
 
</script>

 


Print

To print a board from javascript:

<!-- web page -->
<SCRIPT LANGUAGE=JavaScript>
  
   document.my_board_1.Print();   
 
</script>

 


Slideshow

To control a board's slideshow from javascript:

<!-- web page -->
<SCRIPT LANGUAGE=JavaScript>
  
   //play the slideshow  
   document.my_board_1.Slideshow_Play(); 
   
   //pause the slideshow  
   document.my_board_1.Slideshow_Pause(); 
   
   //toggle the slideshow  
   document.my_board_1.Slideshow_Toggle(); 
   
   //jump to the next slide  
   instant = false;
   document.my_board_1.Slideshow_Forward( instant ); 
   
   //jump to the previous slide 
   instant = false; 
   document.my_board_1.Slideshow_Backward( instant ); 
   
   //jump to a particular slide  
   slide = 2;
   instant = false;
   document.my_board_1.Slideshow_Jump( slide, instant );   
 
</script>

 

 

 < previous 


Copyright © 2010-2017, maani.us