Friday 29 August 2008

Well that didn't take long - Carrara 5 Pro - free on a magazine again!


I'm not saying I was right, but it is pretty well timed. Only a couple of posts ago I was speculating that Caligari's give away of TrueSpace 7.2 might be their answer to Daz giving away Carrara 5 Pro on 3D World magazine, and we should expect the next move from Daz.

Guess what! Daz is giving Carrara 5 Pro away again - this time on Computer Shopper (sold in the UK for the princely sum of £4.99) - a magazine with a massive distribution. They might as well let people download it from the Daz website now, anyone in the UK who ever planned on buying Carrara 5 will just buy Computer Shopper instead. But I suppose there is the bandwidth issue, the download would be so popular it would seriously slow up their servers so this is just another way of getting market penetration.

Read about it on the Computer Shopper website here (Note, the content of the linked page will change next month) >

Meanwhile, where can we expect the next move? I think it's about time Maxon gave something away. I've not seen any offerings from them since Cinema 4D 6SE way back in about 2002. Can they feel their market share shrinking around them? Free is a hard price the compete with, and let's face it, Carrara 5 Pro and TrueSpace 7.2 are both pretty able programs. The workflow, or habit, (or even snobbery) that keeps some users loyal to ridiculously high priced software can only stand up to so much.

As software like Carrara keeps increasing its power it is only a matter of time before the devoted Max user begins to wonder what extra they are getting by paying $3495.00 for their license instead of the $549.00 they could pay for Carrara 6.

I predict that for most users, the added extras that come with Max are of a very niche nature, and lots of people could switch to Carrara and still produce what they want at the end of the day. Blender is in the running too, at an even lower price of free, but its unusual interface would make a quick switch too jarring for most users.

This developing situation reminds me of Quark Xpress. Originally a one product company that dominated the print publication industry as the "standard", sold for a high price and according to an old lecturer of mine didn't offer much of an academic discount. So Adobe launches InDesign with seamless integration with the other Adobe products the designers are already using, at a much lower price, and they practically gave it away for educational purposes. Even little Serif kept building their PagePlus until even that was hailed by industry journals as being a professional level DTP package at a budget price.

The result? Quark gave away a full copy of their Xpress software on a magazine for the first time ever around a year ago (it happened to be Quark Xpress 5). Were they feeling the pinch of shrinking market share? I reckon so. It would be interesting to look at their pricing structure now to see if they charge as much as they did back in their heyday of the mid 1990s.

I use this as an example that, no matter how "industry standard" a product is today, a new product is being developed right now that is just as good, just as powerful for every common application, and it is being sold at a fraction of the price (and in some cases given away).

One day many users will wake up and find that they can use this cheaper product for everything they need, and wonder why they should pay 6 times as much for the niche gizmos they never used anyway. And this is how market share is eroded.

Let the battle continue.

Friday 22 August 2008

Online Developer Tutorials from .NET


I have long since been a fan of the tutorials provided by Computer Arts. But only today did I learn that .NET magazine also has some seriously useful tutorials too.

Ranging from CSS to Flash they are well worth adding to your browser favourites. Check out their repository here:

http://www.netmag.co.uk/zine/develop

Saturday 16 August 2008

TrueSpace 7.6 FREE?


Occasionally, as I look around at free software for creative purposes, I am genuinely suprised by some amazing give-aways. Usually these freebies come with one of the well known digital design journals like Computer Arts, 3D World or DigitalArts (formerly Digit).

This time though, it is well known 3D Software developer Caligari that is giving away their hard developed wares, and not even limiting it to magazine readers. This time you can download Truespace 7.6, their latest version, absolutely free. All you need to do is click the link on the home page, and set up a free membership account if you don't already have one.

What are you waiting for? Download it now >

Caligari have given away TrueSpace before. V1 and V3 have both been available for a while, but this is the first time they appear to have given away their latest version, and by the looks of things it is pretty powerful.



See how it compares with more well known competitor products:



I actually found out about this amazing offering when reading on the Computer Arts website, what the content of the new 3D World issue was going to be, then promptly zoomed over to Caligari to see for myself.

