Showing Youtube Video in Fullscreen mode using Flex

2009-10-02T12:22:00.000-07:00

Sometimes, we are getting problem in showing our flex application in fullscreen mode. Normally, we can show our standalone flash swfs in fullscreen mode using fscommand. But, when we are loading flex applications in browser, we need to remember few settings. Here, I am giving one example showing how to embed Youtube Video in Flex and use fullscreen button of Youtube video player to show our flex application in fullscreen mode.

To download the source code click here.

Flex Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[

/****************
*
* @method init()
* @description called on creationComplete
*
*****************/
private function init():void
{
swfLoader.source = "http://www.youtube.com/v/zlfKdbWwruY&hl=en&fs=1";
}
]]>
</mx:Script>
<mx:SWFLoader id="swfLoader"/>
</mx:Application>

Also you need few changes in index.template.html file in html-template folder of your flex project. You need to set allowFullScreen property as true in four places:

In javascript function of your html page:

AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"allowScriptAccess","sameDomain",
"allowFullScreen","true",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "${swf}",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"allowScriptAccess","sameDomain",
"allowFullScreen","true",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);

And two parameters of the object tag of HTML Page:

Custom Transformer for Flash/Flex

2009-09-05T08:02:00.000-07:00

Hi Guys,

I prepared a CustomTransformer Class using AS3.0 which can be used anywhere by creating an instance of the Class. This is mainly with drag and resize functionality. Resizing can be done by four corners and middle of the four sides of the selected object.

parameters: root for flash/Application for Flex application. Or any other workarea.

method
setTarget(targetObject).

setTarget method will set the selected object as a target object of the transformer. parameter targetObject will be any displayObject on the workarea.

In Use:

Code is here:

package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;

public class CustomTransformer extends Sprite{

public var targetObj:* = null;

private var isDragging:Boolean = false;

private var isResizing:Boolean = false;

private var isLeftTopResizing:Boolean = false;
private var isLeftMiddleResizing:Boolean = false;
private var isLeftBottomResizing:Boolean = false;
private var isMiddleTopResizing:Boolean = false;
private var isMiddleBottomResizing:Boolean = false;
private var isRightTopResizing:Boolean = false;
private var isRightMiddleResizing:Boolean = false;
private var isRightBottomResizing:Boolean = false;

private var tf:TextField;

private var topLeftXPos:Number;
private var topLeftYPos:Number;
private var bottomRightXPos:Number;
private var bottomRightYPos:Number;

public static var ROOT:MovieClip;

public function CustomTransformer(_r:MovieClip):void {
ROOT = _r;
tf = new TextField();
ROOT.addChild(tf);

ROOT.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
ROOT.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

}

public function setTarget(_dobj:*):void{

this.graphics.clear();
if (this.numChildren > 0){
for (var i:int = this.numChildren-1; i>-1; i--){
removeChildAt(i);
}
}

targetObj = _dobj;
if (targetObj != null){

targetObj.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownHandler);
targetObj.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
targetObj.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

this.x = targetObj.x;
this.y = targetObj.y;

topLeftXPos = 0;
topLeftYPos = 0;
bottomRightXPos = targetObj.width;
bottomRightYPos = targetObj.height;

createRectangles();

}
}
private function createRectangles():void{

for (var i:int = 0; i < 8; i++){ var canvas:Sprite = new Sprite(); setHandCursor(canvas); this.addChild(canvas); canvas.graphics.lineStyle(0.25,0x000000,1); canvas.graphics.beginFill(0xCCCCCC,1); canvas.graphics.drawRect(0,0,10,10); canvas.graphics.endFill(); canvas.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); canvas.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); if (i == 0){ //TOP-LEFT RECTANGLE canvas.x =-10; canvas.y = -10; canvas.addEventListener(MouseEvent.MOUSE_DOWN, topLeftResizeHandler); } if (i == 1){ //TOP-MIDDLE RECTANGLE canvas.x = (targetObj.width-10)/2; canvas.y = -10; canvas.addEventListener(MouseEvent.MOUSE_DOWN, topMiddleResizeHandler); } if (i == 2){ //TOP-RIGHT RECTANGLE canvas.x = targetObj.width; canvas.y = -10; canvas.addEventListener(MouseEvent.MOUSE_DOWN, topRightResizeHandler); } if (i == 3){ //LEFT-MIDDLE RECTANGLE canvas.x = -10; canvas.y = (targetObj.height-10)/2; canvas.addEventListener(MouseEvent.MOUSE_DOWN, leftMiddleResizeHandler); } if (i == 4){ //RIGHT-MIDDLE RECTANGLE canvas.x = targetObj.width; canvas.y = (targetObj.height-10)/2; canvas.addEventListener(MouseEvent.MOUSE_DOWN, rightMiddleResizeHandler); } if (i == 5){ //BOTTOM-LEFT RECTANGLE canvas.x = -10; canvas.y = targetObj.height; canvas.addEventListener(MouseEvent.MOUSE_DOWN, leftBottomResizeHandler); } if (i == 6){ //BOTTOM-MIDDLE RECTANGLE canvas.x = (targetObj.width-10)/2; canvas.y = targetObj.height; canvas.addEventListener(MouseEvent.MOUSE_DOWN, bottomMiddleResizeHandler); } if (i == 7){ //BOTTOM-RIGHT RECTANGLE canvas.x = targetObj.width; canvas.y = targetObj.height; canvas.addEventListener(MouseEvent.MOUSE_DOWN, rightBottomResizeHandler); } } } private function mouseMoveHandler(evt:MouseEvent):void{ if (targetObj != null) { if (isDragging){ targetObj.x = this.x; targetObj.y = this.y; } if (isLeftTopResizing) { if (this.mouseX < bottomRightXPos) { topLeftXPos = this.mouseX; } if (this.mouseY < bottomRightYPos) { topLeftYPos = this.mouseY; } bottomRightXPos = targetObj.width; bottomRightYPos = targetObj.height; } if (isRightTopResizing) { if (this.mouseY < bottomRightYPos) { topLeftYPos = this.mouseY; } if (this.mouseX > 0) {
bottomRightXPos = this.mouseX;
}
topLeftXPos = 0;
bottomRightYPos = targetObj.height;
}
if (isMiddleTopResizing) {
if (this.mouseY < bottomRightYPos) { topLeftYPos = this.mouseY; topLeftXPos = 0; } bottomRightXPos = targetObj.width; bottomRightYPos = targetObj.height; } if (isLeftMiddleResizing){ if (this.mouseX < bottomRightXPos){ topLeftXPos = this.mouseX; topLeftYPos = 0; } bottomRightXPos = targetObj.width; bottomRightYPos = targetObj.height; } if (isRightBottomResizing){ topLeftXPos = 0; topLeftYPos = 0; if (this.mouseX > 0){
bottomRightXPos = this.mouseX;
}
if (this.mouseY > 0){
bottomRightYPos = this.mouseY;
}
}
if (isMiddleBottomResizing){
topLeftXPos = 0;
topLeftYPos = 0;
if (this.mouseY > 0){
bottomRightXPos = targetObj.width;
bottomRightYPos = this.mouseY;
}
}
if (isRightMiddleResizing){
topLeftXPos = 0;
topLeftYPos = 0;
if (this.mouseX > 0){
bottomRightXPos = this.mouseX;
bottomRightYPos = targetObj.height;
}
}
if (isLeftBottomResizing){
if (this.mouseX < bottomRightXPos){ topLeftXPos = this.mouseX; } if (this.mouseY > 0){
bottomRightYPos = this.mouseY;
}
bottomRightXPos = targetObj.width;
topLeftYPos = 0;
}
if (isResizing){
targetObj.x += topLeftXPos;
targetObj.y += topLeftYPos;
targetObj.width = bottomRightXPos-topLeftXPos;
targetObj.height = bottomRightYPos-topLeftYPos;
setTarget(targetObj);
}
}
}
private function mouseUpHandler(evt:MouseEvent):void{

if (isDragging){
this.stopDrag();
isDragging = false;
}
if (isLeftTopResizing) {
isLeftTopResizing = false;
}
if (isMiddleTopResizing) {
isMiddleTopResizing = false;
}
if (isRightTopResizing) {
isRightTopResizing = false;
}
if (isLeftMiddleResizing){
isLeftMiddleResizing = false;
}
if (isRightMiddleResizing){
isRightMiddleResizing = false;
}
if (isLeftBottomResizing){
isLeftBottomResizing = false;
}
if (isMiddleBottomResizing){
isMiddleBottomResizing = false;
}
if (isRightBottomResizing){
isRightBottomResizing = false;
}

isResizing = false;
}
private function mouseDownHandler(evt:MouseEvent):void{
if (targetObj != null)
{
isDragging = true;
this.startDrag();
targetObj.x = this.x;
targetObj.y = this.y;
}
}

