Sign in to follow this  
XXNephilim

Learning the GS basics

Recommended Posts

Hi all,

 

I am total newbie with LiquidStage and LiquidArea and am trying to teach myself how to use it but I am already stuck with simplest things...

 

So, I have created new Liquid Stage and then one Liquid Area which contains background image that scales accross entire screen:

var ls:LiquidStage = new LiquidStage(this.stage,1920,1080,800,600);

var area:LiquidArea = new LiquidArea(this,0,0,1920,1080);

area.attach(test, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER);

area.preview = false;

 

All works fine :)

 

Now, I want to attach another LiquidArea of a certain size that should be alligned in the middle of the stage and stay in the middle regardless of the screen size - so I did this:

 

var area2:LiquidArea = new LiquidArea(this,0,0,1280,720);

area2.attach(container, ScaleMode.PROPORTIONAL_INSIDE, AlignMode.CENTER, AlignMode.CENTER);

area2.preview = false;

 

This works as well but obviously my target isn't achieved since this 2nd area is drawn on x=0 and y=0 and I want it to be CENTERED on the stage...

 

Is there some Align command or similar that would center or auto-position LiquidArea?

 

Sorry about silly newbie question again but some help would be appreciated...

 

All the best and thanks in advance!

Share this post


Link to post
Share on other sites

Did you want the 2nd LiquidArea to be liquid? Like when the stage resizes, you want it to stretch the LiquidArea? If so, you'd just need to do the math to figure out how to center it, like this:

 

var area2:LiquidArea = new LiquidArea(this, (1920 - 1280) / 2, (1080 - 720) / 2, 1280, 720);

 

I wrote out the math long-hand so you could see what I was doing.

 

If you just want a 1280x720 Sprite that always gets aligned in the center but does NOT get stretched/resized with the stage, all you'd need to do is attach() it to your first area:

area.attach(mc, ScaleMode.NONE, AlignMode.CENTER, AlignMode.CENTER);

-OR-

 

Position it in the center and then pin it to the LiquidStage, like:

 

mc.x = (1920 - 1280) / 2;
mc.y = (1080 - 720) / 2;
ls.attach(mc, ls.CENTER);

 

Does that help?

Share this post


Link to post
Share on other sites

Not only that it helps but it solves my problem 101%!

 

Thanks Jack! :)

 

Now, as continuation to this newbie learning exercise I am having another problem - more complex / serious one I feel so I will create a separate forum thread for this one...

Share this post


Link to post
Share on other sites

Hi again!

 

Another problem in regards to this topic...

 

So, as said above, following code works perfectly:

 

var ls:LiquidStage = new LiquidStage(this.stage,1920,1080,800,600);

var area:LiquidArea = new LiquidArea(this,0,0,1920,1080);

area.attach(test, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER);

area.preview = false;

 

That was, when I had single static image in the movie clip called 'test'...

 

Now, as part of the same 'test' mc, I have few elements that are being animated 'off stage' into it - meaning that initial dimensions of 1920 - 1080 don't exactly apply anymore... Well, in fact, they do! - but only once animation is finished, obviously, which is exactly how things are represented on the screen... During animation of certain 'off stage' sprites they don't align to exact position I want them to be in - however when animation is finished and when I resize browser window they do align themselves properly (it all makes sense since when animation is finished dimensions of 1920 by 1080 do apply again hence everything comes into its place and looks great once browser window is refreshed and/or scaled)

 

My questions are:

 

- is there some sort of crop:Boolean command - similar or the same one I am using whith SWFLoader which preserves 'correct dimensions of the mc 'ignoring' the off stage elements which are messing stage / mc x and y values?

 