The reasons for this daring move by Caligari are to be discussed in the new issue of 3D World (which I don't have yet), but I can't help wondering if this has something to do with Daz 3D's move to give away Carrara 5 Pro on a magazine a few months ago. If so, watch Daz, because that is where the next move may be.

Whatever the reason, high competition in the 3D software industry has to be a factor, and so a good thing in the short term. The problem with this type of competition is that there are likely to be casualties, and that may hurt if you have developed a workflow around software from a company that goes under, or stops developing that title.

But while that is largely out of the control of most of us, make hay while the sun shines and download TrueSpace 7.6 today, free.

Thursday 14 August 2008

Flash Projects - #3 - Custom FLV Player

Back in February I posted a tutorial to make a video player in Flash that played external SWF files. I promised then to post another tutorial that showed how to make a video player in Flash that played external FLV files. I wrote the program ages ago but finally got round to writing it up for my blog.

Although both programs are fine, FLV is much the up-to-date way of showing video in Flash so I hope you find this useful. feel free to leave comments or questions.

Getting Started

To keep things organised I like wherever possible to keep all my code in one place. All the ActionScript in this tutorial should be attached to the first key frame in your movie.

Unlike the version of the video player that played SWF movies, we cannot use loadmovie to simply show a movie within a movie. FLV files require us to use NetConnection and then NetStream to stream the FLV file from its location.

First off then we need to create a new NetConnection called "myConnection_nc":

var myConnection_nc:NetConnection = new NetConnection();
myConnection_nc.connect(null);


Now we need to create a NetStream called "video_ns" that will stream through the NetConnection you made above:

var video_ns:NetStream = new NetStream(myConnection_nc);

Now we have created a NetConnection and a NetStream through which we will stream the FLV file, we need to create a video object on the stage through which the FLV will be displayed.

First, you need to create a new Embedded Video object in the library. To do this, click the little menu in the corner at the top of the Library and select the "New Video" option. It should appear in the Library as "Embedded Video 1". Then drag an instance of the Embedded Video 1 onto the stage and give it the instance name of "my_video".

Now we are ready to attach the NetStream created above to the video object you just placed on the stage called "my_video":

my_video.attachVideo(video_ns);

Now we need to do two things. First, we need to find out how long the FLV file is (its duration), second we need to set the value of the duration variable equal to the property of the duration object. This will allow us to control the playback of the FLV later on.

To do this we first use prototype.OnMetaData to find the duration of the video - this only works with FLV 1.1 files and later, earlier versions do not include duration in metadata.

Unfortunately there is no other way of finding the duration of an FLV file (you can't use the _totalframes method like you can in SWF files).

Then we can set the value of the duration variable to be equal to the duration property of the FLV file as defined in the FLV's MetaData. Here goes:

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


Video Selector

Now for the playback controls. The simplest control is the video selector. This allows the user to choose which video they want to watch.

First create a button in the Library, then drag two instances of the button onto the stage. Give the buttons the following instance names - "m1_btn" and "m2_btn".

Because we are playing FLV files and not SWF files, we cannot use the loadMovie method. Instead we need to tell the NetStream object we created earlier, to play and tell it which FLV file to play. We create code for each of the buttons we created earlier, so that when each is clicked, the NetStream object we created streams a different FLV file to the video object:

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

_root.m2_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.

Rewind Button

Dead easy. Create a button in the Library that looks like a rewind icon. Drag an instance of the button onto the stage and give it the instance name of "rw_btn". Then add the following code to the first key frame with the rest:

_root.rw_btn.onRelease = function () {
playpos = video_ns.time;
if (playpos > 10)
{
video_ns.seek(playpos-10);
}
else
{
video_ns.seek(0);
}
}


The code above makes the video jump back 10 seconds when the rewind button is clicked. It might seem pretty complex considering that all we want to do is rewind a bit. What it actually does first is check how far into the video we have progressed and the reason for this is that we don't want to jump back to a point before the video starts, that would be impossible. Depending on how far the video has played the code then does one of two things. If the video has played more than 10 seconds, then it tells the NetStream object to jump back 10 seconds in the FLV, if the video has not yet been playing for more than 10 seconds it tells the NetStream object to go back to the beginning of the FLV.

I found that in practice, with large FLV files, the rewind is not always reliable, and can get "stuck" at points, refusing to rewind past them. I suspect this is something to do with the FLV itself, rather than the coding - however, I have also included the option of clicking on the progress bar to jump to any point in the video, which so far has proved very reliable - this is explained later in the tutorial.

NOTE: If you made the previous video player that used SWF instead of FLV files, you will notice that we are using a lot of different methods. Most significant is that with FLV we cannot gotoAndPlay specific frames as we can with SWF files. Instead we use the seek method, and it is the NetStream object called "video_ns" that we are instructing to seek, not the video instance on the stage.

Forward-wind

This is much more straightforward. As before, create a button in the Library that looks like a forward-wind icon. Drag an instance of the button onto the stage and give it the instance name of "fw_btn". Then add the following code to the first key frame with the rest:

_root.fw_btn.onRelease = function () {
playpos = video_ns.time;
video_ns.seek(playpos+10);
}

This isn't nearly as complex. When the forward-wind button is released the code sets the value of a variable playpos to the current time position of the movie using video_ns.time. It then simply uses the seek method to tell the NetStream object to jump forward 10 seconds from the current time position in the FLV.

Play and Pause Button

Now we get more complex. For my player I opted to have the Play and Pause buttons be the same button, but have the icon on the button change depending on whether the movie is playing or not. If the movie is playing, the pause icon is visible, telling the user they can click to pause. If the movie is paused, the play icon is visible, telling the user they can click to play.

To accomplish this the play/pause button is not a button at all - it is a movie clip. The movie clip has two frames, one frame with the play icon, the other with the pause icon. The frames are then given labels - "pauseon" and "pauseoff". This allows us to dynamically change which frame is currently visible, and therefore the appearance of the play/pause button. Create a movie clip that does all that, then drag an instance of it to the stage and give it the instance name of "pause_mc". Then add the following code to the first key frame in the root timeline with the rest:

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");
}
}

