Moving to LiveCycle Collaboration Service

We saw an year ago during San Francisco MAX a great project called COCOMO that allowed developers to take all features in Acrobat Connect (chat, webcam and audio streaming…) and to add in your Flex application with few lines of codes and with this “library” pre-built very easy to use.

This year at MAX in L.A. I followed a very interesting seminar about LiveCycle Collaboration Service (LCCS) that is the final name of the project COCOMO.
LCCS is very interesting for many reasons:

  • easy to use
  • very cheap service
  • very well documented
  • customizable and integrable with own desktop application or RIA made with Flex
  • open new opportunities for customer care solutions and other kind of applications

EASY TO USE

Yes, you can create your application with LCCS integrated with few lines of code. An example?
This is a little conference call environment:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xFFFFFF"
minWidth="400" minHeight="600" xmlns:rtc="AfcsNameSpace">
<mx:Script>
<![CDATA[
protected function startTalk():void{
pubAudio.publish()
}
protected function stopTalk():void
{
pubAudio.stop();
}
]]>
</mx:Script>
<rtc:ConnectSessionContainer id="cSession"
roomURL="https://connectnow.acrobat.com/user/room">
<rtc:authenticator>
<rtc:AdobeHSAuthenticator userName="***********" password="************"/>
</rtc:authenticator>
<mx:VBox width="100%" height="100%" horizontalAlign="center">
<rtc:WebCamera width="320" height="240"/>
<mx:HBox width="100%" horizontalCenter="center">
<rtc:AudioPublisher id="pubAudio"/>
<rtc:AudioSubscriber/>
<mx:Button label="talk" click="startTalk()"/>
<mx:Button label="stop talk" click="stopTalk()"/>
</mx:HBox>
<mx:List dataProvider="{cSession.userManager.userCollection}"
labelField="displayName" width="100%"/>
</mx:VBox>
</rtc:ConnectSessionContainer>
</mx:Application>

That’s cool, isn’t it?
You can download the sample from this link.

CHEAP SERVICE

How much does it cost!? this is the question!
It’s cheap, LCCS is totally free you can download LCCS from Adobe site; like developer you have $15  per month to use for your test, applications and so on.
This is the LCCS “menu”1:

  • 1000 push/messages:  $0.10
  • 1GB live streaming: $0.49
  • user per hours: $0.01

No any additional cost and you don’t maintain anything because you use Adobe servers with LCCS.

VERY WELL DOCUMENTED

When you download SDK you have an AIR application that guide you to use LCCS in your Flex application, you can retrieve there API, SWC for Flex and Flash, you can manage your room and your account so you have a real console for your LCCS applications.

CUSTOMIZABLE INTERFACE AND NEW BUSINESS OPPORTUNITIES

LCCS components could be integrable with your application, so you can create an intranet dashboard with a chat or a VOIP service to communicate with others fellows or maybe you can create an interactive catalogue that help users to choose right product for own requirements.
But not only, you can create collaborative solutions with a shared whiteboard and list of users that could chat or share own ideas via VOIP.
I think that a lots of desktop applications and RIAs could become more interesting with those services and also, if you think, there are many opportunities for your business.

Finally, I think that LCCS could help all developers to make own application more fashionable and useful, but also open new doors for services that are so old.
It’s easy, it’s cheap so why don’t use LCCS?! With my company we start to propose LCCS to our customers and they are so interesting about this technology because it solves some problems in particular

Flickr mesh-up with actionscript 3, REST or SWX

Today I spend my afternoon to configure a part of a full Flash website that interact with Flickr and that retrieve data from my account without any appication authentication but only with my Flickr key.

First of all I was really impressed about how many languages you can use to bring Flickr photos and use in own desktop application or website (Real Basic, cUrl, Perl, Delphi, C…).

When you want retrieve photos from Flickr you must have a Flickr key that is totally free and you can activate one directly in the right section of Flickr site.
In the same section you can find whole documentation and lots of services expose to retrieve any kind of data from a photo, from Exif data to user or friends informations.
For AS3 we have a couple of interesting library; first one is as3flickrlib very well documented but it’s so long to start work with it because you must to find a frob ID then a token and finally you can start to work with Flickr API.
The other one is SWX, that is written by Aral Balkan and it’s too easy to mesh up any kind of popular service like Flickr, Twitter and so on.
Aral gives us availability to use SWX Service Explorer to take a look at the data and how to mesh up your application with public API, I really love it on Flash Lite too!

This is very interesting because you can retrieve all API in this library and in few line of code you can work with public services.
This is a simple example to call Flickr services with SWX, you can download source code too:

swx = new SWX();
swx.gateway = GATEWAY_PHP;
swx.encoding = "POST";
var callDetails:Object =
{
serviceClass: "Flickr",
method: "photosSearch",
args: ["", "", "#mart3"],
encoding: "POST",
timeout: 5,
resultHandler: resultPhotos,
faultHandler: faultHandler
};
swx.call(callDetails);

Another interesting way to work with Flickr API without any authentication is using REST API.
REST (Representational state transfer) is a very simple way to request data from a database, update, delete them or to create new record using HTTPHeaders and XML.
You must know that AS3 doesn’t have PUT and DELETE method but there are some libraries that create a workaround to solve this limitation and they work very well with REST (as3httpclientlib for example)
I start to approach REST a couple of months ago with Ruby on Rails and I think is amazing.

Flickr gives us REST API too, and you can see that is so simple create a Flickr gallery with REST and Actionscript 3.

We have some API that works without authentication like photos search and we use this service to retrieve data for our Flickr gallery.
First of all we take a look at service documentation on Flickr, you can see that we have a lots of opportunity to find data on Flickr; we can search photos via userID, tags, text on title or description and so on.

In Actionscript 3 we’ll use URLLoader class and prepare some url to retrieve XML data from REST.

private const FLICKR_SERVICE = "flickr.photos.search";

private const API_FLICKR:String = "c6c31464878505403f9bbbf6214ae413";

private const PATH_SEARCH_FLICKR:String = "http://api.flickr.com/services/rest/";

		

public function FlickrRest(){

			

	var varsFlickr:URLVariables = new URLVariables();

	varsFlickr.method = FLICKR_SERVICE;

	varsFlickr.api_key = API_FLICKR;

	varsFlickr.tags = "#mart3";

			

	var req:URLRequest = new URLRequest();

	req.url = PATH_SEARCH_FLICKR;

	req.method = URLRequestMethod.POST;

	req.data = varsFlickr;

			

	var urlL : URLLoader = new URLLoader();

	urlL.addEventListener(Event.COMPLETE, retrieveImages);

        urlL.load(req);

			

}

