Let's have some X3D support in browsers, please...

I have just been reading a very interesting article on the future of X3D by Ben Fancis on his blog. Ben suggests that while X3D is already mature as a standard, in terms of adoption it is still in its infancy, and that before it can fully mature we need to see some adoption of the X3D standard into mainstream browsers.

Since I have recently become interested again in Web3D and this time X3D (rather than VRML) I have been frustrated by the lack of support of web3D standards also. I left my own thoughts as a comment on Ben's blog, but just in case it doesn't make it past moderation I include them below for your consideration. It will make more sense if you read Ben's article first.

My Thoughts

I think Ben made some excellent observations on the factors surrounding adoption of X3D. I have been a fan of web based 3D for ages, but even since the VRML days the biggest block was browser support and now that X3D is here this still hasn't really changed.

But think that outside of browser support the other factor is getting the creative community on board. Too often I think that the software engineers and techies think they own the web and that it is all down to them. But in reality, the popularity (and usability) and growth of the internet in its importance with the general public has a lot to do with the creative application of the technology. It is a collaboration between creative designers and techies that will really bring it about. This brings me to the other missing factor for X3D to become popular - tools for designers.

Vivaty Studio (Formerly known as Flux Studio) is the closest to being a decent X3D authoring tool. It's pretty powerful, having used it myself, but still has room to develop in terms of accessibility for beginners. At present a designer familiar with flash and a 3D authoring program could probably figure it out without too much trouble, but the animation and interaction editing could do with some refining to make it easier to use, and the modelling tools could learn a lot from other programs. Having said all that generally it is really good and certainly the best X3D authoring tool I have come across.

Vivaty Studio Screenshot

Authoring tools won't be enough, as we learn from Axel - an excellent authoring tool (vivaty can learn a lot from their animation and interactivity implementation), but lacked plugin penetration. This is where other vendors like Adobe have already got it made.

What concerns me is that while proprietary software vendors like Adobe have their own 3D standard, and push it out to all their current Adobe users in software already familiar to most designers, and nice integration with other Adobe apps, X3D will have a hard time getting a look-in. I for one cannot imagine Microsoft adopting an open standard either, when they no doubt add 3D to their Expression suite in the future.

It is refreshing that Vivaty are using an open standard however (unlike so many others "second life" for instance), and it is decisions like this that are X3Ds greatest hope.

Outside of that, I totally agree, browser implementation is the next step for X3D to come of age. MS will be the last to get on board but Mozilla/Firefox could lead the way closely followed by Chrome or Safari.

What also might help if Vivaty put their plugin source code back into open source. The Flux player used to be Open Source, but a visit to sourceforge now will show that all source files have been removed. Maybe the investors that made Flux into Vivaty want to guard their investment closely (who can blame them), but one wonders if by holding everything too tight X3D might just as well be a proprietary format for all the market penetration it has - and without the customer base of Adobe or MS, Vivaty will slowly dissolve like Axel and nameless others. In my view a better strategy would be to open their plugin source, get it included into a Mozilla release and start seeing popular browsers with built in X3D support. Surely that will help Vivaty's larger business aim (no plugin required) in the longer term, and get them on the market with a good authoring tool. Who knows but Google will buy them out under those conditions and build X3D into Sketchup for some real Web3D competition with Adobe.

Recognising the value of design...

Chuck Green is one of those names (a bit like Chris Pirillo) that has been around, sharing their wisdom, since before the dot com bubble burst - I first came across Chuck Green in 1999 and even then he managed to make plain old HTML look pretty good.

Anyway, I have been recieving Chuck's emails for a while, but today's was so especially interesting that I have decided to share a chunk with you:

To those who don't recognize the value of graphic design... »

I got a plea for help the other day. A designer who frequents this blog had shared a recent post with an engineer friend and the reply was a bit condescending. The post, "The talent that makes a good designer great," points to an engineer who I thought was particularly innovative. My purpose in drawing attention to him was to emphasize the importance of the same type of innovative thinking to the field of graphic design.

The essence of the engineer's response was they saw little correlation between the skills of an engineer and those of a graphic designer. How could that type of innovation, they posed, have anything to do with a designer's sense of style, their ability to choose typefaces, their knowledge of color, and so on. After all, the subject of my post, the engineer asserted, was a PhD candidate.

I laughed out loud. Every designer has had (or will have) this conversation. At its root is the implication that devoting one's career to the design of communications and an interest in the aesthetic is somehow less of a calling than some other, more significant field of endeavor.

My response is this:

The ergonomics and aesthetics of design are to engineering what taste is to food.

Remove the aesthetic qualities (style, organization, presentation) of the clothing you wear, the book you are reading, the automobile you drive, the room in which you spend your time, and so on, and all you have left is...function.

It is important for every student of design (and engineering) to recognize and appreciate the importance of form to function and vice versa. And it is equally important to understand that to be a exceptional practitioner of either discipline requires out-of-the-ordinary instincts, curiosity, knowledge, craft, and so on.

