ngrinchenko

A follow up question. I would like to make it work with the code you have suggested for the better performance, with an onComplete callback var openingImage_timeLine = new TimelineMax({onComplete:goToNextFrame}); However I am not able to make it work. I am able to make it work this way: openingImage_timeLine.addEventListener(TweenEvent.COMPLETE, goToNextFrame); function goToNextFrame(e:TweenEvent):void{ gotoAndPlay(2); } I am attaching a simplified version of my file. Please take a look why it doesn't work in my case?

Thanks, it seems to work. Now my code looks like this: var openingImage_timeLine:TimelineMax = new TimelineMax({timeScale: 1.5, onComplete:gotoAndPlay("contactus")}); "contactus" is a label on the main time frame

I have a small animation playing on frame 1 in my main time line of the flash file. How would I write the function that once the time line Max animation completed playing the website moves to frame 2 in my main time line of the flash file? Here is what I was able to come up with: import com.greensock.*; import com.greensock.easing.*; import fl.transitions.Tween; import fl.transitions.TweenEvent; openingImage_timeLine.addEventListener(TweenEvent.COMPLETE, goToNextFrame); function goToNextFrame(e:TweenEvent):void{ gotoAndPlay(2); } I am not sure if I need: import fl.transitions.Tween; import fl.transitions.TweenEvent; the error code I am getting is

Appreciate your input. I actually found this tutorial as well, it seems to be the only one available on the topic. I studied it and was able to accomplish everything I was supposed to with successful modifications of transitions with TweenMax. The main thing I was not able to do was to figure out how to load swf files instead of jpg files into the small thumbnail scroll and make those swf files to load bigger swf versions into the swf loader on the same page. I guess this is where I meet my limit of AS3

Hi, I was able to use your suggestion. Everything works perfectly now. Thanks a lot for your help!

Carl, I did not realize that my post was so unorganized. I understand and regret that you have spent your time in confusion. I have a sporadic Forums experience, sorry that you happened to be the one to outline the etiquette for me. I believe that now I have a much more organised and simplified flash file. You will see in my folder the file named "main_openThis" The problem is that grey buttons numbered 1-4 do not reload a new swf in the loader above. I have the code specified as loader_howToLoader = new SWFLoader so it should be a new loader each time refreshed on the screen, but it doesn't happen?

Thanks for pointing out my mistakes. I believe I was more careful now and changed all the names properly. At least I do not get any error messages. However the SWF can be loaded only ones into the SWF loader. Buttons under the loader (at the bottom of the layout) do not reload the new SWF on the page. I have the code specified as loader_howToLoader = new SWFLoader so it should be a new loader each time refreshed on the screen, but it doesn't happen?

I tinkered with the code you have specified and could not come up to the working solution. I suspect my problem is in properly specifying the var sourceVar:String; I assmbled a simplified version of my flash files. The only thing missing are the loading external swfs, which I hope is not an issue. Please take a look, why can not I replace the loaded swf from other buttons?

Thanks for your help. I used LoaderMax almost everywhere in my project, It skipped my attention that it was an FLV play back feature. I automatically assumed that it was LoaderMax as well. Sorry that you had to look at the issue unrelated to greensock and thanks for the general suggestion on the code arrangement. Thanks for your help.

