Skip navigation
Currently Being Moderated

Can I combine two methods of code to load various SWF files into the same location

Jul 31, 2012 12:07 PM

I presently have a set up where a large SWF file brought on the stage by clicking small icons from the scrollable thumbnail menu on the bottom of the stage. All of it happens at the same frame with .xml loading file.
Here is the code for constructing the ImageLoader(for thumbnails) and SWFLoader for (bigger SWF files)
[CODE]
   function _xmlCompleteHandler(event:LoaderEvent):void {
   _slides = [];
   var xml:XML = event.target.content; //the XMLLoader's "content" is the XML that was loaded.
   var imageList:XMLList = xml.image; //In the XML, we have <image /> nodes with all the info we need.
   //loop through each <image /> node and create a Slide object for each.
   for each (var image:XML in imageList) {
    _slides.push( new Slide(image.@name,
          image.@description,
          new ImageLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/thumbnails/appThmb_imgs/" + image.@name + ".jpg",
              {
               name:image.@name + "Thumb",
               width:_THUMB_WIDTH,
               height:_THUMB_HEIGHT,
               //centerRegistration:true,//messes up the code as places SWFLoader in the upper left corner which is 0,0 coordinates
               //x:260, y:320,//doesn't work here but works in line 69
               scaleMode:"proportionalInside",
               bgColor:0x000000,
               estimatedBytes:13000,
               onFail:_imageFailHandler}),
          new SWFLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/images/" + image.@name + ".swf",
               {
                name:image.@name + "Image",
                width:_IMAGE_WIDTH,
                height:_IMAGE_HEIGHT,
                //centerRegistration:true,//messes up the code as places SWFLoader in the upper left corner which is 0,0 coordinates
                x:0, y:144,
                scaleMode:"proportionalInside",
                bgColor:0x000000,
                estimatedBytes:820000,
                onFail:_imageFailHandler})
[/CODE]
Here is what I would like to resolve. I have another section on the site with an image collage. Every image is a button. I want to script this each image on click to go to the label with ImageLoader and SWFLoader AND TO OPEN A UNIQUE SWF (ASSOCIATED WITH AN IMAGE CLICKED) ON THAT PAGE
Previously this is what I did to achieve it. I would specify a String:
[CODE]
var sourceVar_ProductsPopUps:String;
[/CODE]

 

and then all my buttons will have their unique SWF assigned for them which opens at another labeled section ("prdctsPopUps" in this example):
[CODE]
function onClickSumix1PopUp(event:MouseEvent):void {
  sourceVar_ProductsPopUps="prdcts_popups/sumix1-popup_tl.swf";
  gotoAndPlay("prdctsPopUps");
  }
[/CODE]

 

Then in the "prdctsPopUps" section I would specify that var string to bring up SWF files. The value of sourceVar_ProductsPopUps allows to load mulitple SWFs from the previous page.
[CODE]
loaderProductPopUps = new SWFLoader(sourceVar_ProductsPopUps,
[/CODE]

 

But I need both of them to be working at the same time. First there is a sectionA from where a user can navigate to specifically targeted SWF to section B's SWFLoader. Then in the section B a user has an option to bring up other SWF files into SWFLoader from the scrollable thumbs menu. Is there a way to combine these two lines into one:
[CODE]
          new SWFLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/images/" + image.@name + ".swf",
[/CODE]
and
[CODE]
new SWFLoader(sourceVar_ProductsPopUps,
[/CODE]

 
Replies
  • Currently Being Moderated
    Jul 31, 2012 12:20 PM   in reply to nikolaig

    [CODE] doesn't work on this forum. You can jump in HTML mode and add a <blockquote> around it or something else.

     

    As for your issue, it's up to you to decide how to track both "what" is being clicked and "what to do" when it is clicked.

     

    I myself often either keep an array or object of references that makes it easy to associate information with clips. Being you only need a little bit of information I'd probably go the other route and use the instance .name property of the thumbnail clicked and write logic based on that.

     

    I haven't used that code from greensock but I see you're setting an object property called name.

     

    e.g.

    name:image.@name + "Thumb"

     

    Do you have a way of specifying a custom handler for each thumbnail? I see you have handlers such as onFail:_imageFailHandler. If you can specify a click handler then get the name of the thumb clicked your handler could decide what to do with it.

     

    function thumbClickHandler(e:MouseEvent):void

    {

         trace("Thumbnail clicked: " + e.currentTarget.name);

    }

     

    After that it's up to you to build a switch/if/array/etc to determine what to do based on the name of the thumbnail clicked.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 31, 2012 12:49 PM   in reply to nikolaig

    So, the thumbnails are successfully loading a SWF. Where are these other buttons located that want to load SWF content? When these other buttons load SWF content, are you trying to have that SWF content already loaded replaced by this new SWF loading?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 6:46 AM   in reply to nikolaig

    What is the hierarchy of this project? You loosely say things like SectionA and SectionB but unless I know what content is loaded inside of what other content it's hard to tell you how to formulate your code.

     

    I stick strictly to class to class communication and rarely use the library but one suggestion to try, without knowing the hierarchy of your project of what greensock might be doing, is trace()ing parents on an objects click.

     

    For a really quick example, say MovieClips (instance name) clip_A loads clip_B as a child. Also clip_B loads clip_C as a child. If you put a button in clip_C named btn_mc and gave it this code:

     

    btn_mc.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { trace(e.currentTarget.parent.name); });

     

    You would trace this: clip_C

     

    The key here is the bolded word, parent.

     

    Your content loaded can easily parent up the display list like this. You could use this type of strategy to have the content loaded in SectionB tell its parent to load a different section.

     

    Here's a downsaved CS4 version of a button making an example of this. Look at the frame script code in clip_C in the library. It assigns a MouseEvent.CLICK listener to the button. If you click on the button you'll see the outer most container is clip_A, then inside clip_B, then inside clip_C, finally btn_mc is inside that.

     

    Example: Download

     

    btn_mc, when clicked, will trace all its parents. Point being, you have access to the parents. So if there was a function in clip_A that you wanted btn_mc to run, even though the button is inside something else (the same as a SWF loaded in a Loader), then you could parent out and call the function like:

     

    btn_mc.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void

    {

         // (you could also just do "this" instead of e.currentTarget.parent, but whatever)

     

         e.currentTarget.parent.parent.parent.someFunctionNameInClipA();

     

    });

     

    That should give you a general idea on how your nested, Loader loaded content can access your root timeline and request it to load whatever content you want.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 11:38 AM   in reply to nikolaig

    I just host my demo file for you on my server, there's no built in way to share a file.

     

    I think I understand what you mean but one question that comes to mind is, why are the same images on the left and also in the thumbnail strip?

     

    Aside that can you please post your code on a code hosting service like http://pastebin.com/ and make sure you select in the drop-down below that it is ActionScript 3.0 code. I can't read the code like you have it.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 12:01 PM   in reply to nikolaig

    Post all of the code please.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 7:30 AM   in reply to nikolaig

    Now again, I do want to make sure I understand you correctly. You're showing a larger version of the images in the frame labeled "Applications". Then you click one of those image and you change to the frame labeled "ApplicationsPopUps". Both of these image galleries are the same images.

     

    Am I to assume you created the gallery in "Applications" using the same greensock slide system? If so then from the large amount of code I read I see that there's a method greensock is calling to display a specific slide when a thumbnail is clicked:

     

    function _requestSlide(slide:Slide):void

     

    What it does is pass in the slide via a reference to the slide itself from the array that holds all the slides: _slides

     

    If you build both slideshows using the same XML, then the same slide number (0, 1, 2, 3, etc) the user clicks when they are in the "Applications" frame will be the same slide number when they go in the "ApplicationPopUps" frame. So it would be your job to do 2 things.

     

    1. Capture the number of the slide that the user presses when in "Applications" to later use in a variable, e.g. _selectedSlide

    2. After you finish loading "ApplicationPopUps", run the _requestSlide method yourself using the previously captured _selectedSlide, e.g.: _requestSlide(_slides[_selectedSlide]); or emulate a click on the correct thumbnail

     

    You need to make sure you only intercept when "ApplicationPopUps" is completely done loading.

     

    Sorry that your request seems complex to you but you have a half and half situation. You're using very complex code created by a 3rd party coupled together with your own desire to specialize it in a way it just doesn't work. It's up to you to follow the greensock code to find out how they handle thumbnail clicks in order to "simulate" the same thing.

     

    You may need to emulate a click on the thumbnail to get this to work correctly and it might just be easier. An example of an emulated click would be:

     

    Sprite(_imagesContainer.getChildAt(_selectedSlide)).dispatchEvent(new MouseEvent(MouseEvent.CLICK)));

     

    That would get whatever child was at display list index _selectedSlide, assuming it's a thumbnail added in the same order of the XML, and have it dispatch a MouseEvent.CLICK object. Then it might select the thumbnail and perform the load on the SWF content as if you clicked the correct thumbnail.

     

    Wish it was easier to explain.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 1:15 PM   in reply to nikolaig

    XML is read linearly from top to bottom so the first image you put in the XML is slide 0, next image slide 1, etc.. If you made the Application frame animation yourself then you're going to need to make sure your animation saves the correct slide number when it moves to the popup frame. After that it's just a matter of emulating a click on that thumbnail.

     

    If you look at the _setupThumbnails() function  you can see that it iterates through the _slides array creating thumbnails. It addChild()'s the thumbnail to the _thumbnailsContainer as it goes. Nothing else in that code adds to the thumbnails container so that means the child at index 0 is slide 0, index 1 is slide 1, etc.

     

    They use the _slides array reference to add the listener to on each thumbnail so that's what you can use to emulate a click. Inside the Slide code you posted it appears they simply listen for a mouseclick event to which they fire off their own custom Slide.CLICK_THUMBNAIL. To send it to thumbnail 4 (remember it starts at 0, so 0,1,2,3.. 3 is the 4th item), it would look something like this:

     

    Sprite(_slides[3]).dispatchEvent(new MouseEvent(MouseEvent.CLICK));

     

    You might want to delay running that code in the popups frame by a few seconds intentionally to give it a moment to load, e.g.:

     

    import flash.utils.setTimeout;

     

    setTimeout(_selectThumbnail, 5000); // wait 5 seconds

     

    function _selectThumbnail():void

    {

         // sending to 4th thumbnail for testing

         Sprite(_slides[3]).dispatchEvent(new MouseEvent(MouseEvent.CLICK));

    }

     

    Something like that aught to get you going in the right direction. It's all about sending the mouse click event to the correct thumbnail if that ends up working. So it'd be your job to set a variable based on the image clicked so it selects the corresponding thumbnail.

     

    In the end the emulated click code will probably end up at the bottom of the _setupThumbnails() function because by then all the thumbnails exist, although might not be loaded just yet. They do have their events assigned already however.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 2:09 PM   in reply to nikolaig

    You can place images on the timeline yourself if you like but it will be your job to provide some way for yourself to remember which image belongs to which thumbnail. You'll need to listen for mouse clicks and then assign the correct thumbnail number to a variable you can read later to trigger the thumbnail.

     

    If you go that route just know any changes to the order of the images in the XML will affect what you do by hand on the timeline. The _slides array is completely dependant on the order of the images in the XML.

     

    Alternatively, yes, you can recode it to read the XML and load the images as well as animate them in code.

     

    Give it a shot and post back on any snags. Good luck!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points