5 Replies - 6055 Views - Last Post: 16 July 2010 - 04:52 AM

#1 orionrush  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 11-April 08

AS3 full window scaling problem with swfObject

Posted 13 July 2010 - 08:44 AM

Hi - I've run into a problem with scaling some video on the stage using AS3.

Basically, things generally seem to work - however the proportions of the browser window are the proportions that the video object scales to - not the proportions of the video itself.

So if the video loads in to an especially narrow or elogated window, the view will be squint, and use these proportions for scaling.

I want the script to sense the proportions of the video and then use these to scale and or crop the video if needed to maintain full window and image proportions.


see what I mean here: http://orionrush.nfshost.com/test/

any thoughts would be very appreciated. . .

The AS3 Script:

//variables
//Video
	var video = Video;
	var nc;
	var ns;
	var videoToPlay = "lunarpass.flv";

//Function Declarations
//The stage
function initStage():void {
	stage.scaleMode = StageScaleMode.NO_SCALE;
	stage.align = StageAlign.TOP_LEFT; 
	stage.addEventListener(Event.RESIZE, onStageResize);	
	scaleVid();
	}	

//Video loding
function playVideo( videoToPlay ) {
	nc = new NetConnection();
	nc.connect( null );
	ns = new NetStream( nc );
	ns.client = this;
	video = new Video ( stage.stageWidth, stage.stageHeight );
	addChildAt(video, 0);
	video.attachNetStream(ns);
	ns.play( videoToPlay );
}

//Scale Video
function scaleVid():void {
    video.width=stage.stageWidth;
    video.height=stage.stageHeight;
    video.scaleX > video.scaleY ? video.scaleY = video.scaleX : video.scaleX = video.scaleY;
	}	
	
//run on start up 
playVideo( videoToPlay );
initStage();

//Stage Listener and resizeing 
function onStageResize(e:Event):void {
	scaleVid();
};




The HTML generated by swfObj generator 2.1


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="swfobject.js"></script>
		
		<!--
have to use dyanamic content due to FF3 Bug
		-->
<script type="text/javascript">
			var flashvars = {};
			var params = {};
			params.menu = "false";
			params.scale = "noscale";
			params.salign = "tl";
			params.wmode = "opaque";
			var attributes = {};
			swfobject.embedSWF("scaling_video.swf", "myFlashContent", "550", "400", "9.0.0", false, flashvars, params, attributes);
		</script>
		
		<style type="text/css">
		html {
		height:100%;
		width:100%;
		}
		body {
		margin:0px;
		padding:0px;
		background-color:blue;
		height:100%;
		width: 100%;
		text-align:center;
		}
		#myFlashContent {
		height:100%;
		width: 100%;
		z-index: 0;
		}
		
		</style>
		</head>
<body>
		<div id="myFlashContent">
			<img src="hexagonal5.png" alt="" />
			
		</div>
	</body>
</html>




Many thanks again

Is This A Good Question/Topic? 0
  • +

Replies To: AS3 full window scaling problem with swfObject

#2 orionrush  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 11-April 08

Re: AS3 full window scaling problem with swfObject

Posted 14 July 2010 - 12:53 AM

The meat of this question is obviously the use of stage.stageWidth etc as defining the initial pram for the video dimensions, and how this later reacts with the stage and browser window.
I instead need to get the dimensions of the actual video file, but I cant know this it will load dynamically. . . but I asume AS will be able to know this once it loads. So I need to get these dims and assign them to the scaling function.

Anybody have any ideas about to get the dims and then assign them in a meaningful way?

Lost in glasgow. . .


//Scale Video
function scaleVid():void {
    video.width=stage.stageWidth;
    video.height=stage.stageHeight;
    video.scaleX > video.scaleY ? video.scaleY = video.scaleX : video.scaleX = video.scaleY;
    }  


Was This Post Helpful? 0
  • +
  • -

#3 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 561
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: AS3 full window scaling problem with swfObject

Posted 14 July 2010 - 05:10 PM

are you using a loader to load the video file in as3? If so, just call the dimensions on this loader.
Was This Post Helpful? 0
  • +
  • -

#4 orionrush  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 11-April 08

Re: AS3 full window scaling problem with swfObject

Posted 15 July 2010 - 07:18 AM

