ShiVa Flash: JavaScript to AS3 to ShiVa – ShiVa Engine

ShiVa Flash: JavaScript to AS3 to ShiVa

In this tutorial, we will learn how to manipulate a running ShiVa 3D FLASH application by calling DefaultUser-Events. For our example, we have set up an event called onProjectorEvent in our main game AImodel that will change the projector map in our testgame.

Believe it or not, this is all that is required of you to do inside ShiVa. Export the game as STK with the DefaultTarget setting and you can close the Editor.

UAT Project Build

Export your game as STK and load it into the the UAT. in “Step 2″, choose “Project”:

Making a HTML/Javascript Button

We want to control the projector map with a button defined in html/js. Let’s open the HTML file that was generated by the project build, and add a button:

<button onclick="clicker();">Outside ShiVa: Click this HTML button
to connect a js function to Flash to send a command to ShiVa!</button>

Now we have to create a function “clicker()” that gets called once the button gets pressed. the JavaScript code for that is in the HEAD section of the document.

<!-- js bridge to flash and ultimately shiva -->
<script type="text/javascript">
	function clicker() {
		var flashObj = document.getElementById('Main');

“Main” is the default ID for the ShiVa FLASH content, and sentfromjs() will be the function we capture inside our AS3 script.

As3 External Interface and Callback

In order to capture any JS input in AS3, we need to import the “external” library package at the bottom of the “import” list (line 14).

import flash.external.*;

We have to initialize our callback once. I chose the onEngineInitialized ( ) function and added the interface callback in line 122:

private function onEngineInitialized ( ) : void
    	addEventListener ( Event.ENTER_FRAME, onEnterFrame ) ;
	//-- insert callback to receive command from js
	ExternalInterface.addCallback( "sentfromjs", sendmetoshiva );

“sentfromjs” equals the function name in JS, while the second parameter sendmetoshiva is the name of the as3 function we will be calling. It’s time to write the sendmetoshiva function, where all the magic happens!


The public function sendmetoshiva () in line 171 calls Bridge.sendEventToDefaultUser, which is the function that bridges as3 with ShiVa. The prototype of that function is:

public static function sendEventToDefaultUser (
_args:Array ) : void

While _aimodel and _handler are strings that refer to the Current User AImodel name and the contained handler respectively, _args is an array and follows the onEngineEvent rules for parameters:

Bridge.sendEventToDefaultUser (
[kVarTypeString, "additional_arg_0", kVarTypeString, "additional_arg_1"] )
// for parameters: it follows the same rules as onEngineEvent:
// const kVarTypeNil       : int = 0 ;
// const kVarTypeNumber    : int = 1 ;
// const kVarTypeString    : int = 2 ;
// const kVarTypeBoolean	: int = 3 ;
// parameters come in pairs: first "type", then "value".

So, our public function sendmetoshiva () in line 171 looks like this:

public function sendmetoshiva () : void
Bridge.sendEventToDefaultUser ( "SimpleProjector_Main", "onProjectorEvent", null )
//no args to send

To pass arguments for JS to AS3, add parameters sendmetoshiva (), like:

public function sendmetoshiva (_s:String) : void
if _s == "something" {
Bridge.sendEventToDefaultUser ( "SimpleProjector_Main", "onProjectorEvent", null )
//no args to send, but we could send _s if we wanted

Building the SWF application

Run the BAT file in your project build directory to generate your SWF application.

It is recommended to open a CMD window first, CD to the project folder and run the BAT from there:

Demo Time

Click the image below to play the example in your web browser!

Azoth Performance Boost

With the latest flash built, we were able to boost performance by over 500%. Still, don’t forget to AZOTH your projects! Azoth is a Windows console (Win32 command-line) application that lets you replace method calls to a certain AS3 class (included with Azoth) with equivalent Alchemy opcodes in a SWF file. This provides even better performance for your game! Simply drag your game SWF onto the Azoth.exe binary and let it do its magic…

  • slackBanner