SyntaxMind

I have a gallery thats loading large images from thumbs. I want the large images to scale with the browser. Can I use LiquidStage for this? I have a blank movieclip on the stage named imgContainer which is the container for my large images I tried adding area.attach() to my imgContainer or even event.target.content and I get "Error: The parent of the DisplayObject imgContainer added to AutoFitArea instance55 doesn't share the same parent". Can anyone explain which instance should I add the area.attach() function to?

Ok I figured out the problem with the thumbnails scrolling too far. I needed to put the minScroll statement before the load, which I will update for anyone to see, but the scroll still seems to start before I get to the scroll area so hopefully I can figure it out and if anyone can help please fill me in. I'll keep this thread open until its solved. Thanks

Leaning LoaderMax has really come along. I've hit a brick wall on something that really doesn't have to do with greensock, but works with it and its the thumbnail scroll. So I'm hoping maybe Jack or Carl or someone with better math skills than I to chime in. If you look at my code. I am trying to create an app similar to the slideshow Jack posted on greensock resources. My scroll sometimes scrolls before I get in the scrollarea and also the thumbnails scroll well passed the stage bounds which kind of reveals the right end of the last thumbnail and some blank area. Someone please look at my enterFrame and loadThumbs functions and get me on the right track. Thanks. package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenMax; 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 static const THUMB_GAP:Number = 4; private static const SCROLL_SPEED:Number = 12; private static const SCROLL_AREA:Number = 100; public var arrowRight:MovieClip; public var arrowLeft:MovieClip; private var xImgList:XMLList; private var currentImage:String; private var image:ImageLoader; private var index:Number = 0; private var destScrollX:Number = 0; private var minScrollX:Number; 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 ); loadThumbs(); } private function completeHandler(event:LoaderEvent):void { TweenMax.to(event.target.content, 1.5, {alpha:1}); } // load in the image private function loadImage( index: Number ):void { 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) ); image.load(); } private function loadThumbs():void { var thumbsLoader:LoaderMax = new LoaderMax({name:"thumbLoader"}); thumbsLoader.addEventListener( LoaderEvent.COMPLETE, thumbsLoaded ); // set up variables for imageloadervars var curX:Number = THUMB_GAP; for (var i:int = 0; i < xImgList.length(); i++) { var iLoad:ImageLoader = new ImageLoader( "assets/thumbnails/" + xImgList[i].@url, new ImageLoaderVars() .name( xImgList[i].@name ) .width( THUMB_WIDTH ) .height( THUMB_HEIGHT ) .x( curX ) .smoothing( true ) .container( thbContainer ) .scaleMode( "proportionalOutside" ) .crop( true ) .alpha( 0 ) // prop stores xml data to be used for click .prop( "index", i ) .prop( "url", xImgList[i].@url) .prop( "title", xImgList[i].@title) .prop( "desc", xImgList[i].@desc) ); thumbsLoader.append( iLoad ); curX += THUMB_WIDTH + THUMB_GAP; } var minScrollX = IMAGE_WIDTH - curX; if (minScrollX > 0) { minScrollX = 0; } thumbsLoader.load(); } private function thumbsLoaded( e:LoaderEvent ):void { // set up click events for thumbnails for (var i:int = 0; i < xImgList.length(); i++) { // reference loaded content display, then supply a name( "p" ) or url + // (i + 1) because i stars with 0. var cdImg:ContentDisplay = LoaderMax.getContent( "agencynet" + (i + 1) ); cdImg.buttonMode = true; cdImg.addEventListener( MouseEvent.CLICK, thumbClick ); TweenMax.to( cdImg, 1, { autoAlpha: 1} ); } this.stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true); } 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 } // click handler for arrows 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 ); loadImage( index ) } } ); } else { loadImage( index ); } } 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 enterFrameHandler(event:Event):void { if (thbContainer.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) { destScrollX = 0; } TweenMax.to(thbContainer, 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; } TweenMax.to(thbContainer, 0.5, {x:destScrollX}); } } } } }

Oh wow it was a method and not a property. I underestimated trace statements. Not anymore. My goal in the end after this tutorial is to turn this portfolio into a proportional scale, but it would help to get the coding right first haha. I have been looking but If you have any links to where I can find out how to control the scaling, please send. Otherwise, thanks a lot for your help.