- I have seen createAround method which might hold answer to my issue but have absolutely no clue how to use it :( - Do I add it after area.attach line or before it or indeed do I need to scrape area.attach line altogether and build entire thing using createAround method somehow!?

 

- perhaps neither of the above is the way to go and some sort of ' simple listener' is needed to dynamically treat the movie clip in question!?

 

Please help!

Share this post


Link to post
Share on other sites

The static createAround() method is just a convenience method for when you want to create a LiquidArea around a particular object so that it fits it exactly initially. It uses the size and position of the DisplayObject to determine its size/position. You don't need that here.

 

There is a crop:Boolean feature that is really only useful when you use the PROPORTIONAL_OUTSIDE scaleMode - it simply cuts off the area that spills outside the LiquidArea. However, when determining the size of the target, it does NOT magically ignore anything that was outside the original target's size. The only way to "chop off" those areas so that LiquidArea acts as though they don't exists when checking its native size is by using a mask yourself inside your object so that the areas are invisible, and then set the "calculateVisible" parameter to true when you attach() the object. This is much more processor-intensive because it has to capture a BitmapData each time LiquidArea is updated and figure out which areas are transparent, etc. So if you want total control of the cropping, you should do it yourself with a mask INSIDE your target object and set crop and calculateVisible to true.

Share this post


Link to post
Share on other sites

Thanks Jack!

 

I understand exactly what you are saying but thanks to my newbness I simply don't know how to implement this...

 

I have masked the area on my 'test' mc - no problem...

 

Then I went back to the code and added this to the area.attach line:

 

area.attach(test, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER, crop:Boolean=true, calculateVisible:Boolean=true);

 

But I am getting errors as if crop and calculate commands are not right...

 

I have looked through documentation and can't see what am I doing wrong :(

Share this post


Link to post
Share on other sites

No worries - you're just using the wrong syntax:

 

BAD:

area.attach(test, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER, crop:Boolean=true, calculateVisible:Boolean=true);

 

GOOD:

area.attach(test, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER, true, 0, 999999999, 0, 999999999, true);

 

The 0, 999999999, 0, 999999999 stuff is just for the minWidth/maxWidth/minHeight/maxHeight. You need to pass the parameters in the correct order as listed in the ASDocs.

Share this post


Link to post
Share on other sites

Hi Jack and thanks again! :)

 

Ok, that works now! - but as you said in docs, performance is so bad that it is simply unacceptable... So I tried something else...

 

1. I resized my entire project realising that I don't need it to be so big for this learning exercise and have gone back to single static background image:

 

var ls:LiquidStage = new LiquidStage(this.stage,1000,670,800,600);

var area:LiquidArea = new LiquidArea(this,0,0,1000,670);

area.attach(test, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER);

area.preview = false;

 

This treats - as in positions and scales - my fixed background image perfectly!

 

 

2. To deal with animated element coming off stage into it I have done this first:

 

var area2:LiquidArea = new LiquidArea(this,0,0,1000,670);

area2.attach(test2, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER);

area2.preview = false;

 

3. Then I created separate SWF containing animated 'off stage' element:

 

import com.greensock.*;

import com.greensock.TweenLite;

import com.greensock.easing.*;

 

TweenLite.to(frame, 1, {x:0, y:335, ease:Sine.easeIn});

 

4. Then I went back to my 'main' SWF and loaded it into my blank 'test2' movie clip:

 

import com.greensock.*;

import com.greensock.loading.*;

 

var loader:SWFLoader = new SWFLoader("testloading3.swf",{name:"main1",container:this,width:1000,height:670,scaleMode:"proportionalOutside",crop:Boolean,x:0,y:0});

loader.load();

 

 

Not sure is this the best way to deal with it but hey - IT ALL WORKS AS WELL AS PERFORMS perfectly so I am happy :D

 

 

--------------------------------------------------------------------------------------------------------------------------

 

 

Now, next chapter in this forum based - very basic tutorial... I am sorry in advance but I am so eager to learn the basics of GreenSock tools! :oops:

 

 

5. As a next step, on my 'main' SWF, I have added simple movie clip as a BUTTON and when I CLICK on it I want to control timeline of externaly loaded SWF - so I did this:

 

