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