Can I crop and area of SWFLoader?

[ngrinchenko]

I based my SWFLoader on Carl's example of the Image Loader with some extra reading from GreenSock help material.

Even it my novice level everything works nice and easy. However there are some extra steps I would like to accomplish.

So here is "my" code:

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;
//makes sure that none of the barPopUp_mc is showing
progressBarPopUp_mc.gradientbarPopUp_mc.scaleX = 0;

var loaderProductPopUps:SWFLoader = new SWFLoader("prdcts_popups/sumix1-popup_tl.swf", {
									   estimatedBytes:3000, 
									   container:this, 
									   onProgress:progressHandler,
									   onComplete:completeHandler,
									   centerRegistration:true,
									   alpha:.5, 
									   scaleX:0, scaleY:0,
									   //width:200, height:100,//scales proportionally but I need to cut off the edges
									   autoPlay:false
									   });

function progressHandler(event:LoaderEvent):void{
progressBarPopUp_mc.gradientbarPopUp_mc.scaleX = loaderProductPopUps.progress;
}

function completeHandler(event:LoaderEvent):void{
var loadedImage:ContentDisplay = event.target.content;
TweenMax.to(loadedImage, 1.5, {alpha:1, scaleX:1, scaleY:1});  
TweenMax.to(progressBarPopUp_mc, 1.5, {alpha:0, scaleX:0.5, scaleY:0.5}); 
}

loaderProductPopUps.load();

Here is what I would like to accomplish:

