La Fabrick

Make me fluid

Fabien — Thu, 26 May 2011 22:15:33 +0000

Do you remember the old website of Paul Neave? Around 2004 I think. A must of Web 1.0 where the background borders twisted, as the mouse rolled over them. It’s one of those sites which, at the time, made me say that Flash was cool.

Some time ago, following the work of Philippe Elsass (@elsassph) about parametric path drawing, I started to dig in this subject. First, in a primitive’s library for Flex4 : UIGFX, and then by making my apps’ skins more… twisted!

Disclamer : because of the use of many samples, and because this article is a jelly’s trip, Your computer may change and may become a little grumpy

Those who follow me on Twitter have perhaps already seen some tests.

(Click to open)
These interactive skinning tests for Flex, come from an extension of library UIGFX (extension that I have not yet released by lack of time…)

BIGA! Nicolas Barradeau (@nicoptere) has written an impressive serie of articles about generative art, which ended in a set of geometric tools: Biga. I could not help myself and resumed my experiments.

Some points…

The idea of the « fluid » interaction is based on repulsion algorithm. When the mouse point approaches a zone of interaction of a point vector, you must calculate a « dispersion » of the point.

For doing this, I use two distinct factors:

viscosity: a factor which gives, as its name suggests, the viscosity of the point. In the physics of fluid, the viscosity is the ability for a liquid to flow. The lower the coefficient is, the more the fluid will flow fast (eg: water). Conversely, the higher the coefficient is, the more the fluid will be subject to physical constraints (eg: jam).
jelly: this is my homemade coefficient. An indicator that allows to specify the intensity of a fluid’s distortion. The lower this factor is, the more the rate of deformation, and therefore the movement of the form, will be important.

In AS3, it is expressed this way:

public function update(owner:DisplayObject):void
{
offsetx+=(xref - x) / jelly;
offsety+=(yref - y) / jelly;

var dx:Number=0;
var dy:Number=0;
if (owner.stage)
{
dx=x - owner.stage.mouseX;
dy=y - owner.stage.mouseY;
}

if (Math.sqrt((dx * dx) + (dy * dy)) <= approach * 1.1)
{
var divisor:Number=approach / 10;
var a:Number=Math.atan2(dy, dx);

offsetx+=(Math.cos(a) * approach - dx) / divisor;
offsety+=(Math.sin(a) * approach - dy) / divisor;
}

offsetx*=(1 - viscosity);
offsety*=(1 - viscosity);
if (Math.abs(offsetx) < .001)
{
offsetx=0;
}

if (Math.abs(offsety) < .001)
{
offsety=0;
}

x+=offsetx;
y+=offsety;
}

Visually:

…Some lines…

2 points define a line. It’s the rule.

Projection

To get a « real » fluid line, you must have an intermediate point on the line.
A simple and effective method is to project the mouse point on the line. Mathematicians have solved the problem a long time ago, and the AS3 implementation of the projection algorithm looks like this:

public static function projection(p:Point, a:Point, b:Point):Point
{
var len:Number = length(a, b);
var r:Number = (((a.y - p.y) * (a.y - b.y)) - ((a.x - p.x) * (b.x - a.x))) / (len * len);

var px:Number = a.x + r * (b.x - a.x);
var py:Number = a.y + r * (b.y - a.y);

return new Point(px, py);
}

With the geometric tools suggested by @nicoptere, the projection point can be calculated as follows:

var mousePoint : Point = new Point(mouseX, mouseY);
var projection : Point = GeomUtils.project(mousePoint, point1, point2);
var constraintProjection : Point = GeomUtils.constrain( projection, point, point2);

The projection of the mouse point on our line allows us to obtain an interesting interaction:

If origin points are fixed, you get a kind of guitar string. Fun.

…And some paths

With even more points, we start to have a shape… like an English cake:

Another interesting example that uses the drawing method of Philippe Elsass:
(Click to add a point, drag a point to change its position, Ctrl/Cmd + click to remove a point)

Even more « jelly »