@nick2price
Im not actually using a loader but a video stream, but I can see I confused you by importing the Loader. That's a kilingon from another facett of the script.

Via the Video class I can access the dims from the onMetaData event. Which I was trying to do - but then I stumbled on something that seems to work - but I dont really undersand why! :)

I was at the point that the video would only resize to the stage until stage Event.RESIZE fired. My approach was to try and do something with the onMetaData height and width values, to create a function which returned the proportionally scaled native values, though I'm not savvy enough to know how to get those values back into the playVideo function.

I'm really new so I dont have a clue about callback functions or how to create a variable that is anything other then a known string or other value - Im trying to wrap my head around methods, objects etc. I need a video with a guy and a chalk board drawing arrows to demonstrate this stuff - really!

Can anyone explain why the below works? Would this be considered 'best practice'? Is there a more elegant way of going about it?

Many thanks for looking!

Here is where I'm at:

 
import flash.net.URLRequest;   
import flash.events.Event;

//varriables
//Background Video
	var video;
	var nc;
	var ns;
	var videoToPlay:String = "lunarpass.flv";
	var vidSmooth:Boolean = true;

//Function Declarations
//The stage
function initStage():void {
	stage.scaleMode = StageScaleMode.NO_SCALE;
	stage.align = StageAlign.TOP_LEFT; 
	stage.addEventListener(Event.RESIZE, resizeHandler);
	playVideo( videoToPlay );
	}	

//Video loding
function playVideo( videoToPlay ) {
	nc = new NetConnection();
	nc.connect( null );
	ns = new NetStream( nc );
	//ns.client = this;
	ns.client = {onMetaData:scaleVideo};
	video = new Video( ); // w,h - but we dont know the dims yet - or do we??
	video.smoothing = vidSmooth;
	addChildAt(video, 0);
	video.attachNetStream(ns);
	ns.play( videoToPlay );
}

//Stage Listener and resizeing //Dont remove - we need this for other things!
function resizeHandler(e:Event):void {
	scaleVideo(this);
};

//Scale Video
function scaleVideo(item:Object):void {
	/*
	What I think is going on. . .
	We dont really need to know the onMetaData details, 
	but instead use the onMetaData as a callback to feed new h, w and proportions into the client
	because we leave the Video() dimentions bank - AS usese the file's native dims, 
	the callback replaces tese with the new dims from the scaleVideo function
	*/ 
	
	//   for (var propName:String in item) {  
 	//   trace(propName + " = " + item[propName]);}
	
 	video.x = 0;
	video.y = 0;
 	video.width = stage.stageWidth;
 	video.height = stage.stageHeight;
 	// Resize video instance.
    video.scaleX > video.scaleY ? video.scaleY = video.scaleX : video.scaleX = video.scaleY;
	
	trace("video.width = "+video.width+" video.height = "+video.height);
}

//run on start up 
initStage();


This post has been edited by orionrush: 15 July 2010 - 07:20 AM

Was This Post Helpful? 0
  • +
  • -

#5 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 561
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: AS3 full window scaling problem with swfObject

Posted 15 July 2010 - 09:32 AM

setting x and y to 0 is normally general practice, and then the same with the two lines under that. To be honest, I never can get my head around the fifth line which has all the ? and :

If you want to learn about as3 better, the best tutorial site in my opinion is kirupa.com. If you want to find further details on this question, you should try using the flash forums.
Was This Post Helpful? 0
  • +
  • -

#6 orionrush  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 11-April 08

Re: AS3 full window scaling problem with swfObject

Posted 16 July 2010 - 04:52 AM

View Postnick2price, on 15 July 2010 - 08:32 AM, said:

setting x and y to 0 is normally general practice, and then the same with the two lines under that. To be honest, I never can get my head around the fifth line which has all the ? and :

If you want to learn about as3 better, the best tutorial site in my opinion is kirupa.com. If you want to find further details on this question, you should try using the flash forums.


@nick2price

I agree, I the proportional formula is a bit of numbers magic and beyond me as well. What Im totally confused about is the transfer of information between the onMetaData and my scaling function. I assumed that I'd need the details on the original hight and width from onMetaData and then do something with them.
But to my surprise, just creating a link between the two (is this a callback?), did some magic, saving me from having to compute the initial size of the video.

thanks for the Kirupa link too - I'll check them out.

cheers
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1