1. I have constructed my SWF with some extra images, and graphic shapes which help me to structure the layout and some images are off the stage because I expect my client to change his mind and ask me to add them up, so I just keep them there till the final O.K. (as not to go through all the mc renaming and importing.

So, I would like to know if it is possible to crop a visible area in the SWFLoader, making sure that only the intended part of my SWF is shown?

 

2. I have UILoader and SWFLoader loading the same SWF side by side for my comparison. Same buttons located inside the loaded SWF will work from the UILoader but will not work from SWFLoader.

Here is my code for the buttons:

appImgBtns_mc.BubbleOasis_btn.addEventListener(MouseEvent.CLICK, onClick_PlayApplications_fromBubbleOasis);

function onClick_PlayApplications_fromBubbleOasis(event:MouseEvent) :void {
MovieClip(parent.parent.parent.parent).gotoAndPlay("underConstruction");

}

 

This is an error I get when I click on a button from SWFLoader:

TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Stage@473fa191 to flash.display.MovieClip.

at sumix1_fla::MainTimeline/onClick_PlayApplications_fromTowerSpectaculaire_SFL1()

 

"sumix1_fla" is the beginning of the name of my loaded SWF file

 

3. Lastly I set up the UILoader so it take a "var" from all the product buttons. Here is the code from the products page:

var sourceVar_ProductsPopUps:String;
function onClickSumix1PopUp(event:MouseEvent):void {
sourceVar_ProductsPopUps="prdcts_popups/sumix1-popup_tl.swf";
gotoAndPlay("prdctsPopUps");
}

Here is the code for the UILoader located on the "prdctsPopUps" label

UILoader_ProductsPopUps.source = sourceVar_ProductsPopUps; 

 

How do I assign a name to SWFLoader so it can take same var from my products page for all the melee of the product buttons?

[Carl]

for the issue of hiding the assets that are "off stage", you can use the crop property:

 

crop : Boolean - When a width and height are defined, setting crop to true will cause the swf to be cropped within that area (by applying a scrollRect for maximum performance) based on its native size (not the bounding box of the swf's current contents). This is typically useful when the scaleMode is "proportionalOutside" or "none" or when the swf contains objects that are positioned off-stage. Any parts of the swf that exceed the dimensions defined by width and height are visually chopped off. Use the hAlign and vAlign special properties to control the vertical and horizontal alignment within the cropped area.

 

read more about scaleModes in the docs: http://www.greensock.com/as/docs/tween/ ... oader.html

 

I don't know if all your assets are off stage to one side or scattered about, so I can't provide an exact solution. hopefully using crop and the proper scaleMode will do the trick.

 

---

 

to target the parent swf from a loaded swf I have used this code before and it works in most cases when placed in the child/loaded swf:

 

var parentMovie:MovieClip = this.parent.root as MovieClip;
parentMovie.gotoAndPlay("someFrame");

 

----

 

How do I assign a name to SWFLoader so it can take same var from my products page for all the melee of the product buttons?

 

i don't really understand the 3rd question and what you mean by assigning a name, from your code example it looks more like you want to provide a new url to load

 

loaderProductPopUps.url = sourceVar_ProductsPopUps

 

if you want to learn about the name special property you can also read about that in the SWFLoader the documentation

 

name : String - A name that is used to identify the SWFLoader instance. This name can be fed to the LoaderMax.getLoader() or LoaderMax.getContent() methods. This name is also applied to the Sprite that is created to hold the swf (The SWFLoader's content refers to this Sprite). Each loader's name should be unique. If you don't define one, a unique name will be created automatically, like "loader21".

[ngrinchenko]

Great, thanks!

Looks like the cropping has worked. One thing I am not sure about. I noticed I can not crop it if I do not specify both height and width.

I am trying to load various SWF into the same frame with the LoaderMax. All my loading SWFs share the same width but vary in height. So I figured to specify an extra large height so it will accommodate whatever might come up later on. Not sure if it is a right trick?

var loaderProductPopUps:SWFLoader = new SWFLoader("prdcts_popups/sumix1-popup_tl.swf", {
									   estimatedBytes:3000, 
									   container:this, 
									   onProgress:progressHandler,
									   onComplete:completeHandler,
									   centerRegistration:true,
									   alpha:1, 
									   scaleMode:"none",
									   width:520, 
									   height:1500,//make it a large # to accommodate various heights of SWFs
									   crop:true,
									   autoPlay:false
									   });

 

I like that the SWFs will always be positioned in the center if I use the "centerRegistration:true" However there are object which fly to the stage from the top. Looks like I will not be able to crop them since I have specified an extra large height. This way on the shorter SWF objects which move onto stage from the top will be visible, i.e. I can not crop from the top only?

 

I figured out that i can do it if I omit "centerRegistration:true" and use "x:-260, y:-320, " values in combination with "vAlign:"top""

I am not happy with the above solution as I would like the content of LoaderMax (SWFs) to be always positioned in the center of the stage.

 

Here is the question:

(My Set Up:LoaderMax is the placement for various individual SWFs. Each time it loads a unique URL depending on which button is clicked from the products page. )

Can I have an SWF with various heights to be always positioned in the middle of the stage and to be always cut off on the top and sides. (sides are working because all of the SWFs have the same widths). Now I understand it will not be possible for heights because there are two conflicting parameters: a set number is being thrown off by a variable.

Variable: I want it to be positioned in the center of the stage.

Set number: top can not be set to a specific number since the heights of individual SWFs are variables

 

Is there a way around it?

 

---

 

Targeting parent swf from a loaded swf worked. For some reason it is less by one ".parent" if I use LoaderMax vs. UILoader

For my future reference I was not able to figure out where to add ".parent" in your sample code.

Here is a sample of my working code:

appImgBtns_mc.BubbleOasis_btn.addEventListener(MouseEvent.CLICK, onClick_PlayApplications_fromBubbleOasis);

function onClick_PlayApplications_fromBubbleOasis(event:MouseEvent) :void {
MovieClip(parent.parent.parent).gotoAndPlay("underConstruction");

}

 

Here is what you have provided and I am not sure where extra ".parent" has to go or be taken away from? Or maybe I inserted it incorrectly into the function of the "onClick_..."

appImgBtns_mc.BubbleOasis_btn.addEventListener(MouseEvent.CLICK, onClick_PlayApplications_fromBubbleOasis);

function onClick_PlayApplications_fromBubbleOasis(event:MouseEvent) :void {
var parentMovie:MovieClip = this.parent.parent.root as MovieClip;
parentMovie.gotoAndPlay("underConstruction");

}

 

---

 

I can not figure out where to insert the line

loaderProductPopUps.url = sourceVar_ProductsPopUps

 

Here is my entire code for the LoaderMax, where would it go exactly?

var loaderProductPopUps:SWFLoader = new SWFLoader("prdcts_popups/sumix1-popup_tl.swf", {
									   estimatedBytes:5000, 
									   container:this, 
									   onProgress:progressHandler,
									   onComplete:completeHandler,
									   //centerRegistration:true,
									   x:-260, y:-320, //no need for this is if used: centerRegistration:true,
									   alpha:1, 
									   scaleMode:"none",
									   //scaleX:0, scaleY:0,
									   vAlign:"top",
									   width:520, 
									   height:690,//scales proportionally but I need to cut off the edges
									   crop:true,
									   autoPlay:false
									   });

 

I tried a few variations with the line "prdcts_popups/sumix1-popup_tl.swf" but it did not work out for me.

[Carl]

glad to hear you have made progress. the reason they may or may not be an extra .parent when trying to find the parent swf all depends on where your code is. if you found a way that works, stick with it. also the SWFLoader may have an extra parent than a UILoader because content loaded by a SWFLoader is wrapped inside a ContentDisplay Sprite. (read more in the swfloader docs).

 

as for the cropping. since your swfs have varying heights it might be best to create a new SWFLoader for each swf that gets loaded and then you can specify the width and height when it is created.

[ngrinchenko]

Thanks, I like the streamline idea that I can have one LoaderMax for a bunch of loading SWF's rather then creating individual ones and then having my timeline being broken into additional number of labeled sections where I would place individual LoaderMax instances.

I'll settle with the current set up and alter the individual SWF's so things don't fly from the top.

 

 

Not to overuse your help I would like to ask for a code sample to implement the line:

UILoader_ProductsPopUps.source = sourceVar_ProductsPopUps;

 

I can not figure out where to put it and where to replace it in my LoaderMax set up. Here is the complete code for the LoaderMax

var loaderProductPopUps:SWFLoader = new SWFLoader("prdcts_popups/sumix1-popup_tl.swf", {
									   estimatedBytes:5000, 
									   container:this, 
									   onProgress:progressHandler,
									   onComplete:completeHandler,
									   //centerRegistration:true,
									   x:-260, y:-320, //no need for this is if used: centerRegistration:true,
									   alpha:1, 
									   scaleMode:"none",
									   //scaleX:0, scaleY:0,
									   vAlign:"top",
									   width:520, 
									   height:690,//scales proportionally but I need to cut off the edges
									   crop:true,
									   autoPlay:false
									   });

function progressHandler(event:LoaderEvent):void{
progressBarPopUp_mc.gradientbarPopUp_mc.scaleX = loaderProductPopUps.progress;
}

function completeHandler(event:LoaderEvent):void{
var loadedImage:ContentDisplay = event.target.content;
TweenMax.to(loadedImage, 1.5, {alpha:1, scaleX:1, scaleY:1});  
TweenMax.to(progressBarPopUp_mc, 1.5, {alpha:0, scaleX:0.25, scaleY:0.25}); 
}

loaderProductPopUps.load();

 

How exactly do I replace the current URL line "prdcts_popups/sumix1-popup_tl.swf"?

[Carl]

in the beginning of your file create a variable to hold the url value

var myURL:String;

 

whenever you request a new swf, set the variable to the appropriate value.

you can do this every time you click a button or go to a new frame:

 

myURL = "prdcts_popups/sumix1-popup_tl.swf"

 

and then make your SWFLoader use that variable in the constuctor

 

var loaderProductPopUps:SWFLoader = new SWFLoader(myURL , {
                                estimatedBytes:5000, 
                                container:this, 
                                onProgress:progressHandler,
                                onComplete:completeHandler,
                                //centerRegistration:true,
                                x:-260, y:-320, //no need for this is if used: centerRegistration:true,
                                alpha:1, 
                                scaleMode:"none",
                                //scaleX:0, scaleY:0,
                                vAlign:"top",
                                width:520, 
                                height:690,//scales proportionally but I need to cut off the edges
                                crop:true,
                                autoPlay:false
                                });

[ngrinchenko]

Ahh, what a satisfaction - it works now!

I can not believe I was so close to the solution. I tried a few things and did not realize I had to take quotation marks off the myURL variable.

 

Thanks a lot for your help!