As I said at the beginning of this article, we work for some time on a library of primitives for Flex4: UIGFX. The idea is to propose a series of useful primitives, that are not offered as standard in the Flex4 SDK (dotted line, arc, pie, ….).

In this library, we’ve set up a graphical representation of SVG path, which, unlike the standard Path primitive, enables putting the vectors in the constraints model (top, left, bottom, right).

With a few changes on UIGFX svg parser, we can easily browse an SVG path and extract the vector points of the form. The idea, you can imagine, is to twist the Path

Sources and ressources

You will find all sources in this zip
Biga, geometric tools library
The series of articles by Nicolas Barradeau on the geometry
Parametric path drawing by Philippe Elsass
And off course the (current) website of Paul Neave (Paul, if you read me, please! Met online, in a corner, the old version of your website!) … And best of all : the old website

Have fluid’s fun !Autres articles sur le même sujet

MdaME, my code generation 2011 resolution

Hervé — Tue, 11 Jan 2011 22:00:45 +0000

It’s been a while since we were busy on something and quiet. Time to solve this!

Indeed, to start this new year on the right side, La Fabrick published a small AS3 code generation application based on XSD files.

This tool was usefull to us in many projects for our first customers, so why not sharing it? Maybe you’ll become MdaME-addict as well?

All information are on: http://mdame.lafabrick.com/enAutres articles sur le même sujet

RollingFileTarget in AIR 2.0: let’s roll!

Hervé — Thu, 21 Oct 2010 17:42:50 +0000

For those who know and use the Flex logging API, you may have noticed the lack of a file « Target » (even if the trace results finish somewhere deep in your Flash Player application data folder).

For those who wondered about where they could find such a target, you probably found Mike Chambers‘s as3corelib FileTarget (Yay!).

For those who wondered whenever there would exist an equivalent to log4j RollingFileAppender in AIR (and event if you don’t, I hope some of you will stay and read this until the end ), well you probably found nothing at all.

So that’s the point, I couldn’t resist to do something about that.

A quick overview of Flex logging API

And why not a plain old trace("simply this") ?
Because the trace() function traces everything, every time, and without indicating complementary information such as criticity or current time… It is indeed useful for simple debugging, but when it comes to creating robust applications, it just doesn’t fit.

How do we create nice and clean traces

It is simple (cf. Flex documentation) :

The target

/* Create a target. */
var logTarget:TraceTarget = new TraceTarget();

/* Log only messages for the classes in the mx.rpc.* and
mx.messaging packages. */
logTarget.filters=["mx.rpc.*","mx.messaging.*"];

/* Log all log levels. */
logTarget.level = LogEventLevel.ALL;

/* Add date, time, category, and log level to the output. */
logTarget.includeDate = true;
logTarget.includeTime = true;
logTarget.includeCategory = true;
logTarget.includeLevel = true;

/* Begin logging. */
Log.addTarget(logTarget);

Note the usage of the TraceTarget class which will route the traces to the console and eventually to the Flash Player log file.
But it comes with the following enhancements:

Log level : every trace with a lower level than the configured one will be ignored
Category filters : thoses filters enable to limit traces only to configured categories

The logger

We configured a target, now let’s trace! You need to create a ILogger implementation instance:

private static var _logger:ILogger = Log.getLogger("com.lafabrick.classes.MyClass");

It is a common best practice to create a static logger instance to limit memory usage.
Note the usage of package like category declaration which enables filtering on target side.
You can then use this _logger by calling the following functions:

_logger.debug("Debug trace");
_logger.info("Info trace");
_logger.warn("Warning trace");
_logger.error("Error trace");
_logger.fatal("Fatal trace");

These calls will trigger the call to the internalLog method of the configured LoggingTarget instances declared before, depending on the level and category.

Creating a custom logging target

You now have to create a custom target by extending the AbstractTarget or LineFormattedTarget class (the latter will take care of formatting the message using the category, date and time which is clearly an good thing).

This is what Mike did with its FileTarget that I will let you check directly on Github.

RollingFileTarget