You can download source code and final sample from this link.
Finally I’d like to explain how to compose photo’s url to retrieve them on Flickr.
Flickr url is composed by some variables that you can find in REST XML or SWX result object

  1.  set FARM (ex.: http://farm”+flickrXML..photo[i].@farm+”.static.flickr.com/)
  2. set SERVER (ex.: +flickrXML..photo[i].@server+”/”)
  3. set Photo ID with underscore  (ex.: +flickrXML..photo[i].@id+”_”+”)
  4. set Secret code (ex.: flickrXML..photo[i].@secret+)
  5. last parameters is which size you want to get photos, you can use “_s.jpg” for small size, “_m.jpg” for medium, “_l.jpg” for large and so on.

I hope that could be interesting for many developers, if you have any suggestions or idea about mesh up with Flickr, feel free to drop a comment.

Flash, Flex and SEO

During the flight from Philadelphia to Los Angeles I read a book that I wait for long time and finally arrive a couple of months ago but I’ve never started to read before.

The book is Search Engine Optimization for Flash by Todd Perkins, the first that talks about this argument and also about how to make your Flex RIA searchable from spiaders, so I was so exciting before start to read.

My final impression is that you don’t need to read this book if you are a developer because there aren’t new things to do…
I can resume the book in those few best practices:

  • Use SWFObject because make your SWF file more easy to read for spiders
  • Use SWFAddress or URLKit to rewrite url of your page but it’s useful only for RIA or site usability, not for SEO because HTML is the same for all pages, change only the page url.
  • Avoid to develop a full flash site if you are interested to indexing your project
  • Remember to “talk” with spiders via META tag in HTML page
  • One of most important thing is to make a relevant title of your HTML page
  • With FP 10 you don’t make anything to indexing your contents (dynamic or static text) because spider navigate trough SWF file to retrieve informations
  • Remember that you can set XMP file for your Flash project but until now, search engines don’t use those informations

I think that’s all, I hope to find more about how can create searchable content with Flash (there is a good PDF file in adobe website) but I think that there is no way.
We are only at the beginning of a big mountain and I hope that Adobe starts to make something new in next few months… maybe at MAX 2009 also, but I really don’t know.

First impressions about Flash Catalyst

Yesterday I was in Milan at From A to Web and I saw Serge Jespers session about RIA workflow with Flash Catalyst and Flash Builder.

In 30 minutes he made a real Flex application that interact with Coldfusion to retrieve data from a database and he started from a normal and static AI file… that’s totally AMAZING!
Flash Catalyst will be a great software that will help us to create desktop applications and rich internet application, in particular could be very interesting to create animations and user interaction on own GUI.

When Serge showed Flash Builder he interacted with a CF script (you can work with WS, XML and other back end tecnologies also) trough a panel and in few steps he was connected to data source… COOL!
I’m so excited, Flash Catalyst will change RIA and desktop apps workflow definitely! I’m sure about that… BUT…

I’d like to investigate more about Flash Catalyst when Adobe decides to release public BETA on Labs, but I asked a couple of questions to Serge during his session to understand better the power of this new software.
For me the first problem is that FC doesn’t work with Flex Modules but only with States and in big projects it could be a problem.
Yes, you can copy MXML code and  paste on a Module, but it could be more easy to choose if you want to work with states or modules or better, export your GUI like module and not only custom component.
Another thing that I’m scared is that FC is very easy to use, open new way of business and make your daily work more fast, so designers and developers that approach for first time RIA and Desktop apps could start to release tons and tons of “bad apps” like Flash in 90s… I hope that Adobe will teach around the world with free training courses, not only with one day events, or will begin a new HORROR ERA for RIA and Desktop apps.

That’s my 2 cents, if you’d like to talk about FC on this blog, feel free to leave a comment.

Create PDF in runtime with Actionscript 3 (AlivePDF, Zinc or AIR, Flex or Flash)

This morning I’ve a new target, create PDF in runtime with Actionscript 3.
Very cool project to accomplished this mission is AlivePDF, an opensource AS3 library that you can download from Google Code.
AlivePDF allow you to generate PDF in runtime with Actionscript 3 and you can add pages, draw in each pages or add images, it’s very powerful library.

In this sample I use Actionscript 3 (with FDT) and Multidmedia Zinc 3, but you can use Flex or Flash and AIR to make this sample.
So first of all I create a simple class that allow you to create a PDF file with multiple pages and to add content in each pages.
This is the code:

package org.mart3.pdfGeneration {
    import flash.events.Event;    
    import flash.utils.ByteArray;    
    
    import org.alivepdf.images.ImageFormat;    
    import org.alivepdf.saving.Method;    
    
    import flash.display.Loader;    
    import flash.events.IEventDispatcher;    
    import flash.events.EventDispatcher;
    
    import org.alivepdf.pdf.PDF;
    import org.alivepdf.layout.Orientation;
    import org.alivepdf.layout.Size;
    import org.alivepdf.layout.Unit;
    import org.alivepdf.display.Display;
    
    /**
     * @author lm
     */
    public class CreatePDF extends EventDispatcher {
        
        private var pdf:PDF;
        public var pdfBA:ByteArray;
        
        public function CreatePDF(target : IEventDispatcher = null) {
            super(target);
            
            pdf = new PDF(Orientation.LANDSCAPE, Unit.MM, Size.A4);
            pdf.setDisplayMode(Display.FULL_PAGE);
        }
        
        public function set totalPages(num:int):void{
                
            for(var i:int = 0; i < num; i++){
            
                pdf.addPage();    
                
            }
    
        }
         public function setData(_l : Loader, _numPage:int) : void {
            
            pdf.gotoPage(_numPage);
            pdf.addImage(_l, 15, 15, 0, 0, ImageFormat.JPG, 100);
        }
        
        public function savePDF():void{
            pdfBA = new ByteArray();
            pdfBA = pdf.save(Method.LOCAL);
            
            var evt : Event = new Event("baReadyEvent");
            dispatchEvent(evt);
        }
    }
}

Obviously if you want, you can create a custom event that pass to the document class the ByteArray but this is a quick sample to show how you can create PDF in runtime!

One of the amazing things that you should do with AlivePDF, it’s that you can decide to save PDF locally or on web! Read documentation because it’s very interesting what you can do with this library!

Ok now, go to document class where we use MDM swc that you can find when install Zinc on your computer (you can find 2 differents SWC, one for Flash and the other one for Flex. Remeber also that Flash SWC works with Flash CS4 also, not only with Flash CS3!).
In this class we do those simple steps:

  • create a PDF object using CreatePDF object
  • set our PDF document
  • pass an external image loaded with Loader object
  • save PDF bytearray with Zinc FileSystem class
package org.mart3.pdfGeneration {

    import flash.display.MovieClip;    
    import flash.net.URLRequest;    
    import flash.display.Loader;    
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;

    import mdm.*;

    import org.mart3.pdfGeneration.*;

    /**
     * @author lm
     */
    public class Main extends Sprite {
    
        private var pdfObj:CreatePDF;
        private var l : Loader;
    
        public function Main() {
            
            mdm.Application.init(this);            
            
            pdfObj = new CreatePDF();
            pdfObj.totalPages = 2;
            pdfObj.addEventListener("baReadyEvent", saveLocalPDF);
            
            l =  new Loader();
            l.name = "myImg";
            
            l.contentLoaderInfo.addEventListener(Event.COMPLETE, showImage);
            l.load(new URLRequest(mdm.Application.path+"assets/bg.jpg"));
        }
        
        private function saveLocalPDF(e:Event) : void {
        
            mdm.FileSystem.BinaryFile.setDataBA(pdfObj.pdfBA);
            mdm.FileSystem.BinaryFile.writeDataBA(mdm.System.Paths.desktop+"generate.pdf");
    
        }

        private function showImage(event : Event) : void {
            
            l.scaleX = l.scaleY = .4;
            var mc : MovieClip = new MovieClip();
            mc.buttonMode = true;
            mc.addEventListener(MouseEvent.CLICK, savePDF);
            mc.addChild(l);
            this.addChild(mc);
        }
        
        private function savePDF(event : MouseEvent) : void {
            event.currentTarget.alpha = .5;
            pdfObj.setData(l, 1);
            pdfObj.savePDF();

            
        }
    }
}

You can also download source files from their hosting service and test it on your computer.
Feel free to give me any comments about AlivePDF, it’s very interesting to know what you think about this AS3 library.

Styling your text with CSS in Actionscript 3

I know, it’s a very silly stuff, but I think could be useful for anybody that would like to styling textfields with CSS in few moments.
This little sample, show you how to make it via Actionscript 3 in Flash. 

First of all we create CSS file called cssStyle.css with a custom color for the text:

 .customBold{

color:#FF00CC;

}

Ok now, in the first frame of our Flash file we create a dynamic textfield with t_txt istance name and then we create another layer called “actionscript”. In the first keyframe of Actionscript layer we copy and past this code:

stop();


var loader:URLLoader = new URLLoader();

var req:URLRequest = new URLRequest(“cssStyle.css”);

loader.load(req);



loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);