The code above uses a change in the NetStream status to trigger a check. The code checks whether the current position within the FLV file is greater than or equal to 1 second from the end of the file. If so it sets the value of the playstatus variable to "2" (we use this later), and tells the play/pause button to move to the frame labelled "pauseon", so the button shows the pause icon, telling the user they can click to pause.

If the current position within the FLV file shows there is more than 1 second of the movie left to play, then the code sets the value of the playstatus variable to "1", and tells the play/pause button to show the frame labelled "pauseoff", so the button shows the play icon, telling the user they can click to play.

the above code just sets the playstatus variable, and changes the visual appearance of the play/pause button. Now we need to enter the code that actually controls the playing and the pausing. Add the following code to the first key frame in the root timeline with the rest:

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


This is where lots of the variables we have been setting earlier, with no visible purpose, suddenly become useful. The code above runs whenever the play/pause button is released.

First it checks the value of the playstatus variable. If the value of playstatus is "1" (which means the FLV file has more than 1 second left to play - see above), then it tells the NetStream object called "video_ns" to pause, and tells the play/pause button to show the frame labelled "pauseoff", so the button shows the play icon, telling the user they can click to play again.

If the value of playstatus is "2" (which means the FLV file is in its last second of playback - see above), then it tells the NetStream object called "video_ns" to play the FLV file again, and uses thevalue of the currentvid variable, which was set when the user click the button to select which video they wanted to see, to tell it which FLV file that was. This currentvid reminder is needed because we are playing FLV files and so must use NetStream and not loadmovie as we would if we were playing SWF files. With loadmovie the SWF file remains loaded into memory and so the program does not need reminding which movie to play because it still has it, with NetStream the file is streamed from its location and not kept in memory - this is why the currentvid variable was needed, to remind the program which FLV to play, without the user having to select it again using one of the video selector buttons we created right at the beginning. This is all about making it work more smoothly for the user - trying to make it work how they expect, rather than expecting them to learn the quirks of how your's works.

Progress Bar

No video player is complete without a progress bar telling the user how quickly the video is progressing, where they are in the video timewise, and how long is left.

To create the progress bar graphics, draw a rectangle on the stage to represent the video progress bar. Make sure the rectangle has a fill and a stroke. Then select the filled area only, press F8 and convert it into a movieclip called progbar. Make sure you set the registration point of the symbol to be top left. Then select the stroke that outlined the rectangle, again press F8 and convert it into a movieclip called progbarframe. Again make sure you set the registration point of the symbol to be top left. Give each an instance names "progbar_mc" and
"progbarframe_mc".

Add the following code to the first key frame in the root timeline with the rest:

onEnterFrame = function() {
comppc = video_ns.time / duration;
_root.progbar_mc._width = _root.progbarframe_mc._width*comppc;
}


The above code sets a variable called comppc with a value that comes out of dividing the current position of the FLV movie in seconds with the duration of the movie in seconds. This gives comppc a a value between 0 and 1. A value of 0.5 would mean the movie was half way through. We then multiply the maximum width of the progress bar (based on the width of the progbarframe_mc) by the value of comppc to set the current width of the progress bar. By using onEnterFrame the progress bar updates several times per second as the movie plays, thus giving an accurate graphical representation of how far the movie has to go.

Progress Bar Jumper

Now we want to make it so the user can click anywhere on the progress bar and jump to that part of the movie. Add the following code to the first key frame in the root timeline with the rest:

_root.progbarframe_MC.onRelease = function() {
barleft = _root.progbarframe_MC._x;
jumppos = (_xmouse-barleft)/_root.progbarframe_MC._width;
if (playstatus == 1)
{
video_ns.seek(Math.round(jumppos*duration));
}
else if (playstatus == 2)
{
video_ns.play(currentvid);
video_ns.seek(Math.round(jumppos*duration));
}
}