Lots of people view art and science as a comfortable coexistence. But for those who are particularly attuned to one or the other, it is good to remember that the most debilitating form of blindness is to minimize the way in which others see. It is not only a sure way to limit your potential--it is a certain and swift strategy for diminishing your influence.

An example of substance without style... http://www.ideabook.com/substance_without_style.html

Reminds me of a conversation I had with an engineer on this very blog. Thankfully my engineer friend is open minded to the value of aesthetics, just as I see function as being fundamental too.

Carrara 6 Pro - Free with DigitalArts Magazine

For those of you interested in 3D modelling and animation I have to recommend that you buy the April 2009 edition of DigitalArts magazine (came by mail today - expect in WHSmiths very soon I expect).

The free software in this edition is none other than Carrara 6 Pro, an extrememly powerful and versatile 3D modeller and animator. Other people have written far more detailed reviews than I ever will, but to sum up the changes:

Carrara 6 allows users to choose from an unprecedented array of tools while exploring new dimensions in 3D creation. Carrara 6 provides 3D figure posing and
animation, modelling, environment-creation and rendering tools within a single
application.

Carrara 6 features include non-linear animation, giving users the ability to create clips of animation that can be reused and combined on multiple tracks. Also includeds is dynamic hair that allows artists to style, cut, brush and drape the hair, and displacement modeling where the user can paint detail on a model using free-form brush tools.

