Archief - Elementen positioneren bij resize venster

QuietKillah · 2 feb 2011

Een vraag puur uit intresse.
Hoe maakt ge dat bij het resizen van uw browser venster, of dus bij andere resolutie, uw site zich gedraagt als deze bijvoorbeeld.
Waarmee dak bedoel, de achtergrond rekt uit/vergroot, de dingen op de hoeken verplaatsen eventueel, maar u content in het midden blijft even groot.

GregoryCo · 2 feb 2011

Een een resize functie aanmaken => stage.addEventlistener(Event.RESIZE, resizeHandler); en in die resizeHandler uw objecten positioneren

QuietKillah · 3 feb 2011

ah k, en dan adh van de resolutie de posities en grootte berekenen?
klinkt niet zooo ingewikkeld...

tnx

QuietKillah · 6 feb 2011

Code:

private function resizeHandler(event:Event):void{
			//BACKGROUND
			background.width = stage.stageWidth;
			background.height=stage.stageHeight;
			
			//NAVIGATION
			navigation.x = (stage.stageWidth/2) - (navigation.width/2);
			
		}
		
		private function initStage():void{
			background = new Background;
			stage.addChild(background);
			
			navigation = new Navigation;
			navigation.y -=250; 
			stage.addChild(navigation);
		}

kheb deze code nu... en kzit al met een probleem
al men movieclips hebben hun positiepunt (of hoe je dat ook noemt) in de linkerbovenhoek, en toch positioneert hij het altijd met een marge van 400 pixels ofzo? hoe komt dit?

EDIT:
fixed met:

Code:

stage.align = "TL";

Zero Grav · 6 feb 2011

Sowieso altijd de eerste twee regels in een Actionscript project:

Code:

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

QuietKillah · 6 feb 2011

kheb nu nog een probleemke, tot nu toe werkt alles perfect,
maar kmoet eerst men browservenster resizen vooraleer de flashsite geladen wordt.
zonder resizen worddt hij op één of andere manier niet geladen....

Zero Grav · 6 feb 2011

Code?

QuietKillah · 6 feb 2011

Code:

package be.quietkillah
{
	import com.greensock.*;
	import com.greensock.easing.*;
	
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class Impress extends MovieClip
	{
		private var background:Background;
		private var navigation:Navigation;
		private var copyright:Copyright;
		private var contact:Contact;
		private var yHome:int;
		private var yBedr:int;
		private var yPrijs:int;
		private var yInfo:int;
		
		public function Impress()
		{
			stage.addEventListener(Event.RESIZE, resizeHandler);
			initStage();
		}
		
		/********** POSITIONERING EN PLAATSING ITEMS **********/
			//STAGE RESIZE
		private function resizeHandler(event:Event):void{
			
			if(stage.stageWidth >= 800 && stage.stageHeight >= 600){
			//BACKGROUND
			background.width = stage.stageWidth;
			background.height=stage.stageHeight;
			
			//COPYRIGHT
			copyright.x = stage.x;
			copyright.y = stage.stageHeight;
			
			//CONTACT
			contact.x = stage.stageWidth;
			contact.y = stage.stageHeight;
			}
			
			//NAVIGATION
			navigation.x = (stage.stageWidth/2) - (navigation.width/2) + 32;
			yHome = navigation.home.y;
			yBedr = navigation.bedrukking.y;
			yInfo = navigation.informatie.y;
			yPrijs = navigation.prijsvraag.y;
			
			
			
		}
		
			//INIT STAGE AT STARTUP
		private function initStage():void{
			//STAGE
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			//BACKGROUND
			background = new Background;
			background.x = stage.x;
			background.width = stage.stageWidth;
			background.height=stage.stageHeight;
			stage.addChild(background);
			
			//NAVIGATION
			navigation = new Navigation;
			navigation.y -=200; 
			navigation.x = (stage.stageWidth/2) - (navigation.width/2)+30;
			stage.addChild(navigation);
			navigation.addEventListener(MouseEvent.MOUSE_OVER,onNavHover);
			navigation.addEventListener(MouseEvent.MOUSE_OUT,onNavHoverOut);
			navigation.addEventListener(MouseEvent.CLICK,onNavClick);
			yHome = navigation.home.y;
			yBedr = navigation.bedrukking.y;
			yInfo = navigation.informatie.y;
			yPrijs = navigation.prijsvraag.y;
			
			
			//COPYRIGHT
			copyright = new Copyright;
			stage.addChild(copyright);
			copyright.x = stage.x;
			copyright.y = stage.stageHeight;
			
			//CONTACT
			contact = new Contact;
			stage.addChild(contact);
			contact.x = stage.stageWidth;
			contact.y = stage.stageHeight;
		}
		
		/********** NAVIGATIE **********/ 
			//HOVERS
		private function onNavHover(event:MouseEvent):void{
			switch(event.target.name){
				case "home":
						TweenLite.to(navigation.home, 1, {y:(yHome+190), ease:Cubic.easeOut});
					break;
				case "bedrukking":
					TweenLite.to(navigation.bedrukking, 1, {y:(yBedr+190), ease:Cubic.easeOut});
					break;
				case "informatie":
					TweenLite.to(navigation.informatie, 1, {y:(yInfo+190), ease:Cubic.easeOut});
					break;
				case "prijsvraag":
					TweenLite.to(navigation.prijsvraag, 1, {y:(yInfo+190), ease:Cubic.easeOut});
					break;
			}
		}
		private function onNavHoverOut(event:MouseEvent):void{
			switch(event.target.name){
				case "home":
					TweenLite.to(navigation.home, 1, {y:(yHome), ease:Cubic.easeOut});
					break;
				case "bedrukking":
					TweenLite.to(navigation.bedrukking, 1, {y:(yBedr), ease:Cubic.easeOut});
					break;
				case "informatie":
					TweenLite.to(navigation.informatie, 1, {y:(yInfo), ease:Cubic.easeOut});
					break;
				case "prijsvraag":
					TweenLite.to(navigation.prijsvraag, 1, {y:(yPrijs), ease:Cubic.easeOut});
					break;
			}
		}
		
			//CLICKS
		private function onNavClick(event:MouseEvent):void{
			switch(event.target.name){
				case "home":
					
					break;
				case "bedrukking":
					
					break;
				case "informatie":
					
					break;
				case "prijsvraag":
					
					break;
			}
		}
	}
}