I used this FileTarget as a base for developping the RollingFileTarget class which intends to create log file backups based on two policies:

Date
Goal: one log file per day, month or year
Weight
Goal: the log file size must not exceed a given limit

Please note that those two policies should be mutually exclusive: i.e. either choose to roll on log file size OR file date if you want to keep backups in a natural order. Combination of both policies is possible but will lead to maintain two backup queues which will enventually evolve in different ways in terms of log history.

Usage

This is a classic target implementation that you can use this way:

var fileTarget:RollingFileTarget = new RollingFileTarget(new File("app-storage:/logs/myapp.log"));
fileTarget.filters = ["*"];
fileTarget.includeDate = true;
fileTarget.level = LogEventLevel.ERROR;
fileTarget.includeTime = true;
fileTarget.includeCategory = true;
fileTarget.includeLevel = true;
fileTarget.rollingInterval = RollingFileTarget.DAY_INTERVAL; // One log file per day
fileTarget.maxLogFileWeight = 0; // No size limit
fileTarget.maxLogBackups = 7; // 7 log files backup maximum (approx. one week here)
Log.addTarget(fileTarget);

You may have noticed the following properties:

rollingInterval : the date rolling mode. You can choose amongst RollingFileTarget.DAY_INTERVAL, RollingFileTarget.MONTH_INTERVAL, RollingFileTarget.YEAR_INTERVAL, RollingFileTarget.NO_INTERVAL
I’ll let you figure out the meaning of each constant
maxLogFileWeight : The log file maximum size, in bytes.
To limit the file size to 5Mb you should set the maxLogFileWeight to 5000000. Put zero to deactivate rolling based on file size
maxLogBackups : the maximum number of backups to keep on disk.
The idea is to keep a limited amount of log files, but enough to be able to go back and debug your application. A 7 days interval is commonly sufficient.

This target, when « rolling », will thus create a backup of the current log file by renaming it following these rules:

YYYY-MM-DD-name.log for a date base rotation
name.log.X for a size based roll

You should know that this pattern is used by the RollingFileTarget to guess existing log file backups at startup. This enables a continuous behavior at every application restart (you will agree that it is rare to let an AIR application run continuously for 2 weeks…)

I thus didn’t let the possibility to choose your own pattern to avoid dealing with backup detection problems and keeping the thing simple. It’s only log files at the end…

Download

You can gracefully download this class and use it, modify it as you wish and at your own risk, La Fabrick won’t be held responsible for any direct on indirect damage or data loss resulting of the usage of this class. Please also strictly follow the copyright notice present in the header, thanks!

Finally, I remind you that this class can only be used within AIR application as it depends on its API.

Have a nice logging experience!Autres articles sur le même sujet

ZXPackager: a packager for ZXP CS5 extensions

Fabien — Wed, 28 Jul 2010 22:44:41 +0000

You may have noticed that we added a brand new Applications section to the blog. We’re currently working on several AIR developer-oriented applications. ZXPackager is the first one.

This application provides a simple way to package your CS5 extensions developed with the the new Creative Suite SDK.

ZXP extensions

Since CS5, Adobe provides a new SDK with a common extension format to the whole software suite.
This SDK, available here, enables you to develop your own panels and CS5 menus. The first available format is MXP, still available, which enables you to export a package for a given CS5 software.
Now, with CS5, you may now take advantage of a common format (ZXP) which is compatible with the whole CS5 suite.

A ZXP file contains an XML manifest, which defines the plugin features (type, software type, …), and contains the SWF file corresponding to the extension (an extension is actually a kind of AIR application based on CS SDK). A ZXP file must be signed with a digital certificate. You must thus provide this certificate to the application (PKCS12, PKCS11, JKS). You can of course use a self-signed certificate generated using FlashBuilder / FlexBuilder.

More information:

A ZXP file must usually be compiled using the java UCF packager. This is exactly the idea of ZXPackager: avoiding defining your certificate file and other options on every CS5 package and propose a more user-friendly way to create a ZXP package than the command line way.

How it works

Startup, and preferences

