Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    MVP
    MVP is offline
    New to the CF scene
    Join Date
    Mar 2009
    Location
    The Netherlands
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post JQuery (problem with communication between javascript & actionscript)

    Hi everyone from codingforums,

    I am a student interaction design and for my portfolio website 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

    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";
                        
    $counter++;               
                        } 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";
                        
    $counter++;
                        }
                } 
    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

    PHP Code:
    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:

    Code:
                        var flashslide = window.flash_slide_+next_slide_id_number || document.flash_slide_+next_slide_id_number
                        flashslide.nextflashslide(curr_slide_id_number,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.

    Code:
    import flash.external.ExternalInterface;
    
    ExternalInterface.addCallback("nextflashslide",null,function(curr_slide_id_number,next_slide_id_number){
    	if(next_slide_id_number==3){
    		this.play();
    	}
    });
    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


    Code:
                    function rotate_slides() {
                        function transition_slides() {
                            // transition slides
                            if (curr_slide_id != button_class) {
                                if (transition_type == 'fade') {
                                    fade_transition();
                                } else if (transition_type == 'no_transition_effect') {
                                    no_effect_transition();
                                } else if (transition_type == 'scroll_right') {
                                    scroll_right_transition();
                                } else if (transition_type == 'carousel') {
                                    carousel_transition();
                                } 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') {
                                    ui_effects_transition();
                                } else {
                                    no_effect_transition();
                                } // else
                            }; // if
                            curr_slide_id_number = next_slide_id_number;
                            function make_curr_slide_id() {
                                curr_slide_id = button_class;
                            };
                            make_curr_slide_id();
                        } // transition_slides()
                        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
                            skip('next');
                            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") {
                            clearInterval(slideshow_timer);
                            slideshow_paused = "paused";
                            $(this).attr("class", "paused_button");
                            pause();
                        }
                    } // 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
                        rotate_slides();
                        change_button_class(button_class);
                        if (defaults.slide_number_display == "yes") {
                            update_slide_number_display();
                        }
                        change_slide_caption();
                        // 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!
    Last edited by MVP; 03-16-2009 at 07:21 PM.

  • #2
    MVP
    MVP is offline
    New to the CF scene
    Join Date
    Mar 2009
    Location
    The Netherlands
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    MVP
    MVP is offline
    New to the CF scene
    Join Date
    Mar 2009
    Location
    The Netherlands
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump in the hope for help still

  • #4
    MVP
    MVP is offline
    New to the CF scene
    Join Date
    Mar 2009
    Location
    The Netherlands
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Found this example on Adobe's site

    ActionScript 3.0 Language and Components Reference


    Actionscript:
    Code:
    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;
                addChild(input);
                sendBtn = new Sprite();
                sendBtn.mouseEnabled = true;
                sendBtn.x = input.width + 10;
                sendBtn.graphics.beginFill(0xCCCCCC);
                sendBtn.graphics.drawRoundRect(0, 0, 80, 18, 10, 10);
                sendBtn.graphics.endFill();
                sendBtn.addEventListener(MouseEvent.CLICK, clickHandler);
                addChild(sendBtn);
                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";
                addChild(output);
                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);
                            readyTimer.start();
                        }
                    } 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");
                    Timer(event.target).stop();
                }
            }
            private function clickHandler(event:MouseEvent):void {
                if (ExternalInterface.available) {
                    ExternalInterface.call("sendToJavaScript", input.text);
                }
            }
        }
    }
    HTML/Javascript

    Code:
     <!-- saved from url=(0014)about:internet -->
     <html lang="en">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>ExternalInterfaceExample</title>
     <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) {
             thisMovie("ExternalInterfaceExample").sendToActionScript(value);
         }
         function sendToJavaScript(value) {
             document.forms["form1"].output.value += "ActionScript says: " + value + "\n";
         }
     </script>
     </head>
     <body onload="pageInit();">
     
         <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                 id="ExternalInterfaceExample" width="500" height="375"
                 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
             <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"
                 type="application/x-shockwave-flash"
                 pluginspage="http://www.macromedia.com/go/getflashplayer">
             </embed>
         </object>
     
         <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>
         </form>
     
     </body>
     </html>
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •