Examples

Using the jQuery SWFObject plugin is as easy as jQuery itself. Just write the name of flash document you want to use and where to put it. It works using jQuery selectors.

Open this example in a new window
<script>
$(document).ready(
	function() {
		$('#myFlash').flash('fireworks.swf');
	}
);
</script>

<div id="myFlash">
	The "You don't have flash" message.
	Or any other backup content.
</div>
The "You don't have flash" message. Or any other backup content.

You can write flashvars like objects with the jQuery SWFObject plugin.

Open this example in a new window
<script>
$(document).ready(
	function () {
		// #myFlashVars is the selector
		$('#myFlashVars').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="myFlashVars"></div>

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.

Open this example in a new window
<div style="text-align: center;">
	<div id="celerant" style="padding: 10px;"></div>
	<input type="button" onClick="$('#celerant').flash({swf:'sine.swf',height:250,width:300});" value="Add Flash">
	<input type="button" onClick="$('#celerant').flash().remove();" value="Remove Flash">
</div>

You can also prepare the Flash document before page load for even-better performance.

Open this example in a new window
<script>
flashMovieWithVars = $.flash.create(
	{
		swf: 'test_flashvars.swf',
		flashvars: {
			name1: 'jQuery',
			name2: 'SWFObject',
			name3: 'Plugin'
		}
	}
);
			

$(document).ready(
	function () {
		$('#flashMovieWithVars').html(flashMovieWithVars);
	}
);
</script>

<div id="flashMovieWithVars"></div>

In this example I'm interacting with flash through javascript.

Open this example in a new window
<script>
flashMovie = null;

$(document).ready(
	function () {
		flashMovie = $('#flashInteract .movie');

		flashMovie.flash(
			{
				swf: 'javascript-flash-interaction.swf',
				width: 481,
				height: 86,
				play: false,
				flashvars: {
					message: 'I come from Flash.'
				},
			}
		);
	}
);

function play() {
	flashMovie.flash(
		function() {
			this.Play();
		}
	);
}

function pause() {
	flashMovie.flash(
		function() {
			this.StopPlay();
		}
	);
}

function firstFrame() {
	flashMovie.flash(
		function() {
			this.GotoFrame(0);
		}
	);
}

function lastFrame() {
	flashMovie.flash(
		function() {
			this.GotoFrame(9);
		}
	);
}

function prevFrame() {
	flashMovie.flash(
		function() {
			var currentFrame = this.TGetProperty('/', 4),
				previousFrame = parseInt(currentFrame) - 2;

			if (previousFrame < 0) {
				previousFrame = 9;
			}

			this.GotoFrame(previousFrame);
		}
	);
}

function nextFrame() {
	flashMovie.flash(
		function() {
			var currentFrame = this.TGetProperty('/', 4),
				nextFrame = parseInt(currentFrame);

			if (nextFrame >= 10) {
				nextFrame = 0;
			}

			this.GotoFrame(nextFrame);
		}
	);
}

function sendToFlash() {
	flashMovie.flash(
		function() {
			this.SetVariable('/:message', document.getElementById('data').value);
		}
	);
}

function getFromFlash() {
	flashMovie.flash(
		function() {
			document.getElementById('data').value = this.GetVariable('/:message');
		}
	);
}
</script>

<div id="flashInteract">
	<div class="movie"></div>

	<p style="font-family: arial;">
		<input type="button" onclick="firstFrame();" value="<<" />
		<input type="button" onclick="prevFrame();" value="<" />
		<input type="button" onclick="play();" value="PLAY" />
		<input type="button" onclick="pause();" value="PAUSE" />
		<input type="button" onclick="nextFrame();" value=">" />
		<input type="button" onclick="lastFrame();" value=">>" />
	</p>

	<p>
		<input type="text" value="I come from javascript." size="20" onfocus="this.select();" id="data" /> 
		<input type="button" onclick="sendToFlash();" value="Send to Flash" />
		<input type="button" onclick="getFromFlash();" value="Get from Flash" />
	</p>
</div>