A Week of Flash Collaboration: Authentication and Drupal Integration

afcs_logoThis is my first attempt at a series I’m hoping to start called “A Week of”, which will cover 5 topics in a particular subject over the course of the week. For the first one, I’m going to do Adobe Flash Collaboration Service and I’ll be doing a blog post on something AFCS-related every day. If you’re not familiar with Adobe Flash Collaboration Service (AFCS) I encourage you to check out my tutorial on the Developer Center to get started. Note: There is a new SDK version (0.93) on the Developer Portal, which includes everything in one place including video tutorials and an AS3-only version of the SDK. Worth checking out.

Authentication During Development
During development it’s relatively easy to authenticate against the Flash Collaboration service even if you aren’t online. The basic component for Authentication is the AdobeHSAuthenticator. During development the AdobeHSAuthenticator tag lets you pass in your Adobe ID credentials to connect to a room.

Adobe Flash Collaboration Service also lets you test and develop without having to connect to the AFCS servers with the LocalAuthenticator tag. There is an AIR application as part of the SDK that, when running, will let you use the LocalAuthenticator to pass in an arbitrary username and connect to a room on your local machine.

Guest Authentication
You can set up AFCS to just allow guests to log into your rooms without any authentication. There are a couple of things you need to do to set this up. First, you have to make sure the room is active. You can do this using the AFCSDevConsole AIR application that comes with the SDK. It’s also a good idea to make sure your room settings autoPromote guests so that when the anonymous users log in they are given publish access and can actually collaborate with other users. This can be done either in code with the RoomSettings tag or inside of the AFCSDevConsole.

afcs_dev_console

External Authentication
The most common use case is integrating your own authentication system with Adobe Flash Collaboration Service. AFCS uses a token system that can be generated using the Account Shared Secret, which is available when you create an account at the AFCS Developer Portal. The SDK comes with code for a number of server side languages including Java, PHP, ColdFusion, Python, and Ruby that help facilitate the generation of the token. In my example I took some of the sample code and scripts and integrated it with a Drupal environment. As a CMS, Drupal has its own authentication system and user administration. I created a basic module that exposes an AFCS chat room if the user is logged into the Drupal system and uses the existing Drupal username in the chat-room so that the Drupal users can chat with each other in real time.

I started off by creating an Admin page for my AFCS module that exposes a set of parameters needed to generate the token. That includes the account, or name, you create when you first sign up for AFCS, the room for this particular application, your Adobe ID username and password, and finally the shared secret.

afcs_module_settings

Now that I have those variables I can generate a token and set up the session. Using the scripts provided in the SDK it’s easy in PHP to create a new AFCSAccount object, log in, and get the session token.

$host  = "http://connectnow.acrobat.com";
$accountURL = "{$host}/" . variable_get(afcs_account, 'test');
$roomURL = "{$accountURL}/" . variable_get(afcs_room, 'test');
 
 
$account = new AFCSAccount($accountURL);
$account->login(variable_get(afcs_user, ''), variable_get(afcs_pass, ''));
$session = $account->getSession(variable_get(afcs_room, ''));
$token = $session->getAuthenticationToken(variable_get(afcs_secret, ''),$user->name,$user->name,50);

The variable_get functions are Drupal-specific but the code should be easy to follow. We first build the full roomURL based on the account and the room name. Then we login with our username and password and finally create a session based on the room. the getAuthenticationToken method takes the Shared Secret and the name that will display to all of the other connected users. The last parameter is the role, which is a number from 0 to 100 and tells AFCS what the user can do. 100 is a full host and 50 allows users to publish content and collaborate.

Now that we have the token and the roomURL we need to somehow get that into the SWF file. The external authentication example that comes with the SDK and my Drupal example both use FlashVars, which are read by the Flex application and then used to authenticate and set up the session. When the application finishes loading I call the Application.application.parameters object to start the session.

[Bindable]
public var authToken:String;
 
[Bindable]
public var roomURL:String;
 
protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
     roomURL = Application.application.parameters.roomURL;
     authToken = Application.application.parameters.authToken;  
     cSession.login();
}

From there on out it’s a typical Flash Collaboration Service application that uses our token.

<rtc:AdobeHSAuthenticator id="auth" authenticationKey="{authToken}" />
<rtc:ConnectSessionContainer id="cSession" roomURL="{roomURL}"
authenticator="{auth}" autoLogin="false" width="100%" height="500"]]
     <mx:HBox width="100%" height="100%"]]
          <rtc:SimpleChat id="chat" width="80%" height="100%" />
          <rtc:Roster id="roster" width="20%" height="100%" dataProvider="{cSession.userManager.userCollection}" />
     </mx:HBox>
</rtc:ConnectSessionContainer>

