5 Replies Latest reply on May 9, 2009 6:48 AM by Gregory Lafrance

    AS2 SWF inside of Flex

    strayhand
      I need a little assistance correctly loading an external swf file into my flex application.

      I'm not sure where I've gone wrong, but at this point I'm assuming that it's a path error of some sort. The swf file that I'm trying to load is actually a soundslides presentation which was built using AS2 and relies on a flashvar called "project" to feed it the necessary xml document. The flex application is being inserted dynamically into the page using a Jquery plugin.

      Here's a live version of what I'm trying to accomplish. It was built using Jquery and Soundslides, but due to some unforeseen browser complications I've decided to rebuilt the entire widget using Flex instead of Jquery.

      Example 1: Original version using Jquery + Soundslides - Look at the sliding student views section.
      http://www.plu.edu/admission/first-year

      Example 2: Flex + Soundslides - This is a work in progress, and it's the version that I need help with.
      http://dev.plu.edu/admission/home-sv-widget.php

      So basically in example 2 I've got a sequence of jpgs that are set to slide forward at a given time interval. When a user clicks on one of the jpgs the mouse event calls the following method:

      [code]
      // Load Soundslide
      public function loadSoundslide (e:MouseEvent):void
      {
      // Get project id from button id
      var projID:int = currentImage;

      // Create path for loader
      var swfPath:String = basePath + playerPath + "?project=" + basePath + projectsArray[projID];

      //Alert.show(swfPath);

      // Load Soundslide swf
      swfRequest.url = swfPath;
      swfLoader.load(swfRequest);
      wrapper.addChild(swfLoader);

      }
      [/code]

      I thought that this would work but it doesn't seem to be doing the trick. Any thoughts? One more question. Say I get this to work. Would I just call another method for unloading the swf? Attached is my project so that you have a sense of what I'm working on. I'm also going to post a zipfile containing more of the project, the student-views content is rather large so I'm only going to include one of them.
        • 1. Re: SWF inside of Flex
          strayhand Level 1
          So it looks as if loading AS2 into AS3 is a real pain ( Adobe Help). But I was able to find a couple of interesting posts:

          FlashInterface

          AND

          Flex controlling flash

          I'm going to try out flash interface and I'll post my findings. The author has some nice videos that explain the whole setup.
          • 2. AS2 SWF inside of Flex
            strayhand Level 1
            I'm making some progress. Instead of using the load method to load a SWF file into the Flex application, I used the <mx:SWFLoader> tag. I then used ActionScript to change the source and visibility of the SWF.

            I was going to use FlashInterface so that I could click on a close button from the AS2 SWF and call a "hide" method in the Flex SWF. But I must be doing something wrong because I cannot for the life of me get this to work. Has anyone else used the FlashInterface class before?

            You'll find my code for both the flash and flex below. Thanks.

            Flash Code:

            // Import Flash Interface
            import flx.external.FlashInterface;

            // Make the swf public so that it can be called by other swf
            FlashInterface.publish(_root, true);

            // Initialize Soundslide Object
            ss_listen = new Object();
            ss_listen.onSoundslideData = function(project){
            trace(project["headline"]);
            trace(project["credits"]);
            trace(project["totalImages"]);
            trace(project["totalTime"]);
            trace(soundslides.slide_only);
            // Text
            txt_headline.text = project["headline"];
            // Images
            total_images = project["totalImages"];
            if(soundslides.slide_only){
            //the slide show is images only, so use the image numbers instead
            //of the time remaining
            ss_listen.onImageChanged = function(image){
            countdown_txt.text = image.number + "/" + total_images;
            }
            }
            }

            // Parameter Passing via Query String
            soundslides.c_path_to_project = _root.project;

            // Buttons
            btn_play.onRelease = function() {
            soundslides.ss_pause();
            btn_play._x = 400;
            btn_pause._x = 358.4;
            };

            btn_pause.onRelease = function() {
            soundslides.ss_pause();
            btn_pause._x = 400;
            btn_play._x = 358.1;
            };

            btn_close.onRelease = function () {
            soundslides.ss_stop();
            FlashInterface.call(root + ".hideSoundslide");
            }

            Flex Code:

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application
            xmlns:mx=" http://www.adobe.com/2006/mxml"
            layout="absolute"
            backgroundAlpha="0"
            horizontalScrollPolicy="off"
            creationComplete="init();"
            width="380"
            height="264">

            <mx:Style source="sv.css" />

            <mx:Script>
            <![CDATA[
            import flx.external.FlashInterface;
            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.controls.Image;
            import mx.effects.Move;

            // XML
            public var xml:XML;

            // Image Mask
            [Bindable]
            [Embed(source="assets/images/mask-sv.png")]
            private var maskPng:Class;

            // Image variables
            [Bindable]
            public var currentImage:int = 1;
            [Bindable]
            public var nextImage:int;
            [Bindable]
            public var prevImage:int = 1;

            // Project variables
            public var projectsArray:Array = new Array();

            // Base path
            public var basePath:String;

            // Playback options
            public var playerPath:String;
            public var slideDuration:int;

            // Swf Loader
            //public var swfRequest:URLRequest = new URLRequest();
            //public var swfLoader:Loader = new Loader();

            // Misc
            public var interval:uint;
            [Bindable]
            public var alertDump:String;

            // Intialize
            public function init():void
            {
            // Initialize Flash Interface
            FlashInterface.publish(this, true);

            // Setup Sounslide
            soundSlide.visible = false;

            // Setup XML
            var xmlDefault:String = "assets/student-views/home.xml";
            var xmlPath:String = Application.application.parameters.xmlpath;

            if(xmlPath != null)
            {
            xmlDefault = xmlPath;
            }

            var loader:URLLoader = new URLLoader(new URLRequest(xmlDefault));
            loader.addEventListener(Event.COMPLETE, onLoaded);
            }

            // XML has been loaded
            public function onLoaded (e:Event):void
            {
            // Assign the XML data to a variable
            xml = new XML(e.target.data);

            // Setup options
            basePath = xml.setup.site.basePath;
            playerPath = xml.setup.playback.playerPath;
            slideDuration = xml.setup.playback.slideDuration;

            // Create images/buttons
            var idCount:uint = 1;

            for each (var property:XML in xml.items.item)
            {
            // Build imageStack item

            // Setup image
            var imageItem:Image = new Image();
            imageItem.id = "img" + idCount;
            imageItem.source = property.image;
            imageItem.setActualSize(380, 240);
            imageItem.useHandCursor = true;
            imageItem.buttonMode = true;
            imageItem.addEventListener(MouseEvent.CLICK, stopInterval);
            imageItem.addEventListener(MouseEvent.CLICK, loadSoundslide);

            // Add image to imageStack (HBOX)
            imageStack.addChild(imageItem);

            // Build button item

            // Setup button
            var buttonItem:Button = new Button();
            buttonItem.id = "btn" + idCount;
            buttonItem.name = "btn" + idCount;
            buttonItem.label = idCount.toString();
            buttonItem.width = 20;
            buttonItem.height = 20;
            buttonItem.useHandCursor = true;
            buttonItem.buttonMode = true;
            buttonItem.addEventListener(MouseEvent.CLICK, stopInterval);
            buttonItem.addEventListener(MouseEvent.CLICK, moveHorizontalBoxMouse);

            // Add button to vbox
            buttonSet.addChild(buttonItem);

            // Build Project Array
            projectsArray[idCount] = property.project;

            // Increment variables
            idCount++;
            }

            // Update button state
            updateButton();

            // Start imageStack loop
            interval = setInterval(advancePlayer, slideDuration);
            }

            // Advance player
            public function advancePlayer ():void
            {

            if(currentImage <= imageStack.numChildren -1)
            {
            nextImage = currentImage + 1;
            }
            else
            {
            nextImage = 1;
            }

            // Move imageStack
            moveHorizontalBox(nextImage);

            }

            // Stop interval
            public function stopInterval (e:MouseEvent):void
            {
            clearInterval(interval);
            }

            // Update button
            public function updateButton ():void
            {

            // Set previoius button state to out
            Button(buttonSet.getChildByName("btn" + prevImage)).dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT));

            // Match button state to current image
            Button(buttonSet.getChildByName("btn" + currentImage)).dispatchEvent(new MouseEvent(MouseEvent.ROLL_OVER));
            }

            // Move Horizontal Box (Mouse)
            public function moveHorizontalBoxMouse (e:MouseEvent):void
            {
            var imgID:int = int(e.target.id.substr(3,1));
            moveHorizontalBox (imgID);
            }

            // Move Horizontal Box
            public function moveHorizontalBox (id:int):void
            {
            // Determine x
            var x:int = (id - 1) * 380 * -1;

            // Move imageStack to x position
            var move:Move = new Move();
            move.end();
            move.xTo = x;
            move.duration = 2000;
            move.target = imageStack;
            move.play();

            // Update previous image
            prevImage = currentImage;

            // Update current image
            currentImage = id;

            // Update button
            updateButton();

            }

            // Load Soundslide
            public function loadSoundslide (e:MouseEvent):void
            {
            // Get project id from button id
            var projID:int = currentImage;

            // Create swf path
            var swfPath:String = basePath + playerPath + "?project=" + basePath + projectsArray[projID];

            // Update soundslide path and set to visible
            soundSlide.source = swfPath;
            soundSlide.visible = true;
            }

            // Hide Soundslide
            public function hideSoundslide ():void
            {
            soundSlide.visible = false;

            Alert.show("Made it inside hide");
            }

            ]]>
            </mx:Script>

            <!-- Begin Wrapper -->
            <mx:Canvas id="wrapper" height="264" width="380" cacheAsBitmap="true" mask="{imageMask}" horizontalScrollPolicy="off">

            <!-- Begin Image Stack -->
            <mx:HBox id="imageStack" height="240" horizontalGap="0" horizontalScrollPolicy="off" >

            </mx:HBox>
            <!-- End Image Stack -->

            <!-- Begin Navigation -->
            <mx:Canvas id="navigation" styleName="navigation" width="380" height="24" x="0" y="240">

            <!-- Begin Label -->
            <mx:Label text="Student Views" x="12" y="4" />
            <!-- End Label -->

            <!-- Begin Button Set -->
            <mx:HBox id="buttonSet" styleName="button-set" horizontalGap="2" horizontalAlign="center" width="380" height="21" x="0" y="3">

            </mx:HBox>
            <!-- End Button Set -->

            </mx:Canvas>
            <!-- End Navigation -->

            <!-- Begin Soundslide -->
            <mx:SWFLoader id="soundSlide" height="264" width="380" x="0" y="0" scaleContent="false" />
            <!-- End Soundslide -->

            </mx:Canvas>
            <!-- End Wrapper -->

            <!-- Begin Image Mask -->
            <mx:Image id="imageMask" source="{maskPng}" cacheAsBitmap="true" width="380" height="264" />
            <!-- End Image Mask-->

            </mx:Application>
            • 3. AS2 SWF inside of Flex
              strayhand Level 1
              Well, I feel like I've been having a conversation with myself. But basically I was able to pull this off using some actionscript and the SWFLoader method. I have some tweaks to make so that everything is prettier and a little more efficent.

              I pulled the close functionality out of the Flash AS2 Component and I'm now doing basically the same thing from inside Flex. This way I can treat the AS2 more like a flat file that I'm loading and unloading. I ran into some issues where the audio would keep playing even after i removed the SWFLoader from the parent display object. This post had some ideas on how to deal with that issue.

              MXML is attached.
              • 4. Re: AS2 SWF inside of Flex
                mmichelles Level 1

                I just got I good laugh. While doing a search to resolve my problem. I found your conversation with yourself.  Life is like that isn't it. HA HA! I only wished it had helped me!

                 

                Michelle

                • 5. Re: AS2 SWF inside of Flex
                  Gregory Lafrance Level 6

                  Thanks for sharing your solution. It helps the rest of us.