View Full Version : JQuery (problem with communication between javascript & actionscript)

03-16-2009, 07:11 PM
Hi everyone from codingforums,

I am a student interaction design and for my portfolio website http://www.marnixdesigns.com (http://www.marnixdesigns.com) I am desperately looking for help from an expert in webdevelopment. Knowledge about actionscript2.0 or 3.0/PHP/Javascript(JQuery) required.

I am starting to think I have picked something out of my league and hope someone here can help me as none of the teachers I have on my college can help me out.

It is a problem which is really hard to test on whether it's working or detecting where the problem lies. Now I am using Jquery for my portfolio and I am using the Agile carousel plugin to rotate my content through the website. The handy thing from this plugin is that it creates slides out of .swf /images/html files placed in one folder /slides/ and allows you to rotate through pause, play, autoplay, rotate from first to last and other way around. The creation of these flash slides is done through the following .PHP code:

The PHP code

case 'swf_slide':
$size = getimagesize("$slide_directory/$slide_file");
if ($first_slide_is_intro == 'yes') {

if ($counter == 1) {
echo "<div class='intro' id='intro'>\n";

} else {
$counter_w_intro = $counter - 1;
echo "<div class='slide' id='slide_$counter_w_intro'>\n";

} else if ($first_slide_is_intro != 'yes') {
if ($counter == 1) {

echo "<div class='slide' id='slide_$counter'>\n";
echo "<object type='application/x-shockwave-flash' data='$slide_directory/$slide_file' width='$size[0]' height='$size[1]'>\n";
echo "<param name='id' value='flash_slide_$counter'<param name='play' value='true' <param name='quality' value='best'<param name='movie' value='$slide_directory/$slide_file'$close_tag<param name='WMode' value='opaque'$close_tag\n</object>\n";
echo "</div>\r";
} else {
echo "<div class='slide' id='slide_$counter'>\n"; //else if
echo "<object type='application/x-shockwave-flash' data='$slide_directory/$slide_file' width='$size[0]' height='$size[1]'>\n";
echo "<param name='id' value='flash_slide_$counter'<param name='play' value='false' <param name='quality' value='best'<param name='movie' value='$slide_directory/$slide_file'$close_tag<param name='WMode' value='opaque'$close_tag\n</object>\n";
echo "</div>\r";

It preloads all slides and once ready you have a nice slideshow with no stops/loading time in between. Though the problem with swf files is that you define in its embed code whether they autoplay or not with >> param name= play value = false or true
Now for the first slide which is a swf file I defined that it needs to autoplay once loaded. But for all others I do not wish for them to play till the user actually arrives on the slide containing that flash file. So what is needed is communication between Javascript and Actionscript. Which is most definitely possible with ExternalInterface.addCallback in Actionscript and Externalinterface.call to obtain values from actionscript with javascript.

Problem lies in where to put the function call. And how to setup the right pathway in addressing the right flash file. And catching any arguements comming along in the actionscript. As I do not want all flash files to play.

I am quite sure this should be put near the end of the Skip function.
So with that I wish to send next_slide_id_number to the .swf on which it follows by checking if the next_slide_id_number equals its own id which I can easily define in its code with a variable.
Then if the flash file is already playing it should stop playing and rewind.
And after that play the file and stop at last frame.

Currently my slide file names are like "number".extension so 1.swf = first slide. 2.html = 2nd slide etc etc

echo "<param name='id' value='flash_slide_$counter'

I think this code snippet should give the embed/object an id so it can be addressed easily though any outside programming languages in this case javascript, this is a uncertainty so this is place number 1 where the problem might be.

Then I thought it should be able to address the .swf files by the following javascript code piece, I am uncertain about this so this is second place where the problem might be:

var flashslide = window.flash_slide_+next_slide_id_number || document.flash_slide_+next_slide_id_number

And then for the actionscript I really have no clue on how this should be structured.

First frame with code and a movieclip that contains the entire movie as symbol (btw I don't know which code exactly as the example I tried from David Flanagans definitve guide for javascript didn't work for me) So here is definitely still a problem.

This is the actionscript I tried with having not just 1 frame containing a movieclip but just the actual timeline for the full movie.

import flash.external.ExternalInterface;


So well this is probably location number 3 where the problem could be, but as I said it's hard to test as it's 3 different files we are trying to communicate too and also 3 different languages.

For anyone up to the challenge of helping me below is a small portion of the javascript but this is actually the code that handles which slide is comming up next, and manages how to rotate the slides. And sets the value of curr_slide_id_number to the one of next_slide_id_number after it has done the animation.

The Javascript

function rotate_slides() {
function transition_slides() {
// transition slides
if (curr_slide_id != button_class) {
if (transition_type == 'fade') {
} else if (transition_type == 'no_transition_effect') {
} else if (transition_type == 'scroll_right') {
} else if (transition_type == 'carousel') {
} else if (transition_type == 'blind' || transition_type == 'clip' || transition_type == 'drop' || transition_type == 'explode' || transition_type == 'fold' || transition_type == 'puff' || transition_type == 'slide' || transition_type == 'scale' || transition_type == 'pulsate') {
} else {
} // else
}; // if
curr_slide_id_number = next_slide_id_number;
function make_curr_slide_id() {
curr_slide_id = button_class;
} // transition_slides()

function animate_slides() {} // animate_slides()
} // rotate_slides()
function change_button_class(button_class) {
$("#slide_buttons li").removeAttr("id");
$("#slide_buttons li").each(function() {
if ($(this).attr("class") == button_class) {
$(this).attr("id", "button_selected");
} // if
} // function
); // each
} // change_button_class
// functions for pause button
$(".pause_button").click(function() {
if (slideshow_paused == "paused") {
// skip to next slide
if (defaults.timer_on == "yes") {
slideshow_timer = setInterval("skip('next')", defaults.timer_length);
} //if
slideshow_paused = "not_paused";
$("#pause_button span").html("pause");
$(this).attr("class", "pause_button");
} else if (slideshow_paused == "not_paused") {
slideshow_paused = "paused";
$(this).attr("class", "paused_button");
} // function
) // click

skip = function(direction) {
// identify next slide class
curr_slide_id_string = curr_slide_id.toString();
split_curr_slide_id_string = curr_slide_id.split("_");
curr_slide_id_string = split_curr_slide_id_string.pop();
curr_slide_id_number = parseFloat(curr_slide_id_string);
if (direction == 'next') {
next_slide_id_number = curr_slide_id_number + 1;
if (defaults.transition_type == 'carousel') {
the_index_to_use = curr_slide_id_number - 1;
next_slide_id_number = next_slidestop_array[the_index_to_use];
} else if (direction == 'prev') {
next_slide_id_number = curr_slide_id_number - 1;
if (defaults.transition_type == 'carousel') {
the_index_to_use = curr_slide_id_number - 1;
next_slide_id_number = prev_slidestop_array[the_index_to_use];
} else if (direction == 'first') {
next_slide_id_number = slide_id_array.length;
curr_slide_id_number = 1;
} else if (direction == 'last') {
next_slide_id_number = 1;
curr_slide_id_number = slide_id_array.length;
} else {
next_slide_id_number = direction;
next_slide_id = "slide_" + next_slide_id_number;
// if next slide is after the last slide, then go to first slide
if (next_slide_id_number > slide_id_array.length) {
next_slide_id = "slide_1";
curr_slide_id_number = slide_id_array.length;
next_slide_id_number = 1;
// if next slide is before the first slide, then go to first slide
} else if (next_slide_id_number < 1) {
next_slide_id = "slide_" + slide_id_array.length;
next_slide_id_number = slide_id_array.length;
} // else
button_class = next_slide_id;
// animate to next slide
if (defaults.slide_number_display == "yes") {
// disable first and last buttons
if ((defaults.disable_on_first_last == 'yes' && ((next_slide_id_number == slide_id_array.length) || (next_slide_id_number == slide_id_array.length - num_slides_vis + 1)))) {
$('#next_button').attr('class', 'next_button_disabled');
$('#hover_next_button').attr('class', 'hover_next_buttondisabled');
$('#last_button').attr('class', 'last_buttondisabled');
} else {
$('#next_button').attr('class', 'next_button');
$('#hover_next_button').attr('class', 'hover_next_button');
$('#last_button').attr('class', 'last_buton');

if ((defaults.disable_on_first_last == 'yes' && ((next_slide_id_number == 1) || (next_slide_id_number == num_slides_vis)))) {
$('#prev_button').attr('class', 'prev_button_disabled');
$('#hover_prev_button').attr('class', 'hover_prev_button_disabled');
$('#first_button').attr('class', 'first_button_disabled');
} else {
$('#prev_button').attr('class', 'prev_button');
$('#hover_prev_button').attr('class', 'hover_prev_button');
$('#first_button').attr('class', 'first_button');
} //skip

Any help or thoughts/ideas are welcome though I have tried so many things that I am starting to wonder whether it's me being dumb or that it's just not possible to do what I am trying.

And for anyone going to say why not make everything in flash? Answer "I have no knowledge at all of actionscript".

And the whole idea behind the slide show is that I can make a "site" tour where I can present my works in a way a actual presentation would work.

Thank you very much to anyone putting time into trying to figure this one out!

03-17-2009, 11:27 AM
If anyone thinks he needs more code from me to have a clue on how to fix this please leave a message. It's just that the max post size is 20000 characters and my code is over 50000.

03-18-2009, 11:05 PM
Bump in the hope for help still

03-20-2009, 12:48 PM
Found this example on Adobe's site

ActionScript 3.0 Language and Components Reference (http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/external/ExternalInterface.html)


package {
import flash.display.Sprite;
import flash.events.*;
import flash.external.ExternalInterface;
import flash.text.TextField;
import flash.utils.Timer;
import flash.text.TextFieldType;
import flash.text.TextFieldAutoSize;
public class ExternalInterfaceExample extends Sprite {
private var input:TextField;
private var output:TextField;
private var sendBtn:Sprite;
public function ExternalInterfaceExample() {
input = new TextField();
input.type = TextFieldType.INPUT;
input.background = true;
input.border = true;
input.width = 350;
input.height = 18;
sendBtn = new Sprite();
sendBtn.mouseEnabled = true;
sendBtn.x = input.width + 10;
sendBtn.graphics.drawRoundRect(0, 0, 80, 18, 10, 10);
sendBtn.addEventListener(MouseEvent.CLICK, clickHandler);
output = new TextField();
output.y = 25;
output.width = 450;
output.height = 325;
output.multiline = true;
output.wordWrap = true;
output.border = true;
output.text = "Initializing...\n";
if (ExternalInterface.available) {
try {
output.appendText("Adding callback...\n");
ExternalInterface.addCallback("sendToActionScript", receivedFromJavaScript);
if (checkJavaScriptReady()) {
output.appendText("JavaScript is ready.\n");
} else {
output.appendText("JavaScript is not ready, creating timer.\n");
var readyTimer:Timer = new Timer(100, 0);
readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);
} catch (error:SecurityError) {
output.appendText("A SecurityError occurred: " + error.message + "\n");
} catch (error:Error) {
output.appendText("An Error occurred: " + error.message + "\n");
} else {
output.appendText("External interface is not available for this container.");
private function receivedFromJavaScript(value:String):void {
output.appendText("JavaScript says: " + value + "\n");
private function checkJavaScriptReady():Boolean {
var isReady:Boolean = ExternalInterface.call("isReady");
return isReady;
private function timerHandler(event:TimerEvent):void {
output.appendText("Checking JavaScript status...\n");
var isReady:Boolean = checkJavaScriptReady();
if (isReady) {
output.appendText("JavaScript is ready.\n");
private function clickHandler(event:MouseEvent):void {
if (ExternalInterface.available) {
ExternalInterface.call("sendToJavaScript", input.text);


<!-- saved from url=(0014)about:internet -->
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
var jsReady = false;
function isReady() {
return jsReady;
function pageInit() {
jsReady = true;
document.forms["form1"].output.value += "\n" + "JavaScript is ready.\n";
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
function sendToActionScript(value) {
function sendToJavaScript(value) {
document.forms["form1"].output.value += "ActionScript says: " + value + "\n";
<body onload="pageInit();">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="ExternalInterfaceExample" width="500" height="375"
<param name="movie" value="ExternalInterfaceExample.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="ExternalInterfaceExample.swf" quality="high" bgcolor="#869ca7"
width="500" height="375" name="ExternalInterfaceExample" align="middle"
play="true" loop="false" quality="high" allowScriptAccess="sameDomain"

<form name="form1" onsubmit="return false;">
<input type="text" name="input" value="" />
<input type="button" value="Send" onclick="sendToActionScript(this.form.input.value);" /><br />
<textarea cols="60" rows="20" name="output" readonly="true">Initializing...</textarea>


Guess from here I will work my way back and break this code down, once I found the solution I will post code here, guess some might be of interest to others.