this.buttonMode = true;

this.useHandCursor=true;

this.addEventListener(MouseEvent.ROLL_OVER,btnRollOver);

this.addEventListener(MouseEvent.ROLL_OUT,btnRollOut);

this.addEventListener(MouseEvent.CLICK,btnClick);

 

stop();

var rewind:Boolean=false;

 

function btnRollOver(e:MouseEvent):void {

play();

rewind=false;

}

 

function btnRollOut(e:MouseEvent):void {

rewind=true;

}

 

function btnClick(e:MouseEvent):void {

MovieClip(root).test2.main1.gotoAndStop("frame2");

}

 

this.addEventListener(Event.ENTER_FRAME,revFrame);

function revFrame(e:Event):void{

if(rewind == true){

prevFrame();

}

}

 

Of course, it doesn't work :)

 

My question is obvious - how do I make it work so externally loaded SWF goes to the frame labelled 'frame2'?

 

My feeling is that I am missing something in my simplified loader script under point 4 above???

 

6. While we are at it - my next exercise will be very similar - how to control timeline of the 'main' SWF from a button located in the external SWF? Basically doing 'vice verse' to the point 5 above...

 

 

Please help!

 

 

PS: Soon I will post FULL LEARNING PROJECT for all the newbies like me - I am sure it will come handy for many :)

Share this post


Link to post
Share on other sites

It sounds like the fundamental question is how you access the raw content of the SWFLoader. You can do it with the rawContent property, like:

 

var child:MovieClip;

var loader:SWFLoader = new SWFLoader("testloading3.swf",{name:"main1", container:this, width:1000, height:670, scaleMode:"proportionalOutside", crop:Boolean, x:0, y:0, onComplete:completeHandler});
loader.load();

function completeHandler(event:LoaderEvent):void {
   child = loader.rawContent;
}

this.addEventListener(MouseEvent.CLICK, btnClick);
function btnClick(event:MouseEvent):void {
   if (child != null) {
       child.gotoAndStop("label2");
   }
}

 

To control the parent timeline from a child (not sure that's a great idea, but...) you use the "parent" as far as you need to go, like for 2 levels up, you'd do:

 

this.parent.parent.gotoAndStop("label2");

Share this post


Link to post
Share on other sites

Jack - MANY thanks!

 

All works perfectly and my understanding of how your tools function is increasing on daily bases! :)

 

One rather BIZARRE problem however...

 

I'll try to explain it using words but my feeling is that I will need to post my work files for this one...

 

OK, so on my 'main' SWF I am using ONE SINGLE frame with currently 5 layers - top one with the code and remaining 4 below with background image, button, and two empty MCs which are loading external SWFs...

 

Bizarre problems are as follows:

 

1. If I leave my 'main' SWF as is - with the single frame - my externally loaded SWFs are appearing on the screen ONLY if I resize browser or test movie window inside the Flash. One mega important thing to note here is that performance of externally loaded SWFs is SUPERB in this case!!! No slow downs or any other problem... Only problem, as already said, is that I need literally just to touch the size of the window for missing SWF's to appear...

 

Now...

 

2. If I add few frames to my 'main' time line - externally loaded SWFs are now appearing on the screen straight away (as I want them to) - HOWEVER - performance of SWFs suffers huge blow... Animation is choppy etc...

 

