josefchutka

UNIPacket and UNIPacketHeader classes is my attempt to standardize communication within NetStream and NetGroup communication. While both Net* classes enables you to send any raw data between two instances of flash, you should carefully handle incomming messages. Imagine you are willing to send additional info with your message (sender, id etc.). That is where UNIPacket classes comes into scene, both are very simple and able to selfcreate from incomming object.

UNIPacket contains only two variables: header:UNIPacketHeader and data:* (holds the actual data being sent).

UNIPacketHeader is dynamic class with prepared variables: id:uint (numeric identificator of message), hash:String (string identificator of message), sender:String (use for sender identification).

Preparing UNIPacket:

var header:UNIPacketHeader = new UNIPacketHeader();
header.sender = netGroup.convertPeerIDToGroupAddress(netConnection.nearID);
header.id = uint(Math.random() * uint.MAX_VALUE);
header.someDynamicVariable = "XYZ";
var data:String = "Hallo world"
var messageOut:UNIPacket = new UNIPacket(header, data);

Usage with NetStream:

// SENDER:
var netStream:NetStream = new NetStream(...);
netStream.send("onNotify", messageOut);

// RECEIVER:
var messageIn:UNIPacket;
var netStream:NetStream = new NetStream(...);
netStream.client = {
    onNotify: function(data:Object):void
    {
        messageIn = UNIPacket.create(data);
        messageIn.data;
        messageIn.header.sender;
        messageIn.header.id;
        messageIn.header.someDynamicVariable;
    }
}

Usage with NetGroup:

// SENDER:
var groupSpecifier:GroupSpecifier = new GroupSpecifier("somegruop");
groupSpecifier.serverChannelEnabled = true;
groupSpecifier.multicastEnabled = true;
groupSpecifier.ipMulticastMemberUpdatesEnabled = true;
groupSpecifier.postingEnabled = true;
var groupspec:String = groupSpecifier.groupspecWithAuthorizations();
var netGroup:NetGroup = new NetGroup(netConnection, groupspec);
...
netGroup.post(messageOut);

// RECEIVER:
var messageIn:UNIPacket;
var netGroup:NetGroup = new NetGroup(...);
netGroup.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
function onNetStatus(event:NetStatusEvent):void
{
    switch(event.info.code)
    {
        case "NetGroup.Posting.Notify":
            messageIn = UNIPacket.create(event.info.message);
            messageIn.data;
            messageIn.header.sender;
            messageIn.header.id;
            messageIn.header.someDynamicVariable;
            break;
    }
}

sk.yoz.ui.SelectableButton class may be handy for you if you decided to drop framework and make your own lightweight components. It extends SimpleButton (basic ActionScript 3 component) and ads selected state and toggle functionality by switching states on click event. You may want to extend it for selectedUpState, selectedOverState, selectedDownState, feel free to do that.

usage:

import sk.yoz.ui.SelectableButton;

// any graphics here
var upState:DisplayObject;
var overState:DisplayObject;
var downState:DisplayObject
var hitTestState:DisplayObject;

// changes selected state on mouse click
var toggle:Boolean = true;

var button:SelectableButton;
button = SelectableButton(upState, overState, downState, hitTestState, toggle);

// toggle select button without user interaction
button.selected = true;

Size comparision of empty instances of mx Button, spark Button and SelectableButton:

trace(getSize(new mx.controls.Button()));
// 1408 bytes

trace(getSize(new spark.components.Button()));
// 1248 bytes

trace(getSize(new sk.yoz.ui.SelectableButton()));
// 324 bytes

onStream – The Broadcasting Machine is the name of my latest flash project. Slogan says: “Broadcast LIVE video to your friends or the whole world from a computer or mobile. Watch other people broadcasting their webcamera, conferences, shows or movies.” With this flash application you can broadcast your webcamera, tv card, desktop or movies (read the section “What can be broadcasted?”). With different broadcasting settings you can broadcast to unlimited number of viewers as well as make private videochats. Based on your connection speed, choose appropriate quality for your broadcasts from 320×160 px webcamera resolution with 11kHz sound sampling up to high definition broadcasts.

The application is located on http://onstream.yoz.sk and there also exist a facebook application http://apps.facebook.com/onstream/. You can also publish and run the application from facebook newsfeed stream.

UI, requirements, technology

I have created custom UI components that easily works on ordinary PCs (mouse controlled) as well as on touch devices. You can switch the whole app or just one channel into fullscreen. Targeting Flash Player 10.1, you are able to use this application even on your android phones. The technology behind the app uses RTMFP protocol that use Flash Player for P2P communication between users (see protocol requirements). Together the Flash Player 10.1 and RTMFP let you create multicast streaming, what is expected to work on large streaming groups.