function loaderCompleteHandler(event:Event):void {

var sheet:StyleSheet = new StyleSheet();

sheet.parseCSS(loader.data);

t_txt.styleSheet = sheet;

t_txt.htmlText = “<span class=’customBold’>This is a silly text with CSS style</span> and without CSS!”;

}

So first of all we load the external CSS file with URLLoader class and when loaded complete we use StyleSheet object to parse CSS and to apply it in our textfield in the stage we only set stylesheet textfield property with StyleSheet object.
You can download sample files from this link 

Adobe MAX: day 1

Here we are, it has just started Adobe MAX 2008, I’m very excited and in this day I see a lot of cool and interesting things!

In General Session this morning we see new name of Thermo project, now we must start to call it Flash Catalyst, too long but not bad.
There are new interesting things on mobile side, Adobe is working in a new product that package Flash Lite contents in .sis or .cab file and delivery it over-the-air, maybe an important step trough a new Adobe mobile era.

Another interesting project that is in BETA now, it’s also my favorite one, is CoCoMo, I meet Nigel Pegg, amazing guy, that coordinate the project with Dr. Fang (:D).
Now CoCoMo is in Labs, you can download it and start to work with those components that allow you to implement your Flex applications with Connect Now features, so you can share your desktop, make a conference call with video, chat and so on.

