Screen Shake using the Spry Javascript effect library.

Step 1 -- Download the Spry library from Adobe

 

Step 2 -- Upload to your webserver "SpryEffects.js" -- There are many interesting and useful functions in the Spry framework but we are only concerned with making the screen shake at this time.

 

Step 3 -- View the source for this page and note the 3 Javascript calls.

2 of them are in the section above the page <head>

<script type="text/javascript" src="scripts/SpryEffects.js"></script>


<script type="text/javascript">
function Shake()
{
vitApp.start()
}
</script>

One of them is in the <body> right after the embedding code for for the Vitalize file.

<script type="text/javascript">
var vitApp = new Spry.Effect.Shake('game');
</script>

 

Step 4 -- One very important item to note is we used a <div> around our embed code and the container has an "id"

<div align="center" class="container" id="game">

This allows the javascript to know what to shake.

 

Step 5 -- Inside your Vitalize file you need to add a Vitalize plug in object

You can then use the action "Javascript - Call Function". The function we want to call is named "Shake"

Notice this is the same name as the 3rd Javascript function above.

Download MFA source file for the game

Notes: Thanks to Andrew from Gwerdy for his help on using this with Vitalize.