Hopefully that provides an example of external authentication. If you want, you can download the Drupal module that I created here. It’s still in the very basic stages and I’ll be adding to it down the road but it does show off how to use Drupal authentication in your Adobe Flash Collaboration Service applications.

Two New Open Source Projects at Adobe

Today we’re announcing two more projects going up on opensource.adobe.com and becoming part of the open source family at Adobe. The first is the Text Layout Framework, which comes from some of the advancements we made in Flash Player 10 to improve text support in Flash Player. The other is the Open Source Media Framework, which was known by the codename “Strobe” and provides a robust framework for media playback of any kind (video, audio, dynamic SWFs).

The Text Layout Framework (TLF) is something that’s going to be a huge boon to developers. If you’ve been working with text in the new Flex 4 components then you’ve been working with the Text Layout Framework. If you haven’t seen the demo you can check it out over on Labs. It was created by a group that is just a few blocks north of me and does a great job of showing off the features of the new TLF. Now that the Text Layout Framework is open source you can push, pull, and extend it to your heart’s content. A great example of this in action is the New York Times Reader and the Boston Globe Reader – both of which wouldn’t have been possible without the Text Layout Framework.

The other project we’re releasing is the Open Source Media Framework (OSMF). I’ve been digging into the documentation a bit and I’m excited about what this means for rich media and the Flash Platform. The OSMF includes hooks for any kind of media type the Flash Player supports including images, audio, SWF content, and of course video. Using the framework you can create your own media players and the OSMF provides a set of powerful baseline functionality. It has hooks for creating your own plug-ins for metrics, advertising, and other functions. It has support for both progressive download and streaming built in as well as all of the video controls and functionality. And there isn’t any UI associated with the OSMF so you can integrate it into your application however you want.

I encourage you to download the source code and check out the samples. There are some good examples that show how to go about building plugins, how to use the composite media features (so you can support a number of different media types in one player), and how to build UI components on top of the framework.

Are you Bored With Adobe AIR?

Sarah Perez over at ReadWriteWeb has a post up titled Are you Over AIR Applications in which she talks about her change in perspective on the value of AIR and how much benefit desktop applications provide over browser applications. It’s a pretty good post, and one that I hope drives some traffic and conversation, especially as we’re hearing more about things like Chrome, Firefox 3.5, and the Chrome OS.

For much of the past couple of years web applications were trying to mimic basic aspects like functionality and look and feel of desktop applications. That drove the movement towards RIAs and the shift made it painfully obvious that the browser in its current form wasn’t up to snuff. So more and more energy went into improving the browser so that web applications could compete against their entrenched desktop counterparts. We’re finally seeing releases from all that work. Firefox 3.5 looks to incorporate HTML5′s support for offline mode. Chrome was written from scratch because Google felt, basically, that the current browsers weren’t powerful enough to run complex HTML/Javascript based web applications. So what benefits does AIR have in this world? I agree that desktop applications as we know them are falling by the wayside, but AIR still has a few areas I think make it shine.

Web Technologies
One of the best parts of AIR is that it uses web technologies like HTML/Javascript and Flash. Web developers are a creative and innovative bunch. I’d argue that one of the main reasons Web 2.0 exploded the way it did was because web developers took to their destiny as the drivers of technology. Web development is relatively easy to learn but complex enough to keep the challenges coming. It’s also more productive than traditional languages because it’s both faster and it’s cross-platform. The strength of web development is a strength of AIR. Look at the first wave of a game-changing technology like Twitter. Almost all AIR applications. That’s because web technologies are easy and AIR made it very simple to quickly create a new kind of experience for a new kind of service. Tweetdeck and Twhirl got a first mover advantage and reaped the rewards. The development speed that the web allows for shouldn’t be discounted.

Notifications and Files
I think notifications, or the “toast” windows that you can pop up in AIR are more and more important as the web gets more real time. People want the firehose and they want it as soon as they can get it. Another area that I think AIR hasn’t been used enough for are filetypes. It’s incredibly powerful to be able to not only create items on the file system but to associate those with your applications. So far there hasn’t been need to create things like a .twitter file extension, but the next generation of web services may see big benefits from users being able to create those extensions. And of course with the file system you get some inherent benefits like the ability to tie into Spotlight or other desktop searches.

Ultimately I think both the browser and a more web-centric approach to desktop applications will succeed. The cross platform benefits, the improved developer productivity, and the close integration with web services are going to be instrumental in driving adoption for web applications both inside and outside of the browser. I hope AIR continues to do well and help drive innovation for web applications on the desktop. Seeing technologies like Google Gears and Titanium’s Appcelerator prove to me that the space is still growing and that we’ve got a lot of demand for a blend of web and desktop. And we’ve got a lot of enhancements coming up in the next version of AIR, so we’re not standing still. Stay tuned.

Google’s Chrome OS, Netbooks, and Rich Internet Applications