en in publish settings heigt en width op 100 procent gezet.

Zero Grav · 7 feb 2011

Oppassen, ge koppelt eerst uw resizeHandler aan en gaat dan pas uw elementen aanmaken om op uw stage te zetten. Als iemand dan zou gaan resizen kan em dus effectief uw site doen crashen omdat em elementen probeert te verplaatsen die niet bestaan.

Dus eerst uw stage aanmaken, als ge zeker zijt dat alles is aangemaakt dan voegt ge uw resizeHandler toe en om zeker te zijn dat alles goed staat. Dat laatste waart ge vergeten.

Code:

package
{
    import com.greensock.*;
    import com.greensock.easing.*;
    
    import flash.display.MovieClip;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.MouseEvent;
    
    public class Impress extends MovieClip
    {
        private var background:Background;
        private var navigation:Navigation;
        private var copyright:Copyright;
        private var contact:Contact;
        private var yHome:int;
        private var yBedr:int;
        private var yPrijs:int;
        private var yInfo:int;
        
        public function Impress()
        {
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;

            this.addEventListener( Event.ADDED_TO_STAGE, initStage);
        }
        
        /********** POSITIONERING EN PLAATSING ITEMS **********/
        //STAGE RESIZE
        private function resizeHandler(event:Event):void{
            
            if(stage.stageWidth >= 800 && stage.stageHeight >= 600){
                //BACKGROUND
                background.width = stage.stageWidth;
                background.height = stage.stageHeight;
                
                //COPYRIGHT
                copyright.x = stage.x;
                copyright.y = stage.stageHeight;
                
                //CONTACT
                contact.x = stage.stageWidth;
                contact.y = stage.stageHeight;
            }
            
            //NAVIGATION
            navigation.x = (stage.stageWidth/2) - (navigation.width/2) + 32;
            yHome = navigation.home.y;
            yBedr = navigation.bedrukking.y;
            yInfo = navigation.informatie.y;
            yPrijs = navigation.prijsvraag.y;
        }
        
        //INIT STAGE AT STARTUP
        private function initStage(e:Event):void{
            //STAGE
            trace("Impress :: initStage :: Added To Stage");
            //BACKGROUND
            background = new Background();
            background.x = stage.x;
            background.width = stage.stageWidth;
            background.height=stage.stageHeight;
            
            addChild(background);
            
            //NAVIGATION
            navigation = new Navigation();
            navigation.y -=200; 
            navigation.x = (stage.stageWidth/2) - (navigation.width/2)+30;
            stage.addChild(navigation);
            navigation.addEventListener(MouseEvent.MOUSE_OVER,onNavHover);
            navigation.addEventListener(MouseEvent.MOUSE_OUT,onNavHoverOut);
            navigation.addEventListener(MouseEvent.CLICK,onNavClick);
            yHome = navigation.home.y;
            yBedr = navigation.bedrukking.y;
            yInfo = navigation.informatie.y;
            yPrijs = navigation.prijsvraag.y;
            
            
            //COPYRIGHT
            copyright = new Copyright();
            addChild(copyright);
            copyright.x = stage.x;
            copyright.y = stage.stageHeight;
            
            //CONTACT
            contact = new Contact();
            stage.addChild(contact);
            contact.x = stage.stageWidth;
            contact.y = stage.stageHeight;

            resizeHandler(null);
            stage.addEventListener(Event.RESIZE, resizeHandler);
        }
        
        /********** NAVIGATIE **********/ 
        //HOVERS
        private function onNavHover(event:MouseEvent):void{
            switch(event.target.name){
                case "home":
                    TweenLite.to(navigation.home, 1, {y:(yHome+190), ease:Cubic.easeOut});
                    break;
                case "bedrukking":
                    TweenLite.to(navigation.bedrukking, 1, {y:(yBedr+190), ease:Cubic.easeOut});
                    break;
                case "informatie":
                    TweenLite.to(navigation.informatie, 1, {y:(yInfo+190), ease:Cubic.easeOut});
                    break;
                case "prijsvraag":
                    TweenLite.to(navigation.prijsvraag, 1, {y:(yInfo+190), ease:Cubic.easeOut});
                    break;
            }
        }
        private function onNavHoverOut(event:MouseEvent):void{
            switch(event.target.name){
                case "home":
                    TweenLite.to(navigation.home, 1, {y:(yHome), ease:Cubic.easeOut});
                    break;
                case "bedrukking":
                    TweenLite.to(navigation.bedrukking, 1, {y:(yBedr), ease:Cubic.easeOut});
                    break;
                case "informatie":
                    TweenLite.to(navigation.informatie, 1, {y:(yInfo), ease:Cubic.easeOut});
                    break;
                case "prijsvraag":
                    TweenLite.to(navigation.prijsvraag, 1, {y:(yPrijs), ease:Cubic.easeOut});
                    break;
            }
        }
        
        //CLICKS
        private function onNavClick(event:MouseEvent):void{
            switch(event.target.name){
                case "home":
                    
                    break;
                case "bedrukking":
                    
                    break;
                case "informatie":
                    
                    break;
                case "prijsvraag":
                    
                    break;
            }
        }
    }
}