At initial startup, the application must be aware of your computer’s configuration.

Java Home

You must provide the JDK/JRE home (so that ZXPackager can use it to launch UCF), if it is not the default one. Default paths are defined as follows:
- On Windows : ‘C:\Program Files\Java\jdk1.6.0′
- On Mac : ‘/System/Library/Frameworks/JavaVM.framework/Versions/1.6.0′
Certificate

You must provide the path of your certificate (usually a .p12 or .p11 file), as well as its password. Those information are necessary to digitally sign your CS5 extension package.

Extension definition

A ZXP package needs 2 information: the name and path of the target CS5 extension, as well as the path to the « bin » folder of your extension.

Target file

Your must give the generated ZXP file path. The .zxp extension is added automatically.
Extension source

The extension sources, as defined in the CS5 SDK guidelines, must follow this organization:

Once packaging has begun, the following message is displayed.

Finalisation

Once the package has been created, the application enables you to:

Create a new package
Open and install the extension using the Extension Manager (you must obviously have the CS5 Extension Manager installed on your computer to make it work)

Download

ZXPackager

Test extension

Autres articles sur le même sujet

DashedLine : the Little Big Primitive

Fabien — Fri, 23 Jul 2010 09:07:01 +0000

I just added a small but useful primitive in UIGFX library : DashedLine, which, as its name suggests, enables to drawn dashed lines (I’m really good at finding names ).

This primitive is based on Line, and adds a dashes property, which lets you alter the dashes display.

dashes is a Number Array. For each pair of two numbers, the first one defines the length of the caret (in pixels) and the second one defines the gap size.

Let’s look at some code:

Here is the result:

Beautiful right?

It is obviously available on UIGFX Google code.Autres articles sur le même sujet

La Fabrick goes 3.0

Hervé — Sun, 18 Jul 2010 21:52:00 +0000

No web 3.0, just a WordPress upgrade. For those who don’t speak french, and try to follow us, you’ll be glad to know that you’ve got now a dedicated english version of the blog!

We hope you’ll enjoy and understand our « frenglish » and keep us posted with your comments.

Let’s rock n’ roll…
Autres articles sur le même sujet

Flex 4 layouts – Writing a « pure » Spark ViewStack

Hervé — Sun, 18 Jul 2010 21:21:18 +0000

For those who were lucky enough to switch to Flex 4 and Spark, you may have the same habit as mine which is to avoid the in your skins… Spark, my true and only love… Nevertheless, some components were not rewritten for Spark. Why? Because Spark architecture uses a very nice feature: layouts. And layouts are sooooooooo nice!

Let see…

Layouts

Without writing a complete post on spark layouts (which would be possible and interesting for sure), I will remind that Flex 4 distinguishes itself from Flex 3 with Spark by enabling a better separation between business logic and representation. Spark comes with this layout feature to, as its name suggests, organize and lay out children of a container (a for example).
Say goodbye then to the VBox or HBox (event if VGroup and HGroup are here to ensure a smooth transition), and say welcome to the Group with its layout attribute:

becomes

At first, we could say: that’s more verbose! Yes but… Spark layout has this particularity, as a component’s property, to be updatable at runtime, which is not the cas when you consider a component whose name implies how its children will be displayed and organized. In short, a VBox will always lay out its children vertically (that’s its name!), while the Group will be able to change its layout very easily, switching from HorizontalLayout to VerticalLayout for example… We can better understand this even better by imagining to write a custom layout to do crazier and fancier stuff!

Create a layout

In order to create a layout, you must extend the LayoutBase class and override at least the updateDisplayList() and most of the time the measure() method also. These methods aim at the same objective as in Flex 3, but adapted to the layout context:

updateDisplayList : takes care of laying out the container’s children and define their size
measure : gives the global size to the container

You can access the « target » property which corresponds to the container your layout is applied to, and then work with the container’s chidren by using the getElementAt() or getVirtualElementAt() methods. The second one is for handling « virtualized » layouts.

Small break: layout virtualization

