Communication between Flash and Javascript is something any ActionScript developer should be familiar with; fortunately, there are Classes that help us in the process. Read through this Quick Tip to learn how easy it is!
Step 1: Why Would I Need Javascript?
Interactivity.
From browser integration (back, forward buttons) to full swf manipulation (modifying the actual embedded movie properties, parameters, etc). Both languages are very powerful and can be even more so when you combine them.
Raw Javascript can be called using the External Interface class built-in on ActionScript 3, but imagine the power and simplicity of jQuery and its premade methods and functions. Sounds great, let's see how it's done.
Step 2: ActionScript + jQuery
jotAQuery is an ActionScript port to jQuery that enables the use of jQuery code inside an ActionScript 3 Class. Most of the jQuery methods are available to use, although some can't be implemented.
In order to get jotAQuery to work you will need the compiled Flash movie using the jotAQuery classes and the HTML file where you will embed the swf. You will also need to link the jQuery library to your HTML file.
In the next steps we're going to create a simple example that will fade in a SWF movie using jQuery.
Step 3: Download jotAQuery
Go to the jotAQuery google code page and download the source files. You will need to browse through the source in order to get the three necessary files as they are not marked in the downloads section.
Step 4: ActionScript
Prepare a new ActionScript class and write the following code:
package
{
import flash.display.Sprite;
import com.singuerinc.as3.external.*;
public final class Main extends Sprite
{
public final function Main()
{
/* Example Call */
/* $('#flashContent').slideUp(300); */
/* You can also load code using this syntax */
jQuery.execute
(
<jQuery><![CDATA[
$('#flashContent').css({opacity: 0});
$('#flashContent').animate({opacity: 1}, 2000);
]]></jQuery>
);
}
}
}
Link this file as the document class in your FLA and proceed to the HTML part.
Step 5: HTML
You can use the default HTML file exported by Flash (mark the HTML box in the Publish menu), just link to your jQuery source file:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>jotAQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { width:100%; height:100%; background-color: #ffffff;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:600px; height:300px; margin: 0 auto;}
</style>
<!-- Add jQuery Script-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>
<body>
<div id="flashContent">
...html continues here
Open this file and see the effect live!
Conclusion
Discover the power of jQuery and try different examples of interaction. I hope you liked this Quick Tip, thank you for reading!
Comments