What on earth is going on... :(

 

Obviously, I wish that externally loaded SWFs appear on the screen straight away (as per point 2) and to perform without hiccups (as per point 1) - question is how and what am I doing wrong...

 

Let me know if this sounds way too insane and I will post my learning files...

 

Many thanks in advance!

Share this post


Link to post
Share on other sites

I'm not sure about the performance issue - I'd need to see your files for that, but from what you're describing about just needing to touch the browser size, I bet you just forgot to update() your LiquidArea after your assets load. Let me explain...

 

When you attach() an object to a LiquidArea, it must analyze the size of that object and scale it accordingly to fit. But if you load new stuff into that object, the size/bounds probably changed. LiquidArea does NOT continuously monitor the object's size because that would unnecessarily degrade performance. Instead, if you change the contents of your attached object, you need to call the LiquidArea's update() method to force it to re-analyze the size and apply the scale mode appropriately. A LiquidArea always calls update() automatically when the stage resizes. That's why you saw it suddenly work when you resized the stage.

 

If you're subloading a swf or image into your empty MovieClip that's attached, just listen for when the loader finishes and then call update() (or just wait to attach the MovieClip to the LiquidArea until after the content loads).

Share this post


Link to post
Share on other sites

Jack thanks for your patience and help!

 

Yes, you are right, I never called 'update' nor did I 'wait' for a clip to load before attaching :oops:

 

Now I just have to figure out how to do that exactly...

 

In fact, I would LOVE to learn both methods - 'update' and 'wait before attaching'!

 

Here is my code so far that deals with loading external SWF into blank MC (it also features listener for a button on the main stage)

 

 

import com.greensock.*;

import com.greensock.loading.*;

import com.greensock.events.LoaderEvent;

 

var child:MovieClip;

 

var loader:SWFLoader = new SWFLoader("testloading3.swf",{name:"main1", container:this, width:1000, height:670, scaleMode:"proportionalOutside", crop:Boolean, x:0, y:0, onComplete:completeHandler});

loader.load();

 

function completeHandler(event:LoaderEvent):void {

child = loader.rawContent;

}

 

MovieClip(root).button1.addEventListener(MouseEvent.CLICK, btnClick);

function btnClick(event:MouseEvent):void {

if (child != null) {

child.gotoAndStop("frame2");

}

}

 

Now where exactly do I call update command and how!?

 

Also how do I 'wait' for loading to finish before attaching movie clip?

 

I am going through docs with best of my abilities... but hmmm :oops:

Share this post


Link to post
Share on other sites
Now where exactly do I call update command and how!?

 

I didn't see where you're attaching it or where your LiquidStage instance is or what size your LiquidArea is or what specifically the goal is with it, but maybe something like:

 

import com.greensock.*;
import com.greensock.layout.*;
import com.greensock.loading.*;
import com.greensock.events.*;

var child:MovieClip;
var ls:LiquidStage = new LiquidStage(this.stage, 1000, 670, 1000, 670);
var la:LiquidArea = new LiquidArea(this, 0, 0, 1000, 670);

var loader:SWFLoader = new SWFLoader("testloading3.swf", {name:"main1", container:this, width:1000, height:670, scaleMode:"proportionalOutside", crop:true, onComplete:completeHandler});
loader.load();

la.attach(loader.content, ScaleMode.PROPORTIONAL_INSIDE);

function completeHandler(event:LoaderEvent):void {
   child = loader.rawContent;
   la.update();
}

MovieClip(root).button1.addEventListener(MouseEvent.CLICK, btnClick);
function btnClick(event:MouseEvent):void {
   if (child != null) {
       child.gotoAndStop("frame2");
   }
}

 

Also how do I 'wait' for loading to finish before attaching movie clip?

 

As indicated above, you just tuck your code into the completeHandler method because that's what you defined as your onComplete and gets invoked when the loader completes.

Share this post


Link to post
Share on other sites

Thanks again Jack!

 

Just spent half an hour with this one and while it is almost there it still isn't right.

 

By the way that code is nested inside the blank movie clip - maybe that's why I am having some conflicts!?

 

Meh...

 

I'll go through all of this again over weekend and hopefully figure out what's going on - if not I'll just post my learning exercise with hope of some help.

 

So simple yet so complicated >_<

Share this post


Link to post
Share on other sites

Yeah, feel free to post a simple example FLA that can be published to see exactly what's going on. Sometimes that's much faster to troubleshoot than trying to read through a description, pseudo code, etc.

 

Good luck!

Share this post


Link to post
Share on other sites

Hi all :)

 

