Appreciating Tricks Because of What They Can Represent

Jeff Croft has a nice riff on some of the responses he got when he tweeted about what Steven Witten has done with his site, acko.net. It’s an insanely cool piece of CSS and 3D work and Steven did an informative writeup

It’s fascinating to see some of the anti-Flash attitudes manifest themselves in the new world of a very rich HTML5. And I think it goes to show that a lot of the animosity towards Flash was rooted in a very strict interpretation of what is “good” when it comes to UX and UI. I don’t even think that’s entirely wrong, but I do think that some of it misses the point. As Jeff noted, you have to have experiments like this that show off the technology. This kind of thing inspires people to think beyond the gimmick and potentially implement some of these ideas in a more usable and meaningful way. It also does a disservice to the fact that things like this make the web a more beautiful place. This isn’t “design” in the traditional sense. But it’s still art, and art should be celebrated. Most of the things I’ve seen on Twitter were pretty positive about the site and appreciated it, but the opposite reaction from a lot of the web standardistas was, as Jeff said, disappointing.

My plea for the potential creators of things like this is to not heed the mindset that because you’re using open standards you need to adhere to the unwritten rules of UX/UI design and what’s “good”. The open web is at the beginning of what is going to be an amazingly creative period. With technologies like CSS3 and Canvas, the open web has the building blocks in place to harness a lot of creative energy. That is going to take many forms and some of it won’t seem as useful as other bits. But it’s all part of a process, one that we saw with Flash, that ultimately leads to better ideas, better implementations, and a better web.

2 Upcoming Presentations on HTML/JS/PhoneGap

I’ve got a couple of presentations coming up to Adobe user groups that are going to focus on HTML and PhoneGap.

The first one is in Las Vegas on December 7th. I’m doing an HTML5 Happy Hour and covering some of the cloud apps, what Adobe is up to with HTML, JavaScript, and of course Dreamweaver and PhoneGap. It should be a lot of fun. It’s at McMullen’s Irish Pub and starts at 6:30.

The second one is in January, at the newly rebranded Seattle Web App Developers Group. There I’ll be covering PhoneGap. This used to be the Flex Group so the presentation will take a bit of a Flex-centric slant, but I’m hoping to show Flex developers some of the fun parts of PhoneGap.

Slides and Demo from Mapping/Geolocation talk at Flash and the City

I gave a presentation on Mapping and Geolocation with the Flash Platform today at Flash and the City. Below I’ve embedded the slides and you can download the PDF here. When I get some downtime today I’ll be uploading my demos as well.

The Locked iPuzzle

So the iPad came and as expected, everyone can’t stop talking about it. I was cautiously optimistic about Apple’s tablet. I’m a sci-fi fan with a gadget fetish and I was loving the idea of carrying around a computer tablet just like they do in all of the latest science fiction movies. And Apple has a way of completely turning the computing world upside down. They have an elegance and polish that makes the intersection of software and hardware a nirvana.

Part of that is because they rule their platforms with an iron fist. The iPhone is obvious. It’s arguably the most closed platform in recent memory. Every application has to go through Apple’s approval process, can only be listed on Apple’s store, and Apple takes a cut. It’s a fantastic device, it provides developers a way to make money, but it is incredibly closed and arguably bordering on big brother. But OS X isn’t perfect either. While I can install my own applications and control my own settings, things like getting the right APIs for Flash Player to handle video or multi-touch aren’t possible.

The iPad Cometh

So when the iPad was released and it was just a bigger iPod Touch, I was incredibly disappointed. If this is the future of computing then we’ve already lost. Apple is taking total control to a new and unfortunate level. It’s the same pay-to-play model as the iPod Touch so that you’ll be buying your applications from Apple (so they can take their cut), buying your videos and music from Apple, buying your books from Apple, and dealing with their DRM for all three. The ultimate lock-in.

The Honey Trap

