How to change four corners of FLVPlayback using action script?

Question

I want to change four corners(Corner Pin) of FLVPlayback using action script like bellow image.

Are there any methods to achieve this task from action script ?

Answer 1

You can use the DistortImage Class.

The original Actionscript 2.0 version of the class was written by Thomas Pfeiffer (aka kiroukou), inspired by Andre Michelle (andre-michelle.com). Ruben Swieringa rewrote Thomas Pfeiffer's class in Actionscript 3.0, making some minor changes/additions.

Here is a demo from Ruben Swieringa.

This Class works with a Bitmap image. It has to be adapted to a flvplayback component by using draw method every enterFrame.

Modus operandi

You first get the AS3 Class here.

You place this code into an .as file and name it DistortImage. You place this file into this hierarchy of folders: org > flashsandy > diqplay > DistortImage.as

You have a MovieClip linked DragBtn in your library. You put the following code in the actionScript panel of your .fla:

import org.flashsandy.display.*;

vidPlayer.source = 'http://www.helpexamples.com/flash/video/caption_video.flv';
vidPlayer.scaleMode = 'exactFit';
vidPlayer.skin = null;
vidPlayer.visible = false; // we only see the Bitmap drawn

var C:Sprite= new Sprite(); // Sprite container
C.x = C.y = 100; // video position
this.addChild(C);

var shape:Shape = new Shape();
this.C.addChild(shape);

var iw:int = vidPlayer.width;
var ih:int = vidPlayer.height;

var distortion:DistortImage = new DistortImage(iw, ih, 2, 2);
var bitmapData:BitmapData = new BitmapData(iw, ih);
var center:Point;

function getDisplayObjectCenter(child:DisplayObject, x:Number = 0, y:Number = 0):Point {
    center = new Point();
    center.x = child.x + child.width / 2 + x;
    center.y = child.y + child.height / 2 + y;
    return center;
}

function Enter(e:Event):void {
    this.shape.graphics.clear();
    this.bitmapData.draw(vidPlayer); // video drawn enterFrame
    distortion.setTransform(this.shape.graphics,
                            this.bitmapData, 
                            this.getDisplayObjectCenter(this.d1, 0, 0), 
                            this.getDisplayObjectCenter(this.d2, 0, 0), 
                            this.getDisplayObjectCenter(this.d3, 0, 0), 
                            this.getDisplayObjectCenter(this.d4, 0, 0));
}
addEventListener(Event.ENTER_FRAME, Enter);

var d1:DragBtn = new DragBtn();
d1.x = d1.y = 0;
this.C.addChild(d1);

var d2:DragBtn = new DragBtn();
d2.x = iw;
d2.y = 0;
this.C.addChild(d2);

var d3:DragBtn = new DragBtn();
d3.x = iw;
d3.y = ih - 60;
this.C.addChild(d3);

var d4:DragBtn = new DragBtn();
d4.x = 0;
d4.y = ih - 60;
this.C.addChild(d4);

d1.addEventListener(MouseEvent.MOUSE_DOWN, drag);
d2.addEventListener(MouseEvent.MOUSE_DOWN, drag);
d3.addEventListener(MouseEvent.MOUSE_DOWN, drag);
d4.addEventListener(MouseEvent.MOUSE_DOWN, drag);
function drag(e:MouseEvent):void {e.target.startDrag();}

addEventListener(MouseEvent.MOUSE_UP, up);
function up(e:MouseEvent):void {stopDrag();}

Result

Then you can deform your video like that:

The flashandmath method probably also works adapted to a video.