'k Heb laten staan dat ge extend van MovieClip, maar op zich kunt ge in dit geval even goed van Sprite extenden.

QuietKillah · 7 feb 2011

hmm klinkt idd logisch. en kheb het veranderd naar sprite.

maar kzit nog steeds met het probleem dat ik moet resizen vooraleer ik de site te zien krijg.
in IE heb ik dit niet, maar in chrome wel. enig idee hoe ik dit probleem kan verhelpen?

Zero Grav · 7 feb 2011

Hebt ge alle code gekopieerd? Want hier had ik dat niet meer hoor.
Dit had het op moeten lossen:

Code:

resizeHandler(null);
stage.addEventListener(Event.RESIZE, resizeHandler);

Trouwens ook even vermelden dat ge in uw andere elementen ook aan positionering kunt/moogt doen. Ge moet dus niet persé de children van Navigation gaan positioneren in uw Main klasse, dat kunt ge ook in Navigation zelf doen. Om de ordelijkheid wat te bewaren..

QuietKillah · 7 feb 2011

ja kheb alles. dit heb ik nu:
maar kzegget: in IE hebbek het niet, enkel in chrome.

Code:

package be.quietkillah
{
	import com.greensock.*;
	import com.greensock.easing.*;
	import com.greensock.plugins.*;
	
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
	import flash.system.Capabilities;
	import flash.utils.Timer;
	
	public class Impress extends MovieClip
	{
		private var background:Background;
		private var navigation:Navigation;
		private var copyright:Copyright;
		private var contact:Contact;
		private var logoimpress:Impresslogo;
		
		private var slideshow:Slideshow;
		private var home:ContentHome;
		
		private var yHome:int;
		private var yBedr:int;
		private var yPrijs:int;
		private var yInfo:int;
		private var picture:uint = 1;
		private var active:String;
		private var timer:Timer;
		
		public function Impress()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			this.addEventListener( Event.ADDED_TO_STAGE, initStage);
		}
		
		/********** POSITIONERING EN PLAATSING ITEMS **********/
		//STAGE RESIZE
		private function resizeHandler(event:Event):void{
			//BACKGROUND
			background.width = stage.stageWidth;
			background.height = stage.stageHeight;
			
			if(stage.stageWidth >= 1024){
				//COPYRIGHT
				copyright.x = stage.x;
				copyright.y = stage.stageHeight;
				
				//NAVIGATION
				navigation.x = (stage.stageWidth/2) - (navigation.width/2) + 32;
				
				//SLIDESHOW
				slideshow.x = (stage.stageWidth/2) - (slideshow.width/2) + 15;
				
				//CONTACT
				contact.x = stage.stageWidth;
				contact.y = stage.stageHeight;
				
				//LOGO
				logoimpress.x = stage.x + 25;
				logoimpress.y = 10;
			}
			
			//NAVIGATION
			yHome = navigation.home.y;
			yBedr = navigation.bedrukking.y;
			yInfo = navigation.informatie.y;
			yPrijs = navigation.prijsvraag.y;
		}
		
		//INIT STAGE AT STARTUP
		private function initStage(e:Event):void{
			//STAGE
			trace("Impress :: initStage :: Added To Stage");
			//BACKGROUND
			background = new Background();
			background.x = stage.x;
			background.width = stage.stageWidth;
			background.height=stage.stageHeight;
			addChild(background);
			
			//LOGO
			logoimpress = new Impresslogo();
			logoimpress.width *= 0.6;
			logoimpress.height *= 0.6;
			logoimpress.x = stage.x + 25;
			logoimpress.y = 10;
			stage.addChild(logoimpress);
			
			//SLIDESHOW
			slideshow = new Slideshow();
			slideshow.x = (stage.stageWidth/2) - (slideshow.width/2) + 15;
			slideshow.y = 80;
			stage.addChild(slideshow);
			timer = new Timer(5000);
			timer.start();
			timer.addEventListener(TimerEvent.TIMER,onTick);
			
			
			//COPYRIGHT
			copyright = new Copyright();
			addChild(copyright);
			copyright.x = stage.x;
			copyright.y = stage.stageHeight;
			
			//CONTACT
			contact = new Contact();
			stage.addChild(contact);
			contact.x = stage.stageWidth;
			contact.y = stage.stageHeight;
			
			//NAVIGATION
			navigation = new Navigation();
			navigation.y -=200; 
			navigation.x = (stage.stageWidth/2) - (navigation.width/2)+30;
			stage.addChild(navigation);
			navigation.addEventListener(MouseEvent.MOUSE_OVER,onNavHover);
			navigation.addEventListener(MouseEvent.MOUSE_OUT,onNavHoverOut);
			navigation.addEventListener(MouseEvent.CLICK,onNavClick);
			yHome = navigation.home.y;
			yBedr = navigation.bedrukking.y;
			yInfo = navigation.informatie.y;
			yPrijs = navigation.prijsvraag.y;
			
			resizeHandler(null);
			stage.addEventListener(Event.RESIZE, resizeHandler);
		}
		
		/********** SLIDESHOW **********/ 
		private function onTick(event:TimerEvent):void{
			trace(picture);
			picture +=1;
			TweenPlugin.activate([TintPlugin]);
			TweenLite.to(slideshow, 1, {tint:0x000000,onComplete:onTweenKlaar});
			
		}
		private function onTweenKlaar():void{
			if (picture < 19){
				slideshow.gotoAndStop(picture);
			}else{
				slideshow.gotoAndStop(1);
			}
			TweenPlugin.activate([TintPlugin]);
			TweenLite.to(slideshow, 1, {tint:null});
		}
		
		/********** NAVIGATIE **********/ 
			//HOVERS
		private function onNavHover(event:MouseEvent):void{
			switch(event.target.name){
				case "home":
						TweenLite.to(navigation.home, 1, {y:(yHome+190), ease:Cubic.easeOut});
					break;
				case "bedrukking":
					TweenLite.to(navigation.bedrukking, 1, {y:(yBedr+190), ease:Cubic.easeOut});
					break;
				case "informatie":
					TweenLite.to(navigation.informatie, 1, {y:(yInfo+190), ease:Cubic.easeOut});
					break;
				case "prijsvraag":
					TweenLite.to(navigation.prijsvraag, 1, {y:(yInfo+190), ease:Cubic.easeOut});
					break;
			}
		}
		private function onNavHoverOut(event:MouseEvent):void{
			switch(event.target.name){
				case "home":
					TweenLite.to(navigation.home, 1, {y:(yHome), ease:Cubic.easeOut});
					break;
				case "bedrukking":
					TweenLite.to(navigation.bedrukking, 1, {y:(yBedr), ease:Cubic.easeOut});
					break;
				case "informatie":
					TweenLite.to(navigation.informatie, 1, {y:(yInfo), ease:Cubic.easeOut});
					break;
				case "prijsvraag":
					TweenLite.to(navigation.prijsvraag, 1, {y:(yPrijs), ease:Cubic.easeOut});
					break;
			}
		}
		
			//CLICKS
		private function onNavClick(event:MouseEvent):void{
			//overal checken welke pagina actief is!
			
			trace(event.target.name);
			switch(event.target.name){
				case "home":
					if(active != "home"){
						active = "home";
						home = new ContentHome;
						stage.addChildAt(home,2);
						home.y = stage.stageHeight + 10;
						home.x = (stage.stageWidth/2) - (home.width/2);
					
						stage.addEventListener(Event.RESIZE, homeResize);
						TweenLite.to(home, 1, {y:(stage.stageHeight/2 - home.height/2), ease:Expo.easeInOut});
					}
					break;
				case "bedrukking":
					if (active != "bedrukking"){
						active = "bedrukking";
					}
					break;
				case "informatie":
					if(active != "informatie"){
						active = "informatie";
					}
					break;
				case "prijsvraag":
					if(active != "prijsvraag"){
						active = "prijsvraag";
					}
					break;
			}
		}
		private function homeResize(event:Event):void{
			if (stage.stageHeight >= 900){
			home.y = (stage.stageHeight/2 - home.height/2);
			home.x = (stage.stageWidth/2) - (home.width/2);}
		}
	}
}