This is what bugs me. As an evangelist I’m annoyed Flash isn’t on the iPhone. But as a user, I’m terrified that Apple has put a vice grip on getting content on my devices. It used to be that when you bought a device, you owned it and could basically do whatever you want with it. The model of the iPad and the iPhone is the opposite of that. You’re essentially paying for a device that then gives you the privilege to buy content from Apple. The honey pot of a seamless software-hardware experience has become a nightmarish trap that keeps you stuck and struggling.

As Mike Chambers said better than I can, having some support for HTML5 in Safari doesn’t make an open platform. One of the great parts of the “open web” is exactly how open it is. Anyone can put up any piece of content, at any time, without asking for permission. The web is accepting of Flash content, HTML content, Silverlight content, numerous video and audio codecs, and other plug-ins. Users have the ultimate choice about what they want to see and how they want to see it. That ecosystem has led to a lot of great, free content like games, video, and applications.

Which is why Apple has locked down the device. They can’t make money off of free. And instead of giving users choice and opening up their devices, they’ve decided to lock it down. The iPhone and iPad are each great pieces of technology and Apple deserves to make money off of them. But they could be so much better if they were open. The number of innovative things that an open ecosystem could do with this technology is mind-boggling. But that won’t happen because the only ideas that will see the light of day are ideas Apple lets through.

We’ve come a long way from 1984, but obviously not long enough.

UcompOS Rich Experience Framework

I’ve spent quite a bit of time talking with Ed Mansouri (who was behind the O2Apps site when AIR first launched) and he’s been working diligently on something called the UcompOS Rich Experience Framework. It’s an impressive bit of code and it’s also one of the best examples of HTML and Flash integration that I’ve seen inside the browser. The premise is pretty simple. He defines it as a platform that lets you build Rich Portal Applications. At first glance it looks a bit like an operating system inside a browser, something that Goowy tried back in the day. And it does kind of fit that model, but don’t let the “OS” look turn you off, there are some cool integration points.

ucompos_picture-1

He’s made it very easy to create portlets out of either HTML or Flex/AS3 and then made everything configurable with an XML file. So it’s incredibly easy to add new pieces to someone’s portal. He also has some cool integration with Adobe AIR. You can either deploy apps in Adobe AIR or you can use the Adobe AIR helper application to provide some native functionality in the browser. For instance it’s very easy to expose files to the UcompOS framework via AIR’s file APIs.

He has a ton of video tutorials up as well as a wiki and forum for questions. It’s well worth checking out if you’re looking to build something complex on top of a portal-based framework. It’s a great example of a lot of web technologies coming together and a great building block on which to create your own stuff.

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.

Fun with Flex 4 Skinning and the ToggleButton

I’ve been having a blast with the new Flex 4 skinning model and the flexibility/customization it provides. One of my favorite components to mess with is the ToggleButton because it’s so basic (either on or off) and yet pretty complex when you get down and dig in. It extends ToggleButtonBase which extends ButtonBase so it has the typical up/over/down/disabled states but because it’s a ToggleButton it also has the selected equivalent of all of those. That ends up making it difficult to do transitions between states because the transitions between the interim states like down to downAndSelected are so short. And if you roll off of it or move the mouse it fires an over state so the transition will look jerky.

Even with this limitation you can have some fun. When creating a transition between on and off you primarily want to deal with the over and overAndSelected states. Creating transitions between those two states will let you create something custom as the ToggleButton moves from the off state to the on state. And since the new Flex 4 component model lets you swap out skins at runtime it’s easy to create some interesting themes on the traditional ToggleButton. You can check out the SWF below (with source enabled) to see what I mean. And the code is very straight forward. The only variation is in the skin files:

<s:states>
	<s:State name="normal" />
	<s:State name="text" />
	<s:State name="beer" />
	<s:State name="coins" />