So here we are with 'learning the basics' files!

 

For someone who is just joining this thread idea behind it is to cover the basics of GS tools including layout, tweening, loading etc... If you are intermediate or advanced user simply ignore it (although help with it all would be appreciated!) if you are beginner, specially if you are beginner coming from AS2 background !!!, you might find it helpful...

 

Currently file includes following basics (including one problem that needs to be solved):

 

- making resizable image background (so it fills your entire browser window)

- pinning a movie clip / button to certain part of the stage

- loading external resizable SWF with OFF STAGE animation

- very basic TweenLite script

- attaching listener / command to the pinned button so it interacts with externally loaded SWF

 

Regarding the problem, you will see it straight away when you fire up main SWF called 'test' - basically, it loads external SWF no problem but it doesn't position itself correctly (almost like crop:true command is ignored) - however, it fixes itself as soon as we resize the movie clip. Idea is for animation to start from bottom of the frame and move towards the middle...

 

 

Few things to note:

 

1. Since we have moved from initial topic of this thread I will rename it to something appropriate...

2. ZIP file attached does NOT include com.greensock folder(s) since certain parts of it are for 'club members only' - meaning you need to put it in the folder yourself...

3. Supplied FLA files are CS5

4. I am using Mac / Leopard - this should be irrelevant really but hey...

5. Attached file is still far away from being finished 'learning exercise' so expect some updates as we go along :)

6. Finally, ignore the aesthetics, this is simple LEARNING exercise not a design lesson...

 

 

All the best and thanks in advance!

Share this post


Link to post
Share on other sites

The reason the subloaded swf appeared to be loading too high (and adjusted when you resized the stage) is because you built your subloading swf so that it has the bar way off the bottom of the screen (not on the stage). So the LiquidArea was calculating the size based on that extra stuff at the bottom too, and adjusting/scaling it accordingly (as it should). If you want it to crop it and calculate only the visible areas, you need to set the "crop" and "calculateVisible" parameters in the attach() method to true.

 

Also, I would not recommend putting code inside nested MovieClips, especially blank ones. It's difficult to trace down the code and find where you put it all that way. If at all possible, it's best to leave the code at the root or in classes.

 

I fixed the files and consolidated the code for you. See attached :)

 

Cheers!

Share this post


Link to post
Share on other sites

Jack, you are slowly but surely becoming my idol! :D

 

Thank you so much for your help - things are becoming clearer all the time and as they are my love for Flash and GreenSock is growing exponentially!

 

I honestly thought that I need to make 'blank MCs' if I was to load external SWFs - hence what I did in my files... But now, looking and playing around with your version, I can see that I don't need any MC and that I can load any SWF just by attaching it to X and Y... :roll:

 

I must say that initially I was little bit confused with your code - first you "ruined" scaling of my image background ;) - and then you commented out this part:

 

/* if the subloaded swf has content that exceeds the 1000x670 LiquidArea and you want the LiquidArea

* to crop it as though it ignores everything outside that 1000x670 area, then you need to set the

* LiquidArea.attach() "crop" and "calculateVisible" parameters to true like this:

* la.attach(loader.content, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER, true, 0, 999999999, 0, 999999999, true);

*/

 

Yet in your code I can not see you doing it (at least I can't see "calculateVisable" anywhere unless it is set by default somehow)... !?!?!?!? :shock:

 

var la:LiquidArea = new LiquidArea(this, 0, 0, 1000, 670);

 

var loader:SWFLoader = new SWFLoader("testloading1.swf", {name:"main1", container:this, width:1000, height:670, scaleMode:"proportionalOutside", crop:true});

loader.load();

 

la.attach(loader.content, ScaleMode.PROPORTIONAL_OUTSIDE);

 

 

 

In any case - after couple of confusions and head scratches it is all working as intended and not only that but my UNDERSTANDING (which is most important!) of how everything works has gone up quite a bit...

 

 

 

I have already successfully implemented 2nd external SWF - this time with SSP (slide show pro) and ThumbGrid - which is, using the same script, scaling and positioning perfectly!

 

All that posts and threads on the net about GreenSock not playing nicely with SSP are obviously rubbish :)

 

 