Apart from the non-linear animating and the hair, the icing on the cake was that it can export in DirectX (.X) format, and converts procedural shaders into raster images on export. Finally, I can use a program I am extremely familiar with to make models for 3D games and export them directly without having to convert them using other programs (at least that is the implication with .X export - I will of course try it out with my copy of The 3D Game Maker, and FPS Creator (also available free for learning purposes).

Ever since version 1 I have found Carrara to be one of the most easily learned 3D animation and modelling programs. Even so beginners may be glad of a little help in which case they will find Mark Bremmer's video tutorials helpful to get started.

I am certainly not going to complain that Daz is continuing to follow its strategy of giving freebies to DigitalArts readers (or readers of any other creative journal for that matter), and earning most of its income from selling content for its Daz Studio product. On pondering why I considered 2 possible causes. First, E-on have had their open beta of Vue 7 going for a while and by launching cornucopia have thrown down the gauntlet to Daz in the pre-made content arena. Second, by giving Carrara away free on design and creative journals they may encourage more talented 3d designers to produce content which can then be sold in their store. Well... it's a nice theory. Whatever the reason, Carrara 6 for the price of a magazine has to be a bargain.

Internet Explorer 8

Web designers will be interested to know that Internet Explorer 8 is coming very soon. At present you can download release candidate 1, this means that it is ready for public testing while they iron out the last few bugs.

You might want to add it to your stash of browsers for testing purposes. After all, you want to make sure the next most popular browser shows your websites nicely.

Download it here:

http://www.microsoft.com/windows/internet-explorer/beta/worldwide-sites.aspx

Dodgy play/pause button? Try this...

I have spent a lot of time looking at FLV players custom built from scratch, since my students have been designing and coding them.

One problem that keeps popping up is the play/pause button not showing the right icon at the right time. I looked at my latest version and found that my code was slightly different. Here it is in case you want to try it.

This replaces the play button code in the flv player described back in August:

//Alternative play button code
video_ns.onStatus = function() {
if (video_ns.time >= duration-1) {
playstatus = 3;
_root.pause_mc.gotoAndStop("pauseoff");
} else {
playstatus = 1;
_root.pause_mc.gotoAndStop("pauseon");
}
};

_root.pause_mc.onRelease = function() {
if (playstatus == 1) {
video_ns.pause();
playstatus = 2;
_root.pause_mc.gotoAndStop("pauseoff");
} else if (playstatus == 2) {
video_ns.pause();
_root.pause_mc.gotoAndStop("pauseon");
playstatus = 1;
} else if (playstatus == 3) {
video_ns.play(currentvid);
_root.pause_mc.gotoAndStop("pauseon");
playstatus = 1; }
};

For users doing the Flashvars or Query String method the only other thing you have to change is the value of the playstatus variable at the top of your code as follows:

playstatus = 3;

See how you get on. The biggest difference is that I now have 3 playstatuses, not 2.

An alternative to Flashvars: a Query String

One thing I did not expect when using Flashvars was that one of my students would experience what appears in all ways to be the browser caching the swf with the Flashvars. (Caching means that the browser saves the file and gets it from the temporary internet files instead of checking for changed files from the server.) I did expect the swf to cache, but not the Flashvars. After all the whole reason for the invention of Flashvars was to allow the passing of variables to a swf from the HTML without the swf having to be re-downloaded every time.

I suspect that this is something to do with the students computer and testing from the local machine rather than a server.

However, to solve my student's problem, the good news is that Flashvars is not the only way to pass variables to a swf from the HTML. Last time I mentioned 3 options, hard coding, XML or Flashvars. But I missed one: the Query String.

The Query String

This is really well explained in this website here (click).

But to quickly sum it up, one way we can pass variables to flash from the HTML page in which the flash is Objected and Embedded is by tagging them on to the end of the swf location path.

Normally the swf location path might appear something like this:

For Object:

PARAM NAME=movie VALUE="flaMovie.swf"

For Embed:

src="flaMovie.swf"

We pass the variables to the swf by tagging them onto the end of the swf location path as follows:

For Object:

PARAM NAME=movie VALUE="flaMovie.swf?currentvid=videoname.flv&duration=999"

For Embed:

src="flaMovie.swf?currentvid=videoname.flv&duration=999"

Flash Projects - #6 - Slim Custom Video Player with Flashvars

Well, we have come a long way since the swf video player and the flv video player. Both versions of the player had a menu built in to the flash movie for selecting which video you want to play. But not all applications of a video player require a built in menu, what if you only want to play one video?

Let's go further. What if you want to play one video on one web page, but another video on another web page?

Do we have to produce a whole video player flash movie for each video we want to show?

The good news is NO. The other good news is that building a custom flv player in flash that we can re-use for different videos is a great excuse to learn some more ActionScript.

Ready? Then let's begin.

Defining the problem

So we want to produce a video player in Flash that knows which video to play, when we press play, without having to "hard code" this knowledge into the video player.

Consider solutions

There are several ways we can tackle this problem, such as:

1. We "hard code" the video player to look for a video of a pre-determined name and pre-determined relative location. But that means having multiple copies of the same video player in different folders. Saves us some ActionScripting, but means that the user has to download the video player every time from a new location.
2. We use an XML file external to the video player to tell it what video it needs to play. Not a bad idea but some relatively complex ActionScript for a relatively simple thing. No, there is a simpler way.
3. We use the obscure but very handy Flashvars capability to tell the videoplayer what to play by including the information within the Object and Embed tags in the HTML.

We do the last option.

How does Flashvars work?

Adobe sum it up on their website, but if that looks hard don't worry, I am about to talk you through it.

Take a look at the example on this page (click). As you can see it looks pretty much like any Object and Embed tag but this time with the addition of the Flashvars parameters.

Within Flashvars we can define any variable with any value. These variables and their values are then passed to the flash movie we are Objecting and Embeding and created within the movie before the first frame of the movie. If we were "hard coding" the variables and their values into the video player we would expect to do it in the first few lines of the first frame in the timeline. That Flashvars creates the variables before the first frame is just as good from our point of view.

This means we can include the same video player in every page of our website, but get each one to play a different flv file by simply changing the values of the Flashvars parameters in the HTML Object and Embed tags.

A quick recap (before we make changes)

The original code had the name of the flv file "hard coded" for the menu button as follows:

_root.m1_btn.onRelease = function () {
video_ns.play("video1.flv");
currentvid = "video1.flv";
}

The code above does two things when the button is released. First, it tells the NetStream object called "video_ns" to play a specified FLV file. Secondly it sets the value of a variable called currentvid to be the same as the name of the FLV file - this helps us later on when we are programming the playback controls.

Now making the changes

Basically, instead of having the menu button, you just include the following variable and value in the Flashvars.

Within Object:

param name="FlashVars" value="currentvid=video1.flv"

Within Embed:

flashvars="currentvid=video1.flv"

And it is that simple.

All your existing code should still work.

Taking it further

If you feel like getting more advanced (and if you are not using flv 1.1 files) you could even include the length of the flv video (in seconds) as a Flashvar too. If you remember, only flv 1.1 or later includes the duration of the flv in meta data, and our progress bar relies on knowing the duration of the video. Using Flashvars as follows you can tell the video player the duration without needing meta data:

Within Object:

param name="FlashVars" value="currentvid=video1.flv&duration=999"

Within Embed:

flashvars="currentvid=video1.flv&duration=999"

Then you can delete (or comment out) the code that tries to get the duration of the flv from the metadata, you know, this bit:

NetStream.prototype.onMetaData = function(obj){
var duration = obj.duration;
}

You can delete the above and your play, pause, and progress bar will still work, because instead of getting the duration from metadata it will now be getting it from Flashvars.

Voila!

Oops, nearly forgot...

Oh, one last thing, make sure you add the following code to the first line on your first frame:

var playstatus = 2;

This is needed because in the original player, as soon as you selected the video it begins to play, the play/pause system then worked on the assumption that the video is already playing. The code was as follows:

video_ns.onStatus = function() {
if (video_ns.time >= duration-1){
playstatus = 2;
_root.pause_mc.gotoAndStop("pauseon");
}
else {
playstatus = 1;
_root.pause_mc.gotoAndStop("pauseoff");
}
}

_root.pause_mc.onRelease = function () {
if (playstatus == 1){
video_ns.pause();
_root.pause_mc.gotoAndStop("pauseoff");
}
else if (playstatus == 2){
video_ns.play(currentvid);
}
}

Read the code and you will see that you can only play the video if playstatus = 2. But because we now get the video info from Flashvars the video is not already playing so we need to set the playstatus to 2 manually or you can never play the movie. Hence make sure you add the following code to the first line on your first frame:

var playstatus = 2;

What fun.