el_barto

Hi Carl, Thanks for getting back to and for pointing me in the right direction. I read your reply a couple of times and eventually got my head around what you were suggesting. I guess it's not the most complicated of code and it took me a few goes to get it working but below is what I've ended up with and like I say, it works. One question I did find myself asking was why did include the code for tweening out the currentImage ( TweenLite.to(currentImage, 0.5, {alpha:0}); ) in an if statement as opposed to just having the TweenLite.to.....etc on it's own and not in an if statement? Anyway, thanks again for the help and for your really helpful video tutorials. I know the greensock AS documentation is thorough but sometimes it helps to see the stuff working to get an even better idea of what's going on. var imageBox:Sprite = new Sprite(); imageBox.graphics.lineStyle(1, 0x333333); imageBox.graphics.drawRect(0, 0, 470, 300); imageBox.x = 40; imageBox.y = 20; addChild(imageBox); var currentImage:ContentDisplay; btn1_btn.addEventListener(MouseEvent.CLICK, goLoadImg1); btn2_btn.addEventListener(MouseEvent.CLICK, goLoadImg2); var imgLoader:ImageLoader = new ImageLoader("openingImg.jpg", new ImageLoaderVars() .smoothing(true) .container(imageBox) .vAlign("top") .hAlign("left") .alpha(0) .onComplete(defaultcompleteHandler) ) imgLoader.load(); function defaultcompleteHandler(event:LoaderEvent):void{ currentImage = imgLoader.content; TweenLite.to(currentImage, 2, {alpha:1}); } function goLoadImg1(event:MouseEvent):void{ if(currentImage){ TweenLite.to(currentImage, 2, {alpha:0, onComplete:removeCurrentImg}); } function removeCurrentImg():void{ imgLoader.dispose(true); loadNewImage(); } function loadNewImage():void{ var imageLoader:ImageLoader = new ImageLoader("1.jpg", new ImageLoaderVars() .container(imageBox) .vAlign("top") .hAlign("left") .alpha(0) .onComplete(completeHandler) ) imageLoader.load(); currentImage = imageLoader.content; } function completeHandler(event:LoaderEvent):void{ trace("new image ready to load"); TweenLite.to(currentImage, 2, {alpha:1}); } }

The problem I am having is a pretty simple one, but I'm having difficulty getting it to actually work. What I've got is a Sprite that is drawn and added to the stage using AS3. I am then loading and unloading various images into this box using the greensock ImageLoader class. I have also passed a few ImageLoaderVars through this constructor. The code below is for the first image that gets loaded into (the drawn sprite) by default and once the preloader does it's thing, the image then loads and it's alpha get's tweened to 1 giving it a nice fade in. This all works fine, but I'm having problems when it comes to removing this first image from it's sprite container and replacing it with another. I'd like to have the reverse of how the image loaded in happen so that it's alpha value goes from 1 to 0 again before the image is disposed of and the next image is loaded in. I cannot seem to work out how to target the current image's loader to therefore be able to tween it's alpha back to 0 before disposing of it. Currently I am tweening the alpha property of the sprite that contains the loaded image instead of tweening the images own loader. // code for loading in first background image var backgroundImageOne:ImageLoader = new ImageLoader("images/backgroundImages/1.jpg", new ImageLoaderVars() .smoothing(true) .container(imageBox) .vAlign("top") .hAlign("left") .alpha(0) .onProgress(defaultProgressHandler) .onComplete(defaultcompleteHandler) ) backgroundImage.load(); function defaultProgressHandler(event:LoaderEvent):void{ backgroundPreloader_mc.scaleX = backgroundImage.progress; } function defaultcompleteHandler(event:LoaderEvent):void{ var loadedImage:ContentDisplay = event.target.content; TweenLite.to(loadedImage, 2, {alpha:1}); } // code for removing current background image??

