brantseibert

Answering my own question ... One obvious solution which I will try is to place the points (dots on a map) as MCs within the map MC. I do not want those points to scale with the map MC, but may have to live with that. If you see a better solution, please let me know. Thanks.

Hi Jack, The generic question I have is how to position objects consistently (relative to each other) on the stage when one object fills the stage and the other object is tiny? The specific question is: I have a background map of the world and will be locating points on the map with dots. How do I make the map and points center on the same location so that, on resize, the points stay at the same location on the map? var ls:LiquidStage = new LiquidStage(this.stage, 1000, 580, 1000, 580); ls.update(); ls.attach(point1, ls.CENTER); var la1:LiquidArea = new LiquidArea(this, 0, 0, 1000, 580); la1.attach(map1, ScaleMode.PROPORTIONAL_INSIDE); The problem I have with this code is that the point does not stay at the same location on the map when the browser window is resized (or when the browser window simply has different dimensions than the original). Thank you.

I have a background map of the world and will be locating points on the map with dots. var ls:LiquidStage = new LiquidStage(this.stage, 1000, 580, 1000, 580); ls.update(); ls.attach(point1, ls.CENTER); var la1:LiquidArea = new LiquidArea(this, 0, 0, 1000, 580); la1.attach(map1, ScaleMode.PROPORTIONAL_INSIDE); I will have 1,000 points that are dynamically loaded and unloaded (not painted on map). How do I keep New York City from falling in the ocean or moving to New Jersey when the user resizes the browser window?

Hi, I am using the code from http://www.snorkl.tv/2010/12/easy-breez ... r-good-ax/ (one of the video tutorials from Greensock Learning Resources). When the browser width/height ratios are taller than the original FLA, the top edge of the flip card stays at the same (starting) y value during the entire tween. Only the bottom edge of the flip card behaves correctly and becomes taller at the narrowest point. Everything is good when the browser width/height ratios are wider than the original FLA. I am using LiquidStage to keep the flip card ("screen1") centered on stage. ... var ls:LiquidStage = new LiquidStage(this.stage, 1000, 600, 1000, 600); ls.update(); ls.attach(screen1, ls.CENTER); screen1.back1.rotationY = -90; screen1.back1.alpha = 0; ... public var flipScreenTL:TimelineMax = new TimelineMax(); ... private function flipScreen():void { var flipSpeed:Number = 0.5; flipScreenTL.append(TweenMax.to(screen1.front1, flipSpeed, { rotationY:90, visible:false, ease:Linear.easeNone } )); flipScreenTL.append(TweenMax.to(screen1.back1, 0, { alpha:1, immediateRender:false } )); flipScreenTL.append(TweenMax.to(screen1.back1, flipSpeed, { rotationY:0, ease:Linear.easeNone } )); } Also, the object (screen1) has the registration point in the center, exactly as shown in the online tutorial. Again, it all works perfect when the browser is original size or wider, but not taller. Thank you.

I would like to place a full screen video on the page and give the user the ability to control the timeline of the video. The user would grab a control and move it left or right in order to walk forward or back through the video. What I mean by "walk" through the video is to move frame by frame forward or back, at a slower or faster rate. The farther right or left (from center) the user moves the control, the faster it plays. The maximum speed would be the FPS of the FLA (say 24 or 30 frames per second [FPS]). So the control regulates both the direction and frame rate. I understand that direction can be controlled by play() and reverse(). Can this be combined with code that controls the FPS? To visualize the effect, imagine a movie camera shoots a scene of two people walking down a street, and the camera is walking with them at the same speed -- so that the buildings in the background are panned. Now imagine grabbing a control and making the people walk backwards or forwards at a slower or faster speed. The building in the background passes horizontally across the screen and the user controls the speed. Thank you.

Great, thanks. The code sample was just what I needed. Cheers.

What is the best syntax to use to anchor a Liquid Area to the top? var ls:LiquidStage = new LiquidStage(this.stage, 1000, 500, 1000, 500); ... var la2:LiquidArea=new LiquidArea(this,35,90,930,400); la2.attach(mask1, ScaleMode.PROPORTIONAL_INSIDE); This code is working great. But I would like to improve it by anchoring la2 so that it stays at y=90. Currently it floats down on large browser sizes. PLEASE post a code example with the proper syntax. I am syntacticly challenged. After I see one code example, I can riff from there and develop an understanding by using it. Thanks so much. p.s. The generic question is if it is possible to anchor something that is ScaleMode.PROPORTIONAL_INSIDE. But, again, seeing the code would be immense help. Much obliged.