</s:states>
<mx:ComboBox id="cb" y="5" x="0" change="this.currentState = cb.selectedLabel;">
	<mx:dataProvider>
		<mx:ArrayCollection>
			<fx:Object id="normal" label="normal" skinClass="{spark.skins.default.ToggleButtonSkin}" />
			<fx:Object id="text" label="text" skinClass="{components.TextToggle}" />
			<fx:Object id="beer" label="beer" skinClass="{components.BeerToggle}" />
			<fx:Object id="coins" label="coins" skinClass="{components.CoinFlip}" />
		</mx:ArrayCollection>
	</mx:dataProvider>
</mx:ComboBox>
<s:ToggleButton id="toggle" y="100" x="0" skinClass="{cb.selectedItem.skinClass}" />

Some notes:

  • A selected beer is an empty beer.
  • Notice in the code above that skinClass is a bindable attribute. Makes it easy to swap in and out.
  • Be careful when you move the mouse after clicking the ToggleButton or some states won’t play correctly.
  • When clicking the coin, keep the mouse towards the top of the coin and don’t move it or you won’t get the effect.

Adobe’s Kevin Towes Makes the Streaming Media All-Stars List

This is pretty cool. Every year Streaming Media picks an all-star team that consists of some of the most influential people in the world of online video — people who have made a big difference in bringing, creating, and distributing video on the web. The list this year is a great one with folks like Jeremy Allaire from Brightcove, Jason Kilar, the CEO of Hulu……….and our own Kevin Towes, the product manager for Flash Media Server.

It’s been really fun to watch as Flash has completely changed how people watch video on the web. The FMS team deserves a lot of kudos for enhancing and optimizing the video experience for everyone, and wins like MLB.com or Hulu are a good indication that we’re doing something right. So congrats to Kevin and everyone on the FMS team. Here’s Kevin’s card and responses to some Streaming Media questions:

towesKevin Towes, Product Manager, Adobe Flash Media Server, Adobe Systems, Inc.

Previous job titles:

  • Principal Consultant, New Toronto Group
  • Co-Founder, Pangaea New Media
  • Director, Juno Awards Online
  • Professor Media Arts, Ryerson University, Toronto

Proudest achievements:
-Juno Awards Online broadcasts (1996) – Fresh out of University with lots of ideas, I worked to help bring the Canadian Music Industry online starting with the annual music awards show, the Juno Awards (equivalent to the Grammy’s in the USA). We set up shop next to the broadcast trucks with direct access to the top names in Canadian Music including Alanis Morissette, Sarah McLaughlin, Shania Twain, Maynard Ferguson, Oscar Peterson, Tragically Hip, and many more. We worked with early streaming technology like Progressive Networks (now Real) to provide the postage stamp video over dial up modems – Our first event hosted 25 concurrent streams growing to over 200 (which at the time was huge).

-Emmy Nomination (2002) – CBC (Canadian Broadcast Corporation) Vancouver hosted a daily program live called “ZeD uncut” – ZeD was a new-age show that toyed with “interactive” and culture blending film, music, television, text, image and interactive together to form a 1 nightly program across the nation’s network. I worked with the CBC Vancouver team to create “the Wall” – an interactive place that users could use their webcam to place their video stream to be invited to join the live television broadcast from their living room. We also created video-based instant polling and real time chat. Tens of thousands of people participated during the lifetime of the show and became what we know today as the social network.

-Flash Media Server 3 and 3.5 (2008) – Hosted by the top 20 CDN’s worldwide and responsible for driving higher quality, and higher valued video experiences we’ve come to expect from the web. Helping to drive experiences such as Masters.com, NFL.com, MySpace.com and uStream.com – FMS is a vital part of the video experience on the web today. I wrote the first book on Flash Media Server back in 2001 and I would rank my participation in these new releases as part of my top achievements in the Streaming Media industry.

Next big thing:

  • The future of Flash Media distribution and Video on the Adobe Flash Platform (increasing quality, capacity, security, engagement and the overall experience)
  • Helping people find new ways to “interact” with video experiences through technology like DVR and video chat
  • Helping content owners (and the industry) find new revenue streams with video on the web