[AS2] Disable/cover background when external page is loaded

  • (2 Pages)
  • +
  • 1
  • 2

19 Replies - 2870 Views - Last Post: 25 May 2011 - 08:32 AM

#1 david149  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-October 09

[AS2] Disable/cover background when external page is loaded

Posted 03 May 2011 - 10:48 AM

Hello all,

I've been having a bit of trouble and was hoping to find a bit of advice. To start, I have a full screen webpage with an elastic bg that is created mostly through AS, XML, and external .swf's. The main menu links to pages (other external .swf's with dynamically loaded content) that look sort of like popups over the graphic content of the main background (img2). There are two problems, 1) there are other buttons on the main page that the user can click when viewing a page and 2) the popups come down directly on the content and make the whole site look rather flat.

Im trying to create a background for each of the pages that has the same elastic qualities as the main page (so that no matter what it will cover the user's entire screen) and will disable all of the buttons beneath it. I tried adding a rectangle beneath the pages other layers, however any script I write for that mc (such as the onresize _mc.width and _mc.height or ._x and ._y) is completely ignored in the main timeline and the rectangle messes with the popup page position -- img3. Also the buttons beneath the rectangle are still active.. Any suggestions are greatly appreciated!

thanks

Attached image(s)

  • Attached Image
  • Attached Image
  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: [AS2] Disable/cover background when external page is loaded

#2 Prototypical  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 137
  • Joined: 20-April 11

Re: [AS2] Disable/cover background when external page is loaded

Posted 08 May 2011 - 09:37 AM

Hard to say what is wrong without seeing the code. When you say something is completely ignored, there must be a reason for that.

Also, since you are using AS2 and possibly timeline elements on the stage and code on clips, it's hard to give a good suggestion without understanding the current design better.

In general, I think you are saying you want to :

create a rectangle or use a clip of some sort
set it's position to the top left of the screen
set width/height to fit the screen

You want to reposition/resize when user resizes the window.

You don't want the buttons behind to be active if the rectangle is active -- meaning another screen is up.

Correct ? Or am I missing something ?
Was This Post Helpful? 0
  • +
  • -

#3 david149  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-October 09

Re: [AS2] Disable/cover background when external page is loaded

Posted 10 May 2011 - 07:10 AM

You've pretty much nailed it..

The pages are loaded into the movie here:
sizeChecker = new Object();
sizeChecker.onresize = function() {
	//topmenu movie clip position elastic effect call function
	if(!linkPageActiv) {
	name_mcY = 110;
	menu_mcY = Math.ceil(Stage.height - menu_mc._height)/3  - 50;
	pagesY = -1000;
	}else{
		name_mcY = 80;
		menu_mcY = -100;
		pages._x = Math.ceil(Stage.width/2)-20;
	    pagesY = Math.ceil(Stage.height/2)+30;
	}
	new Tween(name_mc, "_x", Regular.easeOut, name_mc._x, 55, 1, true);
	new Tween(name_mc, "_y", Regular.easeOut, name_mc._y, name_mcY, 1, true);
	new Tween(pages, "_y", Regular.easeOut, pages._y, pagesY, 1, true);
	
	new Tween(menu_mc, "_y", Regular.easeOut, menu_mc._y, menu_mcY, 1, true);
	new Tween(menu_mc, "_alpha", Regular.easeOut, menu_mc._alpha, 100, 1, true);
	//
	menu_mc._mc._width = Stage.width;
	if(Stage.width>1000) menu_mc.cont._x = Math.ceil((Stage.width - menu_mc.cont._width)/2);
	else menu_mc.cont._x = 0;
	undermenu._y = Math.ceil(Stage.height);
	undermenu.bg._width = Stage.width;
	undermenu.fullscreenbutton._x = Math.ceil(Stage.width - 280);
	undermenu.mcSound._x = Math.ceil(Stage.width - 145);	
};
	//Function Call
Stage.addListener(sizeChecker);


function init() {
	mainLoader.removeMovieClip();
	linkVideo=false;
	linkPageActiv = false;
    pageFlag = true;
	linkPage = -1;
	var logoX:Number = 0;
	var logoY:Number = 0;


	
	
	undermenu.copyrighttext.autoSize = true;
    undermenu.copyrighttext.htmlText = _copyright;
	undermenu.btn1._x = undermenu.copyrighttext._x + undermenu.copyrighttext._width; 
	undermenu.btn1.onPress = function(){
				if (privacyArr[0].target_ != undefined && pageFlag) {			
		            getURL(privacyArr[0].link_, privacyArr[0].target_);
	            }else {
			if (linkPage != 0 && pageFlag){
			linkPageActiv = true;
			pageFlag=false;
			linkPage = 0;
			_root.pathPage = privacyArr[0].path_images;
			_root.pathXmlPage = privacyArr[0].path_data;			
			comeY(pages,pages._height/2,1,privacyArr[0].link_);
			}
		};
			};

	
	if (logo_enable){
		logo._y = logoY; 
		logo._x = logoX;
		new Tween(logo, "_alpha", Regular.easeOut, 0, 100, 5, true);
	}
	if (Bg_enable){
		new Tween(bg, "_alpha", Regular.easeOut, 0, 100, 1, true);
	}
			
			name_mc.onPress = function(){
				if (pageFlag && linkPageActiv){
					linkPage = -1;
					 comeY(pages,pages._height/2,1)
			    }
			};

		if (mySound_enable){
	    undermenu.mcSound.onPress = function(){
		    if (linkVideo == false) {
			if(musFlag){
				this.gotoAndStop(2);
				_sound.stop();
			}else{
				this.gotoAndStop(1);				
				_sound.start();
				
			}
		    };
		};
	    }else{
			undermenu.mcSound._visible = false;
		};
		
		
		mainMenu();
		sizeChecker.onresize();
	};
	
init();

//Page X position function
comeY = function(_this,YPOS, h, link) {
	pageFlag = false;
	topmenu.page.pages.clearComponent();
	if (link) {
			link_active(link);
		
	} else {
		var tween1 = new Tween(_this, "_alpha", Regular.easeOut, _this._alpha,0, h, true);
		linkPageActiv = false;
		sizeChecker.onresize();
		linkPage = -1;
	    tween1.onMotionfinished = function(){
		removeMovieClip(_root.pages);        
		pageFlag = true;
	}
	}
};

function link_active(linkURL) {
	sizeChecker.onresize();
	pages.removeMovieClip();
	_root.createEmptyMovieClip("pages", 1);
	_root.pages.createEmptyMovieClip("page", 1);
	loader.loadClip(linkURL,_root.pages.page);
};
//===================== CREATE MAIN MENU =====================//
function mainMenu() {
	lenMenu = menuArr.length;
	var mcMenu:MovieClip = menu_mc.cont;

	var textMaxW:Number = 0;
	var remainder:Number = 0;
	var spaceMenu:Number = 0;
	for (var j:Number = 1; j<=lenMenu; j++) {
		var btnName:MovieClip = mcMenu.attachMovie("btnMenu", "btnMenu" + j, j);		
		btnName._mcTxt1._txt.autoSize = true;
		btnName._mcTxt2._txt.autoSize = true;
		btnName._mcTxt1._txt.text = menuArr[j-1].caption;
        btnName._mcTxt2._txt.text = menuArr[j-1].caption;
		textMaxW += btnName._mcTxt1._width;
		
	}
	remainder = 1000 - textMaxW;
	
	spaceMenu = remainder/lenMenu/2;
	
	for (var i:Number = 1; i <= lenMenu; i++) {
		var btnName:MovieClip = mcMenu["btnMenu"+i];
		btnName.index = i;
		btnName.target_ = menuArr[i-1].target;
		btnName.link_ = menuArr[i-1].link;
		btnName.pathPage = menuArr[i-1].path_images;
		btnName.pathXmlPage = menuArr[i-1].path_data;
		
		var btnW:Number = Math.floor(btnName._mcTxt1._width + spaceMenu*2);
		btnName._mcArea._width = btnW;
		btnName.eff._width = btnW;
		btnName._mcTxt1._x = (btnW-btnName._mcTxt1._width)/2;
		btnName._mcTxt2._x = (btnW-btnName._mcTxt1._width)/2;
		btnName._mc._visible = false;
		
		if (sub_menuArr(i-1).length >= 1) {
			var res:Array = new Array();
			res = sub_menuArr(i-1);
			subMenu(i,btnW,btnName._mc,res);
		}
		
		btnName._x = Math.ceil(mcMenu["btnMenu"+(i-1)]._x + mcMenu["btnMenu"+(i-1)]._width);		
		
		btnName._mcArea.onRollOver = function() {
			//if (this._parent.index != linkPage && pageFlag){
				this._parent._mcArea._height = 92 + this._parent._mc._height;
				btnMenuOver(this._parent);	
			//}
             this._parent._mc._visible = true; 
		};
		
		
		btnName._mcArea.onRollOut = btnName._mcArea.onReleaseOutside = function () {
			//if (this._parent.index != linkPage && pageFlag ){
					this._parent._mcArea._height = 92;
					btnMenuOut(this._parent);	
			//}
			
			if (this._parent._mc._height > 1) {
				  this._parent.onEnterFrame = function(){
				  if (this.hitTest(_root._xmouse, _root._ymouse, false)){	              
				  }else{  
					this._mc._visible = false;
					delete this.onEnterFrame;
				  };
				  }
				};//end if
			
			
			
		};
		
		btnName._mcArea.onRelease = function() {
			if (this._parent.target_ != undefined && pageFlag) {
					var oldBtn:MovieClip = mcMenu["btnMenu"+linkPage];				
		            getURL(this._parent.link_, this._parent.target_);
	            }else {
			if (this._parent.index != linkPage && pageFlag){
							
			linkPageActiv = true;
			pageFlag=false;
			_root.pathPage=this._parent.pathPage;
			_root.pathXmlPage = this._parent.pathXmlPage;
			linkPage = this._parent.index;
			comeY(pages,pages._height/2,1,this._parent.link_);
			}
		}
		};
		

		
	}	
	};


The rectangle/clip that Im trying to use is created in the pages file and I tried using a function similar (although less complex) to sizeChecker to control the width and height of the clip. That script appears to be ignored or overwritten by the code I've posted here, and the rectangle only changes the size of the .swf being loaded which is messing with the position.

Hope that gives you a better picture, thanks for your help.
Was This Post Helpful? 0
  • +
  • -

#4 Prototypical  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 137
  • Joined: 20-April 11

Re: [AS2] Disable/cover background when external page is loaded

Posted 10 May 2011 - 12:40 PM

Well, given what we outlined. Take it one step at a time. I've not gone through your code here in detail, but I will help you go through the process.

Where is the rectangle that you are creating - point me to that. If that is your first step, lets start there.

Is what you are trying to do , specifically with resizing ?
Was This Post Helpful? 0
  • +
  • -

#5 david149  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-October 09

Re: [AS2] Disable/cover background when external page is loaded

Posted 11 May 2011 - 01:16 PM

The code in the last post is just everything having to do with the pages from the main timeline. The rectangle isn't in there -- I actually don't have it at all right now.

The menu items are created in an xml file and resembles this:
<item caption="ABOUT US"  link="news/flash.swf" path_data ="news/data/cgal.xml" path_images ="news/" />
Alot of what I posted before tells the main timeline to find this link, create an mc titled pages and another mc in that titled page. The link to an external swf (in this case titled flash.swf) is inserted into the page mc when the menu item "about us" is pressed.

When I created the rectangle, I just drew it on the bottom layer of flash.swf so that it would appear along with the about us page.. I converted the shape to an mc and wrote an onresize function in the actionscript layer of that file, but it gets ignored.
Was This Post Helpful? 0
  • +
  • -

#6 david149  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-October 09

Re: [AS2] Disable/cover background when external page is loaded

Posted 12 May 2011 - 12:27 PM

Ok, so disregard my last post.

Right now I've created an .swf with a simple full screen background (the rectangle underneath the pages). When testing that .swf the resize funciton works perfectly and the screen takes up my whole page. The code for that is here:
//set stage 
Stage.align = "TL";
Stage.scaleMode = "noScale";

//aspect ratio

var imageHeight:Number = image._height/image._width;
var imageWidth:Number = image._width/image._height;

//conditional statements

if ((Stage.height/Stage.width)<imageHeight) {
	image._width = Stage.width;
	image._height = imageHeight*image._width;
} else {
	image._height = Stage.height;
	image._width = imageWidth*image._height;
}
;;

//center image on stage
image._x = Stage.width/2;
image._y = Stage.height/2;

// add stage listener
resizeListener = new Object();

// activate listener
resizeListener.onresize = function() {

	if ((Stage.height/Stage.width)<imageHeight) {

		image._width = Stage.width;
		image._height = imageHeight*image._width;
	} else {
		image._height = Stage.height;
		image._width = imageWidth*image._height;
	}
	;;


	image._x = Stage.width/2;
	image._y = Stage.height/2;

};

//add listener to stage
Stage.addListener(resizeListener);


In the main timeline I load that .swf underneath the pages here:
function link_active(linkURL) {
	sizeChecker.onresize();
	pages.removeMovieClip();
	_root.createEmptyMovieClip("pages", 1);
	_root.pages.createEmptyMovieClip("screen",1);
	_root.pages.createEmptyMovieClip("page", getNextHighestDepth());
	loader.loadClip(linkURL,_root.pages.page);
	loader.loadClip("images/screen.swf",_root.pages.screen);
};


Now, when testing the main movie, the resize function doesn't fit the full screen and is not positioned in the top left -- see the attached image. Any ideas??

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#7 Prototypical  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 137
  • Joined: 20-April 11

Re: [AS2] Disable/cover background when external page is loaded

Posted 12 May 2011 - 05:38 PM

Is the orange that I see the rectangle ? what is it's x,y position ? can you trace it out ?
Was This Post Helpful? 0
  • +
  • -

#8 david149  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-October 09

Re: [AS2] Disable/cover background when external page is loaded

Posted 17 May 2011 - 08:26 AM

So I've played around with the code and have gotten a slightly different result, but the problem remains just about the same.

The orange is indeed the rectangle.

IMG1: when in a small browser, the rectangle actually does cover everything up. X value = -892, Y value = -446

IMG2: When I leave the page open and resize the browser, the rectangle no longer covers everything and the X and Y values remain the same at -892, -446

IMG3: When I resize the browser and then open a page the rectangle covers everything up again. X value = -1126, Y value = -563

the code inside of the rectangle file and the code to load the clip have remained the same as in my last post. The sizeChecker function is what is controlling the position in the main timeline:
sizeChecker = new Object();
sizeChecker.onresize = function() {
	//topmenu movie clip position elastic effect call function
	if(!linkPageActiv) {
	name_mcY = 110;
	menu_mcY = Math.ceil(Stage.height - menu_mc._height)/3  - 50;
	pagesY = -1000;
	}else{
		name_mcY = 80;
		menu_mcY = -100;
		pages._x = Math.ceil(Stage.width/2);
	    pagesY = Math.ceil(Stage.height/2);
		trace(pages.screen._x);
		trace(pages.screen._y);
	}

Attached image(s)

  • Attached Image
  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#9 Prototypical  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 137
  • Joined: 20-April 11

Re: [AS2] Disable/cover background when external page is loaded

Posted 17 May 2011 - 09:27 AM

What I'm expecting to see in your resize function is code that :

-determines the size of the screen
-sizes the rectangle to match size of screen
-sets the location of the rectangle to the top/left of the screen
-sets the location of the menu element based on the size of the screen.

I'm assuming that the rectangle's registration point is 0,0.
If it is centered, then the calculation would be different. So is the rectangle mc pages ?

I'm not making much sense out of what I see there right now.

I'm also assuming that the else block is what is getting executed in all these pictures as linkPageActive should be true ? I'm assuming that linkPageActive is true when that education slide is there.

I see pagesY assigned a value, but not pages._y

What is the mc name of the rectangle, it's really not too obvious based on this code.

Also, since i'm not seeing the actual ._y properties being assigned values, I can't be sure they ever get assigned and if other calculations might be made at those locations in the code.

Is there a reason why you are not doing everything related to the positioning of these screen elements in this resize function ?

In general, I'm not too clear on the logic you are using to position these screen elements.

Is pagesY correct ? or did you mean pages._y ?
Was This Post Helpful? 0
  • +
  • -

#10 david149  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-October 09

Re: [AS2] Disable/cover background when external page is loaded

Posted 17 May 2011 - 11:31 AM

The rectangle is called screen.swf, loaded in the link_active function.
_root.createEmptyMovieClip("pages", 1);  

     _root.pages.createEmptyMovieClip("screen",1);  

    loader.loadClip("images/screen.swf",_root.pages.screen);
(the education page is in an empty movie clip called "page", also loaded inside of "pages" -- the whole function is posted earlier).

pagesY is correct, its used as a variable in this tween:
new Tween(pages, "_y", Regular.easeOut, pages._y, pagesY, 1, true);
which is what ends up setting the ._y position of the "pages" mc.



I've reset the registration point of the rectangle (the "screen.swf") to 0,0:
//set stage 
Stage.align = "TL";
Stage.scaleMode = "noScale";

//aspect ratio

var imageHeight:Number = image._height/image._width;
var imageWidth:Number = image._width/image._height;

//conditional statements

if ((Stage.height/Stage.width)<imageHeight) {
	image._width = Stage.width;
	image._height = imageHeight*image._width;
} else {
	image._height = Stage.height;
	image._width = imageWidth*image._height;
}
;;

image._x = 0;
image._y = 0;

// add stage listener
resizeListener = new Object();

// activate listener
resizeListener.onresize = function() {

	if ((Stage.height/Stage.width)<imageHeight) {

		image._width = Stage.width;
		image._height = imageHeight*image._width;
	} else {
		image._height = Stage.height;
		image._width = imageWidth*image._height;
	}
	;;


	image._x = 0;
	image._y = 0;

};

//add listener to stage
Stage.addListener(resizeListener);



Was This Post Helpful? 0
  • +
  • -

#11 david149  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-October 09

Re: [AS2] Disable/cover background when external page is loaded

Posted 17 May 2011 - 02:43 PM

^ "image" is the rectangle's instance name/mc in "screen.swf"

In short the problem is only occuring when the browser is resized while a page is open.

This post has been edited by david149: 17 May 2011 - 02:45 PM

Was This Post Helpful? 0
  • +
  • -

#12 Prototypical  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 137
  • Joined: 20-April 11

Re: [AS2] Disable/cover background when external page is loaded

Posted 17 May 2011 - 03:49 PM

Did you change the code ? I now see different code altogether here. It's confusing me as to if I'm seeing everything or now.

If when you resize, the overlay which i think you call image now should be at the top/left of the screen. What are you seeing with the code you just posted ? Is the overlay part further down than you expect?
Was This Post Helpful? 0
  • +
  • -

#13 david149  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-October 09

Re: [AS2] Disable/cover background when external page is loaded

Posted 18 May 2011 - 07:41 AM

The last bit of code I posted from "screen.swf" is just about the same as it was in post #6 -- I've only just reset the aligment to 0,0 instead of centering it..

(see img) -- but I only get this problem when I open a page and then resize the browser. X coordinate traces to -892, Y to -446.

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#14 Prototypical  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 137
  • Joined: 20-April 11

Re: [AS2] Disable/cover background when external page is loaded

Posted 18 May 2011 - 08:29 AM

Ok, I see. I guess I was confused by how code on #8 fits into this. I'm seeing all these bits and pieces of code, but not a clear picture of how they fit together.

when you trace out those x and y coordinates. I want you to also trace out the width/height of the stage, as well as the width/height of image - which is your rectangle.

Do they match ?
Was This Post Helpful? 0
  • +
  • -

#15 david149  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-October 09

Re: [AS2] Disable/cover background when external page is loaded

Posted 18 May 2011 - 10:09 AM

When I first load the page, and its half size, the width and height match at 992 and 892. When I resize, the stage width and height changes to 1916, 1126 and the rectangle remains the same (at 992 and 892).

The code in #8 is from the main timeline and the code that tells the rectangle to resize to fullscreen is embeded in "screen.swf" -- which is loaded into the main timeline along with the actual page (education page or about us page or whatever) here:
function link_active(linkURL) {  

     sizeChecker.onresize();  
     pages.removeMovieClip();  
     _root.createEmptyMovieClip("pages", 1);  
     _root.pages.createEmptyMovieClip("screen",1);  
     _root.pages.createEmptyMovieClip("page", getNextHighestDepth());  
     loader.loadClip(linkURL,_root.pages.page);  
     loader.loadClip("images/screen.swf",_root.pages.screen);  
};

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2