I’ve been thinking about video quite a bit recently. One thing that really bugs me is how people tend to treat video as this thing that sits in a box and plays from start to finish. When Flash 8 introduced alpha in video it opened up a whole new range of techniques, and I’ve just spent a little bit of time roughing out a simple (and rather crude) example:

(Warning, 1mb+ and no preloader)

This example is seemingly simple, but there are quite a few steps involved which I will explain below. What happens here is that you can click a colour, and the car’s surface will fill with that colour as it rotates, as if paint were splashing into its existing finish.

So just to explain how I went about this. I took a 3D model of a Nissan Accura into 3DS Max, and rendered out 3 alpha PNG sequences:

1. The specular map for the car body (this shows the highlights/reflections and lowlights), this doesn’t give the desired effect, so if you are a 3DS guru please get in touch, but anyway , we also have…

specular.jpg

2. The normal render of the body. This was used simply as an alpha channel later on, so I could create a solid colour fill that matched the outline of the body of the car as it rotates.

car.jpg

3. The entire model, but the body was assigned a “cartoon” red material along with the background, so that I can later remove the body, leaving just the wheels (as they would appear in situ, i.e. you can’t just render out the wheels because you’d see too much of them as they rotate)

carred.jpg

I took all of these into After Effects to render out some AVIs with alpha channel, and ran them through the Flash 8 video encoder to give me some FLVs.

Finally I downloaded some royalty free video footage of some red paint splattering and keyed it in After Effects so that I could knock out the white background leaving just the red paint.

paint

So with all the raw materials in place, I took it into Flash, and then went about the following steps:

1. Add render number 2 to a layer on top of the plaint splash video, and assign it as the mask, setting both to use bitmap caching. What this does is set one alpha video as an 8 bit mask for another, giving us a paint splash video that stays inside the boundaries of the car body work outline.

2. Add video number 3 to a layer above these, this simply adds shine, wheels and windows on top of our paint splash fill.

3. Add the spectrum graphic. All I do is check for mouse presses, and when I detect one I set the colour of the paint splash using Color.setRGB(). I also have a solid rectangle that I use to colour the body whilst the paint splash is animating (so that the car doesn’t just dissappear), this allows us to have the paint splash into the previous colour.

inflash

This was just a first attempt and not only is it ugly and glitchy, but the process can be streamlined, performance and quality increased (now I have some steps to build on), but hopefully it gets you thinking about using Flash Video in less obvious ways to create new experiences. I’m looking forward to combining some new techniques I’m working on with subtle usage of Papervision3D, it’s a pretty exciting time now that we have so many options and more opportunity to think outside of the box.

Apart from the speed here (it’s very slow). This is a very impressive emulation, showing images, videos, text and search works too. Click through the icons to see the app. Knowing that this would have been very difficult to do using JavaScript as it currently does, my hat goes off to whoever made this (via Mike Harsh).

http://www.vista.si/main.htm

Plugin for windows

Plugin for mac

I’ve just been informed we have another free full chapter from Foundation Flash for Mobile Devices (FoED) online on Adobe DevNet. This one is on Application Development using Flash Lite. If you are new to Flash or coding with ActionScript, I’d suggest first reading chapters 2 and 3 which cover in depth the nitty gritty of Flash Lite 1.1 – 2.1 and a primer on ActionScript 2.0 to boot.

Read the article and download the chapter.

I hope you enjoy this chapter, this one was a lot of fun (I mean it!), and of course I hope it spurs you on to buy the hardback or eBook version of the entire thing to get you going with Flash Lite 1 through 2.1.

What can I say? I’m blown away by Papervision3D. Don’t get me wrong, we’ve used Sandy (enter via UK/Europe), and although it wasn’t me who tried it personally I can see it is a fantastically full featured engine. However, for me, I wanna see enough polys for a full on game, and that’s the sort of speed you can expect with PV3D as it grows.

So here are some pretty basic initial tests I made to see just how fast it is. These examples are NOT optimized, nor are the models really. The Delorean car for example has over 800 polys.

Pv3d

(Flash 9 required – move your mouse around to rotate camera)

Don’t forget Carlos is presenting on Papervision3D at the LFPUG in London Thursday next week along with Mike who is doing component creation in Flex 2, so sign up, it should be great!