Hi Greensock, Thanks for the reply, and yeah I just re-read my post and it's a little fuzzy to me! I'll post a fla so you can see what I'm trying to explain but in the meantime here is a website that I saw this working on. http://www.monet2010.com/en#/home/ I saw it featured on your website as one of the five of so site on the right hand side. What I like is the guys who designed/programmed the site have got a background image filling an entire box (which also stretches across the screen), while also having content within this box which seems to scale independently from the background image.

Hi, I have been using Liquid Area and Stage for a while and I think they are really great, but I have hit a bit of a problem when I'm trying to combine two liquid areas. What I want to try and achieve is to have a Sprite box that almost fills the entire screen and will resize when the screen changes size. I have set this box with a scaleMode of "Proportional Outside" as I've got an image filling this box. I have also set the crop to true so that the image doesn't run outside to boxes edges. I have created a Liquid Area for this box area. Where I'm running into problems is when I'm trying to load in separate content into this box. I'd ideally like to control the positioning of these display objects within this box so that they keep their x and y co-ordinates and distance from each other. However when the browser window is resized, the scaleMode of the box is taking over I guess, as is shifting them around and changing their scale accordingly. Is there anyway of controlling this and pinning down objects within this box, so that they are not affected by the scale mode of the box and maintain their location x and y co-ordinates within this box. Maybe it's not possible to use Liquid Area to achieve this but I thought I ask as I just can't seem to get it right. Thanks, Ben.

That helps a lot, thanks! I did come across the dispose() feature in the tutorial videos and wondered if that was how you removed a child from is parent but when your so used to coding it the old way it takes a while to get used to the new (and much simpler) way of doing the task. Thanks again for your help and also your quick reply!

Hi, Is using the LoaderMax class the best thing to use for loading and unloading multiple external swfs into a dynamically created Sprite object? I have created a simple Sprite object and added it to the stage using the conventional addChild(contentContainer) method but what I wanted to find out is, is there a way of using LoaderMax to load and unload (and remove them from the sprite) various swfs that I have created. As I'm fairly new to the LoaderMax way of working I have checked out the six or so video tutorials that give a great introduction to the LoaderMax class, have looked at the tips and tricks section too and have done some searching around in the forums to see if anyone else has asked the same or something similar to me. I read that the good thing about using LoaderMax is that it can store multiple loaders in a queue, but are you able to then call those individual loaders one at a time depending on which ever swfs file you want to load or is it best to create and new SWFLoader instance for each swf file that I want to load in? I don't want to load all the swfs at once rather have the load in depending on which button the user clicks on. So say for example that when the user clicks on btn_1 whatever is in the sprite is removed and then swf_1 is loaded in. Then when they click btn_2 the contents of the sprite are removed and the new content, swf_2 is then loaded in and so on. Sorry that this might sound really basic but any tips or pointers would be great?

Thanks for reply. Since posting, I have managed to work out what was going wrong and have found a solution. Essentially what I wanted to have happen, is to dynamically load a background image which will fill the entire screen and also to get bigger or smaller depending on the current browser window size. At the same time I have another sprite that contains the main content of the website. This also needed to shrink or grow depending of how ever big the web browser is. So you had two different LiquidArea's getting bigger and smaller. The problem I was having was that one of the swf's that I was loading into the rectangular sprite (that contains the main site content) was really wide due to a line of thumbnails that extend off screen. To cut a long story short I took your advice from a previous thread and used the customBoundsTarget(); to limit the area that the LiquidArea takes into account when sizing up or down the main sprite container. I had so many dam sprites and shapes going on that I was getting in a real mess so I sorted out the problem by just going back to the drawing board and starting from scratch and it's working now. Thanks again for taking the time to read and reply to my original thread. Sometimes your problem is crystal clear in your own head but trying to describe it is another!