The above code is probably the most complex part of the whole program. Funny how the luxuries, the "optional extras", that provide the least functionality are often the most complicated parts of the program.

First we define a variable for the left side of theprogress bar called barleft. This gives us a zero point against which to measure the location of the user's click on the progress bar. Then we define a variable that represents the users click on the progress bar called jumppos.

The value of jumppos is defined by getting the X coordinate of the mouse when the bar is clicked and then subtracting from that the value of barleft (the X coordinate of the the start of the bar). This tells us how far along the bar the user clicked. This number is then divided by the total width of the bar to give a number that represents how far along the bar the user clicked as a value between 0 and 1. A result of 0.5 would mean the user clicked in the middle of the bar.

We then tell the NetStream object to seek to the point in the movie corresponding to where the user clicked on the bar. This is calculated by multiplying the value of jumppos (where on the bar the user clicked) by the value of the duration of the FLV file in seconds. However, I have also used Math.round to convert the result into an integer (by rounding up or down to the nearest whole number). This just helps keep things tidy and means the FLV will jump to a whole second, rather than a fraction of a second which may not exist.

If the value of playstatus is "1" then we just attempt to seek straight to the relevant point in the FLV file. However if the playstatus is "2" this means there is only 1 second or less of the movie to go, so to make sure it works and we get no glitches, we tell the NetStream object to play the currentvid from the beginning and then seek to the relevant point in the FLV file. We have to do this because, as mentioned before, with NetStream the video is not stored in memory, and so if there is less than 1 second left in the video, the streaming might be over before Flash has a chance to seek to another part of the movie. By telling the video to start again using the currentvid variable to remind it which video, and then seek to the relevant point, we can get a smoother operation.

Converting Video to FLV Format

Of course, for this player to be any use, you need to be able to convert your video to FLV format.

One programme that has worked for me without trouble is Free Video to Flash Converter.

It is completely freeware and can convert video into SWF or FLV. You can even export video with its own player interface - and, while this defeats the object for my use of it, since I wanted a custom interface of my own design, some people may find this feature helpful.

The program is pretty self explanatory, all you need to do is remember to export the movie as a FLV and save it with the name you programmed into your player and in the same directory as the player.

The End

And there we have it. Export your player as a SWF into the same directory as the FLV files you linked to and it should just work. Any problems, leave a comment and I will try to help.

Playing Sound with your Computer Keyboard - Flash

I had a chat with one of my old Multimedia students on Facebook today. I pointed him to my Ukulele Tuner and he told me that he was currently building a Flash based interactive drum kit (he is a drummer after all).

He had already produced a prototype that worked by clicking each drum with the mouse, but was not happy with the inability to play the drums properly on it. To play drums you need to be able to switch instrument quickly and at times strike two instruments at the same time. You can't do this with a single mouse and clicking on each drum. It's like playing the drums with one stick.

He had the idea of allowing the user to play the drums using the keys on their computer keyboard, but was unsure how to proceed. Unable to leave teacher mode with a challenge like this I put together the following code.

Stage 1

Create a new AS2 Flash file and insert the following code into the first keyframe:

//This attaches the sound for drum 1, make sure you did the linkage thing in the library

var sound1:Sound = new Sound();
sound1.attachSound("drum_1");

//This attaches the sound for drum 2, make sure you did the linkage thing in the library

var sound2:Sound = new Sound();
sound2.attachSound("drum_2");

//This code listens out for the user to press a key, then, depending on which key is pressed will trigger one of the sounds attached above.

var myDrumKeyListener:Object = new Object();
myDrumKeyListener.onKeyDown = function () {
if (Key.getCode()==65) {
sound1.start();
} else if (Key.getCode()==66) {
sound2.start();
}
}
Key.addListener(myDrumKeyListener);

Stage 2

You will notice a bit where it says:

(Key.getCode()==

and then there is a number, this number is the keycode for the key that plays the sound. You can find a list of keycodes online here:

http://livedocs.adobe.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00001113.html

Stage 3

Now you need to add the actual sound files. Do this by importing the sounds into the Library. Then right click the first sound and choose "Linkage" from the menu. Select the "Export for Actionscript" and "Export in First Frame" options. Then make sure you give the sound an identifier. This is the name by which the sound will be referenced in the actionscript above. I called the sound for the first drum "drum_1". Then in the actionscript it is referenced as follows:

var sound1:Sound = new Sound();
sound1.attachSound("drum_1");

If you put a different name as the identifier, make sure you also change it in the actionscript.

Once that's all done you can press "OK". Then just repeat Stage 3 for each sound in the library.

And that is about it.

The challenge for my ex-student then, is to modify the code to include more drums and have them respond to an appropriate range of keys on the keyboard.

Have jolly fun.

Demo SWF