There used to be a time when everything tech wasn’t so “meta”, and things (mostly) worked in the way they were designed.

Whilst browsing the web just now using Internet Explorer 7 (normally I use Firefox 2), I get the following request for an ActiveX control to be installed:

This website wants to run the following add-on: ‘Microsoft HTML Viewer’ from ‘Microsoft Corporation’

MS HTML Viewer

(Click pic to enlarge)

HTML viewer plug-in… for a Web browser!? Well I guess now we can put both HTML and Flash in the same box as “plug-in” based technologies hey (just kidding) ;) Is this done on purpose to make IE look bad, or is it just plain insanity? I’m going to give a Mac and OSX a trial within a couple of months (been thinking about this for some time), coming from using Amiga which had a great OS, I prefer to be in more control of what I work on.

I particularly like the contrast of the subject matter displayed in the browser.

I’m a big fan of Nokia’s smartphones and have stuck to them for my last 3 handsets because I love that I don’t have any compatibility issues with files, programs or syncing to Outlook et al, they just work flawlessly. But I’ve been dissappointed that they just keep getting bigger and bigger (and slower!), so I almost decided to switch to Sony Ericsson as a result, no-one wants a slow chunk of silicon in their pocket.

It looks like things are changing, and finally Nokia are releasing some slimmed down series 60 devices. Here’s one that obviously takes some cues from the Razr:

nokia

Slimmed down Nokia smartphones

Well today I had a play at making a Flash game for the Wii using some rudimentary gesture recognition for the wand style of input. You can see a sneak peek of how the gesture recognition works here:

http://richardleggett.co.uk/wii/gestureRecogDemo.html

So Aral and Mario together have un-earthed some real gems the last couple of days, I think there could be a lot of fun to be had making some Wii games. It’s like Flash Lite, even simple games are much more fun when put on another type of device, and with the “wand” style input, it’s even more fun.

Anyway, here is my first example, will be uploading source for this when I get back from France in a weeks time. Just visit the following on your Wii (or desktop computer if you don’t have one)…

http://richardleggett.co.uk/wii

This is just a quick stab, I’d like to take some time to make it more responsive, I’m just using the 10×10 grid for pattern recognition, without up/downscaling user gestures, so it will be quite inaccurate on occasion, although it is possible to get used to how the game wants you to “gesture”, so it is possible to get good (beat my top score of 1800).

balloons wii

Note:
For best results, you must make the gesture (circle, slash or backslash) across the whole Flash movie, i.e. from one corner to another for the slashes, or reasonably large with the circle gesture).

Friends of ED is holding a competition where you could grab the top prize of an Apple Mac Book, 3 FoED books, Camtasia and SnagIT software and a copy of gProject (from gskinner.com). There are also runners up prizes so it’s worth having some fun here.

You just need to produce something cool that uses some of the provided assets, it looks pretty open to interpretation, just stick to the rules of coming under 2.5 minutes and 10mb.

Join in here.

Scott, Weyert and I are going to be having a Flash Lite Webinar in February, and we’d like your feedback on what you’d like to hear what you’d like to see covered.

To get you started, we have a have a selection of topics listed in the chapter listing (PDF) for the new book, but we’d also like to know whether there is any part of Flash Lite 1.1 or Flash Lite 2.X development that you’d like to hear a bit more about, and whether you’d like to keep things simple, more advanced, or a mixture of the two.

Please drop your comments at the end of this post. All suggestions welcomed.

Introduction:

I’m going to keep this very factual. I’ve been developing Flash for the last 6 years and intend to carry on doing so, as a result I’ve learned to accept a lot of criticism and be open to review all things new, in effect I’m opening by saying I have not been “bought” as you will no doubt see in this article I aim to give an entirely balanced perspective, the politics interest me not, just the tech. With that in mind, I’ve been able to get very deep into WPF/E for the last week or so, I’ve always enjoyed dipping into a brand new tech and getting fully engrossed in it, so it was a nice experience to be given the opportunity (thanks). You may find me making a lot of comparisons to Flash, this is only natural for obvious reasons.