Is it possible to add a background image that fills the entire screen whilst at the same time scaling a sprite that contains the site contents as the browser window is resized? I know that using the Liquid Stage class it is, but the problem that I'm having is that I'm using a couple of MovieClips to contain and limit the content of the site. What I've got at the moment is a master MovieClip (masterContainer_mc) that sits on top wrapping everything else up in it. In that I've got another MovieClip (pageMask_mc) which acts to define the limit of the site that should be made bigger or smaller on resize. I am using the customBoundsTarget property to target this MovieClip as I've got external swfs that are really wide loading and unloading into the main swf and this limits the width of the main swf to the native width and height when the screen is resized. The problem that I'm having is that I can't work out where and how to attach a background image so that it sits behind the two MovieClips and the site contents but also fills the entire screen and also resize when the screen is made bigger or smaller. I can get an image to fill the entire screen but combining this and also the MovieClips limiting the native size of the stage is proving more difficult.

Thanks for the suggestion of using the CustomBoundsTarget property, I'll have a look as the documentation now. But I had one question about using it. Like I said, I've got one swf file that is acting as the main stage for the various image galleries. These img galleries are externally loaded and unloaded but they also contain the images that run off the stage. Nothing runs off stage in the main swf. So would using the customBoundsTarget property on the main flash file still clip the images that run off the stage in the externally loaded swfs? Also is using a movieclip to wrap up the site contents ok instead of using a sprite which you referred to in your reply?

Hi, Thank you very much for getting back to me with a solution to my question! Since my orignal post I went back and read through the documentation that came with the download and managed to get my head around it and made it work, thought my way did involve much more code so I'll remember your way in future. Actually I have run into another problem. I have created another thread (viewtopic.php?f=3&t=4652), but basically it involves the main swf being made really small when published out, either as an swf or and html. I think what could be happening is that I've got a line line of thumbnails running off screen in another swf that it being loaded into my main swf file and that is causing the code to think that the swf's are much wider than they should be when displayed and are scaling everything up or down depending on that overall width and not on the actual visible width of the stage.

Hello again, I have been working on a simple image gallery which dynamically loads at runtime. On image is the tiny thumbnail which goes into it's own movieclip and the other is the larger bigPic which, once the thumbnail is clicked gets loaded into it's own larger movieclip. Like I said a pretty basic image gallery and everything was working great until I added more thumbnails. At the moment the stage is wide enough to fit 12 thumbnails on it, the rest are sitting off stage. I've made it so that each gallery is an swf file that just loaded and unloaded into the main swf file. I have used the LiquidStage and Area so that the whole site gets resized when the html browser is resized. When I previewed the swf as an html file when on 12 thumbnails were sitting on the stage is displayed perfectly and everything looked good, but like I said, when I added more thumbnails the whole site became really small! I can't work out why the gallery is now really small on the screen with the additional thumbnails sitting off screen. I'm thinking maybe it's because I using the createAround(); method to wrap around my main swf stage but I thought that using the calculateVisable might only use what's visible and ignore the thumbnails sitting off stage. I'm thinking that since I've added extra thumbnails to the image gallery that has made the swf really wide and thanks why when it loads into the main swf the LiquidStage is resizing it properly but just relative to is now enormous size. Is there anyway of getting around this? I've uploaded a zip file with both the image gallery and main flash file and all the mock images, so you can hopefully see for yourself what's going on. If anyone has experience this before I love to know how you solved it if at all, otherwise any pointers will be, as always much appreciated! Thanks. swfs.zip images.zip

Hi, I'm kind of new to the whole GreenSock classes so you'll have to excuse my knowledge level, but I had a question about using the LiquidStage and LiquidArea classes. Is it possible to dynamically center a display object whilst still using the LiquidStage and Area to resize the display object as and when the user resizes their browser? For example, if you created a simple box which was always dynamically positioned to be in the center of the screen, can it's size still be changed so that when the browser window was resized the box's dimensions would also change in relation to it's original proportion, whilst still remaining in the center of the screen? I haven't got an example to show as of yet as I wanted to see if this was possible before I began. Any help, advice or pointers would be greatly appreciated. Thanks.