The big news of the night is that Google is building an operating system (no, not Android) that’s based on Chrome. I’m not entirely sure of all of the details but I think it’s cool at first glance. It sounds like it’s going to be designed initially for netbooks and I like how they describe the OS:

Speed, simplicity and security are the key aspects of Google Chrome OS. We’re designing the OS to be fast and lightweight, to start up and get you onto the web in a few seconds. The user interface is minimal to stay out of your way, and most of the user experience takes place on the web. And as we did for the Google Chrome browser, we are going back to the basics and completely redesigning the underlying security architecture of the OS so that users don’t have to deal with viruses, malware and security updates. It should just work.

I think Google gets it: Netbooks are going to be huge and they’re going to be a place where the web can “beat” the desktop. In a lot of ways they’re the perfect combination for the next generation of the web. The devices are small, portable, probably going to be connected most of the time, and have memory and resource requirements that require an optimized experience. I love Windows 7 and think it’s beautiful, but I do wonder how well it will run on netbooks. Microsoft seems tepid in how much it’s going to support or encourage netbook use.

Netbooks: A Boon for Rich Internet Applications
But people moving to the web-centric netbook experience are going to want a close approximation to the desktop environment. User experience is still going to be important on these small devices. We’ve seen how important a great user experience is (and how much of a selling point it is) with the iPhone. Google is a lot of good things but they aren’t user experience gurus and they don’t get design.

So what fills the gap? If only we had a good, lightweight layer for this new operating system that could play video, support games, enable real time communication, and let developers create beautiful user interfaces that felt like desktop applications with a much smaller footprint. Oh wait, we do, it’s the next generation of rich Internet application technologies like Flash and Silverlight.

Isn’t the netbook: a hybrid mobile and PC device, the perfect fit for RIAs: hybrid web and desktop technologies? You get the audio/video aspect, a framework for building very rich user interfaces, real-time web connectivity, and an existing ecosystem of developers and designers. All in a small package that’s meant to run with less resources than a full operating system requires.

I think netbooks are going to be a big deal for RIA developers. I think it’s a large addressable market and things like Adobe’s work with ARM to optimize Flash for their chipset are going to pay performance dividends in a big way. Throw in the cross-platform aspect and you’ve got the perfect way to build applications for a hybrid web-desktop-mobile device like the netbook.

Pooneekay Vatsoom Ahdtuih

Tech Talk with Ryan Stewart on REST APIs in AFCS

This was posted a couple of days ago but I forgot to blog about it. I got a chance to talk with Raffaele Sena on the Adobe Flash Collaboration Service team about some of the things you can do with the REST APIs that we expose in AFCS. You can use any language you want (the SDK comes with the biggies including Java, PHP, and ColdFusion) to manage rooms and integrate authentication into your own environment. Make sure to check out the AFCS forums if you’ve got any questions.

Flash Builder and Flash Catalyst Betas Now Available

Flash Builder Flash Catalyst LogoWe just dropped the bits for both the Flash Builder beta and the Flash Catalyst beta. These represent a big jump in how people are going to work with the Flex Framework and I’m happy to see the hard work of the teams now available to everyone. So grab the bits and start creating some Flash content. Important: If you installed the MAX public beta, check the bottom of this post for some instructions that will help you through some install problems that may come up.

Keep in mind that we’re still early for both Catalyst and Builder. We won’t have everything we want in Catalyst 1.0 but this beta represents a HUGE step over what some of you saw at MAX last year so we’re making a lot of progress. It’s snappy, it’s tightly integrated with the CS4 tools, and it opens up a whole world of design centric tooling for the Flex Framework. What makes this all possible are the fundamental changes to the Flex SDK for Flex 4. We’ve completely separated the logic from the look of a component which means designers and developers can collaborate without stepping on each others toe’s. We’ve abstracted the layouts so you can dynamically change the layout of components creating some very cool looking components. We’ve integrated Flash Builder with a lot of your favorite backend technologies so it’s easy to consume and generate services to connect to data.

I’ve created a screencast to help people check out the new features. It goes through the workflow of moving from a PSD to Flash Catalyst and on to Flash Builder when you want to bring in real data.

Flash Catalyst Tutorial

There are a lot of resources to make sure you get up to speed quickly using the new tools. Here’s a good list:

If you’re having trouble uninstalling the MAX preview and installing the public beta, give these steps a try:

  • Uninstall Catalyst
  • Download the Mac version of the Repair tool from this page: http://www.adobe.com/support/contact/licensing.html
  • Run the Repair tool with the default options.
  • After the Repair is complete, re-install Catalyst and enter the SN when prompted by the installer.

Introducing Presentations on Acrobat.com Labs (With Screencast)

Tonight we released a beta version of Presentations on Acrobat.com Labs. As you’d expect it lets you create presentations with the same collaboration features that we have in Buzzword. It also has a very similar user interface so if you like the Buzzword UI you’ll feel right at home with this one.

