JFV

Acoustic Echo Cancelation working

2011-06-10T08:54:00.000-07:00

Acoustic Echo Cancellation is part of Flash Player 10.3.
Users are able to enjoy live audio/video communication without the risk of acoustic feedback. Previous post on Flash vs. AEC.

It's a bit tricky to implement yet.

First get the latest Flash Player Content Debugger 10.3.181.22, not the incubator version.

With the current Build of the Flex SDK (4.5.0.20967) that's also shipped with Flash Builder 4.5, you need to add this playerglobal.swc to the SDK's /frameworks/libs/player/10.3/ directory.

Add additional mxmlc compiler arguments with your IDE or directly to the actionscript properties file.
// Specifies the version of Flash Player that you want to target with the application, targets the correct playerglobal.swc. -target-version=10.3

// Specifies the SWF file format version of the output SWF file. -swf-version=12

Then use this code snippet in your ActionScript Class.
... // Gets reference to the Microphone instance with enhanced options. var microphone:Microphone = Microphone.getEnhancedMicrophone(deviceIndex); microphone.codec = SoundCodec.SPEEX; var enhancedOptions = new MicrophoneEnhancedOptions();

// Sets AEC mode for users without a headset. enhancedOptions.mode = MicrophoneEnhancedMode.FULL_DUPLEX; microphone.enhancedOptions = enhancedOptions; ...

Have fun!

Example ChatRoom using Red5 Media Server running on an Amazon EC2 instance and Adobe Cirrus rendezvous service. It's based on the direct RTMFP peer-to-peer connection feature of Adobe Flash Player 10

Acoustic Echo Cancellation support for Flash Player

2010-12-15T07:40:00.000-08:00

If you ever developed a Flash application with live audio/video communication you probably ran into trouble with acoustic echo/feedback.
The flash.media.useEchoSuppression property doesn't solve the problem Flash Player had no AEC support.
Maybe you tried some workarounds but faced the requirement that the user had to use a headset for a good experience.

Please read my latest post about the current implementation of the AEC feature.

Fortunately AEC support will be part of a Flash Player version in 2011.
MicrophoneEnhancedOptions and MicrophoneEnhancedMode are not included in the current beta version of the Flash Player (10.2) but according to this Jira ticket from the Adobe Flash Player Bug and Issue Management System this feature is developed and will be part of an upcoming player version in 2011.

The code, when both speaker and microphone are used simultaneously, might look like this:

...
import flash.media.Microphone;
import flash.media.MicrophoneEnhancedMode;
import flash.media.MicrophoneEnhancedOptions;
import flash.media.SoundCodec;
...
var microphone:Microphone = Microphone.getEnhancedMicrophone(deviceIndex);
microphone.codec = SoundCodec.SPEEX;
var enhancedOptions = new MicrophoneEnhancedOptions();
enhancedOptions.mode =  MicrophoneEnhancedMode.FULL_DUPLEX;
microphone.enhancedOptions = enhancedOptions;
...

Example chat room using Red5 and Adobe Cirrus aka Stratus rendezvous service, i created for a small ActionScript 3 VideoChatAPI in February 2009.
I developed it for a collaboration software of Dorian. It's using the direct RTMFP peer to peer connection feature of Flash Player 10, the 10.1 multicast feature is not suitable in this case.

Skoda Fabia RS WebRallye - Augmented Reality

2010-11-24T06:55:00.000-08:00

After an educational and sports focused summer break I developed an Augmented Reality game for a client in Hamburg. The task was to create an unusual test drive for the new Skoda Fabia rallye sports model.

The main focus was to implement the design and navigation specifications in conjunction with the effort of level design, runtime and bandwidth performance.
To enable the favoured appearance and ability to design the levels I developed an extensible bitmap render engine. This task was easy to perform because I worked a lot with 3d engines and particle systems before.
Due to the main goal to enable navigating the car with a virtual steering wheel, printed on paper, I used the FLARToolKit, a ported version of the ARToolKit. Even though this is the fastest way to implement this feature, it took a lot of time to adjust the desired behaviours. Fortunately we won the FWA 'Site of the Day' award.

An additional, meanwhile standard feature was to enable a personalised facebook wall integration via user image and achieved result.

Project

Client

PureMVC, FLARToolKit

ZELLULOID - FILM OHNE KAMERA

2010-11-23T12:36:00.000-08:00

This summer I had the chance to work on an exciting project for Scholz&Volkmer again. While Vincent Rebers focused on the live installation and multiuser drawing tool I took the load off from him by developing the rest of the microsite. We not only had a great time, it's also honored by the Bronze DMMA-OnlineStar in the category Microsites.

An integrated, viral campaign related to the “CELLULOID. Cameraless film“ exhibition at Schirn art gallery.

"Your artwork at the Schirn!": With a multiuser realtime drawing application the visitors design their own artwork and publish it both on the Website and on a live installation as part of the art exhibition.