Soon I will post updated learning files with SSP / ThumbGrid and hopefully few other things (and I am sure few more questions on 'how this or that works')

 

 

Thank you once again Jack - you are the best! :)

Share this post


Link to post
Share on other sites
I must say that initially I was little bit confused with your code - first you "ruined" scaling of my image background ;) - and then you commented out this part:

 

/* if the subloaded swf has content that exceeds the 1000x670 LiquidArea and you want the LiquidArea

* to crop it as though it ignores everything outside that 1000x670 area, then you need to set the

* LiquidArea.attach() "crop" and "calculateVisible" parameters to true like this:

* la.attach(loader.content, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER, true, 0, 999999999, 0, 999999999, true);

*/

 

Yet in your code I can not see you doing it (at least I can't see "calculateVisable" anywhere unless it is set by default somehow)... !?!?!?!? :shock:

 

Yeah, sorry for the confusion there. I was providing TWO solutions - one simple (that didn't do the calculateVisible) and one that was more complex and handled the calculateVisible stuff for you. I was giving you the option to replace the uncommented code with the commented one if you so choose.

 

Glad you got it workin' :)

Share this post


Link to post
Share on other sites

Hi all! :)

 

After being busy with couple of projects I am now back to 'learning the GS basics'...

 

 

This post will include couple of things:

 

- ZIP file with latest 'learning the basics' files

- Question on how to solve some loading issues...

 

 

So lets start with the ZIP file first and list the things it includes so far:

 

- making resizable image background (so it fills your entire browser window)

- pinning a movie clip / button to certain part of the stage

- loading external resizable SWF with OFF STAGE animation

- very basic TweenLite script

- attaching listener / command to the pinned button so it interacts with externally loaded SWF

- NEW animated side menu that shows / hides on mouse over

- NEW button inside the menu that controls timeline of externally loaded SWF

- NEW for all Slide Show Pro / Thumb Grid users there is a good news! Using this files you can load your albums / portfolios and have it fully resizable. I haven't included FLA with SSP / TG instances, however, if you open testloading2.fla and replace my image with Slide Show Pro and / or Thumb Grid it will load, work, position and scale perfectly inside your main movie! :)

 

Hope this ZIP file will help some GreenSock newcomers...

 

 

Now, lets move to the next step and issue which will deal exclusively with LoaderMax...

 

If you download provided ZIP file you will see that things are working perfectly - no problem there - however, what if we want to control loading as well as appearance order of all the elements!?!?!

 

I presume we will need to use LoaderMax, queue / append and on complete commands - question of course is how do we do this exactly!?!?!

 

To be perfectly clear what I am after, this is what I want to achieve / learn next (in chronological order):

 

1. adding simple, overall, preloader bar - ideally this one should preload all 3 SWFs - main movie (test.swf) as well as 2 external ones (testloadig1.swf and testloading2.swf)

 

2. when preloading of all 3 movies is done I would like things to happen in chronological order:

 

a) main movie elements (background and menu) to fade in

B) only when point 'a' above is executed (fade tween finished) I wish for testloading1.swf to kick in

c) I also wish to delay appearance of testloading2.swf for couple of seconds as well (basically allowing animation from testloading1.swf to finish first) and if possible make it fade in too

 

Please help and lets make this ZIP file help others!

 

 

UPDATE:

 

I have made tiny progress with this one but still totally lost...

 

Basically I have figured out that this approach sounds best (correct me if I am wrong):

 

