Examples
It's easy. Tell the jQuery SWFObject plugin what flash document you want to use and where you want to put it. It works using jQuery selectors, like this:
<script src="jquery.core.1-3-2.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.swfobject.1-0-7.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(
function () {
// #flash-example-1 is the selector
$('#flash-example-1').flash(
{
// test.swf is the flash document
swf: 'test.swf'
}
);
}
);
</script>
<div id="flash-example-1"></div>
When we're done, that result should look something like this:
If you like, you can download this example here.
You can also use flashvars with the jQuery SWFObject plugin. It works using like this:
<script src="jquery.core.1-3-2.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.swfobject.1-0-7.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(
function () {
// #flash-example-2 is the selector
$('#flash-example-2').flash(
{
// test_flashvars.swf is the flash document
swf: 'test_flashvars.swf',
// these arguments will be passed into the flash document
flashvars: {
name1: 'jQuery',
name2: 'SWFObject',
name3: 'Plugin'
}
}
);
}
);
</script>
<div id="flash-example-2"></div>
When we're done, that result should look something like this:
If you like, you can download this example here.
In this example I'm using a flash animation made by my friend Celerant.
You can attach flash as an inline onClick event on a button.
<script src="jquery.core.1-3-2.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.swfobject.1-0-7.js" type="text/javascript" charset="utf-8"></script>
<div style="text-align: center;">
<div id="flash-example-3" style="padding: 10px;"></div>
<input onClick="$('#flash-example-3').flash({swf:'sine.swf',height:500,width:600});" value="Add Flash">
<input onClick="$('#flash-example-3').html('');" value="Remove Flash">
</div>
If you like, you can download this example here.
You can also preload the SWFObject injection before ready for even-better performance like this:
<script src="jquery.core.1-3-2.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.swfobject.1-0-7.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
myFlash = $.flash.create(
{
swf: 'test_flashvars.swf',
flashvars: {
name1: 'jQuery',
name2: 'SWFObject',
name3: 'Plugin'
}
}
);
$(document).ready(
function () {
$('#flash-example-4').html(myFlash);
}
);
</script>
<div id="flash-example-4"></div>
If you like, you can download this example here.
In this example I'm interacting with flash through javascript.
Notice how I don't need to specifically target the flash movie's object, it does a quick search for them.
Using this technique, you could target multiple flash movies.
<script src="jquery.core.1-3-2.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.swfobject.1-0-7.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(
function () {
$('#flash-example-5 .movie').flash(
{
swf: 'javascript-flash-interaction.swf',
params: {
play: false
},
flashvars: {
message: 'I come from Flash.'
},
height: 86,
width: 481
}
);
}
);
</script>
<div class="example" id="flash-example-5">
<div class="movie"></div>
<p style="font-family: arial;">
<input type="button" onclick="$('#flash-example-5').flash(function(){this.GotoFrame(0);});" value="<<" />
<input type="button" onclick="$('#flash-example-5').flash(function(){var currentFrame = this.TGetProperty('/', 4), previousFrame=parseInt(currentFrame) - 2; if (previousFrame < 0) {previousFrame = 9;}this.GotoFrame(previousFrame);});" value="<" />
<input type="button" onclick="$('#flash-example-5').flash(function(){this.Play();});" value="PLAY" />
<input type="button" onclick="$('#flash-example-5').flash(function(){this.StopPlay();});" value="PAUSE" />
<input type="button" onclick="$('#flash-example-5').flash(function(){var currentFrame = this.TGetProperty('/', 4), nextFrame = parseInt(currentFrame); if (nextFrame >= 10) {nextFrame = 0;}this.GotoFrame(nextFrame);});" value=">" />
<input type="button" onclick="$('#flash-example-5').flash(function(){this.GotoFrame(9);});" value=">>" />
</p>
<p>
<input type="text" value="I come from javascript." size="20" onfocus="this.select();" id="data" />
<input type="button" onclick="$('#flash-example-5').flash(function(){this.SetVariable('/:message', document.getElementById('data').value)});" value="Send to Flash" />
<input type="button" onclick="$('#flash-example-5').flash(function(){document.getElementById('data').value=this.GetVariable('/:message')});" value="Recieve from Flash" />
</p>
</div>
If you like, you can download this example here.