Broadcasting modes

• Public / Private – With public mode anyone can search for your channel (based on channel name or description), while in private mode only people with correct link may join.
• Broadcast / Video Chat – Broadcast your channel to unlimited number of viewers or select video chat mode where anyone who joins channel see and broadcast each other. Use broadcast mode for your live tweets, conferences, video or sound streaming.

What can be broadcasted?

• Webcamera & Microphone – By default, you can select all your system installed webcameras and microphones.
• MP3s / PC sounds – if your soundcard driver supports “Stereo-Mix” (“Mono-mix” “Wave Out”, “What U Hear”…), just make it as default sound source instead of your microphone
• TV card – If you have one, plug it in and you should see your tv car in list (based on driver details).
• Desktop / Movies / Images – There is some software available that let you broadcast your pc desktop, movies or images etc. My personal favourite is VH Toolkit (freeware) but there are also simplier alternatives like ManyCam (free), Fake Webcam (paid)…

Publishing channels

Once the broadcasting channel is created, there are several ways viewers notice:

• Search – If the channel is in public mode, anyone can search / list the channel in the search section of the app.
• Link – Any channel has its own unique link, click clipboard icon to copy this link into system clipboard and share link with your friends.
• Facebook – Click facebook icon to publish the channel directly into your facebook newsfeed.

Screencast

Believe it or not, facebook changed part of its api again. Since today, authorizing for iframe applications does not work the same way it used to. Previously it was enough to redirect:

https://graph.facebook.com/oauth/authorize
    ?client_id=268718683475
    &redirect_uri=http://apps.facebook.com/blogoauthgraph/
    &scope=publish_stream,user_photos,user_photo_video_tags

… where facebook authorized your app and redirects back to the:

http://apps.facebook.com/blogoauthgraph/
    ?session=123456...

… where session was valid access_token.

Since today the mechanism changed into something like this:

https://graph.facebook.com/oauth/authorize
    ?client_id=268718683475
    &redirect_uri=http://apps.facebook.com/blogoauthgraph/
    &scope=publish_stream,user_photos,user_photo_video_tags

… redirects you to the:

http://apps.facebook.com/blogoauthgraph/
    ?code=2.YndguK...

… while you do not have valid session (access_token), you have to do the following request:

https://graph.facebook.com/oauth/access_token
    ?client_id=268718683475
    &redirect_uri=http://apps.facebook.com/blogoauthgraph/
    &client_secret=YOURSECRET
    &code=2.YndguK...

… now facebook responds with:

access_token=268718683475|2.Yndgu...&expires=86183

Notice, this is the response, not the redirect! Now its time to grab the access_token and use it in your app. This change has direct impact on Authorizing Iframe Facebook Applications For Graph API article.

There have also been some other unannounced changes e.g. in facebook app settings in migrations tab “Remove fb_sig” toggler…

Credits goes to my readers Adam Cousins, David Bardos, Garcimore, Etienne for noticing the changes.

I have just spotted quick fix. All you need to do is add type=user_agent into your auth request:

https://graph.facebook.com/oauth/authorize
    ?client_id=268718683475
    &redirect_uri=http://apps.facebook.com/blogoauthgraph/
    &scope=publish_stream,user_photos,user_photo_video_tags
    &type=user_agent

… now facebook redirects you to:

http://apps.facebook.com/blogoauthgraph/
    ?access_token=123456...
    &expires_in=86729

This token is valid! I have updated the article with this quickfix.

updated Jul 22, 2010: Facebook rollbacked the change and added “Canvas Session Parameter” parameter in facebook app settings / Migrations tab. With this setting enabled, your apps should work normally as they previously did.

While working on my brand new P2P project I have come to some issues and solutions, that may help you with your projects. First thing, the NetStatusEvent codes. You may expect that codes are dispatched by the instance of the class they beigins with (e.g. “NetStream.Connect.Success” dispatched by NetStream), but in fact, this does not happen (“NetStream.Connect.Success” is dispatched by NetConnection). I bellieve its not a bug but a feature by flash player developer team. To make this work as expected you may do the following:

netConnection.addEventListener(type, onNetStatus);

function onNetConnectionNetStatus(event:NetStatusEvent):void
{
	switch(event.info.code){
		case "NetStream.Connect.Success":
			event.info.stream.dispatchEvent(event);
			break;
		...
	}
}

This way your NetStream dispatches the same NetStatusEvent into itself. You may now wonder why am I doing it? There are 2 reasons for that:

• This way I can easily handle multiple NetStreams (in multiple objects)
• This event may be used for attaching camera/microphone into your NetStream (I guess due to peer-assisted security restrictions).