Acrobat.com Labs

I did a quick screencast (embedded below, but the link is better) that walks through some of the functionality. It was quick and dirty so it’s a bit rough around the edges but it does a pretty good job of showing everything off. I hadn’t played with this until today but I’m impressed with how full featured it is. When you combine that with the power of collaboration I think there are some exciting opportunities that open up. Congrats to the Acrobat.com team.

Pandora Nails it: Pay a Premium for the Experience

pandora_oneWhen we first started talking about AIR I envisioned it as a way for web application developers to create a premium experience around their content. Ideally that premium experience would be worth the money and AIR would help with the “freemium” models out there. It looks like that’s exactly what Pandora is doing with Pandora One. The new service costs $36 a year and you get not only higher quality streaming with no advertisements but also the option to install an Adobe AIR-based desktop application so you can break out of the browser.

AIR was never meant to replace web applications or the browser. It was created so that web developers could take their skills and build web-centric desktop applications. The Pandora One model is a perfect example of why that can be so beneficial. Taking a lot of the same code, the same developer skills, and the Pandora brand they’re able to very quickly provide a premium experience on the desktop that people are willing to pay for.

Awesome move by Pandora.

Demo of Real Time Facebook Collaboration with the Flash Platform

Today we announced that we’re going to be working with Facebook to help Flash Platform developers continue to create great applications on the world’s best social platform. You can find a lot of good developer information on our new Facebook Developer Center. Since we’re dealing with social content, I figured it would be fun to combine Adobe Flash Collaboration Services and Facebook for a real time social collaboration experiment. Using the excellent getting started tutorial and AFCS, I created a simple app. When you load it, you’re a guest and you can see people using the whiteboard, chatting, and sharing files. If you want to collaborate with everyone else, you need to log into Facebook. The application pulls your name and geographic information from Facebook and lets you publish content. The application is here and you can grab the source files here. You’ll need to make sure pop-ups are enabled to connect to Facebook.

As I said, the application is pretty basic. I’m using default pods from AFCS and the basic Facebook authentication. The only thing remotely unique is that I’m pulling in the user data from Facebook and using the AFCS APIs to change the APIs:

public function onConnect(event:FacebookEvent):void
{
var call:FacebookCall = facebook.post(new GetInfo([facebook.uid],[GetInfoFieldValues.ALL_VALUES]));
call.addEventListener(FacebookEvent.COMPLETE,onComplete);
}
 
public function onComplete(event:FacebookEvent):void
{
fbUser = (event.data as GetInfoData).userCollection.getItemAt(0) as FacebookUser;
cSession.userManager.setUserRole(userId,UserRoles.PUBLISHER);
cSession.userManager.setUserDisplayName(userId,fbUser.first_name + " " + fbUser.last_name + " (" + fbUser.current_location.city + ", " + fbUser.current_location.state + ", " + fbUser.current_location.country + ")");
}

The first function gets called when we connect; we use the new AS3 Facebook library to get information about the user. Then after that is complete, we set the user data to a FacebookUser object and use the AFCS APIs to change the user name and the room “role” so that the user can publish content to the room.

I kind of threw this together at the last minute, so expect bugs. I apologize in advance if (when) you run into them.

The Cursor as the Ultimate Game Changer

It’s rare when I can apply my love of the Sports Guy to my day job but today I can. Bill Simmons had his boss on his podcast to talk about new media. Kind of random for a sports podcast, but hey. One of the things they touch on is the death of the newspapers and what makes the web so great. He had a pretty simple answer – the cursor:

You look at where the internet is today and I don’t think we’ve realized anywhere near the potential of this medium. The uniqueness and the eccentricities and the unique qualities of the cursor and what the cursor can do. It’s not just interactivity. They can create things that the cursor can make really interesting. The NBA trade machine on our website is fantastic. And it’s a unique thing that can’t be in other mediums.

I think he did a great job of nailing why I’m so excited about RIAs. Especially when you abstract “cursor” to anything – touch gestures, mouse clicks, whatever. The medium we have is 1) still at the very early stages and 2) a more interactive medium than we’ve ever had before.

This is why it’s so important to be able to create great looking content. You’ve got a wider audience than you’ve ever had before and tools that help create that unique experience. The key should be to get the most inspirational and creative people in the world thinking about the cursor. They’ve got the canvas but we need to help them with the tools to make their creativity become an interactive reality.

That’s why I’m so glad to be at Adobe. We do design tools. And if we can bring our design community to bear on the development world then we’re going to completely change how people think about this unique medium. It’s why a company like Microsoft, that knows developers, is so desperate to get designers. Both sides matter, but the interactivity of the internet requires design skills to take it to the next level. I’m excited to see what you guys come up with.