All visitors and users can take part in the exhibition at the art gallery and present one of their own artwork next to other great artists.

Project

Client

Flash Media Interactive Server

MXML without Flex

2010-04-15T17:46:00.000-07:00

Yesterday while working in Paris a co-worker seamed to be a bit surprised that it's possible to use MXML whithout extensive dependencies on the Adobe Flex Framework. So I made a tiny example app. Of course it's smaller than 20kb.

Surprisingly most people are more interested in using the component framework without MXML than the oposite. Maybe they haven't mentioned the advantages of declarative language features in the right development environment for tasks like composition, skinning and configuration. Don't get me wrong - most of the things I'm developing are programmed in Actionscript!

In this case the [DefaultProperty] and [ArrayElementType] Metatags are essential. Just have a look!

source

The next step is to focus a bit more on the Databinding feature.

source

In a real world application no one would use a code block inside of his MXML file by choice. Instead of this e.g. a Presentation Model or Presenter Pattern can be applied.

If you use the additional compiler argument -keep you will mention that several classes of the mx.core.* and mx.bindings.* package are imported in the generated code. but hey! do we really care about this hand full of kb?

AMF3 remote procedure call and class mapping without Flex / mx.rpc package

2009-11-05T07:16:00.000-08:00

If you want to avoid dependencies to the mx.rpc package and got problems with AMF3 remote procedure calls and class mapping here's a small example.

example application, source

AMFPHP

2009-10-16T03:05:00.000-07:00

Constantin Film - Pandorum

2009-10-15T02:31:00.000-07:00

While the kids were playing in the sun I've developed another project using the PureMVC micro architecture and my favorite IoC container SpringActionscript. It's the microsite for Constantin Film's new Scifi-Horror movie Padorum. I used Papervision3D for the background animations, gallery etc. check out the fullscreen mode - looks nice!

Additionally we created a Flash module that also runs on the Pandorum Facebook page called Psychotest. While the user has to pass a shocking test including tiny games his image is captured. At the end he's able to post his more or less crazy images on his Facebook page and share thoughts about the movie.

Project, Facebook App

Client

PureMVC, SpringActionscript, Papervision3D

Tetra Pak - Umwelt

2009-10-15T02:04:00.000-07:00

A project i developed this summer using the micro architechture framework PureMVC and the IoC container SpringActionscript. The 3D Designer used Away3D to implement the model.
I like the concept of a realtime animated 3D avatar answering questions, his lips are synchrone to the voice of the speaker.

Project

Client

PureMVC, SpringActionscript, Away3D

Styling text within Flash TextField using ActionScript3 & external CSS file

2009-04-20T02:24:00.000-07:00

I've made an example for styling text in an ActionScript3 project without using any Flex classes.
I embedded font, css & xml-files - feel free to load these at runtime.

source

Embed your fonts, styles & data

[Embed(source="/assets/font/Verdana.ttf", fontFamily="embeddedFont", mimeType="application/x-font-truetype")]
private static const embeddedFont:Class;
[Embed(source="/assets/font/Verdana Bold.ttf", fontFamily="embeddedFontBold", fontWeight="bold", mimeType="application/x-font-truetype")]
private static const embeddedFontBold:Class; 
[Embed(source="/assets/css/textFieldStyles.css", mimeType="application/octet-stream")]
public static const styleSheet:Class;
[Embed(source="/assets/xml/data.xml", mimeType="application/octet-stream")]
public static const xmlData:Class;

public function Application() {
    Font.registerFont(embeddedFont);
    Font.registerFont(embeddedFontBold);
    createTextField();
}

Create TextField, assign StyleSheet and data

private function createTextField():void {
    var textField:TextField = new TextField();
    addChild(textField);
    
    textField.width = 500;
    textField.multiline = true;
    textField.wordWrap = true;
    textField.autoSize = TextFieldAutoSize.LEFT;
    textField.embedFonts = true;
    textField.antiAliasType = AntiAliasType.ADVANCED;
    
    textField.styleSheet = 
        StyleSheetUtil.forClassDefinition(styleSheet);
    textField.htmlText = new XML(new xmlData());
}

Styling text within Flex 3 TextArea using external CSS file

2009-04-17T06:41:00.000-07:00

If you ever wondered how to use external style-sheets within a Flex 3 TextArea control to format text here's a nice solution.

example application
source

Embed your textfield styles in flex-applications css file

Application {
    fontFamily: embeddedFont;
    styleSheet: Embed(source="textFieldStyles.css", mimeType="application/octet-stream");
}

Create StyleSheet from style-definition and assign it and your data to the TextArea instance

private function applicationComplete():void {
    textArea.styleSheet = 
        StyleSheetUtil.forClassDefinition(getStyle("styleSheet"));
    textArea.htmlText = data;
}

Don't Panic!

2009-01-30T16:23:00.000-08:00

Finally i decided to start a blog about Flash Programming and Flex Development.
Maybe i'll post some interesting things once in a while.

cheers Jo