Flex 4 enables, for performance reasons, to use a layout in « virtualized » mode, i.e. only calculating organization of children which must be actually displayed instead of calculating all children layout properties. This mode is very well suited for components with lots of children, but showing only a few at a time. The display will thus be reprocessed whenever the user will scroll (or equivalent).

Practice: create a ViewStackLayout

Now we have layouts in mind, it is useless to ask why the ViewStack component hasn’t been written for Spark: it must be a layout! Event if this very good article mentions a promising, quote « (Planned) StackLayout », nothing stops us to write one simple, Spark compliant, instead of waiting (we are impatient at La Fabrick).

Here follows a very simple example:

	import mx.core.IVisualElement;
	import spark.layouts.supportClasses.LayoutBase;

	public class ViewStackLayout extends LayoutBase {
		public function ViewStackLayout() {
			super();
		}

		protected var _index:uint;

		public function get index():Number {
			return _index;
		}

		public function set index(value:Number):void {
			if (_index != value && target != null && value >= 0 && value < target.numElements) {
				_index = value;
				target.invalidateSize();
				target.invalidateDisplayList();
			}
		}

		override public function updateDisplayList(width:Number, height:Number):void {
			var element:IVisualElement = useVirtualLayout ? target.getVirtualElementAt(index) : target.getElementAt(index);

			if (element) {
				element.setLayoutBoundsSize(element.getPreferredBoundsWidth(), element.getPreferredBoundsHeight());
				target.setActualSize(element.getPreferredBoundsWidth(), element.getPreferredBoundsHeight());
				target.setContentSize(element.getPreferredBoundsWidth(), element.getPreferredBoundsHeight());
			}
		}

		override public function measure():void {
			var count:int = target.numElements;

			for (var i:uint = 0; i < count; i++) {
				var element:IVisualElement = useVirtualLayout ? target.getVirtualElementAt(i) : target.getElementAt(i);

				if (i == index) {
					element.visible = true;
					element.includeInLayout = true;
					target.measuredWidth = element.getPreferredBoundsWidth();
					target.measuredHeight = element.getPreferredBoundsHeight();
				} else {
					element.visible = false;
					element.includeInLayout = false;
				}
			}
		}
	}

You may denote the usage of getVirtualElementAt, for future compatibility with virtualization.
You can now use this layout in a DataGroup bound to a Tabbar like this:

This way, if you want to change how those elements are displayed in the future, you will only have to change the layout property and use a CoverFlow layout, TimeMachine layout, or whatever you like without changing you component’s code, but only the skin.

Aren’t we fine dressed in Spark?Autres articles sur le même sujet

UIGFX practice : a CircularSlider component

Fabien — Tue, 04 May 2010 21:18:32 +0000

If you were luck enough to use a multitouch application, did you ever have the idea that it would be interesting to use some circular interface components?
As interface space management is easier to achieve on large multitouch tables, I had the idea to develop a CircularSlider component, using my primitive UIGFX library, including the Pie primitive.
Let see how it works…

The component

PieButton

I needed a button with 2 properties startAngle and angle, to be able to transmit these values to the skin:

package com.lafabrick.components
{
    import spark.components.Button;

    public class PieButton extends Button
    {
        public function PieButton()
        {
            super();
        }

        private var _angle : Number;
        private var _startAngle : Number;

        public function get angle():Number
        {
            return _angle;
        }
        [Bindable]public function set angle(value:Number):void
        {
            _angle = value;
            invalidateDisplayList();
        }

        public function get startAngle():Number
        {
            return _startAngle;
        }
        [Bindable]public function set startAngle(value:Number):void
        {
            _startAngle = value;
            invalidateDisplayList();
        }

    }
}

CircularSlider

This component could not extend directly SliderBase or TrackBase because the SkinPart thumb and track, as Button, are extending the TrackBase class.
I thus used the Range class, inserted the Slider architecture, and added specific geometric codes.
Check the component’s source code

Skin implementation

The design of the Skin is similar to a skin Slider standard, except that it uses a PieButton instead of a Button:



    
    
        [HostComponent("com.lafabrick.components.CircularSlider")]

