Flex Video Chat
Categories: Flash Media Server Flex
So just this past week, I hosted a party for some former classmates of mine, and thought it would be great if classmates who could not attend the event in person have a way to still be part of the party and interact with those who did attend. The obvious thought was to have a chat application, but wanted to take it a step further and add a live video stream, and integrate the two together. I found a simple Flex chat application that was put together by Stefan Richter which used Flash Media Server as the central connecting point, and to add the live video stream I just integrated my live weather widget application posted earlier which is basically an FMS live video stream.
Some of the issues that came up was the incredible lag time between the live broadcast stream and when the end users received it. The lag got progressively worse the longer the steam played. After some research it was discovered that an apparent bug cases this and the workaround is to specifically set the microphone bitrate to 22Khz:microphone = Microphone.getMicrophone();
microphone.rate = 22;
For simplicity, I created two separate applications in the Flex project. One for the end users, and one for the broadcaster. Both are very similar, but each uses it's own unique Video Pod component. One plays the video, and the other publishes it.
Check out the source code here.
-Christopher Keeler
02 October 2008Weather widget gets 30fps video
implementing Flash Media Server with Yahoo weather API
Categories: Flash Media Server Flex
I've updated the Yahoo! weather widget mashup example I previously posted due to the fact that the previous live cam feed has been out of commission for several months due to a storm, and don't know if it will come back. However, this was a blessing in disguise since I have now implemented a new and much improved version.Changing Selection Indicator in Datagrid
add Tween, alpha, shape, etc.
Categories: FlexSo I was recently working on a project, and the client wanted to have a different effect on the DataGrid's selection indicator. He said that he wanted the indicator to fade rather than the default "hard" appear. After doing some digging, I found a post about changing the List Selection indicator which was pretty close to what I needed, but this was for a TileList. The good news is that DataGrid inherits from the List base class, and the List Selection indicator methods are in there as well. Sound easy!
The two methods in question are the drawSelectionIndicator() and drawHighlightIndicator() in the ListBase.as class. If you override these two methods, you can create some pretty cool effects. Here is an example of implementing a Tweener fade, and setting the final alpha to 50%:
override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number, width:Number,
height:Number, color:uint,
itemRenderer:IListItemRenderer):void{
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color,.25);
g.drawRect(0,0,width,height);
g.endFill();
indicator.x = x;
indicator.y = y;
}
override protected function drawHighlightIndicator(
indicator:Sprite, x:Number, y:Number, width:Number,
height:Number, color:uint,
itemRenderer:IListItemRenderer):void{
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color,.5);
g.drawRect(0,0,width,height);
g.endFill();
indicator.x = x;
indicator.y = y;
indicator.alpha = 0;
Tweener.addTween(indicator,({alpha:.5, time:1, transition:"easeOutCubic"})); }
package com.swfflex
{
import caurina.transitions.*;
import flash.display.Graphics;
import flash.display.Sprite;
import mx.controls.DataGrid;
import mx.controls.listClasses.IListItemRenderer; public class DataGridEx extends DataGrid
{ override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number, width:Number,
height:Number, color:uint,
itemRenderer:IListItemRenderer):void{
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color,.25);
g.drawRect(0,0,width,height);
g.endFill();
indicator.x = x;
indicator.y = y;
}
override protected function drawHighlightIndicator(
indicator:Sprite, x:Number, y:Number, width:Number,
height:Number, color:uint,
itemRenderer:IListItemRenderer):void{
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color,.5);
g.drawRect(0,0,width,height);
g.endFill();
indicator.x = x;
indicator.y = y;
indicator.alpha = 0;
Tweener.addTween(indicator,({alpha:.5, time:1, transition:"easeOutCubic"})); }
override protected function clearHighlightIndicator(indicator:Sprite, itemRenderer:IListItemRenderer):void{
if(highlightIndicator)
Tweener.addTween(indicator,({alpha:0, time:1, transition:"easeOutCubic", onComplete:function():void{Sprite(highlightIndicator).graphics.clear()}}));
} }
}
360 Flex recap
My recap of the event in San Jose
Categories: 360 FlexSo, here is my recap from the 360|Flex conference in San Jose:
First off, I would like to congratulate Tom & John for putting on such a great event. The venue at eBay was awesome, and the turnout was equally as good. Second, as promised, I have posted my slides from my hands-on presentation here, and my example app with source code (right-click) here. Also, you can watch my session on AMP by following the instructions here. While I haven't yet seen any of the feedback from the survey app, most people said they got a lot out of my session...which is great. I tried to make it as unusual and hands-on as possible, so I think most people were surprised to see the full size chromakey backdrop set and lighting. I was running out of time at the end though, so I did feel a bit rushed when writing the example application with the class which caused some app errors. Also if you watch the session on AMP, since it was a hands-on class, you will not get to see the lighing and camera setups. Sorry about that!
Some of the sessions I saw that I think were great was Ben Stucki's How to Build A Framework, and Ryan Campbell's session on Plexiglass 3D. Another one of note that was totally not expected was Joel Geraci's session on Flex and Acrobat. It's amazing how Flash/Flex and other Adobe products are integrating so well, and how paper media seems to be just so passé now.The event parties were great networking events and most people seemed to be working the room really well. Jeffry Houser had some great live Flex Show interviews, and even Doug McCune showed up un-expectantly at Tuesday's event.If you missed this sold-out event, I would recommend you get on the ball for the next one, as it is the premier conference for anyone interested in Flex.
-Christopher Keeler