SyntaxMind

Thanks. Sorry about the text. This project wasn't meant for the text to say anything. All of the elements are just dummy elements so that I can add the fla and .as files in this thread instead of using real work. Looks like this needed something different than what was explained in snorkl but I'm glad you found it. Thanks for the helps.

Carl, Sorry I was away from my computer yesterday. The files are attached. Let me know what you see. Thanks.

This was intended for Carl but if anyone else can assist, please advise. I am trying to combine Carl Schooff's stick nav with his TimelineMax addLabel tutorials seen here - http://www.snorkl.tv/2010/11/create-a-s ... y-clicked/. I have three movieclips on the screen. There are no nested movieclip symbols inside. With the script below, I was able to get an active sticky from the buttons, but without proper traces to "navItem" or "currentNav". I am guessing the over, out, and click tweens alone are causing this to work. But overall I want to have the button start with a stick to label which page I am on from the start. Carl gave me a fix but unless I understand why the navItem/currentNav traces aren't working, I dont think I can get my plan to work. Any suggestions? package { import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenMax; import com.greensock.TimelineMax; import com.greensock.easing.Back; public class Main extends MovieClip { public var tl:TimelineMax; // stage instances public var logo:MovieClip; public var aboutBtn:MovieClip; public var portfolioBtn:MovieClip; public var contactBtn:MovieClip; public var currentNav:MovieClip; private var targetSection:String; private var currentSection:String = "portfolio"; public function Main() { if (stage) { init(); trace( "stage" ) } else { trace( "listener added" ); addEventListener(Event.ADDED_TO_STAGE, init); } } private function init() { removeEventListener(Event.ADDED_TO_STAGE, init); navigation(); timeline(); } private function timeline():void { tl = new TimelineMax( {} ); contactTxt.alpha = aboutTxt.alpha = 0; box.alpha = 0; // portfolio section tl.addLabel("portfolio", tl.duration); tl.append( TweenMax.to(box, 1, {autoAlpha:1, onComplete:tl.pause}) ); tl.append( TweenMax.to(box, .5, {autoAlpha:0}) ); // about section tl.addLabel("about", tl.duration); tl.append( TweenMax.to(aboutTxt, 1, {autoAlpha:1, onComplete:tl.pause}) ); tl.append( TweenMax.to(aboutTxt, .5, {autoAlpha:0}) ); // contact section tl.addLabel("contact", tl.duration); tl.append( TweenMax.to(contactTxt, 1, {autoAlpha:1, onComplete:tl.pause}) ); tl.append( TweenMax.to(contactTxt, .5, {autoAlpha:0}) ); } private function onOverHandler(e:MouseEvent):void { // button IDs aboutBtn.ID = "about"; portfolioBtn.ID = "portfolio"; contactBtn.ID = "contact"; portfolioBtn.mouseChildren = false; aboutBtn.mouseChildren = false; contactBtn.mouseChildren = false; var navItem:MovieClip = e.target as MovieClip; trace(navItem); if (navItem != currentNav) { TweenMax.to(navItem, 1, {x:841, ease:Back.easeOut}); } } private function onOutHandler(e:MouseEvent):void { // button IDs aboutBtn.ID = "about"; portfolioBtn.ID = "portfolio"; contactBtn.ID = "contact"; portfolioBtn.mouseChildren = false; aboutBtn.mouseChildren = false; contactBtn.mouseChildren = false; var navItem:MovieClip = e.target as MovieClip; trace(navItem); if (navItem != currentNav) { TweenMax.to(navItem, 1, {x:873, ease:Back.easeOut}); } } private function onClickHandler(e:MouseEvent):void { // button IDs aboutBtn.ID = "about"; portfolioBtn.ID = "portfolio"; contactBtn.ID = "contact"; portfolioBtn.mouseChildren = false; aboutBtn.mouseChildren = false; contactBtn.mouseChildren = false; targetSection = e.target.ID; var navItem:MovieClip = e.target as MovieClip; trace(currentNav); if (targetSection != currentSection) { tl.gotoAndPlay( e.target.ID ); currentSection = targetSection; } if (currentNav != null) { TweenMax.to( currentNav, 1, {x:873}); } TweenMax.to( navItem, 1, {x:841}); currentNav = navItem; } private function navigation():void { aboutBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler); aboutBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler); aboutBtn.addEventListener(MouseEvent.CLICK, onClickHandler); portfolioBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler); portfolioBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler); portfolioBtn.addEventListener(MouseEvent.CLICK, onClickHandler); contactBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler); contactBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler); contactBtn.addEventListener(MouseEvent.CLICK, onClickHandler); } } }

No Im not saying that there is a degree to the proportional outside. Im just saying that on larger monitor screens the image that has the proportional outside cuts off the chunk of the image that I need shown. In this case the models head is close to the top of the image and in turn gets cut off. I am now working on cropping the image better in photoshop that will at least be decent enough. Trial and error. Thank you tips helped me find a solution.

Thanks I think this helps in the long run as it allows me to not have to photoshop images that are not landscape but for my case, the image that is not landscape doesnt cut off anymore but the landscaped image is still getting its head cut off because of the proportional outside. I haven't updated my test link so if you go into my test, you will see that even the landscape get its head cut off. I believe this would be a design or photography issue, but Im not totally sure. When tackling this, I didn't think the proportional_outside would be so drastic.

I have the LiquidStage in another method that is not shown. The code is broken into a timeline. But it is there. And thanks the proportional inside helps the cut off, but now the landscape is cut is slim on the sides. Can I control the XMLLoader or the attach() method with some type of if statement that would change if landscape or not?

Im stuck in a a design issue which may be handled through LoaderMax or not. I've been scripting an image gallery using XMLLoader only and using LiquidStage for scaling. The project has been a success except that some images on very large browsers cut the head off of my images. I'm wondering if there is something I could do with programming the XMLLoader vars or maybe just AS3 itself to fix. So this is for Greensock, programming, and design experts. The loading code I've used is below and the link to my test gallery is at - http://harden6615.com/site/index.html. IE is having problems with this so please view in another browser. private function xmlLoader():void { LoaderMax.activate([imageLoader]); xml = new XMLLoader("assets/data.xml", new XMLLoaderVars() .name("loader") .estimatedBytes(600000) .onComplete(xmlLoaded) .onProgress(loadProgress)); xml.load(); } private function xmlLoaded(e:LoaderEvent):void { trace("Loaded"); progressBar.visible = false; showImage(index); arrowListeners(); timeline(); } private function loadProgress(event:LoaderEvent):void { progressBar.visible = true; progressBar.scaleX = event.target.progress; } private function showImage(index:int):void { la = new LiquidArea(imgHolder, 0, 0, 1024, 768); images = LoaderMax.getContent("loader"); imgHolder.addChild(images[index]); TweenMax.from(images[index], 1, {alpha:0}); la.attach(images[index], {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE, crop:true}); la.update(); } // BUTTON FUNCTIONS private function arrowListeners():void { arrowRight.addEventListener(MouseEvent.ROLL_OVER, overRight, false, 0, true); arrowRight.addEventListener(MouseEvent.ROLL_OUT, outRight, false, 0, true); arrowRight.addEventListener( MouseEvent.CLICK, showNext ); arrowLeft.addEventListener(MouseEvent.ROLL_OVER, overLeft, false, 0, true); arrowLeft.addEventListener(MouseEvent.ROLL_OUT, outLeft, false, 0, true); arrowLeft.addEventListener( MouseEvent.CLICK, showPrev ); } private function overLeft(e:MouseEvent):void { TweenMax.to(e.currentTarget, .5, {alpha:1}); } private function outLeft(e:MouseEvent):void { TweenMax.to(e.currentTarget, 1, {alpha:.7}); } private function overRight(e:MouseEvent):void { TweenMax.to(e.currentTarget, .5, {alpha:1}); } private function outRight(e:MouseEvent):void { TweenMax.to(e.currentTarget, 1, {alpha:.7}); } // CLICK LISTENERS private function showNext( e:MouseEvent ):void { index++ if (index > images.length - 1) { index = 0; } showImage(index); } private function showPrev( e:MouseEvent ):void { index-- if (index < 0) { index = images.length - 1; } showImage(index); } } }

Didn't think about it like that. I can actually fade in and out the container and not have to worry about loading and unloading. Thanks that helped.

What would be the proper way to incorporate LoaderMax with TimelineMax? So far I got this website going the way I want it. It loads when on the portfolio label which is the starting label but when I want to go to other pages, Im not sure how to either unload or hide my current image. I tried xml.load() and xml.unload() in the proper labels but it seems to read the unload as well. Are they not compatible? Should I go with another timeline option? If I need to add more of my code to this post for evaluation I will, but I didn't want to add so much unneeded code here. private function timeline():void { tl = new TimelineMax( {} ); contactTxt.alpha = aboutTxt.alpha = 0; arrowRight.alpha = arrowLeft.alpha = .0; box.alpha = 0; aboutBtn.buttonMode = true; portfolioBtn.buttonMode = true; contactBtn.buttonMode = true; // portfolio section tl.addLabel("portfolio_in", tl.duration); xmlLoader(); // view the loader function below xml.load(); arrowListeners(); tl.addLabel("portfolio_complete", tl.duration); // about section tl.addLabel("about_in", tl.duration); tl.append( TweenMax.to(aboutTxt, 1, {autoAlpha:1}) ); tl.addLabel("about_complete", tl.duration); tl.append( TweenMax.to(aboutTxt, 1, {autoAlpha:0}) ); // contact section tl.addLabel("contact_in", tl.duration); tl.append( TweenMax.to(contactTxt, 1, {autoAlpha:1}) ); tl.addLabel("contact_complete", tl.duration); tl.append( TweenMax.to(contactTxt, 1, {autoAlpha:0}) ); tl.tweenTo("portfolio_complete"); } private function onOverHandler(e:MouseEvent):void { TweenMax.to(e.target, 1, {y:720, ease:Back.easeOut}); } private function onOutHandler(e:MouseEvent):void { TweenMax.to(e.target, 1, {y:737, ease:Back.easeOut}); } private function onClickHandler(e:MouseEvent):void { // button IDs aboutBtn.ID = aboutBtn.bar.ID = "about"; portfolioBtn.ID = portfolioBtn.bar.ID = "portfolio"; contactBtn.ID = contactBtn.bar.ID = "contact"; targetSection = e.target.ID; if (targetSection != currentSection) { tl.tweenFromTo(targetSection + "_in", targetSection + "_complete"); currentSection = targetSection; } } private function navigation():void { aboutBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler); aboutBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler); aboutBtn.addEventListener(MouseEvent.CLICK, onClickHandler); portfolioBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler); portfolioBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler); portfolioBtn.addEventListener(MouseEvent.CLICK, onClickHandler); contactBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler); contactBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler); contactBtn.addEventListener(MouseEvent.CLICK, onClickHandler); } private function xmlLoader():void { LoaderMax.activate([imageLoader]); xml = new XMLLoader("assets/data.xml", new XMLLoaderVars() .name("loader") .estimatedBytes(600000) .onComplete(xmlLoaded) .onProgress(loadProgress)); }

Thank you kind sir. That did it.

Fixed!!! Thanks carl. I happen to read more through your posts and noticed I declared var images in the function and already gave a private var to images inside the class. I removed var in the showImage function and images.length traces now. Your post helped a lot. I do have one last fix issue. The progress bar is jerky and Im not sure why. It starts at 100 percent then jumps to the actual percentage loading. Can you see where I messed that up?

Hey carl sorry for the late reply. After a few responses it seems you figured out what I was trying to do. To explain further, I am just wanting to create a slideshow with next and prev buttons and possibly create a timer event of some sort for the next image. But for now the buttons. Looking at your last message, it seems you have come to the same conclusion I had given you are saying that the only change I should make is to the length() method/property. I didn't think I needed an XMLList either because images was already an array on the content "loader" and also .length() was a typo. But when I traced either images.length() or images.length, I get either null or this error: "TypeError: Error #1009: Cannot access a property or method of a null object reference at Main/onRightClick()". So I figured in or to write an if statement to check if the click is on the last images was XMLList, but now I'm stuck. I hope this clears it up. If so, please help with my bad coding.

Jack I remembered what you said about not having to create a new ImageLoader every time I want to load an image. After looking at different tutorials, I still couldn't find an example of how that would be done so I tried again to reconstruct a cleaner version. My wall now is get an XMLLIST array. As you can see I tried to add next/prev button clicks but am having a problem with an array.length(). If you look in the click function the commented code gives me an error. How would I add an XMLLIST to this? <?xml version="1.0" encoding="iso-8859-1"?> package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; import flash.display.DisplayObject; import com.greensock.TweenMax; import com.greensock.layout.*; import com.greensock.loading.LoaderMax; import com.greensock.loading.XMLLoader; import com.greensock.loading.ImageLoader; import com.greensock.events.LoaderEvent; import com.greensock.loading.display.ContentDisplay; import com.greensock.loading.data.XMLLoaderVars; public class Main extends MovieClip { public var imgHolder:MovieClip; private var ls:LiquidStage; private var la:LiquidArea; private var xml:XMLLoader; private var index:int = 0; private var images:Array; public function Main() { arrowRight.alpha = arrowLeft.alpha = 0; xmlLoader(); } private function xmlLoader():void { LoaderMax.activate([imageLoader]); xml = new XMLLoader("assets/data.xml", new XMLLoaderVars() .name("loader") .onComplete(xmlLoaded) .onProgress(loadProgress)); xml.load(); } private function xmlLoaded(e:LoaderEvent):void { trace("Loaded"); arrowListeners(); showImage(index); } private function loadProgress(event:LoaderEvent):void { progressMC.progressBar.scaleX = event.target.progress; } private function showImage(index:int):void { var images = LoaderMax.getContent("loader"); imgHolder.addChild(images[index]); images[index].width = stage.stageWidth; images[index].height = stage.stageHeight; //fade it in TweenMax.from(images[index], 1, {alpha:0}); } private function arrowListeners():void { arrowRight.addEventListener(MouseEvent.ROLL_OVER, rollOverArrowHandler, false, 0, true); arrowRight.addEventListener(MouseEvent.ROLL_OUT, rollOutArrowHandler, false, 0, true); arrowRight.addEventListener( MouseEvent.CLICK, onRightClick ); arrowLeft.addEventListener(MouseEvent.ROLL_OVER, rollOverArrowHandler, false, 0, true); arrowLeft.addEventListener(MouseEvent.ROLL_OUT, rollOutArrowHandler, false, 0, true); arrowLeft.addEventListener( MouseEvent.CLICK, onLeftClick ); } private function rollOverArrowHandler(e:MouseEvent):void { TweenMax.to(e.currentTarget, 0.5, {alpha:1}); } private function rollOutArrowHandler(e:MouseEvent):void { TweenMax.to(e.currentTarget, 0.5, {alpha:0}); } // click handler for arrows private function onRightClick( e:MouseEvent ):void { index++ /*if (index > images.length()) { index = 0; }*/ showImage(index); } private function onLeftClick( e:MouseEvent ):void { index-- /*if (index < 0) { index = images.length() - 1; }*/ showImage(index); } } }

No sorry I didn't explain that properly. I'm looking for the sticky nav effect Carl used in snorkle.tv. I tried to incorporate his currentNav and navItem variables but for some reason Im getting undefined and null traces. He doesn't use the ID property like I am using here so I'm wondering if anyone can see how I would stick what I have.

I am working on a site and I have this navigation that when hovered will raise its height, but once I mouse out the height does not stay. Does anyone have any tips on how I could work this into what I have so far? package { import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenMax; import com.greensock.TimelineMax; import com.greensock.easing.Back; public class Main extends MovieClip { public var tl:TimelineMax; // stage instances public var logo:MovieClip; public var aboutBtn:MovieClip; public var portfolioBtn:MovieClip; public var contactBtn:MovieClip; private var targetSection:String; private var currentSection:String = "portfolio"; public function Main() { if (stage) { init(); trace( "stage" ) } else { trace( "listener added" ); addEventListener(Event.ADDED_TO_STAGE, init); } } private function init() { removeEventListener(Event.ADDED_TO_STAGE, init); navigation(); timeline(); } private function timeline():void { tl = new TimelineMax( {} ); contactTxt.alpha = aboutTxt.alpha = 0; box.alpha = 0; aboutBtn.buttonMode = true; portfolioBtn.buttonMode = true; contactBtn.buttonMode = true; // portfolio section tl.addLabel("portfolio", tl.duration); tl.append( TweenMax.to(box, 1, {autoAlpha:1, onComplete:tl.pause}) ); tl.append( TweenMax.to(box, .5, {autoAlpha:0}) ); // about section tl.addLabel("about", tl.duration); tl.append( TweenMax.to(aboutTxt, 1, {autoAlpha:1, onComplete:tl.pause}) ); tl.append( TweenMax.to(aboutTxt, .5, {autoAlpha:0}) ); // contact section tl.addLabel("contact", tl.duration); tl.append( TweenMax.to(contactTxt, 1, {autoAlpha:1, onComplete:tl.pause}) ); tl.append( TweenMax.to(contactTxt, .5, {autoAlpha:0}) ); } private function onOverHandler(e:MouseEvent):void { TweenMax.to(e.target, 1, {y:720, ease:Back.easeOut}); } private function onOutHandler(e:MouseEvent):void { TweenMax.to(e.target, 1, {y:737, ease:Back.easeOut}); } private function onClickHandler(e:MouseEvent):void { // button IDs aboutBtn.ID = aboutBtn.bar.ID = "about"; portfolioBtn.ID = portfolioBtn.bar.ID = "portfolio"; contactBtn.ID = contactBtn.bar.ID = "contact"; targetSection = e.target.ID; if (targetSection != currentSection) { tl.gotoAndPlay( e.target.ID ); currentSection = targetSection; } } private function navigation():void { aboutBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler); aboutBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler); aboutBtn.addEventListener(MouseEvent.CLICK, onClickHandler); portfolioBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler); portfolioBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler); portfolioBtn.addEventListener(MouseEvent.CLICK, onClickHandler); contactBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler); contactBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler); contactBtn.addEventListener(MouseEvent.CLICK, onClickHandler); } } }

I'm trying to create a roll over menu button that tweens in the navigation once Im in the area but it seems really glitchy at times. Most of the time it works, but sometimes when I rollover the menu area, which has an invisible shape to add more rollover area, the nav buttons show before the full animation finishes. Any help? private function timeline():void { tl = new TimelineMax( {} ); // portfolio section tl.addLabel("portfolio", tl.duration); // about section tl.addLabel("about", tl.duration); // contact section tl.addLabel("contact", tl.duration); tl.tweenTo("portfolio"); //menuOver tl.addLabel("menuOver", tl.duration); tl.append( TweenMax.to( menuBtn, 1, {y:770, ease:Back.easeOut}) ); tl.append( TweenMax.to( portfolioBtn, 1, {y:739, ease:Back.easeOut}), -.7 ); tl.append( TweenMax.to( aboutBtn, 1, {y:739, ease:Back.easeOut}), -.7 ); tl.append( TweenMax.to( contactBtn, 1, {y:739, ease:Back.easeOut, onComplete:tl.pause}), -.7 ); //menuOut tl.addLabel("menuOut", tl.duration); tl.append( TweenMax.to( portfolioBtn, 1, {y:770, ease:Back.easeOut}) ); tl.append( TweenMax.to( aboutBtn, 1, {y:770, ease:Back.easeOut}), -.9 ); tl.append( TweenMax.to( contactBtn, 1, {y:770, ease:Back.easeOut}), -.9 ); tl.append( TweenMax.to( menuBtn, 1, {y:739, ease:Back.easeOut, onComplete:tl.pause }), -.9 ) ; }

I had told you before in the previous post that I used your suggestion and it gave me the exactly same error. What I was hoping by showing you the function again was to see if we could now get to a better solution since I thought I knew where it was. This actually cleaned up the error. I dont get the error anymore once I added LiquidStage/Area to the constructor. Thats where I get confused. After looking at the "Meet LoaderMax" videos and looking at the demos, I wasn't really sure how you can reference back to the array in a different function. As for slideshow.zip, I am not that far along with AS3 so just viewing this without a video was intimidating but I think my ultimate goal now will have to be picking this apart if I am going to create what I want. And yes I will zip the file together so you can have a look. Thanks a lot by the way. I am a sucky newb at this but I've learned a lot from my mistakes.

Yea I added it inside if statement as well. The thing is in the old code I had below, if I take out the line "removeChildAt(0) then this whole thing works fine, except I dont get garbage collection and this application will get heavy loading. There has to be a way around this. After searching the error 2006, it seems that the issue is with remove/getChildAt functions. Ultimately, I just want to loading the right image from next or thumbnails and remove the last image. package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.display.DisplayObject; import com.greensock.TweenMax; import com.greensock.layout.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.XMLLoader; import com.greensock.loading.LoaderMax; import com.greensock.loading.ImageLoader; import com.greensock.loading.data.ImageLoaderVars; import com.greensock.loading.display.ContentDisplay; public class Main extends MovieClip { private static const THUMB_WIDTH:Number = 100; private static const THUMB_HEIGHT:Number = 64; private static const IMAGE_WIDTH:Number = 550; private static const IMAGE_HEIGHT:Number = 355; private var ls:LiquidStage; private var la:LiquidArea; private var xImgList:XMLList; public var arrowRight:MovieClip; public var arrowLeft:MovieClip; private var currentImage:String; private var image:ImageLoader; private var index:Number = 0; public function Main() { // load in xml var xPhotography:XMLLoader = new XMLLoader("assets/data.xml"); xPhotography.addEventListener( LoaderEvent.COMPLETE, xmlLoaded ); xPhotography.load(); arrowRight.alpha = arrowLeft.alpha = 0; arrowRight.addEventListener(MouseEvent.ROLL_OVER, rollOverArrowHandler, false, 0, true); arrowRight.addEventListener(MouseEvent.ROLL_OUT, rollOutArrowHandler, false, 0, true); arrowRight.addEventListener( MouseEvent.CLICK, onArrowClick ); arrowLeft.addEventListener(MouseEvent.ROLL_OVER, rollOverArrowHandler, false, 0, true); arrowLeft.addEventListener(MouseEvent.ROLL_OUT, rollOutArrowHandler, false, 0, true); arrowLeft.addEventListener( MouseEvent.CLICK, onArrowClick ); } private function xmlLoaded( e:LoaderEvent ):void { var xData:XML = e.target.content;// get copy of xml xImgList = new XMLList(xData.image);// grabbing xml image nodes loadImage( 0 ); } // load in the image private function loadImage( index: Number ):void { ls = new LiquidStage(this.stage,550,419); la = new LiquidArea(imgContainer, 0, 0, 550, 419); var file:String = xImgList[index].@url; var image:ImageLoader = new ImageLoader("assets/images/" + file, new ImageLoaderVars() .container( imgContainer ) .x(0) .y(0) .alpha( 0 ) .width( stage.stageWidth ) .height( stage.stageHeight ) .onComplete(completeHandler) .scaleMode( "proportionalOutside" ) .autoDispose(true) ); image.load(); la.attach(image.content, {scaleMode:"proportionalOutside", crop:true}); } private function completeHandler(event:LoaderEvent):void { /*la = new LiquidArea(imgContainer, 0, 0, 550, 419); la.update();*/ TweenMax.to(event.target.content, 1.5, {alpha:1}); } private function rollOverArrowHandler(e:MouseEvent):void { TweenMax.to(e.currentTarget, 0.5, {alpha:1}); } private function rollOutArrowHandler(e:MouseEvent):void { TweenMax.to(e.currentTarget, 0.5, {alpha:0}); } private function onArrowClick( e:MouseEvent ):void { switch (e.target) { case arrowRight : index++; break; case arrowLeft : index--; break; } if (index == xImgList.length()) { index = 0; } else if (index < 0) { index = xImgList.length() - 1; } checkOldImage( index );// needed to help loading times } private function checkOldImage( index:Number ):void { //check if there is already an image loaded if ( imgContainer.numChildren > 0 ) { var oldClip:Sprite = Sprite( imgContainer.getChildAt( 0 ) ); TweenMax.to( oldClip, .5, { autoAlpha: 0, onComplete: function() { imgContainer.removeChildAt( 0 ); // commenting out this line removes the error but does not help fix the app. loadImage( index ) } } ); } else { loadImage( index ); } } } }

Haha yea same error 2006: out of bounds error. I think this error is somewhere else in the code that I can't find. Wasn't as simple a project as I thought. I might have to test full browser LoaderMax images at a later when my skills get better and settle for a gallery with the initial size that comes now.

With that I still get the same error I was getting before which was very confusing "1118: Implicit coercion of a value with static type flash.display:DisplayObject to a possibly unrelated type flash.display:Sprite". The full code can be found on the scroll problem forum question if you need to see it but it's the same story with that problem. Plus the image is doing a weird crop so that's another problem.

Yea as I test and test some more. There are far more errors that are unexplained. Like the placement of the image and an unknown bar on the right side of the browser on scale. And that code you gave me didn't really fix the problem for that RangError, it just presented a new error. I thinks it's best I come up with a new gallery functionality that I can actually accomplish and accept that what I was going for is far passed my skill level instead of coming back here for help on a ton of new issues. Thanks again for the help. Sorry we weren't able to clear this up.

Haha ok I think I understand that logic. Ok so that worked after added LiquidStage(imgContainer, 0, 0..) but now have another problems. I have this function oldImage() shown in the code, which checks if there is an image already there before loading another image and fades out if there is. This seems to conflict with the liquidstage and give the error "RangeError: Error #2006: The supplied index is out of bounds." Not sure of a better way to check if image is there and keep liquidarea working. private function thumbClick( e:MouseEvent ):void { // access prop with vars object var vars:Object = ImageLoader(e.currentTarget.loader).vars; trace( vars.url ); checkOldImage( vars.index ); // good practice for tweening image if it is already on stage } private function checkOldImage( index:Number ):void { //check if there is already an image loaded if ( imgContainer.numChildren > 0 ) { var oldClip:Sprite = Sprite( imgContainer.getChildAt( 0 ) ); TweenMax.to( oldClip, .5, { autoAlpha: 0, onComplete: function() { imgContainer.removeChildAt( 0 ); loadImage( index ) } } ); } else { loadImage( index ); } }

Thing is it works fine when I test yours but mine has problems with the same code it seems. So not sure. I will try the hack method. Thanks.

Yea I put trace( this.mouseX ) after the if statements and at first no value when outside the area but on the second test movie I get random values before I enter the area. So I think somehow it is evaluating the following statement to true but dont understand how?

Yea I thought I had tried something like that to test at first and it gave me the same error. Had something like this: private function loadImage( index: Number ):void { ls = new LiquidStage(this.stage, 550, 419, 550, 419); area = new LiquidArea(this.stage, 0, 0, 550, 419); var file:String = xImgList[index]. @ url; var image:ImageLoader = new ImageLoader("assets/images/" + file, new ImageLoaderVars() .container( imgContainer ) .x(0) .y(0) .alpha( 0 ) .width( IMAGE_WIDTH ) .height( IMAGE_HEIGHT ) .prop( "index", index ) .prop( "url", xImgList[index].@url) .prop( "title", xImgList[index].@title) .prop( "desc", xImgList[index].@desc) .onComplete(completeHandler) ); area.attach(image.content, {scaleMode:"proportionalOutside", crop:true}); image.load(); }