Under « thumb » and « track » Skin, the angular values are a mapped with the PieButton HostComponent. StartAngle and angle properties of the Pie primitive are directly extended from the host component.
Here follows a sample with Track Skin:




    
        [HostComponent("com.lafabrick.components.PieButton")]

Result

Let see:

Nice huh?

You can check these for more info: Link, and source code.

PS: Thanks to Hervé for review and corrections!Autres articles sur le même sujet

uigfx project: Flex4 primitives library / Fireworks extension

Fabien — Tue, 09 Feb 2010 10:40:22 +0000

I just released a new project, called by Erick uigfx, that I have introduced in my previous post (in french).
So : it’s a Flex4 primitives’s library, which allows you to extend standard graphics primitives. It’s also one (and more soon) Fireworks extension to accelerate and improve the workflow between designer and developer.
The existence of this library have just this idea: improve the work processes between teams around a Flex4 project.

uigfx library

ExclusionRect

Draw a rectangle with rounded corners (« radius » property), with a rounded rectangular punch optional.
The roundness of the inner rectangle is defined by « innerRadius » property.
Constraints of the inner rectangle are defined with « innerTop », « innerBottom, « innerLeft » and « innerRight » properties.
Sample :

Result :

PointsPath

This primitive allows you to draw a path, based on a list of points(ConstraintPoint).
Additionally, you can set a roundness to your primitive using the « radius » property

A PointsPath can be defined as « not closed » : in this case you can use the « closedPath » property and set it to false :

...

Using constraint point

The ConstraintPoint class defines a point with constraints values (left, horizontalCenter, right; and top, verticalCenter, bottom)

Every single value can be expressed as a percentage, setting « valuesInPercent » property to « true » (by default, all values are expressed in pixel) :

Sample

Draw a five branch star, with a rounded contour (« radius » property), and constraints points vector :

Result :

ComplexPointsPath

This primitive allows you to draw a path with one or more contours, defined by ComplexConstraintPoint points.

Define a complex point

The ComplexConstraintPoint class defines a vector with a constraint position, and the position of its bezier curves list.

The position of bezier curves is defined by vertical and horizontal offsets as below :

In mxml :

Just like the ConstraintPoint, all values can be expressed in percentage :

Single contour

Draw a path with a complex contour :

result :

Multiples contours

Draw a path with multiples contours.
Each Contour object defines a part of the path. Basically, it’s used to process pathfinding, such as union or exclusion.
Each contour is defined on a Contour object, through the « contours » collection property. Like PointsPath, a Contour can be defined as unclosed, using « closedContour » property :

...

Below a complete sample code :

Result :

An Extension for Fireworks

This library would not be complete without an export tools for Fireworks. Have a complex primitive is good, but how to find all the points and bezier curves without a headache? It’s the goal of this extension!

At this moment the exporter is able to :

exports all paths and rectangles
exports strokes
exports fills (solid color and gradient)
exports filters (gaussian blur, glow, drop shadow)

But for now, this exporter can’t :

exports text

Installation

Simply download the extension (uigfx.mxp), and double click on it to launch the Extension Manager. The installation is automatic. Now, open Fireworks, and open the primitives exporter panel in « Window > uigfx« .

How to use this extension

Make your design
Generate and place rules
You’ill need 4 vertical rules and 4 horizontal rules to determine all constraints positions of each vector point. You can click on the « generate rules button », to put the rules around your selection (you need to select one or more objects). Move the rules, in order to have all vectors in the good area, like below :
Export
Click on the export button to export all selections. The exporter follows rules placement to determine vectors positions. If there’s no selection, all layers are exported. Of course, you will have to provide a name for the output file and a directory to save it in.
Finally, an mxml file, containing a Spark Skin with all uigfx primitives, will be created. And voila !

This project is hosted on google code.Autres articles sur le même sujet

Hello AFCS ( bye Cocomo ) ! Simple user authentication with Adobe Flash Collaboration Services

Hervé — Sat, 31 Jan 2009 21:48:35 +0000