Ok let’s start with what it is. It’s a browser plug-in for Mac and PC browsers that displays graphics and animations written in XAML, an XML based markup language. To add interactivity and logic, right now you must use JavaScript, and you write that in a typically DHTML way with functions like wpfe.findName() being akin to document.getElementById(). At present the relationship between your markup and JavaScript is achieved by writing the names of javascript functions in your XAML event attributes, for example when an animation completes, or when the user rolls over an element. XAML is the one thing that links WPF/E (codename) with WPF (part of .NET3 and Windows Vista) at present.


The Technology:

Ok so I read online MXML looks like XAML. There’s quite a difference here. You can think of XAML more in the vein of SVG with SMIL and interactivity. It is not compiled into a binary, it is indexable in the page by Google if you link to it, or embed it directly in your XHTML page for example. So that leads to both problems and benefits when compared to SWF, it totally depends on the type of content you are creating. It can mean incredibly large files, something that zipping might help, it also means it can be easily generated by a server, and doesn’t then need to be compiled before it is viewed. It also makes things like frame based animation difficult, something that binary can do quite efficiently. So points on both sides there.

So that is the presentation layer. Now the logic. You use JavaScript. When I found this out my heart sank a little. Flash developers can be (and I am included here), complete snobs, since we’ve had a fairly decent language since AS2, with AS3 we have a language to envy, and JavaScript hasn’t really changed much over the years, it is stuck at about an ActionScript 0.9 level, in terms of how you have to go about programming with OO in mind, scope chain lookups and the list can go on. I’ve been lurking around the AJAX developer communities and I am sometimes in awe of how rudimentary the majority of the code is. I imagine there is a going to be a BIG sigh of relief when JavaScript 2.0 proliferates, and rightly so. Still having said this, developing with JavaScript wasn’t quite so bad, you can see some of my source later, there are thing you can do to organise yourself a little better, even if you don’t have real packages and so on.

Examples:

So here are some examples I’ve worked on this week. I’ve also worked up a small library of classes that are useful in not only WPF/E development, but also in JavasScript development in general, for example EventDispatcher, Delegate, and XmlHttpRequestHelper which turns the rather naff XMLHTTPRequest object which AJAX folk love, and makes it into something like LoadVars/XML in AS1 without the XML parsing abilities etc, you still can’t get progress out of it though, nonetheless it removes some headaches. I’ve included full source with all these examples.

http://richardleggett.co.uk/downloads/wpfe/Tests/Tests/

You’ll also notice that on that page I’ve included a couple of techniques that I’ve picked up over the week.

Conclusion:

This is the real tough one. How can a product that is not even yet 1.0 compete with a product that has been around for 10 years – they’d have to prise Flash from the developers’ cold dead hands on the most part. This is key when doing the inevitable and comparing it to Flash, just what is the hard sell that will make me use it over Flash right now – maybe nothing for a lot of people at least with v1. I do see a lot of potential in WPF/E, however, so I should explain this… When Nintendo released the DS and Wii, they had to compete in a world where Playstation and XBox owned all, they simply could not compete in graphical prowess and hardcore budgets, so they didn’t, they found a new market in terms of the price point and concentrated on their strengths, the Wii actually re-inventing gaming. So with that analogy in mind, you would be crazy to battle against Flash in the short-term, you need something more tangible…

It is crystal clear that MS are targeting AJAX developers, giving them the tools they want without them having to learn ActionScript or Flash, they are also targeting to some extent two other groups. Designers are key, the Blend and Design tools are being made with these people in mind, I think this is a very tough market to grab, but competition (and of course integration) between the tools of the various proprietors is to be welcomed. The final market is quite obviously people who are already using Windows Media Video, particularly live streaming (i.e. the *other* end of the online video market). These people traditionally use an embedded Windows Media Player in the HTML page which is pretty awful. I heard someone say that if WPF/E means they can make a nice video player for their content, the rest is a bonus.

It is always a time for predictions as we reach the end of a year. So for me 2007 will no doubt see the clash of several new web technologies, maybe the revival of some that have laid low (Java), but all in all this is best for people like you or me who are not afraid of learning something new and bolstering old skills. I’d also like to say goodbye to differentiating between whether something is made in AJAX or Flash, and even if something is a web app, RIA, or desktop application, separating these things into groups is done by people with legacy mind sets, and is a sure way to slow down the rate of advancement in the field of computing. I hope you find the examples and information presented here useful.