upstage-video-hack-annex

Embedding a stream in an .swf graphic

If you have the ability to create .swf graphics (for example using the Adobe Flash application) then you can create UpStage backdrops, props and avatars that have a stream embedded within the file. This enables more precise positioning of a stream within a "frame".

Please note that this is not a tutorial in using Flash; it is intended for someone who already knows the basics of Flash.

Follow these steps to create an .swf graphic with a stream embedded in it: 

  1. In Flash (or another graphics application capable of creating .swf files) create a new document of the dimensions that you want (for UpStage backdrops, use 800 x 500).
  2. Import your static image(s) into the first layer of the document (.png or .jpg originals).
  3. Convert the image(s) to symbols and adjust the size as required.
  4. Create a second layer called video, and place a movie clip symbol of the size and position that you want.
  5. Create a third layer called code.
  6. Open the Actions window, and insert the following code (replacing "rtmp://example.com/oflaDemo" with the address of the streaming server you are using, and "mystream" with the name of the stream you want to appear):
/// -------------

var CONNECTION_STRING:String = "rtmp://example.com/oflaDemo";
var STREAM_NAME:String = "mystream";
var BUFFER_TIME:Number = 0.1;

// network
var connection:NetConnection;
var stream:NetStream;
        
trace("start the streaming ...");
                
// create connection to red5
connection = new NetConnection();
connection.connect(null);
connection.connect(CONNECTION_STRING);
                
// connect stream
stream = new NetStream(connection);
stream.setBufferTime(BUFFER_TIME);
stream.play(STREAM_NAME, -1);
                
// attach video to display
this.video.attachVideo(stream);

/*
// automatically set proper size
stream.onStatus = function(infoObj:Object) {
        switch (infoObj.code) {
                        case 'NetStream.Play.Start':
                        case 'NetStream.Buffer.Full':
                                this.video._width = this.video.width;
                                this.video._height = this.video.height;
                                break;
                }
        }
}
*/

/*
trace("stopping stream ...");
                
stream.close();
if(connection.isConnected) connection.close();
this.video.clear();
*/
  1. Go to File > Export > Export Movie and save your movie as a .swf.
  2. Test the file to see if it works, by opening either in Flash or in a browser. If it's good, then upload it to UpStage in the normal way.