[ 05.03.2009 : Update : Cocomo is now called Adobe Flash Collaboration Services / AFCS and 0.9.1 was released with some bug fixes and a new namespace ]

(Translated from French tutorial on FlashXPress )

In this first application example, we will build, or rather « assemble », a videoconferencing application including a chat tool, shared notes and a file sharing manager. For this we’ll use some « pods » , the highest level components of the ~~Cocomo~~ AFCS framework.

One of the most important component in a ~~Cocomo~~ AFCS application is the session manager. It will be in charge of communicating with ~~Cocomo~~ AFCS server, user authentication, connection management, data synchronization, and even more…

Two components in the framework can do this job: ConnectSessionContainer and ConnectSession (both implement com.adobe.rtc.session.IConnectSession).

Hello AFCS ( bye Cocomo )

For starting :

- create a new Flex project,
- copy ~~Cocomo~~ AFCS SWC file (from CocomoSDK_0.9/lib/player 9 or 10/afcs.swc) and paste it in your /libs/ folder

Let’s start with ConnectSessionContainer :
It’s a Canvas based component, which includes all features needed to communicate with ~~Cocomo~~ AFCS servers.

This container, and all of its children, will not be visible as long as the room connection is not established. This is the reason why we will integrate our pods (Webcamera, SimpleChat, Notes and FileShare) inside it. As long as our application isn’t connected to our room, collaborative components will remain hidden.

To start a session, we’ll need to define two attributes in the ConnectSessionContainer tag :