Yea thumbHolder is a movieclip on the stage. I'm doing the same tutorial that is in the LoaderMax learning resources from ZincInteractive to help me learn better. He doesn't seem to create thumbHolder = new MovieClip in the tutorial or addChild( thumbHolder ) in the tutorial and he gets the images to loop and load. I'm guessing because the movieclip is on the stage but I dont get any errors. Just a blank stage on test. I am seeing thumbs loaded when I run. I tried adding a trace statement outside the loop and I get a trace but inside the for loop doesn't trace. So it seems maybe the loop is wrong but not sure where.

Just getting a good grasp on the properties and methods of LoaderMax and now starting to put it together. I put in this starting code from the tutorial and I am getting no thumbs or images to show. Can anyone tell where my problem is? package { import flash.display.Sprite; import flash.display.MovieClip; 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; public class Main extends Sprite { public var thumbHolder:MovieClip; public function Main() { // load in xml var xPhotography:XMLLoader = new XMLLoader( "photography.xml" ); xPhotography.addEventListener( LoaderEvent.COMPLETE, xmlLoaded ); xPhotography.load(); } private function xmlLoaded( e:LoaderEvent ):void { var xData:XML = e.target.content; // get copy of xml var xImgList:XMLList = new XMLList( xData.img ); // grabbing xml image nodes // setup loaderMax object var thumbLoader:LoaderMax = new LoaderMax( {name: "thumbLoader"} ); thumbLoader.addEventListener( LoaderEvent.COMPLETE, thumbsLoaded ); for ( var i:int = 0; i < xImgList.length; i++ ) { var iLoad:ImageLoader = new ImageLoader( "images/thumbs/" + xImgList[i].@url, new ImageLoaderVars() .name( xImgList[i].@name ) .width( 150 ) .height( 100 ) .smoothing( true ) .container( thumbHolder ) ) thumbLoader.append( iLoad ); } thumbLoader.load(); } private function thumbsLoaded( e:LoaderEvent ):void { trace( "Thumbs Loaded" ); } } }

Here let me link a file so you can better understand. http://ge.tt/9BpH0J5/v. Sorry about all of that. Hard to explain. Well as you can see the box jumps to the right corner when I test the movie. Usually when using full browser flash, changing the registration point helps, but since registration doesn't matter in liquidstage, I am not sure why this is happening. Using stage.stageWidth / 2 or your 1024 / 2 causes the same result. Also I am noticing that the max height/width property works, but the min width/height seem not because I resize the browser very low it keeps scaling down to 0. Thanks for all the help by the way. Hope the file help.

Yes I understand that part now thanks. Only thing is the pin box was making it stick to the center of the stage. When I use var area:LiquidArea = new LiquidArea(this, stage.stageWidth / 2, stage.stageHeight / 2, 640, 480, 0xCC0000);, the center of the box seems to be pinned to the bottom right of the stage no matter where the registration point is. That ls.CENTER help me with that. So please tell what if you know why this box is pinning there?

Bare with my logic please. Most of my coding practices this early is trial and error. There really is no need for you to see any files. It's just a box mc. I am just trying to figure out how the resize work. The crop is what I got when I saw the script on the site http://www.greensock.com/autofitarea. Figured since it kind of integrates with the liquidstage, I could use the same script. Overall, I just want to find out how to make the box mc scale to the max size and min size when the browser is resized. Or is that now how it can work in liquidarea?

Does anyone have any tutorial on the autoareafit/liquidarea for min and max width and heights on stage resize? I am still having trouble understanding how this works. I make a simple mc 640 x 480 and want it to resize to a minimum of 320 x 240. I Enter the code below and get nothing out of the mc. Just the crop box scales but doesn't effect the movieclip. What am I missing? import com.greensock.layout.*; var ls:LiquidStage = new LiquidStage(this.stage, 1024, 768, 1024, 768); var area:LiquidArea = new LiquidArea(this, 0, 0, 640, 480, 0xCC0000); area.attach(box, {crop:true, minWidth:360, maxWidth:640, minHeight:240, maxHeight:480}); ls.attach(box, ls.CENTER); area.preview = true;

Yea seen that tutorial which is exactly how I would like it to be done. Only I haven't yet figured out OOP concepts yet and I can work them in. That's why I figured the greensock approach would be better. I'll figure it out somehow.

So I know endArray cycles through numbers to end with a target number. I'm wondering if this can be done with letters and words. Has anyone tried using the tweening engine to do this? I'm thinking more splittextfield but I'm wonder if anyone can steer me in a good direction.

Well I think it was a swfobect scrollbar coding issue. I am now using the swffit and it all lines up properly, but I will look into the stage align property. This I did not know. Thanks.

Ok last issue I am having in my testing phase of my portfolio. I am using liquidstage on a number of different swf that are working fine except for the intro page swf which, if browser is higher than 1024x768 the mc is centered fine, but when close to or below 1024x768, it doesn't line up center and the top of the mc seems to be bleeding above the browser window. If you have a small resolution screen, you can see what I am looking at - http://ahardenjr.com/. I tried lowering the new LiquidStage(this.stage,1024,768,1024,768) to new LiquidStage(this.stage,1024,768, 800, 600), but I still get the problem. Not sure if it is a liquidstage issue or a swfobject issue because the main swf lines up fine. Here is my liquidstage code if anyone has any solutions: import com.greensock.*; import com.greensock.layout.*; if (this.stage == null) { this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); } else { addedToStageHandler(null); } var ls:LiquidStage;//declaring it outside the function so it's available wherever you want - just make sure you don't run code that relies on it until it is properly defined in the addedToStageHandler(). function addedToStageHandler(event:Event=null):void { this.removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); var ls:LiquidStage = new LiquidStage(this.stage,1024,768,1500,800); ls.attach(intro, ls.CENTER); ls.attach(skip_mc, ls.CENTER); }

Just finishing up my portfolio for school and I have my name, the menu, and a footer bar pinned to cerrtain areas and tweening onto the stage using liquidstage and timelinemax. The pins do not work if the resize happens before my animation completes. What should I do to fix this?

Trying to create a footer bar that scale width only and stays at bottom on browser resize. Using liquid stage and liquid area I got the bar width to resize, but the pin is not working properly. Here is the code: var ls:LiquidStage = new LiquidStage(this.stage,1024,768,640,480); var foot:LiquidArea = new LiquidArea(this,0, 738, 1024,30); foot.attach(footer, ScaleMode.WIDTH_ONLY); ls.attach(footer, ls.BOTTOM_CENTER); What am I doing wrong?

So far I figured an alternative which seems to have worked so far but not really sure why. I changed the flash alignment form top/left to center/center and the stretching stops. Any clue why this works best?

Is there anyone here who would can examine my fla and give me some advice? I don't think explaining it will be clear enough for anyone to help, but Ill try. I am working on my porfolio. I am using timelinemax addLabel to navigate between my pages which has been great. I am also using LiquidStage to get the full browser effect which has been working fine up until now. I've added an enterFrame event to my complete addLabel (below) so that the mc would rotate on mouse movement. This works fine on regular browser size but when resized the mc gets very skewed and stretched. This is really holding me back from going forward and ending my testing of this effect. Can someone with good experience help please? Thanks. tl.addLabel("portfolio_in", tl.duration); tl.append(TweenMax.to(portfolio, 0, {alpha:1, immediateRender:false})); tl.append(TweenMax.from(portfolio.port_title, .5, {y:"-100", alpha:0})); tl.appendMultiple(TweenMax.allFrom(portfolio_clips, .5, {z:"100", alpha:0}, .1)); tl.addLabel("portfolio_complete", tl.duration); addEventListener(Event.ENTER_FRAME, portFrame); function portFrame(event:Event):void { portfolio.rotationX = (stage.mouseY - stage.stageHeight/2) * 0.01; portfolio.rotationY = (stage.mouseX - stage.stageWidth/2) * 0.009; }

Figured it out.

Whats the proper way to preload a swf that has the liquidstage script in it? I want to preload a swf that has a video scaling proportionally, but once I load test movie I get this error: Error: LiquidStage error: you must define a valid stage instance in the constructor. If the stage is null, please addEventListener(Event.ADDED_TO_STAGE) one of your DisplayObjects and wait to create the LiquidStage instance until AFTER the stage property is not null. at com.greensock.layout::LiquidStage() at teaser_vid_fla::MainTimeline/frame1(). Is it possible or is there another way of doing this?