Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ActionScript
Code

Quick Tip: Call jQuery Inside AS3 Using jotAQuery

by
Difficulty:BeginnerLength:ShortLanguages:

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?

jQuery and as3 with jotAQuery

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

jQuery and as3 with jotAQuery

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

jQuery and as3 with 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:

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:

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.