- roomURL( ex : http://connectnow.acrobat.com/yourAccount/roomName)
- authenticator : your user credentials

User credential’s transmission is done by using the AdobeHSAuthenticator class. It will encapsulate authentication data (userName and password). Several authentication modes are possible, we’ll probably focus on them in a future tutorial.

In this first step, we will hard-code our credentials in our application… Only for the first example.

In this step, your application can already connect to the server. By default, connectSessionContainer had a autoLogin property set to true. This means that it will try to communicate with the server as soon as it’s created. In this example, I set a background color for the container, so we can see when connection is established.

If you publish your project in debug mode, you’ll be able to see server / client communication logs.

To be notified about the login result, we can watch for AuthenticationEvent.AUTHENTICATION_FAILURE and AuthenticationEvent.AUTHENTICATION_SUCCESS on the AdobeHSAuthenticator.

To know if application is fully connected and synchronized, we must add a listenner to the SessionEvent.SYNCHRONIZATION_CHANGE event of sessionContainer and watch for its isSynchronized property. We will talk about differents aspects of this synchronisation in future tutorials.

Now that our application can establish a connection to the room, we can start adding pod components.

Using Cocomo AFCS Pods

Pods are « ready to go » components. When you use a ConnectSessionContainer, you just have to add pods as children in it, and allow them to detect and use your ~~Cocomo~~ AFCS server connection.

For now, ~~Cocomo~~ AFCS contains:
- Simple chat: chat component allowing public and private messages.
- WebCamera: webcam publisher / subscriber
- FileShare component: file sharing components (upload / download)
- Shared Notes components
- Roster and horizontalRoster: user management components
- SharedWhiteBoard

Let’s insert our pods :

Pods embed robust role management features, as we’ll see later.

Anyway, you’ve just built your first ~~Cocomo~~ AFCS application, or should I say your first « real time communication » application… I can’t think how we use to do that before!!??…

User authentication et connection management

Hmmm…there’s still something missing… For a single user app, it’s almost ok… but it’s not the scenario here… What are we going to do if, someday, we find friends and want to collaborate with them??? Does anybody need to connect with my « owner » account? Can we let any AS3 decompiler reveal our credential data? I don’t think so!! Fortunatly ~~Cocomo~~ AFCS allows us to easily manage these aspects.

~~Cocomo~~ AFCS room allows several authentication methods, specially :
- as owner, based on your ~~Cocomo~~ AFCS Developer account credentials
- as guest, only needing a user name.

Users role definition is based on integer values, which are defined as constants in UserRoles class.

The principal roles are : owner (host / developer account), publisher (guest who can publish on one or several components) and viewer (passive guest who is only allowed to publish on chat channel). By default, guests can use a room only if the owner is connected. You can configure initial room settings (auto-promote guest as publisher, data persistence, free room access…). You can also manage user roles and permissions with the ~~CocomoDevConsole~~ AFCSDevConsole app, or directly by using the API. But that’s another story…

For now we will insert an authentication form. We thus need to deactivate the ConnectSessionContainer’s autoLogin property.

Then, we need to add a login() method, in charge of filling the AdobeHSAuthenticator with data. It will also initialize the sessionContainer room connection:


private function login ( login:String, password:String ):void
{
   identificator.userName = login;
	//if password is set : log as host
	//else log as guest
   identificator.password = password ;

	// run sessionManager connection
   sessionManager.login();
}

We can also add a logout button.


// disconnection
// in actual 0.9 beta, mostly pods, can't be re-connected after a disconnection

private function logout():void
{
    sessionManager.logout();

	// close() is supposed to disconnect et remove all childNodes, but seems not work yet
    //sessionManager.close();
}

Once the application is connected, we shall remove the form and the sessionContainer will be removed as well when the connection is stopped or lost


// for each synchronization event
// : connection, disconnection , state's change, ...
private function onSynchro( e:SessionEvent ):void
{

	// once application is successfully connected / synchronized
    if ( sessionManager.isSynchronized && ! isConnected )
    {
        Alert.show("Application connectée");

        isConnected = true ;

        removeChild( logPanel );

    } else if ( ! sessionManager.isSynchronized && isConnected ){
    // if disconnected
    isConnected = false ;

   /* remove the connectSessionContainer
   *  » in this version disconnected pods can't re-connect
   *
   *  » For re-connect, you can :
   *     - reload html page
   *     - dynamically re-create connectSession and pods
   */
   removeChild( sessionManager );

   // display logout message
   Alert.show( 'vous avez quitté la réunion, recharger la page pour entrer à nouveau');
   }
}

In this beta version, I encountered problems when trying to repeat multiple login/logout. After a few tests, the best way I found wass to force a page refresh.

Get sources

This first ~~Cocomo~~ AFCS example is finished, and obviously it’s possible to do a lot more. In future tutorials, we’ll take a deeper look on ~~Cocomo~~ AFCS architecture. We’ll also use the ~~CocomoDevConsole~~ AFCSDevConsole and LocalConnectionServer, two AIR utilities included in the SDK.

Have a good collaboration !!! Autres articles sur le même sujet

La Fabrick

Make me fluid

Some points…

…Some lines…

Projection

…And some paths

Even more « jelly »

Sources and ressources

MdaME, my code generation 2011 resolution

RollingFileTarget in AIR 2.0: let’s roll!

A quick overview of Flex logging API

How do we create nice and clean traces

The target

The logger

Creating a custom logging target

RollingFileTarget

Usage

Download

ZXPackager: a packager for ZXP CS5 extensions

ZXP extensions

How it works

Startup, and preferences

Java Home

Certificate

Extension definition

Target file

Extension source

Finalisation

Download

ZXPackager

Test extension

DashedLine : the Little Big Primitive

La Fabrick goes 3.0

Flex 4 layouts – Writing a « pure » Spark ViewStack

Layouts

Create a layout

Small break: layout virtualization

Practice: create a ViewStackLayout

UIGFX practice : a CircularSlider component

The component

PieButton

CircularSlider

Skin implementation

Result

uigfx project: Flex4 primitives library / Fireworks extension

uigfx library

ExclusionRect

PointsPath

Using constraint point

Sample

ComplexPointsPath

Define a complex point

Single contour

Multiples contours

An Extension for Fireworks

Installation

How to use this extension

Hello AFCS ( bye Cocomo ) ! Simple user authentication with Adobe Flash Collaboration Services

Hello AFCS ( bye Cocomo )

Using Cocomo AFCS Pods

User authentication et connection management