There are other 2 minor project that Adobe releases today: Wave and Tour de Flex.

The first one is a social networking aggregator made with AIR that allow you to manage your social networking like twitter, flickr and so on in a all in one application.
Tour de Flex is another AIR application that is focused for developers and designers that approach Flex for the first time, I copy the purpose of the application from own site:

  • Provide non-Flex developers with a good overview of what is possible in Flex in a “look and see” environment
  • Provide Flex developers with an illustrated reference tool
  • Provide commercial and non-commercial Flex developers a place to showcase their work

You can find those projects directly from Labs too.
I meet also a lot of developers and designers that are involved in very cool projects, but I’ve also the honor to meet Simone Legno aka Tokidoki! It’s one of my favorite designers! Max respect for him.

But I must write also that there is ONLY 1 WI-FI CONNECTION here for more then 5.000 people… it’s unbelievable… 

See you tomorrow for resume of second day.

Adobe MAX SF… I’m coming

Yes, also this year I’ll go to Adobe MAX, the biggest Adobe event with more 4600 attendees that are ready to see the future of Adobe softwares.

We will see Thermo (2 sessions during the event), the new Adobe IDE for interaction designers and multimedia designers that allow to simplify Flex Interface customizations.

But also, I’m sure to find a lots of old and new friends there like Mobile guys (Biskero, Scott, Mark, Dale, Bill…) and girls (Mariam…) and have lots of fun with them.

I’ll have a speech about AIR and SQLite during 360Max the event in  event that is totally free for all people that are at MAX.
During my session I’ll talk about:

  • introduction to SQLite
  • how to connect AIR to a db
  • create, modify, delete and search into records
  • transactions and prevent SQLinjections with parameters
  • AIR data encryption and others technique to encrypt data
  • SQLSchema and others utilities to work with SQLite
  • embed a db in an AIR application
  • best practices & limitations

everyday I’ll put my impressions, photos and news about this great event, so if you are interesting to follow MAX, feel free to come there and read it!

See you soon… or maybe at Adobe MAX.

Working with Tween in Flash Lite

In last months my team and I are working on Flash Lite projects so hard, in particular with Tween class we found a good way to work with them.
Also Adobe has released in last weeks a new interesting resource: Mobile and Devices cookbook, for now it’s only online, I hope soon it will be also published by O’Really!

So I’ve just post in this great online resource some suggestions to work with Tween in a Flash Lite project.
I think the most important is the third one:

3. When you move a movieclip that contains lots of textfields or clips, switch movie quality to low (fscommand2(“SetQuality”, “low”)) and, when animation is finish turn quality to high (fscommand2(“SetQuality”, “high”)).
With this trick you can have great performance for your animations

In fact I tried to use always high qualit and performance was not good, when I tried to set low quality before a Tween and switch to high when it finished, performance grown until to 50% instead of first method.

If you want try this you have got a Flash Lite 2.x device and download the sample file.
I put a comment in the code, first of all, try to comment the right code line and then try without it.
Please leave me other suggestions or comments on this post or write me directly.

Enjoy