My first real job in this industry was doing DHTML at AOL/Netscape. Now this was during the peak of browser-compatibility headaches. There was IE 5, Netscape 4.7 along with the new Netscape 6 (yes they skipped version 5 to catch up with IE) and Mozilla browsers. Adding to the madness was the AOL client application, which contained a modified version of IE 4. I credit this job for getting me interested in Flash. I was fed up of dealing with browsers and just wanted to create a single experience that would work everywhere. Well those days are quickly coming to an end, regardless of whether you use Flash or do HTML development. Below are some of reasons why things are shifting.

Mobile Flash is different than desktop Flash
You often hear people talking about the idea of developing once and deploying to every device. That sounds nice but it isn’t realistic. The real story is that you can create 80% of your application once, and then spend the remaining 20% of your time creating UIs that work well on the various devices. For instance, mobile devices obviously do not have as much horsepower as your quad-core tower. So once you get Flash Player 10.1 on your phone, don’t go to the FWA and expect those sites to run like they do on your desktop. Because of that you will need to do a lot of optimizations that you wouldn’t ordinarily worry about with desktop Flash. The UI of your application will also have to be optimized for smaller screens and will have to be touch-friendly, meaning not relying on things like roll over. Luckily Flash now has full support for multi-touch and gestures so you will be able to create some really innovative experiences. Adobe will also be disseminating some great resources about how you can best optimize content for mobile devices.

The app revolution
I always talk about how revolutionary I think the iPhone has been, but not necessarily because of the technology. After all, multi-touch has been around for a long time. But the concept of having apps for everything you do versus doing them in the browser is something that has caused a real shift in the way we interact with the web. Personally I love this approach for the iPhone, but I’m much less excited about that approach for the iPad. I buy apps for my iPhone like it’s a bodily function. I have never been convinced that having Flash on the iPhone would really cut into the app store business, although I think Apple strongly believes this. Browsing websites on a phone is never really a great experience unless sites have created mobile-optimized versions. But even then, they are usually a lackluster version of the full site with a subset of the content available. Android is also a very app-centric environment. So what does this mean for web developers? It means that in addition to your full website, you may be asked to create an iPhone application, an Android application, and a version for mobile browsers. This will be made slightly easier as tools like Flash CS5 will have the ability to export a single application for multiple devices.

Cutting edge browser plug-ins are here to stay
Over the past week I’m sure you’ve heard a lot of ridiculous statements about Flash being dead or that it will be replaced with HTML 5. That is pure nonsense to put it mildly. If those people actually read some of my earlier posts they would understand that I believe HTML 5 will eventually be able to fulfill certain roles on the web that Flash has traditionally been used for. But during the time it takes for that happen, Flash will continue innovating and pushing the envelope of what is possible on the web. Flash has always been the environment of choice for developers who want to create the experiences that will become the standards of the future. Open web standards are a great thing but they move at a very slow pace. The advantage of plug-ins is that they can rapidly add new features and innovate without the need for waiting for the browser manufacturers to get their act together. This is not just true for Flash, but also for other plug-ins like Unity3D and Silverlight. So there will always be a huge demand from companies for cutting-edge content as they attempt to differentiate themselves from their competitors. Just look at all the companies creating augmented reality applications now. This will create the need for some developers to create a cutting-edge experience site using Flash, a standards-based website using HTML 5 for devices like the iPad (assuming Apple doesn’t come to their senses), and standalone applications for devices like the iPhone and Android.

The explosion of web-connected devices
For me, the iPhone has literally transformed the way that I interact with the online world. I pay my bills, moderate my blog comments, track my workouts, and interact with social media from my phone now, rather than my laptop. Now of course I still need my laptop as well for countless things that aren’t appropriate for a mobile device. But in addition to that there will be a whole slew of other devices that will be coming like tablets, internet-connected TVs, set-top boxes, and gaming consoles. All of these devices will consume web content and may require using a host of different programming languages and graphics technologies.

If I had to give advice to young people who are thinking about getting into this field, I would warn them upfront that they will need to spend countless hours keeping up with all of the new technologies that will sprout up, seemingly overnight. To put it mildly, this is not a field for lazy people. The positive side of all of these changes is that none of us should have a problem finding jobs in the future, regardless of what technology you specialize in. Unless of course you do stupid things like posting screenshots of porn on your blog . As the internet permeates itself onto every surface imaginable, there will be an increasing need for developers who understand this certifiably insane industry in which we all work. So no matter what role you play in building the internet, things are about to get more and more challenging.