var queue:LoaderMax = new LoaderMax({onProgress:progressHandler, onComplete:completeHandler});

queue.append( new SelfLoader(this) );

queue.append( ...append 1st swf... );

queue.append( ...append 2nd swf... );

queue.load();

 

Bu how do I attach 2 preloaded external SWFs to my Liquid Areas !?!?!

 

 

I have also created basic preloader bar, placed it on the stage and used this:

 

function progressHandler(event:LoaderEvent):void {

myProgressBar.scaleX = event.target.progress;

}

 

But, how do I fix it in the centre of the stage ? (don't forget that this is liquid project!)

 

 

Uh... :(

 

 

 

UPDATE 2:

 

I have included new version of ZIP file with latest efforts (they are commented out for now until we find the right way how to deal with this issue)

Share this post


Link to post
Share on other sites

Yep, your queue code is the right concept. And to attach() the loaded swfs to the stage, you have a few options:

 

1) If you don't need to stretch/squish the content in a LiquidArea, just pin the loader's content right away like:

 

var loader1:SWFLoader = new SWFLoader("testloading1.swf", {container:this, width:1000, height:670, x:20, y:20});
la.attach( loader1.content, la.CENTER);

 

2) If you do need to stretch/squish the content in a LiquidArea, create one and attach the SWFLoader's content right away:

 

var loader1:SWFLoader = new SWFLoader("testloading1.swf", {container:this, width:1000, height:670, x:20, y:20});
var la:LiquidArea = new LiquidArea(this, 0, 0, 500, 400);
la.attach(loader1.content, ScaleMode.STRETCH);

 

There are some other ways too, but I don't want to confuse you :)

 

As far as your preloader staying centered, just attach() it to the LiquidArea's CENTER pin. Make sense?

Share this post


Link to post
Share on other sites

Hi Jack! :)

 

Many many many thanks again for your efforts!

 

I have fixed issue with the simple preloader bar - it is positioning on the stage as well as working perfectly now - no problem there anymore :)

 

 

However, I am still lost with LoaderMax queue and attaching preloaded SWFs to the relevant Liquid Areas... :s

 

 

To avoid the confusion let me repeat what I wish to do once again.

 

Effect I want to achieve, for the time being, is EXACTLY the same as per attached ZIP file in my previous post - meaning positioning and scaling of all elements, including external SWFs should remain identical... Only difference is that I wish to preload 2 external SWFs straight away...

 

So, instead of doing this:

 

var la2:LiquidArea = new LiquidArea(this, 0, 0, 1000, 670);

var loader:SWFLoader = new SWFLoader("testloading1.swf", {name:"main1", container:this, width:1000, height:670, scaleMode:"proportionalOutside", crop:true});
loader.load();

la2.attach(loader.content, ScaleMode.PROPORTIONAL_OUTSIDE);

var la3:LiquidArea = new LiquidArea(this, 0, 0, 1000, 670);

var loader2:SWFLoader = new SWFLoader("testloading2.swf", {name:"main2", container:this, width:1000, height:670, scaleMode:"proportionalInside", crop:true});
loader2.load();

la3.attach(loader2.content, ScaleMode.PROPORTIONAL_INSIDE);

 

 

Now, I wish to do the same but via LoaderMax and queue.append... So, I have done this:

 

var queue:LoaderMax = new LoaderMax({onProgress:progressHandler, onComplete:completeHandler});
queue.append( new SelfLoader(this) );
queue.append( new SWFLoader("testloading1.swf",{name:"main1",container:this,width:1000,height:670,scaleMode:"proportionalOutside",crop:true}) );
queue.append( new SWFLoader("testloading2.swf",{name:"main2",container:this,width:1000,height:670,scaleMode:"proportionalOutside",crop:true}) );
queue.load();

 

This appears to be working fine when it comes down to LOADING but issue and question is how do I attach that 2 SWFs to my LAs so they position and scale in exactly the same way as before...

 

