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

Report · Jul 31, 2012

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:


var sourceVar_ProductsPopUps:String;

and then all my buttons will have their unique SWF assigned for them which opens at another labeled section ("prdctsPopUps" in this example):


function onClickSumix1PopUp(event:MouseEvent):void {
  sourceVar_ProductsPopUps="prdcts_popups/sumix1-popup_tl.swf";
  gotoAndPlay("prdctsPopUps");
  }

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.


loaderProductPopUps = new SWFLoader(sourceVar_ProductsPopUps,

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:


          new SWFLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/images/" + image.@name + ".swf",

and


new SWFLoader(sourceVar_ProductsPopUps,

Report · Jul 31, 2012

 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.

Report · Jul 31, 2012

I am not sure if I explained myself clearly.

I am fine with how the things are in the section with thumbs and SWFLoader, it works as it supposed to. But I want to ad a functionality to it.

What I need is when a user navigates to this section it opens every time with a different SWF file in the loader, then things as normal.

SWF file has to be determined by the button from another section. Each button has its own SWF file assigned to it.

Report · Jul 31, 2012

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?

Report · Jul 31, 2012

Exactly,

Other buttons are located on another labeled section (SectionA). Buttons are scripted in a way that once clicked they bring a user to the section with SWFLoader and load an SWF which corresponds to the buttons image (SectionB).

Each button has a different image (SectionA), but each button brinngs a user to the same labeled section (SectionB).

Once the proper corresponding SWF is loaded it can be replaced by the new loading content from already scripted on the page (SectionB)

Here is what is already scripted on the page:

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 nodes with all the info we need.
//loop through each 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})

Report · Aug 01, 2012

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.

Report · Aug 01, 2012

Thanks for looking into my issue.

Unfortunatelly I am not so advanced in AS and do not complitely understand the logic of the problem. I will try to decribe my set up more precise.

So, my main flash file is broken into labeled sections on the main time line.

One of the sections is "Applications" It has an animated collage of images. Each image acts as a button and once clicked brings a user to a section called "ApplicationsPopUps".

"ApplicationsPopUps" section has small image thumbnails scroll menu at the bottom of the screen and a large SWFLoader in the middle of the screen. User can click on an image in the thumbnails scroll menu and a corresponding SWF file will load in the middle of the screen in SWFLoader. User can click on left/right navigation buttons and preceeding/following SWF file will load in SWFLoader.

Everything works fine (with your previous help)

Here is the working code for the ImageLoader and SWFLoader (please let me know if you need additional code on the page):

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 nodes with all the info we need. //loop through each 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})

Thumbnails in the section "ApplicationsPopUps" and images in the image collage in the section "Applications" represent the same photographs. So when a user clicks on one of the images in "Applications" section it would be natural that that image will load in the "ApplicationsPopUps" section. However "ApplicationsPopUps" section presently has a working code (as sampled above) It looks too complex for me and I do not know hot to implement this feature. I do want to keep the functionality of the thumbs image scroller in section "ApplicationsPopUps" as it is now. But I want to add that when a user click on an image from section"Applications" then that particular SWF file will load in SWFLoader in section "ApplicationsPopUps" and then the present functionality can as well be exectuted. Presently it just opens on a first image in xml order.

P.S. I see that you had a download link in your answer. How did you do it? I could also upload a small sample file with my problem. This way you could see all the set up right away.

Report · Aug 01, 2012

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.

Report · Aug 01, 2012

sure here is my code snippet on pastebin.com:

http://pastebin.com/5kvMtVnH

Let me know if you need me to paste the entire page of code

Report · Aug 01, 2012

Post all of the code please.

Report · Aug 01, 2012

Here is the link to the entire working code on the labeled section "ApplicationsPopUps": http://pastebin.com/4NiwMzJY

The name of the Paste is "Nikolai's AS3 sample 1"

My idea was to combine it with the this code:

new SWFLoader(sourceVar_ApplicationsPopUps, //the value of sourceVar_ProductsPopUps allows to load mulitple SWFs from the Applications page.

I am not sure if I am on the right track, but this is the only option I know which worked out for me before on my site.

Thanks for your help

Report · Aug 02, 2012

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.

Report · Aug 02, 2012

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.

Correct. "Applications" frame has an animated collage of images all fading in, coming into the screen at different angles, etc. This image collage represents all of the images together. Then a user has an option of clicking on any of the images (which brings a user to "ApplicationsPopUps" frame) where a user finds a pop up window with the clicked image enlarged and some explanations to accompany it. There is also a thumbnail navigation bar, so a user can clcik any image to be enlarged in the same frame "ApplicationsPopUps" and replace the one currently up. Everything works in the frame "ApplicationsPopUps".

Problem is to navigate to an appropiate image from the frame "Applications"

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

No I did not. I created an animated image collage as a separate SWF file and placed the image files directly into library and then onto screen. I made transitions and animations by using greensock TimeLine and TweenMax features. Then I bring up a SWF file into my main flash via SWFLoader. This works too on it own.

Unfortunately I am not very strong with coding. It seems that I did everything I wanted with code adjustments and made everything work as I wanted to ( with many forum postings and help of others). After all of it this is the last step where I stuck.

Please let me know if there is any solution for it.

From what you wrote it seems a bit over my head. (unfortunatelly at the very end of things)

I am pasting the code frome Slide.as file into the pastebin.com

The name of the post is "Nikolai's Slide.as" Here is the link to it: http://pastebin.com/vwwmb838

Please let me know if from what I wrote my set up is more clear now and if there are any new suggestions on how to combine two functionalities?

Should I try to rewrite the Slide.as file to load up the images into "Applications" frame?

Report · Aug 02, 2012

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.

Report · Aug 02, 2012

All right, thanks.

Just to make sure - if I will rewrite the code for the swf file and instead of images being placed directly on the timeline I will import them via xml file then and only then I can script the functionality that my SWF loader on "ApplicationsPopUps" frame will be able to load the file from the "Applications" frame and keep the functionality to load from the thumbnails on the "ApplicationsPopUps" frame?

If so I will start rewriting the code to make collage via xml file...

after that I will face the problem to connect the functionality of two frames...

Report · Aug 02, 2012

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!

Adobe Community

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