When I switch off preview I get the ever popular : Error #1009: Cannot access a property or method of a null object reference. THIS DOES NOT THROW AN ERROR: var la3:LiquidArea = new LiquidArea(this, 500, 200, 400, 300, 0xFFFFFF); la3.preview = true; la3.attach(device1, ScaleMode.PROPORTIONAL_INSIDE); ls.attach(la3, ls.TOP_LEFT); THIS DOES THROW A 1009 ERROR: var la3:LiquidArea = new LiquidArea(this, 500, 200, 400, 300, 0xFFFFFF); //la3.preview = true; la3.attach(device1, ScaleMode.PROPORTIONAL_INSIDE); ls.attach(la3, ls.TOP_LEFT); Thanks for your help.

Happy 4th! I would like to adjust the x position of a child swf upon a navigation button event. The child is sitting within the classic GAIA heirarchy index/nav/contact. Here is the relevant GAIA nav click event code in the parent AS file: ... private function onNavClick(e:MouseEvent):void { switch(e.currentTarget) { case homeBtn: Gaia.api.goto(Pages.HOME); break; case contactBtn: TweenLite.to(childSWF, 1, { x: -500 } ); break; case nav1: Gaia.api.goto(Pages.MARKETING); break; ... I am trying to do what Smetna does on Bio click: http://smetana.net/ I see two steps required: 1. Determine the current child that is playing; (What is the syntax for doing this? All I found was this.getChildByName, but that is not what I want) 2. Tween the child: case contactBtn: TweenLite.to(childSWF, 1, { x: -500 } ); break; Can you please help me with the syntax on step 1? Or is there a better way? Thanks!

ls.update(); // Brilliant! private function init():void { ls = new LiquidStage(this.stage, 1000, 600, 1000, 600); ls.update(); ls.attach(deviceContainer, ls.CENTER); ls.attach(textContainer, ls.CENTER); } This simple command solved everything. Update is called each time a relevant event occurs. I assume my code is overly verbose, with multiple LiquidStages, and probably causing extraneous object calls (etc.) client side. But those issues are minor with such a small application. The benefit gained, on the other hand, is that this architecture provides a simple and powerful set of capabilities that are easily coded. After we clean up our application, I will post a sample application for others to see. p.s. With regard to your question, all of the swf documents are the same dimension 1000x600.

With regard to your question, stage.stageWidth works great. First, in the FLA, I place the object where I want it. Then I simply bring the object to that point from off stage right. The problem is not with the tween, it is with the layout. Currently, if the stage is not 1000x600, say it is 1264x700, the pinpoint should adjust to the center and the object should center. This works for the LiquidStage code that is in indexPage > navPage (one level of nesting), but not for code that is in indexPage > navPage > homePage (two levels of nesting). If I understand you correctly, I should instead only declare one ls:LiquidStage in indexPage. What then is the syntax to reference that code in the parent to control the layout of objects in a child like indexPage > navPage > homePage? Can you post code with an example and I can learn the syntax from your example? Or is there a code example for referencing nested SWFs in docs? Thanks.

I think the best way to solve this may be to discuss the generic question regarding nested SWFs: QUESTION: What is the best practice for controlling the layout of assets (mc, button) of child SWFs? p.s. I did remove the tweens and that solved the layout problem. But the tweens are essential, so I am not sure how that helps. It would be great if you can help me understand the best practice for managing layouts in the context of nested SWF files. Thanks again.

Hi Jack, I am building a template application using GAIA and Greensock. The default in GAIA is to create a nested page structure like this: - index.swf -- nav.swf --- page.swf ---- asset (the assets can also be nested directly under index or nav)(below I insert the background image asset in index and that works) QUESTION: What is the best practice for controlling the layout of assets (mc, button) of child SWFs? The application I am building has a series of photos that fill the entire page. ------------------------------------ IndexPage.as ------------------------------------------------------ public function IndexPage() { super(); alpha = 0; } private function init():void { var ls:LiquidStage = new LiquidStage(this.stage, 1000, 600, 1000, 600); var la:LiquidArea=new LiquidArea(this,0,0,1000,600); la.attach(backgroundMC, ScaleMode.PROPORTIONAL_OUTSIDE); // This works perfectly! } override public function transitionIn():void { super.transitionIn(); init(); TweenMax.to(this, 0.3, {alpha:1, onComplete:transitionInComplete}); } // ... Gaia calls transitionIn() after initial load and i then call init(). ----------------------------------------- NavPage.as ----------------------------------------- public function NavPage() { super(); alpha = 0; homeBtn.addEventListener(MouseEvent.MOUSE_UP, onNavClick); nav1.addEventListener(MouseEvent.MOUSE_UP, onNavClick); nav2.addEventListener(MouseEvent.MOUSE_UP, onNavClick); nav3.addEventListener(MouseEvent.MOUSE_UP, onNavClick); nav4.addEventListener(MouseEvent.MOUSE_UP, onNavClick); } private function init():void { var ls:LiquidStage = new LiquidStage(this.stage, 1000, 600, 1000, 600); ls.attach(nav1, ls.BOTTOM_LEFT); ls.attach(nav2, ls.BOTTOM_LEFT); ls.attach(nav3, ls.BOTTOM_LEFT); ls.attach(nav4, ls.TOP_RIGHT); // This works. } ... override public function transitionIn():void { //Gaia.api.afterGoto(onAfterGoto); init(); super.transitionIn(); TweenLite.to(this, 0.3, {alpha:1, onComplete:transitionInComplete}); } ----------------------------------------- HomePage.as --------------------------------------------------- But this code in the nested HomePage.as compiles but does not have any effect. (Strange thing is that it does center stuff when testing in flash but not when in a browser.) public class HomePage extends AbstractPage { public var textContainer:MovieClip; public var deviceContainer:MovieClip; public function HomePage() { super(); alpha = 0; } private function init():void { var ls:LiquidStage = new LiquidStage(this.stage, 1000, 600, 1000, 600); ls.attach(deviceContainer, ls.CENTER); ls.attach(textContainer, ls.CENTER); //This compiles but does not impact the layout. } public function homeIn():void { var sceneHeight:Number = stage.stageHeight; var sceneWidth:Number = stage.stageWidth; var homeTimeline:TimelineLite = new TimelineLite(); homeTimeline.appendMultiple([TweenLite.from(deviceContainer, 1, {x:sceneWidth, delay:0, ease:Strong.easeOut}), TweenLite.from(textContainer, 1, {x:-900, delay:0, ease:Strong.easeOut})], 0, TweenAlign.START, 1); } public function homeOut():void{ var sceneHeight:Number = stage.stageHeight; var sceneWidth:Number = stage.stageWidth; var homeTimeline:TimelineLite = new TimelineLite(); homeTimeline.appendMultiple([TweenLite.to(deviceContainer, 1, {x:sceneWidth, delay:0, ease:Strong.easeIn}), TweenLite.to(textContainer, 1, { x: -900, delay:0, ease:Strong.easeIn } ), TweenLite.to(this, 0.3, { alpha:0, delay:0, onComplete:transitionOutComplete } )], 0, TweenAlign.START, 1); } override public function transitionIn():void { init(); super.transitionIn(); TweenLite.to(this, 0.3, {alpha:1, delay:0, onComplete:transitionInComplete}); homeIn(); } Sorry for being so verbose! Thanks.

Hi Jack: Do you have a recommendation on using GAIA? http://www.gaiaflashframework.com/ The appealing part of GAIA for me is that it provides a framework for OO coding, instead of building an entire site up from scratch.

Hi, PROBLEM I have a parent MC that fills the screen using LiquidArea. The parent MC has children MCs which I swap out to change the background image. This all works great if the children are all the same dimension, but does not work if the children have different aspect ratios. OBJECTIVE: I would like to place images of different dimensions into a single Movie Clip. The images are background pictures that fill the screen. I will then pan wide images horizontally and tall images vertically. One way to think of it is the parent should act like a mask -- and the portions of the children that fall outside the mask should not effect the scaling calculations of the parent. CODE: - The document is 1000 x 600 - activeMC is 1000 x 600 - pic1 is 2000 x 1200 (the large size allows it to scale and stay crisp) - pic2 is 2000 x 1800 (600 pixels higher than pic1) - pic3 is 2400 x 1200 (400 pixels wider than pic1) I placed pic1 inside activeMC and it fills the screen perfectly with this: var mainLiquidArea:LiquidArea=new LiquidArea(this,0,0,1000,600); mainLiquidArea.attach(activeMC, ScaleMode.PROPORTIONAL_OUTSIDE); But, when I add pic2 or pic3 to activeMC, pic1 no longer fills the screen on large monitors. ANALYSIS: I assume that the issue is: when I add children (pic1, pic2, pic3) to the parent (actvieMC), LiquidArea code calculates sizes based on the largest width and height (2400, 1800). Instead, I want the Liquid Area to stay in the 1000x600 ratio and have the extra portions of pic2 and pic3 simply fall outside the viewable stage. I will then use TweenLite to pan the images horizontally or vertically across the viewable area. Thanks.

No, that did not do the trick. loaderBar still disapears when browser window is shorter than movie height. var ls:LiquidStage=new LiquidStage(this.stage,1000,600,0,0); var mainMC:LiquidArea=new LiquidArea(this,0,0,1000,600); mainMC.attach(activeMC, ScaleMode.PROPORTIONAL_OUTSIDE); ... var loaderBarArea:LiquidArea=LiquidArea.createAround(loaderBar,ScaleMode.WIDTH_ONLY,AlignMode.LEFT,AlignMode.BOTTOM); This is what I want it to do: http://effectiveui.com/#/?env=design&pop=0&f=0 Try scrunching the browser window up. Thanks.

Aha! It is not the relative size (10x6 ratio) that causes this, rather the ABSOLUTE size of my movie (document). The bottom bar is only cut off if the browser window is shorter than the original movie height (600px). ---------- That raises another interesting challenge. Compare in a short browser window http://effectiveui.com/#/?env=design&pop=0&f=0 The design page for EffectiveUI does not cut off the bottom navigation even when browser window is very short. Can we do that with Greensock? Thanks.

What I am trying to do is described by you here: http://www.greensock.com/liquidstage/ "For example, you could have a bar snap to the bottom of the screen and stretch horizontally to fill the width of the stage. " I almost got it using createAround(), but ... var ls:LiquidStage=new LiquidStage(this.stage,1000,600,1000,600); var mainMC:LiquidArea=new LiquidArea(this,0,0,1000,600); mainMC.attach(activeMC, ScaleMode.PROPORTIONAL_OUTSIDE); ... var loaderBarArea:LiquidArea=LiquidArea.createAround(loaderBar,ScaleMode.WIDTH_ONLY,AlignMode.LEFT,AlignMode.BOTTOM); But this code snaps the loaderBar to the bottom of the mc which is set to PROPORTIONAL_OUTSIDE. Consequently, the loader bar disapeers when the browser screen is wider than the 10x6 ratio I defined. Thanks for your help.

Hi, I am building a 10px high loader bar at the bottom of the screen that changes from white to red with the % loaded; I want it to expand to the full width of the screen on resize. But I can not get loaderBar to scale to the full width of the stage on resize. var ls:LiquidStage = new LiquidStage(this.stage, 1000, 600, 1000, 600); var mainMC:LiquidArea = new LiquidArea(this, 0, 0, 1000, 600); mainMC.attach(activeMC, ScaleMode.PROPORTIONAL_OUTSIDE); ... ls.attach(loaderBar, ls.BOTTOM_LEFT, ScaleMode.WIDTH_ONLY); I get this error: 133 (line that has ls.attach instruction) "Warning: 3590: String used where a Boolean value was expected. The expression will be type coerced to Boolean." By the way, I am using swfObject and the activeMC fills the screen perfectly on resize! Thanks.

Bingo! I added the import statement and used swfobject in the html file. import com.greensock.layout.*; var ls:LiquidStage = new LiquidStage(this.stage, 1000, 600, 1000, 600); var area:LiquidArea = new LiquidArea(this, 0, 0, 1000, 600); area.attach(activeMC, ScaleMode.PROPORTIONAL_OUTSIDE); Thanks.

Hi Greensock Team: Do you have any samples of an entire application? I suspect many users are like me, not yet experts. I can make individual code snipets work. But putting together the architecture for an entire application is challenging. If you posted a few complete solutions, that would provide a great starting place to model my application development efforts! By "entire application" I actually mean something fairly simple -- like a full screen website for a photographer. The template, showing Greensock integrated with basic AS3 paradigms, would be fantastic. A starter template which integrates Greensock code into an entire application would be very valuable and I would be happy to pay a premium for such a template. Thank you.

Hi Jack, Can we create a full screen website, with a background image that resizes, using only Greensock code? http://www.greensock.com/liquidstage/ That pages says: "...Or add a background image that proportionally scales to fill the entire stage." If yes, please post a sample. Is the code at the top of this thread old and now replaced by new LiquidStage code? Thanks.