Lee

Lee

Official Flash on the Beach Speaker Bag
This is an unused Timbuk2 messenger bag (sorry John). It even still has the tag on it.

Big Pile of Foreign Money
Collected over the last two years of evangelism travel. Includes money from Australia, Singapore, Mexico, Costa Rica, and more. Even includes some cool coins with holes in them. No idea of the total value and I’m too lazy to try to figure it out.

Raw DV Tapes from the OnAIR Tours
These tapes are filled with footage from the US and European OnAIR tours. Who knows what kind of material might be on these tapes.

Essa Porra! T-Shirt
It’s the phrase that is sweeping across Brasil. One of only two made by me on SpreadShirt. XL American Apparel shirt.

Two Official Dead Drop Coins
Too lazy to compete in an actual dead drop? Then this is the item for you. You get two coins. One to play with and the other to store for safe keeping.

My Old iPhone 3G
Used extensively during my first year on the evangelism job. I now use a 3GS. I have used this one to view countless blue legos. Jail break this puppy and have fun!

Flash Speaker Badge Collection
A huge stack of official speaker badges from conferences like Flash on the Beach, FITC, MAX, FlashPitt, and many more. All have cool lanyards including the one from MAX with the built-in USB key.

Big Ass Sticker Pack (BASP)
Large collection of stickers (more than is shown here). Includes the original stickers from the OnAIR tour, Lynda.com, Flickr, Yahoo, Wordpress, and other must haves.

Give generously so we can do our part for Haiti,
Lee

Even though I obviously disagree about Flash, I have to say that I actually admire Steve Jobs. He sticks to his guns and doesn’t waver. I respect that in a person, and that’s no joke.

At least now I can get back to some real work. Flash on!
Lee

1. Is there a definitive reference for both the video tag and the JS API used to communicate with it?
2. My assumption is that each browser provides a default set of controls. Can these be modified or do you need to start from scratch?
3. How do you do true streaming with the video tag (i.e. not progressive download)?
4. Is it possible to provide some form of DRM protection for video in HTML 5?
5. Is there a tool that is optimal for encoding Ogg videos for Firefox?
6. I remember reading that you can seek to any part of a video even if it hasn’t been downloaded yet. Is that true and if so, how is that achieved?
7. Is there no hope for IE ever supporting the video tag?

Thanks in advance for the respectful commenting
Lee

There seems to be a lot of talk going on lately about this so I wanted to give my thoughts. This topic is actually quite a confusing one to think about. Let me first address the iPhone side of this so we can get to the real meat of the issue.

The iPhone does not support Flash video, or any other type of Flash for that matter, so you obviously need an alternative. In my last post I showed one approach for providing alternative videos for iPhone users. But this really doesn’t relate to HTML 5 at all. The iPhone plays video in its standalone player so you will not be able to view video embedded in the page. So for the iPhone, unless something changes, you need to provide an iPhone-compatible video file for your users to watch.

Now with the iPhone out of the way, we can now look at the real issue. YouTube released an HTML 5 demo of its player quite a while ago and are now testing this on their site. Vimeo, which is a lesser known video site, also launched a beta HTML 5 player as well. This should not come as a surprise to anyone as it is in their best interest to get ahead of the curve with HTML 5. If you are in a supported browser, HTML 5 video playback can be very smooth and less CPU-intensive than Flash. For basic video playback, I see HTML 5 as a great option down the road. Of course, the issue for me always comes down to browser compatibility.

The video tag works in Safari and Google Chrome. You can get it to work in IE if users install Chrome Frame. This is fine for developers, but the masses more than likely won’t be willing to do that just yet. So in reality, Firefox and IE both do not support HTML 5 video. Firefox seems to be doing its own thing, requiring you to use the Ogg video format, while Safari and Chrome support H.264. Go over an read this great write-up on HTML 5 video to see the splintering of the various video formats and browser support. If you want to deliver video to every browser without having to encode multiple video formats and creating alternative markup, then Flash is the way to go.

Now this is not to say that in the future, maybe they will all agree on an implementation. If that happens and it performs better than Flash, then that is how I will be delivering my videos as well. But another thing to point out is that Flash video is used for a lot of things beyond basic playback. Flash supports embedded cue points and alpha channels and is often used in ways beyond the traditional YouTube playback scenario. So while HTML 5 video looks promising, it is clearly way too early for people to be writing an eulogy for Flash video. Remember also that while the browsers get their acts together, Flash video will continue to evolve as well.