private function topLeftResizeHandler(evt:MouseEvent):void {
isResizing = true;
isLeftTopResizing = true;
}
private function topMiddleResizeHandler(evt:MouseEvent):void {
isResizing = true;
isMiddleTopResizing = true;
}
private function topRightResizeHandler(evt:MouseEvent):void {
isResizing = true;
isRightTopResizing = true;
}
private function leftMiddleResizeHandler(evt:MouseEvent):void{
isResizing = true;
isLeftMiddleResizing = true;
}
private function leftBottomResizeHandler(evt:MouseEvent):void{
isResizing = true;
isLeftBottomResizing = true;
}
private function rightMiddleResizeHandler(evt:MouseEvent):void{
isResizing = true;
isRightMiddleResizing = true;
}

private function rightBottomResizeHandler(evt:MouseEvent):void{

isResizing = true;
isRightBottomResizing = true;

}
private function bottomMiddleResizeHandler(evt:MouseEvent):void{

isResizing = true;
isMiddleBottomResizing = true;

}
private function setHandCursor(_dobj:*):void{
_dobj.useHandCursor = true;
_dobj.buttonMode = true;
_dobj.mouseChildren = false;
}

}

}

How to instantiate in flash

//This is main timeline code:

//CustomTranformer class initialised and added to Stage
var transformer:CustomTransformer = new CustomTransformer(this);
addChild(transformer);

//workArea is the background of the Application editing area.
workArea.addEventListener(MouseEvent.CLICK, stageClickHandler);
function stageClickHandler(evt:MouseEvent)
{
transformer.setTarget(null);
}

//First Object named objOne
objOne.addEventListener(MouseEvent.CLICK, objOneClickHandler);
objOne.mouseChildren = false;
function objOneClickHandler(evt:MouseEvent):void
{
transformer.setTarget(objOne);
}

//Second Object named objTwo
objTwo.addEventListener(MouseEvent.CLICK, objTwoClickHandler);
objTwo.mouseChildren = false;
function objTwoClickHandler(evt:MouseEvent):void
{
transformer.setTarget(objTwo);
}

Rotate Canvas from center code

2009-09-03T22:19:00.000-07:00

var point:Point=new Point(myMC.x+myMC.width/2, myMC.y+myMC.height/2);
var m:Matrix=myMC.transform.matrix;
m.tx -= point.x;m.ty -= point.y;
m.rotate (45*(Math.PI/180));
m.tx += point.x;
m.ty += point.y;
myMC.transform.matrix=m;

sumant's blog

Showing Youtube Video in Fullscreen mode using Flex

Custom Transformer for Flash/Flex

Rotate Canvas from center code