netGroup.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
netStream.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);

function onNetStatus(event:NetStatusEvent):void
{
	switch(event.info.code)
	{
		case "NetStream.Connect.Success":
			netStream.attachCamera(camera);
			netStream.attachAudio(microphone);
			netStream.publish("someName");
			break;
		case "NetGroup.Neighbor.Connect":
			subscribers++;
			break;
		case "NetGroup.Neighbor.Disconnect":
			subscribers--;
			break;
	}
}

attaching camera / microphone after NetStream is connected, prevents you from follofing:

var camera:Camera = Camera.getCamera();
var netStream:NetStream = new NetStream(netConnection,
    groupspec.groupspecWithAuthorizations());
stream.attachCamera(cam);

…will result in runtime error:

Error #2154: The NetStream Object is invalid. This may be due to a failed NetConnection.

NetGroup.Connect.Closed

Getting this annoying, undocumented error code?

class
{
    private function onConnect():void
    {
        var netGroup:NetGroup = new NetGroup(netConnection, groupspec);
        netGroup.addEventListener(type, onNetStatus);
    }
    // dispatches NetStatusEvent with code NetGroup.Connect.Closed
}

… workaround:

class
{
    private var var netGroup:NetGroup; // using class variable!

    private function onConnect():void
    {
        netGroup = new NetGroup(netConnection, groupspec);
        netGroup.addEventListener(type, onNetStatus);
    }
}

This seems like flash player bug. I guess this bug has something to do with reference to a NetGroup instance. If you use function variable, this get cleared after function finishes even with attached listener (guess), while class variable reference remains.

I am just so stuck on this one. Is anyone able to embed font and use it in TextField when targeting Flash player 10.1 using flex 4.1 SDK? My code is very simple:

package
{
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;

    public class Test1 extends Sprite
    {
        [Embed(source="arial.ttf", fontName="Arial", mimeType='application/x-font')]
        public static const FONT_ARIAL:Class;

        public function Test1()
        {
            var tf:TextField = new TextField();
            tf.text = "Hallo";
            tf.embedFonts = true;
            tf.defaultTextFormat = new TextFormat("Arial", 10);
            addChild(tf);
        }
    }
}

font file (.ttf) can be downloaded here. When I try to export the movie I see nothing but white. Actualy it seems like no matter what sdk nor flash player version I target, it still does not render text what is going on flashplayer?

Mistery solved!, you have to set defaultTextFormat before text. Credits goes to Martin.

Where to go from here:

• Loading Fonts at Runtime
• Loading Fonts at Runtime with latest Flex 4 SDK

onBoard is a Collaborative (multi-user) painting and drawing application created in flash and php. Anyone can paint, draw, insert images and see other users paint live (feature comming soon). It has been 9 month since I released version 1.0, now there is a new version. A lot of things is changed in 2.0. The most important is UI change, this is my approach to write my first touch-device-ready flash app. I have also rewriten the whole app to pure ActionScript 3.0 (no flex framework used anymore), in order to gain crucial improvements in speed and weight. Every piece of code is optimized for speed. After all the changes, I have been able to keep fps at the rate of 30 in full hd fullscreen resolution (tested in flash debug player v 10.0), with memory consumption only around 30Mb (most of it is bitmapData).

The embed code has been unchanged, so if you have iframe embeds in your sites, it still works.

While there has been some questions about how to embed the application to a webpage, here is the answer:

1. run onBoard application
2. navigate whereever you like to (position, zoom, rotation)
   
3. click ligh bulb icon in main menu
   
4. click copy to clipboard icon
   
5. now the url pointing to your actual view has been copied to the system clipboard
6. open your webpage editor and paste (CTRL + v) the url into iframe src, define iframe width and height to whatever you like

The resulting code should look like:

<iframe src="http://onboard.yoz.sk/?board=_default_&amp;x=99788&amp;y=500&amp;scale=1&amp;rotation=0"></iframe>

If you embed onBoard onto your webpage, feel free to contact me about how it works for you, all feedback welcomed… Have fun

Having issues with installing latest debug player into Chrome? Go to about:plugins, deactivate the bundled Shockwave Flash (path ends with … Chrome\Application\5.0.375.86\gcswf32.dll) and install the desired flash player version.

I did not know why did my Flash Builder suddenly stopped communicating with flash debugger yesterday (June 30, 2010), today I have discovered latest news from Google Chrome.

Shortest possible, simple / no looping method of getting hex string from color is:

var color:uint = 0x00ff00;
var hex:String = color.toString(16);

trace("00000".substr(0, 6 - hex.length) + hex);
// output 00ff00

trace("#00000".substr(0, 7 - hex.length) + hex);
// output #00ff00