Lastly, I would like to dispel the notion that Adobe is somehow against HTML 5. On the contrary, we see it as an exciting development for the web and have our own plans for tooling surrounding it as well. I have always preached to people that they should only use Flash for things that are appropriate. Sites that overuse Flash and provide poor experiences are worse for us than sites that don’t use it at all. Of course there are plenty of JavaScript nightmare sites out there as well.

After getting back from Brasil, I started a new personal blog called Essa Porra. In one of the posts I showed a video of some of the beach jiu-jitsu that broke out down there. I used Vimeo to host the video. Now they recently announced a beta HTML 5 player but it doesn’t work for embedded videos so I decided to provide my own iPhone alternative. The actual steps are quite simple.

First you will most likely need to encode a version that will play nice on the iPhone. I used Handbrake to create it by choosing the iPhone/iPod preset. Now you also have to check off the Web optimized option if you want it to progressively stream. The next step is to get a photo from the video to show if the user is coming from the iPhone. It should have some type of icon showing that it is playable. I chose a simple white triangle. You can see the final result on the iPhone below.

Now you need to provide a little bit of JavaScript logic to check for the iPhone browser and change the content of the page. I took the Vimeo embed code and wrapped it in a div with an id of jj. In the JS code I remove the embed code if the user is coming from an iPhone and replace it with the image. The image is hyperlinked directly to the video file I encoded using Handbrake. This will make the video play in the standalone video player on the iPhone.

Lee

It’s that time again. Leave your questions for Adobe in the comments in this post and I will make sure that they get answered. Starting with the last episode, these will now be answered live on UStream so stay tuned for the date and time. No question is out of line or off limits.

Lee

How many touch points can the Flash Player respond to?
There is no limit to the number of touch points you can have. You are only limited by the number of touch points the device you are using has. The HP TouchSmart has a maximum of two touch points and the iPhone has five. All depends on the device you are touching.

The gestures are nice but what about the raw touch data?
The examples I showed used the built-in gestures that we provide. These will be good for most applications. But there is also a raw multi-touch API as well that lets you track the raw point data.

Can I create my own custom gestures?
Absolutely you can. You would listen for the raw touch events rather than the high level gestures. You can track this raw data until you determine the custom gesture has happened and then fire your own event.

Does every device support all of the gestures in Flash Player 10.1?
Nope. Again you are at the mercy of whatever device you are using. We do have an API that allows you to find out which are supported on the device at runtime so you can do something else. Christian Cantrell has a great article on the developer center that lists which devices support what. This article also has some nice code snippets too.

Does the multi-touch stuff work in the browser too?
All of the multi-touch and gesture APIs work in the browser on Windows but do not work in the browser on the Mac. I don’t have any idea about Linux but I will try to find that out.

Why don’t they work in the browser on the Mac?
I anticipated this one of course. Jakub Plichta, who is the Flash Player engineer responsible for multi-touch, sent me the following detailed information about what we need from Apple to make it happen. Both Firefox and Safari use the same API to interface with the plugin. What we need is for Apple to add gesture and raw touch data to the NPCocoaEvent class defined in npapi.h in the webkit framework. There is nothing we can do until this happens. Big thanks to Jakub for giving us the nitty gritty details.

Wait but WebKit is open source. Can’t you do this yourself?
You really won’t leave this alone will you? WebKit is open source but the plugin interfaces for Safari and Firefox are written by Apple.

Will multi-touch work in the HTML component in an Adobe AIR 2.0 application?
In this case we have control over the WebKit implementation but because of time constraints we won’t be able to include that in the initial launch of AIR 2.0. But since it works perfectly with Flash-based AIR content I don’t think it will cause too many issues.

Do these APIs work on the iPhone when publishing from Flash CS5?
I’m assuming you saw my last post with the video but just in case, I thought I would put the question here. Yes they work on the iPhone too.

I have Windows 7 but no touch monitor. Can I use a Wacom Bamboo to do the multi-touch stuff?
Unfortunately not. Wacom has there own driver which doesn’t generate true native gestures. If you bought one I hope you saved your receipt . The general rule is: if the device generates raw, native multi-touch events then they will work in Flash.

Lee