Zero Grav · 7 feb 2011

Kunt ge eens het project uploaden? Dan kan ik het runnen zonder placeholders aan te maken (kost mij teveel tijd).

QuietKillah · 7 feb 2011

tuurlijk

KLIK

Zero Grav · 7 feb 2011

Werkt hier perfect in Chrome, zeker dat ge niet met een cached version aan't werken zijt?

QuietKillah · 7 feb 2011

hmm geen idee, maar kheb het gehost op impress en men vriendin had het probleem ook dusja

Zero Grav · 7 feb 2011

Ook daar werkt het in Chrome van de eerste keer. Granted dat ik wel een 5 tal seconden moest wachten voor er iets tevoorschijn kwam, maar er is geen resize aan te pas gekomen. Ook eens rondgevraagd en daar werkt het ook in Chrome zonder te resizen.

Misschien dacht uw vriendin gewoon dat em niet tevoorschijn kwam omdat 4MB wel even moet laden (is trouwens veel te veel voor zo'n siteje) en hij toevallig net geladen was bij het resizen.

QuietKillah · 7 feb 2011

ah lol bij mij nu ook... wierd, maar blijkbaar werkt het nu plots wel

ok ja swat, bedankt voor alles allesinds

QuietKillah · 8 feb 2011

kvond het redelijk nutteloos om een nieuw topic te maken dus vraag ik het maar hier.
Ik was dus op zoek naar hoe je gemakkelijk je navigatie die binnen dezelfde swf gebeurt, toch kan laten deeplinken. ik ben uitgekomen op SWFAddress, maar ik vraag me af of dit te implementeren is?
kheb dit namelijk wat geprobeerd met swfaddress.SetValue("blabla"); en dan in de eventlistener van swfAddress al men menutoestanden te doen, maar dit doet niks.
of kun je dit lokaal niet testen ofzo?

Zero Grav · 8 feb 2011

Ge moet ook uw html aanpassen om SWFAddress te laten werken. Valt zeker te implementeren en is echt een goeie manier om aan navigatie te doen, indien goed geïmplementeerd kunnen gebruikers zelfs via een bepaalde link op een bepaald deel van de website uitkomen (net zoals bij een html site dus).

En ge hebt ook SWFObject nodig in plaats van de standaard object implementatie. Check Asual | SWFAddress Docs (code op die site is wel AS2, maar 't punt blijft hetzelfde).

Sta toevallig net op hun site zie ik. ^^

Archief - Elementen positioneren bij resize venster

QuietKillah

Legacy Member

GregoryCo

Legacy Member

QuietKillah

Legacy Member

QuietKillah

Legacy Member

Zero Grav

Legacy Member

QuietKillah

Legacy Member

Zero Grav

Legacy Member

QuietKillah

Legacy Member

Zero Grav

Legacy Member

QuietKillah

Legacy Member

Zero Grav

Legacy Member

QuietKillah

Legacy Member

Zero Grav

Legacy Member

QuietKillah

Legacy Member

Zero Grav

Legacy Member

QuietKillah

Legacy Member

Zero Grav

Legacy Member

QuietKillah

Legacy Member

QuietKillah

Legacy Member

Zero Grav

Legacy Member