I thought I knew this.... If I want to load one swf file using SWF loade then I use this line of code: loader_howToLoader = new SWFLoader("howTo3A_Q90imgs.swf", If I want to use a SWF loader to load multiple swf files from different buttons. Then somewhere for all the buttons I have to specify a var, something like this var sourceVar:String; But then how do I implement it into the SWF loader code loader_howToLoader = new SWFLoader("WHAT DO I PUT HERE?",

Hello, I've been using this forum for a while, always finding a good help. I've been searching the web for a good tutorial on how to build a Responsive Image Scroller with AS3. Does anyone know a good tutorial source? My particular problem is that I want to load swf files instead of jpgs as I want to assign links to them to load images into the SWF Loader located on the main timeline. I also would like to have images at different sizes and XML loaders with their math allows a uniformed sized images.

Hi, Thanks for answering my post. I know I get lost in the explanation. I assembled a simple sample file with all the code. I am not able to provide a video due to the size restrictions. I trust you would have some sample FLV file which you cam place instead. I believe the problem is with the var specification var sourceVar:String; in the child swf file and the var in the second labeled section of the parent swf file. SWF_flv2.source = sourceVar; please let me know how my code can be corrected?

What properties of SWF loader do I have to use to target loaded content? Here is the block of code which used to work on the main timeline: howTo_mainInfo.JTVs.JTV_SatelliteCenterpiece_btn.addEventListener(Mous eEvent.CLICK, JTV_SatelliteCenterpiece_PlayVideoPopUp); function JTV_SatelliteCenterpiece_PlayVideoPopUp(event:MouseEvent): void { sourceVar="howto_popups/jtvs18w07_LG30.flv"; gotoAndPlay("flv_pb"); } Then I moved everything to an external SWF file and the var doesn't work anymore. Ideally I would like to keep the code in the external SWF file but can't figure out how to make it to access the var on the main time line. Here is my issue in a bit more details: I have a set up with two pages or labeled sections on the main timeline. I brake the code corresponding to actions happening in each page/labeled section. On first page there is a var specified for each button var sourceVar:String; Then each button uses this var to load a video into FLV player (player itself is constructed in the second page/labeled section). function JTV_SatelliteCenterpiece_PlayVideoPopUp(event:MouseEvent): void { sourceVar="howto_popups/jtvs18w12_LG30.flv"; gotoAndPlay("flv_pb"); } where "flv_pb" is the label for the second page/labeled section. On this second page/labeled section there is an FLVPlayback component named "SWF_flv2" which uses this var SWF_flv2.source = sourceVar; All above works. My problem is that I decided to load externally all the items (image buttons) into the first section. So I saved them as an external SWF file, with all the code in that external swf file. Then I link the buttons to section "flv_pb" this way: function JTV_SatelliteCenterpiece_PlayVideoPopUp(event:MouseEvent): void { MovieClip(parent.parent.parent).sourceVar="howto_popups/jtvs18w07_LG3 0.flv"; MovieClip(parent.parent.parent).gotoAndPlay("flv_pb"); } The link to the "flv_pb" section works, which tells me that the set up with "MovieClip(parent.parent.parent)." is appropriate. However the code as before with the set up of (still being in the external swf file): sourceVar="howto_popups/jtvs18w12_LG30.flv"; gotoAndPlay("flv_pb"); works as well, I am not sure why? The problem seems to be in the var I have an error message 1120: Access of undefined property sourceVar It is referencing the code in the second page/labeled section "flv_pb" SWF_flv2.source = sourceVar; What are my actions? I kept the code in the external swf file. Should I move it to the main timeline if it is possible? Should I only reference the var in the main time line? Should all the code be kept in the beginning of the time line, rather be sectioned into the sections?

Thanks, Jack immediateRender:true solved it. For some reason I thought If I specify tween duration as 0 then it would mean that immediate render is set to true by default, it did not work , so this is why i put a very small duration of 0.001 So if I want my tween to start from something despite its Flash property's panel settings I should in addition to putting tween at 0 time duration specify immediateRender:true ?

I have this issue. I want an entire section of the site(i.e another page/labeled section) the user navigate to gradually to dim. So for that on the top of all the elements I put a black rectangle and colored it 100% black in Flash properties of the Drawing Object. Here is the tween I specified for it to start from autoAlpha:0 and then dim TweenMax.to(revealingBlack_prdctsPopUps, 0.001, {autoAlpha:0}); TweenMax.to(revealingBlack_prdctsPopUps, 3, {autoAlpha:.9}); It doesn't work, it blinks momentarily to full strength, then goes to 0 and then dims. How can I make it to start from a true autoAlpha:0

Hi, thanks for helping out. Most probably with my next question I am overstepping help scope of this forum. I understand if you will not answer. But emboldened by success with your help I wanted to add the functionality and construct a scrolling thumb gallery. So I found the tutorial which builds jpg row out of xml file. I was able to modify it with tweenMax transitions. And got stock on linking everything properly. Below is the code in AS panel. I am not sure how to do it so it loads into SWF loader. function clickScrollerItem(e:MouseEvent):void { //trace("clicked item " + e.currentTarget.itemNum + " - visit url: " + e.currentTarget.link); var urlRequest:URLRequest = new URLRequest(e.currentTarget.link); try { navigateToURL(urlRequest); } catch (e:Error) { // handle error here trace(e); } } and here is the line of code from xml file. I suppose I can still leave it as URL and just change jpg file into swf ? <image src="images/tn/madness_arch2.jpg" title="Arch 2" url="images/madness_arch2.jpg" />

Wow, great. Thank you so much for helping me out. It all works now. I noticed that my loading barn "progressBarPopUp_mc" does not come up, does it look to you like the code is in place for it?

Thanks for looking into the code. I tried to implement what you have suggested and it looks like it starts to go into right direction. Unfortunately due to my lack of scripting knowledge I only was able to make "tryDelete_mc" button to load a previously loaded SWF again ( I have no idea what to do after that) So it loads something but not what I need. I made a sample flash file with my troubles. Please take a look at it (there is bare minimum of code). What did I do wrong?

Sorry for not a clear description. By page1 and page2 I meant sections of my webstie, which are labeled. For a presumed convenience of not writing out a label name I called them page1 and page2. Here is what is going on on the website section labeled "page1" var sourceVar_PopUps:String; //////////////1_btn btn1.addEventListener(MouseEvent.CLICK, onClick1PopUp); function onClick1PopUp(event:MouseEvent) :void { sourceVar_PopUps="prdcts_popups/1btn-popup_tl.swf"; gotoAndPlay("page2"); } //////////////2_btn btn2.addEventListener(MouseEvent.CLICK, onClick2PopUp); function onClick2PopUp(event:MouseEvent) :void { sourceVar_PopUps="prdcts_popups/2btn-popup_tl.swf"; gotoAndPlay("page2"); } Then on "page2" I have this code for constructing SWF loader: var loaderProductPopUps:SWFLoader; if (loaderProductPopUps){ if(loaderProductPopUps.content){ loaderProductPopUps.unload(); } } loaderProductPopUps = new SWFLoader(sourceVar_PopUps, //the value of sourceVar_PopUps allows to load mulitple SWFs from the products page. { estimatedBytes:5000, container:holderMovieClip,// more convinient and easier to manage if to place the LoaderMax into an empty mc (holderMovieClip) // if not will work as well. Then the line container:holderMovieClip, has to be replaced with container:this, // can be any size, can not be scaled as it distorts the content onProgress:progressHandler, onComplete:completeHandler, centerRegistration:true, //x:-260, y:-320, //no need for this is if used: centerRegistration:true, alpha:1, scaleMode:"none", //scaleX:0, scaleY:0, //vAlign:"top", width:540, height:730,//scales proportionally but I need to cut off the edges crop:true, autoPlay:false }); function progressHandler(event:LoaderEvent):void{ progressBarPopUp_mc.gradientbar_appLoader_mcPopUp_mc.scaleX = loaderProductPopUps.progress; } function completeHandler(event:LoaderEvent):void{ var loadedImage:ContentDisplay = event.target.content; //TweenMax.to(loadedImage, 1.5, {alpha:1, scaleX:1, scaleY:1});//only need this line if corresponding values are changed in SWF loader constructor TweenMax.to(progressBarPopUp_mc, 1.5, {alpha:0, scaleX:0.25, scaleY:0.25}); } loaderProductPopUps.load(); So far everything works, Then I decided to add a new set of buttons in "page2" and can not load an SWF into SWF loader any more from "page2" Here is the sample code for the buton named "tryDelete_mc": tryDelete_mc.alpha = 0.15; var tryDelete_mc_Tween:TweenLite = TweenLite.to(tryDelete_mc, .5, {alpha:1, paused:true}); tryDelete_mc.addEventListener(MouseEvent.ROLL_OVER, overHandler_tryDelete_mc); tryDelete_mc.addEventListener(MouseEvent.ROLL_OUT, outHandler_tryDelete_mc); tryDelete_mc.addEventListener(MouseEvent.CLICK, onClicktryDelete_mc); function onClicktryDelete_mc(event:MouseEvent):void { sourceVar_PopUps="prdcts_popups/tryDelete-popup_tl.swf"; trace("you clicked on me"); } function overHandler_tryDelete_mc(e:MouseEvent):void{ tryDelete_mc_Tween.play(); trace("you rolled over me"); } function outHandler_tryDelete_mc(e:MouseEvent):void{ tryDelete_mc_Tween.reverse(); trace("you rolled off me"); } All traces work, so I do not know why I can not load on "page2" if I can do it from "page1" ?

Hi, I have a page with various image buttons (page1). From this page I am accessing another page (page2) where greensock's SWF loader is constructed and loads multiple SWFs from the first page (page1). These larger SWFs are corresponding to various buttons on the first page (page1). For that I have set up a var on page1: var sourceVar_ProductsPopUps:String; then each button has a code like this: then I use this var in all the buttons function onClickSumix16RGBPopUp(event:MouseEvent) :void { sourceVar_ProductsPopUps="prdcts_popups/Sumix16RGB-popup_tl.swf"; gotoAndPlay("(page2"); } Then this var is used in the SWF loader construction on page2: loaderProductPopUps = new SWFLoader(sourceVar_ProductsPopUps, Then I wanted to have additional buttons on page2 and load other SWF files into that same SWF loader on page2. So I used the same code. I made a button and this is my script from a button on page2: tryDelete_mc.addEventListener(MouseEvent.CLICK, onClicktryDelete_mc); function onClicktryDelete_mc(event:MouseEvent):void {sourceVar_ProductsPopUps = event.currentTarget.prop; } Why it doesn't work in the second case?

Hi, I am not sure if I am doing it right. Just wanted to confirm or have a better suggestion. Within the time line I want one tween to stay longer, just in the state it was tweened to without any motion going on. But my time line has to run in equal specified intervals between the tweens. So for that I put {delay:number} for the tween following the one I want to stay on the screen. Is this the best way to do it? //initially set to autoAlpha:0 so it comes out of the dark TweenMax.allTo([openingImage_mc.openingImage_Dark_mc, openingImage_mc.openingImage_Light_mc], 0, {autoAlpha:0}); var openingImage_timeLine:TimelineMax = new TimelineMax({timeScale: 1.5}); openingImage_timeLine.appendMultiple([TweenMax.to(openingImage_mc.openingImage_Dark_mc, 1, {autoAlpha:1 }), TweenMax.to(openingImage_mc.openingImage_Light_mc, 2, {autoAlpha:1, delay: 1 }), TweenMax.to(openingImage_mc, 1.5, {autoAlpha:0, delay: 1.5}), TweenMax.to(openingImage_mc.revealingBlack_mc, 1, {autoAlpha:0}) ], .5, //offset number, i.e. how long it waits before to start TweenAlign.SEQUENCE,//tweens start times are aligned if TweenAlign.START, or TweenAlign.SEQUENCE so they start one after another -0.5);//n = staggers the TweenAlign.START time, //i.e. waits n seconds before each tween starts from the beginning of the append multiple, //so the overlap (almost like specifying a "-" value) //if TweenAlign.SEQUENCE then like "+" value as each tween waits 0.2 seconds before it starts

Thank you for your suggestion. If it is not MovieClip timelines what would be a better way to build the site in Flash?

This might be not a LoaderMax problem, but a general AS3 problem. If this is a case I understand and will try to look for help on other AS3 related forums. I need to find out what would be a proper approach to resolve my logistic problem. My website is broken into labeled sections. One section is named "ApplicationsPopUps" - it has an image thumbnails scrolling bar at the bottom and an SWFLoader in the middle of the screen. I can click on any of the thumbnails and a new image would be loaded into SWFLoader. I would like to add/expand to this funcionality. There is another section on my timeline named "Applications", and it has a collage of images animating into a position on the screen. Each image acts as a button. User can click on the image and be transferred into previoiusly described section labeled "ApplicationsPopUps". The problem is that this section("ApplicationsPopUps") by default opens with the first image loaded from xml file. I need it to be that specific image which a user clicked on the collage in the previous section labeled "Applications". Images are not the same. They represent the same thing, but small thumbnail images are square formatted jpg files (as I was not able to figure out the math to make them different lenghts with the same heights). They bring up bigger SWF files as these files have their own animation and additional buttons. Collage images are jpg files in a rectangular various shapes (not square as thumbnail images) For visual reference please visit 888acolyte.com, go to "applications" and click on any of the images it will bring you to a section with a bigger image for that application. In that section you will be able to navigate from image to image. This is an old version, which is accomplished by making a separated labeled section for each image. Can it be resolved via code or I need to build additional labeled sections for each image to be loaded as before? Just in case here a link to my code (named "Loader Coding"): http://pastebin.com/pWViE2U2 There is a package file named Slide.as. Here is a link to its code: (named "Slide as"): http://pastebin.com/m0MHT0Mi Here is the same code pasted: import com.greensock.*; import com.greensock.loading.*; //import com.greensock.events.LoaderEvent; import com.greensock.loading.display.*; //import com.greensock.TweenLite; import com.greensock.events.LoaderEvent; //import com.greensock.loading.ImageLoader; //import com.greensock.loading.SWFLoader; //import com.greensock.loading.LoaderMax; //import com.greensock.loading.XMLLoader; import com.greensock.plugins.AutoAlphaPlugin; import com.greensock.plugins.ColorTransformPlugin; import com.greensock.plugins.GlowFilterPlugin; import com.greensock.plugins.BlurFilterPlugin;//i added this filter to blur the progressBar import com.greensock.plugins.TweenPlugin; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; //public class SlideshowExample extends MovieClip { const _THUMB_WIDTH:Number = 50; const _THUMB_HEIGHT:Number = 64; const _IMAGE_WIDTH:Number = 1024;//550;original # const _IMAGE_HEIGHT:Number = 500;//355;original # const _THUMB_GAP:Number = 2; const _SCROLL_SPEED:Number = 12; const _SCROLL_AREA:Number = 150; var _progressBar:MovieClip; var _arrowLeft:MovieClip; var _arrowRight:MovieClip; var _slides:Array; var _curSlide:Slide; //Slide that is currently displaying var _loadingSlide:Slide; //only used when a Slide is supposed to show but hasn't been fully loaded yet (like if the user clicks "next" many times before all the images have loaded). We keep track of the one that's in the process of loading and should be shown as soon as it finishes, then we set _loadingSlide back to null. var _imagesContainer:Sprite; //the Sprite into which the full-size images are placed (this helps manage the stacking order so that the images can always be behind everything else and yet we can addChild() each image so that it shows up on top of the previous one) var _thumbnailsContainer:Sprite; //the Sprite into which the thumbnail images are placed. This also allows us to slide them all at the same time. var _destScrollX:Number = 0; //destination x value for the _thumbnailsContainer which is used for scrolling it across the bottom. We don't want to use _thumbnailsContainer.x because it could be in the process of tweening, so we keep track of the end/destination value and add/subtract from it when creating our tweens. var _minScrollX:Number; //we know the maximum x value for _thumbnailsContainer is 0, but the mimimum value will depend on how many thumbnail images it contains (the total width). We calculate it in the _setupThumbnails() method and store it here for easier/faster scrolling calculations in the _enterFrameHandler() //function SlideshowExample() { //super(); //activate the plugins that we'll be using so that TweenLite can tween special properties like filters, colorTransform, and do autoAlpha fades. TweenPlugin.activate([AutoAlphaPlugin, ColorTransformPlugin, GlowFilterPlugin, BlurFilterPlugin]);//i added BlurFilterPlugin at the end _progressBar = this.getChildByName("progress_mc") as MovieClip; _arrowLeft = this.getChildByName("arrowLeft_mc") as MovieClip; _arrowRight = this.getChildByName("arrowRight_mc") as MovieClip; //////////my additions to make progress bay blurry TweenLite.to(progress_mc.progressBar_mc.gradientbar_appLoader_mcPopUp_mc, 0, {blurFilter:{blurX:21, blurY:8}});//i added this line to make ProgressBar_mc to blur TweenLite.to(progress_mc.rectangleGray, 0, {blurFilter:{blurX:21, blurY:8}});//i added this line to make ProgressBar_mc to blur _arrowLeft.visible = _arrowRight.visible = false; _imagesContainer = new Sprite(); this.addChildAt(_imagesContainer, 0); _thumbnailsContainer = new Sprite(); addChild(_thumbnailsContainer); //_thumbnailsContainer.x = -550;//moves x position of thumbnails, instead done in line 273 thumbnail.x = curX - 590; _thumbnailsContainer.y = _IMAGE_HEIGHT;//moves y position of thumbnails _thumbnailsContainer.alpha = 0; //we want alpha 0 initially because we'll fade it in later when the thumbnails load. _thumbnailsContainer.visible = false; //ensures nothing is clickable. var xmlLoader:XMLLoader = new XMLLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/data.xml", {onComplete:_xmlCompleteHandler}); xmlLoader.load(); //} 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}) ) ); } //now create a LoaderMax queue and populate it with all the thumbnail ImageLoaders as well as the very first full-size ImageLoader. We don't want to show anything until the thumbnails are done loading as well as the first full-size one. After that, we'll create another LoaderMax queue containing the rest of the full-size images that will load silently in the background. var initialLoadQueue:LoaderMax = new LoaderMax({onComplete:_initialLoadComplete, onProgress:_progressHandler}); for (var i:int = 0; i < _slides.length; i++) { initialLoadQueue.append( _slides[i].thumbnailLoader ); } initialLoadQueue.append(_slides[0].imageLoader); //make sure the very first full-sized image is loaded initially too. initialLoadQueue.load(); _setupThumbnails(); } function _initialLoadComplete(event:LoaderEvent):void { //now that the initial load is complete, fade out the progressBar. autoAlpha will automatically set visible to false once alpha hits 0. TweenLite.to(_progressBar, 0.5, {autoAlpha:0}); //fade in the thumbnails container TweenLite.to(_thumbnailsContainer, 1, {autoAlpha:1}); _setupArrows(); //setup the ENTER_FRAME listeners that controls the thumbnail scrolling behavior at the bottom this.stage.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true); //now put all the remaining images into a LoaderMax queue that will load them one-at-a-time in the background in the proper order. This can greatly improve the user's experience compared to loading them on demand which forces the user to wait while the next image loads. var imagesQueue:LoaderMax = new LoaderMax({maxConnections:1}); for (var i:int = 1; i < _slides.length; i++) { imagesQueue.append( _slides[i].imageLoader ); } imagesQueue.load(); //now start the slideshow _showNext(null); } //loops through all the thumbnail images and places them in the proper order across the bottom of the screen and adds CLICK_THUMBNAIL listeners. function _setupThumbnails():void { var l:int = _slides.length; var curX:Number = _THUMB_GAP; for (var i:int = 0; i < l; i++) { var thumbnail:Sprite = _slides[i].thumbnail; _thumbnailsContainer.addChild(thumbnail); TweenLite.to(thumbnail, 0, {colorTransform:{brightness:0.5}}); _slides[i].addEventListener(Slide.CLICK_THUMBNAIL, _clickThumbnailHandler, false, 0, true); thumbnail.x = curX; thumbnail.y = 176;//defines y position of the thumbnails row curX += _THUMB_WIDTH + _THUMB_GAP; } _minScrollX = _IMAGE_WIDTH - curX; if (_minScrollX > 0) { _minScrollX = 0; } } function _setupArrows():void { _arrowLeft.alpha = _arrowRight.alpha = 0; _arrowLeft.visible = _arrowRight.visible = true; _arrowLeft.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler, false, 0, true); _arrowLeft.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler, false, 0, true); _arrowLeft.addEventListener(MouseEvent.CLICK, _showPrevious, false, 0, true); _arrowRight.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler, false, 0, true); _arrowRight.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler, false, 0, true); _arrowRight.addEventListener(MouseEvent.CLICK, _showNext, false, 0, true); } function _showNext(event:Event=null):void { //if there's a _loadingSlide we should assume that the next Slide would be AFTER that one. Otherwise just get the one after the _curSlide. var next:int = (_loadingSlide != null) ? _slides.indexOf(_loadingSlide) + 1 : _slides.indexOf(_curSlide) + 1; if (next >= _slides.length) { next = 0; } _requestSlide(_slides[next]); } function _showPrevious(event:Event=null):void { //if there's a _loadingSlide we should assume that the previous Slide would be BEFORE that one. Otherwise just get the one before the _curSlide. var prev:int = (_loadingSlide != null) ? _slides.indexOf(_loadingSlide) - 1 : _slides.indexOf(_curSlide) - 1; if (prev < 0) { prev = _slides.length - 1; } _requestSlide(_slides[prev]); } function _requestSlide(slide:Slide):void { if (slide == _curSlide) { return; } //kill the delayed calls to _showNext so that we start over again with a 5-second wait time. TweenLite.killTweensOf(_showNext); if (_loadingSlide != null) { _cancelPrioritizedSlide(); //the user must have skipped to another Slide and didn't want to wait for the one that was loading. } //if the requested Slide's full-sized image hasn't loaded yet, we need to show the progress bar and wait for it to load. if (slide.imageLoader.progress != 1) { _prioritizeSlide(slide); return; } //fade the old Slide and make sure it's not highlighted anymore as the current Slide. if (_curSlide != null) { TweenLite.to(_curSlide.image, 0.5, {autoAlpha:0}); _curSlide.setShowingStatus(false); } _curSlide = slide; _imagesContainer.addChild(_curSlide.image); //ensures the image is at the top of the stacking order inside the _imagesContainer TweenLite.to(_curSlide.image, 0.5, {autoAlpha:1}); //fade the image in and make sure visible is true. _curSlide.setShowingStatus(true); //adds an outline to the image indicating that it's the currently showing Slide. TweenLite.delayedCall(5, _showNext); //create a delayedCall that will call _showNext in 5 seconds. } function _prioritizeSlide(slide:Slide):void { TweenLite.to(_progressBar, 0.5, {autoAlpha:1}); //show the progress bar _loadingSlide = slide; _loadingSlide.imageLoader.addEventListener(LoaderEvent.PROGRESS, _progressHandler); _loadingSlide.imageLoader.addEventListener(LoaderEvent.COMPLETE, _completePrioritizedHandler); _loadingSlide.imageLoader.prioritize(true); //when the loader is prioritized, it will jump to the top of any LoaderMax queues that it belongs to, so if another loader is in the process of loading in that queue, it will be canceled and this new one will take over which maximizes bandwidth utilization. Once the _loadingSlide is done loading, the LoaderMax queue(s) will continue loading the rest of their images normally. } function _cancelPrioritizedSlide():void { TweenLite.to(_progressBar, 0.5, {autoAlpha:0}); //hide the progress bar _loadingSlide.imageLoader.removeEventListener(LoaderEvent.PROGRESS, _progressHandler); _loadingSlide.imageLoader.removeEventListener(LoaderEvent.COMPLETE, _completePrioritizedHandler); _loadingSlide = null; } function _completePrioritizedHandler(event:LoaderEvent):void { var next:Slide = _loadingSlide; //store it in a local variable first because _cancelPrioritizedSlide() will set _loadingSlide to null. _cancelPrioritizedSlide(); _requestSlide(next); } function _progressHandler(event:LoaderEvent):void { _progressBar.progressBar_mc.scaleX = event.target.progress; } function _clickThumbnailHandler(event:Event):void { _requestSlide(event.target as Slide); } function _rollOverArrowHandler(event:Event):void { TweenLite.to(event.currentTarget, 0.5, {alpha:1}); } function _rollOutArrowHandler(event:Event):void { TweenLite.to(event.currentTarget, 0.5, {alpha:0}); } function _enterFrameHandler(event:Event):void { if (_thumbnailsContainer.hitTestPoint(this.stage.mouseX, this.stage.mouseY, false)) { if (this.mouseX < _SCROLL_AREA) { _destScrollX += ((_SCROLL_AREA - this.mouseX) / _SCROLL_AREA) * _SCROLL_SPEED; if (_destScrollX > 0) { //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number below _destScrollX = 0; //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number above } TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX}); } else if (this.mouseX > _IMAGE_WIDTH - _SCROLL_AREA) { _destScrollX -= ((this.mouseX - (_IMAGE_WIDTH - _SCROLL_AREA)) / _SCROLL_AREA) * _SCROLL_SPEED; if (_destScrollX < _minScrollX) { _destScrollX = _minScrollX; } TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX}); } } } //if an image fails to load properly, remove it from the slideshow completely including its thumbnail at the bottom. function _imageFailHandler(event:LoaderEvent):void { var slide:Slide; var i:int = _slides.length; while (--i > -1) { slide = _slides[i]; if (event.target == slide.thumbnailLoader || event.target == slide.imageLoader) { slide.dispose(); _slides.splice(i, 1); _setupThumbnails(); return; } } } and for Slide.as package { import com.greensock.TweenLite; import com.greensock.loading.ImageLoader; import com.greensock.loading.SWFLoader; import com.greensock.loading.display.ContentDisplay; import flash.display.Shape; import flash.display.Sprite; import flash.events.Event; import flash.events.EventDispatcher; import flash.events.MouseEvent; import flash.filters.GlowFilter; import flash.text.AntiAliasType; import flash.text.TextField; import flash.text.TextFormat; public class Slide extends EventDispatcher { public static const CLICK_THUMBNAIL:String = "clickThumbnail"; public var name:String; public var thumbnailLoader:ImageLoader; public var imageLoader:SWFLoader; public var thumbnail:ContentDisplay; public var image:Sprite; public function Slide(name:String, description:String, thumbnailLoader:ImageLoader, imageLoader:SWFLoader) { this.name = name; this.thumbnailLoader = thumbnailLoader; this.imageLoader = imageLoader; this.thumbnail = thumbnailLoader.content; this.thumbnail.addEventListener(MouseEvent.ROLL_OVER, _rollOverThumbnailHandler); this.thumbnail.addEventListener(MouseEvent.ROLL_OUT, _rollOutThumbnailHandler); this.thumbnail.addEventListener(MouseEvent.CLICK, _clickThumbnailHandler); _buildImage(description); } //The image is actually a Sprite that contains some description text at the bottom. If it has descriptive text, we put a 30% opaque black bar behind the white text to make it more readable too. private function _buildImage(description:String):void { this.image = new Sprite(); this.image.addChild(this.imageLoader.content); this.image.alpha = 0; if (description != "") { var bgBar:Shape = new Shape(); bgBar.graphics.beginFill(0x000000, 0.3); bgBar.graphics.drawRect(0, 0, this.image.width, 24); bgBar.graphics.endFill(); bgBar.y = this.image.height - bgBar.height; this.image.addChild(bgBar); var tf:TextField = new TextField(); tf.defaultTextFormat = new TextFormat("Arial", 12, 0xFFFFFF); tf.x = 6; tf.y = this.image.height - 20; tf.width = this.image.width - 12; tf.text = description; tf.selectable = false; tf.embedFonts = true; tf.multiline = false; tf.antiAliasType = AntiAliasType.ADVANCED; tf.filters = [new GlowFilter(0x000000, 0.8, 8, 8, 2, 2)]; this.image.addChild(tf); } } public function dispose():void { this.thumbnail.removeEventListener(MouseEvent.ROLL_OVER, _rollOverThumbnailHandler); this.thumbnail.removeEventListener(MouseEvent.ROLL_OUT, _rollOutThumbnailHandler); this.thumbnail.removeEventListener(MouseEvent.CLICK, _clickThumbnailHandler); this.thumbnailLoader.dispose(true); this.imageLoader.dispose(true); } public function setShowingStatus(showing:Boolean):void { if (showing) { TweenLite.to(this.thumbnail, 0.3, {glowFilter:{alpha:1, strength:4, blurX:3, blurY:4, color:0xFFFFFF, quality:1, inner:true}}); } else { TweenLite.to(this.thumbnail, 0.3, {glowFilter:{alpha:0, strength:0, remove:true}}); } } private function _rollOverThumbnailHandler(event:MouseEvent):void { TweenLite.to(this.thumbnail, 0.3, {colorTransform:{brightness:1}}); } private function _rollOutThumbnailHandler(event:MouseEvent):void { TweenLite.to(this.thumbnail, 0.5, {colorTransform:{brightness:0.5}}); } private function _clickThumbnailHandler(event:MouseEvent):void { dispatchEvent(new Event(CLICK_THUMBNAIL)); } } }

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) 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}) 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,

I completely forgot about it, THANKS. I tried to do the x and y configuration on my own but noticed that it messes up the scrolling math for the thumbnails at the bottom. I was not able to figure out which lines of code to alter,so thumbnails scroll as they suppose to. I understand that this is not a GreenSock issue. So if it is not an easy thing to point out - I will try to resolve it differently. As always THANKS for your help...