I have tried doing this straight after queue.load():

 

var loader1:SWFLoader = new SWFLoader("testloading1.swf", {name:"main1", container:this, width:1000, height:670, scaleMode:"proportionalOutside", crop:true});
var la2:LiquidArea = new LiquidArea(this, 0, 0, 1000, 670);
la2.attach(loader1.content, ScaleMode.PROPORTIONAL_OUTSIDE);

 

But with this, scaling doesn't work anymore...

 

Also why do I need to repeat SWFLoader command / parameters if they are already there under:

 

queue.append( new SWFLoader("testloading1.swf",{name:"main1",container:this,width:1000,height:670,scaleMode:"proportionalOutside",crop:true}) );

 

 

I hope this is not too confusing :oops:

Share this post


Link to post
Share on other sites

No no, you don't need to repeat it. In fact, that's a bad thing because you'd be creating an entirely separate and distinct loader the 2nd time, effectively duplicating your content.

 

There are several ways you can get the content in order to attach() it. Here are two:

 

1) Use LoaderMax.getContent():

 

var queue:LoaderMax = new LoaderMax({onProgress:progressHandler, onComplete:completeHandler});
queue.append( new SelfLoader(this) );
queue.append( new SWFLoader("testloading1.swf",{name:"main1",container:this,width:1000,height:670,scaleMode:"proportionalOutside",crop:true}) );
queue.append( new SWFLoader("testloading2.swf",{name:"main2",container:this,width:1000,height:670,scaleMode:"proportionalOutside",crop:true}) );
queue.load();

var main1Content:ContentDisplay = LoaderMax.getContent("main1");
la2.attach( main1Content, ScaleMode.PROPORTIONAL_OUTSIDE);

 

-OR-

 

2) Create your loaders first so that you have clean references to them, then append() them and attach() the content:

 

var queue:LoaderMax = new LoaderMax({onProgress:progressHandler, onComplete:completeHandler});
queue.append( new SelfLoader(this) );

var main1:SWFLoader = new SWFLoader("testloading1.swf", {name:"main1", container:this, width:1000, height:670, scaleMode:"proportionalOutside", crop:true});
var main2:SWFLoader = new SWFLoader("testloading2.swf", {name:"main2", container:this, width:1000, height:670, scaleMode:"proportionalOutside", crop:true});

queue.append( main1 );
queue.append( main2 );
queue.load();

la2.attach(main1.content, ScaleMode.PROPORTIONAL_OUTSIDE);
la3.attach(main2.content, ScaleMode.PROPORTIONAL_OUTSIDE);

Share this post


Link to post
Share on other sites

Awesome, thanks a lot Jack! :)

 

LoaderMax.getContent() works perfectly!

 

I just have one minor problem now and it is related to stage buttons... Before, instead of LoaderMax, I used SWFLoader so it was easy to reference stage button action with code like this:

 

addChild(button1);

button1.addEventListener(MouseEvent.CLICK, btnClick);
function btnClick(event:MouseEvent):void {
   if (loader.progress == 1) {
       loader.rawContent.gotoAndStop("frame2");
   }
}

 

Of course, this doesn't work anymore...

 

Question is what do I need to type instead of 'loader.progress' and 'loader.rawContent' in order to make my button work as before?

 

As reminder, this button should interact with 2nd externally loaded SWF via LoaderMax:

queue.append( new SWFLoader("testloading2.swf",{name:"main2",container:this,width:1000,height:670,scaleMode:"proportionalOutside",crop:true}) );

 

I am sure this is something extremely simple, but I just can't figure out how to 'reference' / address / call externally loaded SWF when loaded via LoaderMax :s

 

Help would be mega appreciated! :)

Share this post


Link to post
Share on other sites

This thread has gotten insanely long, so my apologies - I don't remember exactly what you were trying to do with your button (what does "work like before" mean?). Could you describe in a concise way what exactly you want and what's not working?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.