Creative Reading

Sometimes you just wish you could find that really useful resource from a source that is reliable, that is well designed, discusses creative issues in a professional way AND doesn't ask you to pay for it. The Adobe Magazine is one of those resources.

You can access it free at this address - http://www.adobe.com/products/adobemag/pastissues.html - and it includes a full archive right back to 1995.

I also read a plethora of other creative journals but this has to be one of the best of the free. What are you waiting for?

Parallax Mapping

While we are on the subject of mapping images to 3D meshes, you might want to learn about parallax mapping.

Parallax mapping finally begins to overcome the problem with all the other mappings (texture, bump and normal), which is that they all look painted on and flat when viewed up close, especially at an angle.

That is because they are in effect painted on. Parallax mapping works by actually displacing the coordinates of the texture, so that bumps actually obscure dents as you move round in 3D space. Hoorah.

Comparison of mapping methods (Brown University, Rhode Island) click to enlarge.

Normal Mapping

Just a quickie tonight, I just had to tell you about this great tutorial I found for creating normal maps. A genius called Ryan Clarke is altruistic enough to share his technique free and for nothing on his site here >.

Why do I care? Basically as an interactive media blokey, I am interested in this latest method of adding detail and realism to games.

To begin with 3D games were made using very low res meshes and texture mapping. Bump mapping adds more realism by adding a little height and depth to a surface texture on the polygons - this is done using a grayscale image to represent the height of the bumps, (the lighter the pixel the higher the altitude etc.) but it still looks like blocks with textures. To remove the blockiness of the models you would expect to have to increase the number of polygons they are made up of. This is no good for games where the computer has to render 30+ fps on the fly. This is where normal maps help.

To really grasp this you need to know what a normal is >.

Normal mapping works on a similar principle to bump mapping in that it is essentially a graphic wrapped round a mesh, but it goes much further. Normal maps use an RGB image which instead of containing just height data in each pixel contains the X Y Z 3D orientation of the normal.

These then render much more realistically almost as though they were meshes themselves and have the added bonus of rendering faster. This allows PC's and games consoles to increase the apparent level of detail in the models without increasing the polygon count.

Normal mapping (above) compared to bump mapping (below) - images courtesy of Inagoni makers of a normal mapping plugin for Carrara.

Anyway, I just wanted to bring your attention to the fact that you can make your own normal maps quite easily using a torch, a digital camera, and some image editing software - take a peep >

Flash Projects - #2 - Converting Video to SWF

The video player you created in the last tutorial allows the user to select and control the playback of video files in SWF format (not FLV format).

The reason for this, as I mentioned at the introduction of the last tutorial, was because I wanted to have a video player that worked with the features of Flash MX 2004 standard (which lacks the additional video capability of MX 2004 Professional).

One of the limitations with the standard version of Flash was that it could only encode video to be embedded in the timeline; this would then be exported in SWF format (not FLV).

Note: Freeware applications for converting video to FLV however have become more commonplace, so I have already begun work on a player that uses the netconnect and netstream capabilities of Flash to play FLV videos instead. Look out for this tutorial in a few weeks. Meanwhile...

So how do you encode video to SWF?

You can use Flash to encode video to SWF or some available freeware.

The Flash method

If you have Flash you can do it very easily by choosing File > Import > Import Video.

Flash MX 2004 standard will only encode video to be emdedded into the timeline, Professional and later versions give more options - make sure you select the option that embeds video into the timeline.

Work your way through the wizard and when the video has encoded, make sure the document size (and the video) are the right size for your player (see previous tutorial).

Then export the movie as a SWF and save it with the name you programmed into your player and in the same directory as the player.

All done. However I tend to find that Flash takes an excessively long time over encoding video, and sometimes prefer to use a freeware programe that seems a bit quicker.

The freeware method

One programme that has worked for me without trouble is Free Video to Flash Converter - available from Download.com.

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 SWF and save it with the name you programmed into your player and in the same directory as the player.

And thats it. Again any problems just leave a comment and I will try to help.

Flash Projects - #1 - Movie Player

Background


I first figured this out because I wanted to have a video player but was running Flash MX 2004 standard and so lacked the Video features of Professional.

Download Files

Click here to download source code and files for this tutorial >

Introduction

This tutorial teaches you to build a video player interface only that loads and plays external video files when requested by the user. This means the finished SWF is very small and downloads quickly.

The player includes the following features:

• Playback window
• Play
• Stop
• Fwd
• Rwd
• Clickable progress bar

Note: While for users of Pro flash versions much of this may seem irrelevant because of the pre-compiled video players and skins available. However this project will show you how you can build a completely cutomised interface, allowing your flash projects to be totally original. It also works with external linear SWF animations that don't contain interactivity. You will also begin to understand how you can control playback with actionscript instead of relying entirely on components.

Here goes

First we need to create all the movieclips and buttons we need. Begin by creating the following buttons as symbols in the library:

• Play
• Stop
• Pause
• Fwd
• Rwd

You can either draw them on the stage and then convert them to symbols by selecting one and pressing F8, or you can create a new symbol directly in the Library.

Drag instances of each of them from the library onto the stage (unless they are already there) and name each instance as follows:

• play_btn
• stop_btn
• pause_btn
• rw_btn
• fw_btn

Then 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 name on the stage as follows:

• progbar_mc
• progbarframe_mc

Now draw another rectangle on the stage where you want the video clip to appear, and at the size you want it to appear. At this point it is a good idea to know what size of video you are dealing with. I tend to work with relatively small sizes like 320 x 240 for web video, but it is entirely up to you. Select the rectangle and convert it into a movieclip called vidspot. Make sure you set the registration point of the symbol to be top left.

Give it an instance name on the stage of:

• vidspot_mc

Finally you need to create some movieclips that will act as buttons that allow the user to select which video they want to watch. Add these to the stage and give them instance names as follows:

• vid1_mc
• vid2_mc
• etc...

Now we are ready to start coding. The great thing about this player is that all the Actionscript resides in the first keyframe of the movie, so there is no hunting around trying to remember where you put it all. So, create a new layer in the timeline, give the layer the name actions.

Click on the first frame on that layer (make sure it is a keyframe) and open the Actions panel. It is in this panel that all the following Actionscript needs to be entered:

User Media Select Buttons

These are the buttons that allow the user to select which video they want to watch. The way this script works is by replacing the movieclip you named as vidspot_mc with an external SWF that contains the video.

The script is as follows:

_root.vid1_mc.onRelease = function () {
_root.vidspot_mc.loadMovie("videofilename.swf","GET");
}

Type this into the Actions panel for each video you created a button for. Change the vid1_mc and the videofilename.swf to match the instance name and video file name as needed. This script assumes that the external video files are in the same directory as the movie player SWF will be when it is finally exported and uploaded to the web.

Play Button

This script is very simple, it tells whatever SWF is occupying the spot originally taken by vidspot_mc to play.

_root.play_btn.onRelease = function () {
_root.vidspot_mc.play();
}

Stop Button

This script is slightly more complex, in order to make Stop different to Pause, I decided that Stop should also automatically rewind. This script tells whatever SWF is occupying the spot originally taken by vidspot_mc to go back to the first frame and stop.

_root.stop_btn.onRelease = function () {
_root.vidspot_mc.gotoAndStop(1);
}

Pause Button

This script is very simple, it tells whatever SWF is occupying the spot originally taken by vidspot_mc to just stop where it is.

_root.pause_btn.onRelease = function () {
_root.vidspot_mc.stop();
}

This effectively pauses the movie since the play head simply stops in it's tracks. If the user presses the Play button it will simply carry on where it left off.

Rewind Button

This script is considerably more complex, this is because we don't want to rewind to a point before the movie actually starts. The "if else" in the script simply checks that we are currently more frames into the movie, than we plan to jump back. If so, we jump that number of frames back. If not we simply go to the start of the movie.

_root.rw_btn.onRelease = function () {
if (_root.vidspot_mc._currentframe > 240){
_root.vidspot_mc.gotoAndPlay(_root.vidspot_mc._currentframe-240);
} else {
_root.vidspot_mc.gotoAndPlay(1);
}
}

In this case the number 240 represents the number of frames we want to jump back each time the rewind button is released. At 24 frames per second this equates to jumping backward 10 seconds each time the button is clicked. Adjust this figure according to your needs.

Forward-wind Button

As with the rewind button, we don't want tojump BEYOND the end of the movie. This "if else" simply checks that there are still more frames remaining in the movie, than we plan to jump forward. If so, we jump that number of frames. If not we simply go to the end of the movie. Unlike rewind, where the start of the video is easily known (it being frame 1), in this case we need to know how many frames the movie has so we know the number of the last frame. The script does this by finding the _totalframes property of the video file (see line 2 below).

_root.fw_btn.onRelease = function () {
tframe = _root.vidspot_mc._totalframes;
if (_root.vidspot_mc._currentframe <>240) {
_root.vidspot_mc.gotoAndPlay(_root.vidspot_mc._currentframe+240);
} else {
_root.vidspot_mc.gotoAndStop(tframe);
}
}

In this case the number 240 represents the number of frames we want to jump ahead each time the forward wind button is released. At 24 frames per second this equates to jumping forward 10 seconds each time the button is clicked. Adjust this figure according to your needs.

Player Progress Bar

This script controls the bar that shows the viewer how far the movie has played. It is a beautiful simple script. We divide the number of the currentframe of the playing movie by the total number of frames in the movie to give us a number between 0 and 1. A result 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 this number 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.

onEnterFrame = function() {
comppc = _root.vidspot_mc._currentframe / _root.vidspot_mc._totalframes;
_root.progbar_mc._width = _root.progbarframe_mc._width*comppc;
}

Progress Bar Jumper

This feature did not exist in the original program I wrote, but I decided that it would not be complete unless the user could click anywhere on the progbarframe_mc and jump straight to that part of the movie. As you can see it is slightly more complex.

First we define a variable for the left side of theprogress bar. 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 as a number between 0 and 1. A result of 0.5 would mean the user clicked in the middle of the bar.

Then we tell the current movie being played to jump to a particular frame number. This is calculated by multiplying the total number of frames by the number based on where the user clicked on the bar. 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 is vital as frame numbers are whole numbers - e.g. there is no such thing as frame 22.5 - and with Flash if the frame does not exist it simply does nothing - so Math.round gives us a whole existing frame number for us to gotoAndPlay.

_root.progbarframe_mc.onRelease = function() {
barleft = _root.progbarframe_mc._x;
jumppos = (_xmouse-barleft)/_root.progbarframe_mc._width;
_root.vidspot_mc.gotoAndPlay(Math.round(jumppos*_root.vidspot_mc._totalframes));
}

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

Lookout for my next post where I explain how to convert video files into SWF for use with this player.

Version 2 of the player (currently working on so watch this space) uses external FLV files rather than SWF so much more up to date.

The Latest Design Thinking - Intersections Podcast Now Live

Get this widget!

Interactive Media of Note - Narnia.com

Sometimes you come across a piece of interactive media that you just wish you had been a part of producing. Narnia.com is one of my favourites.

What I love about this particular piece of interactive media is the richness of the experience it provides. You know the designers have been allowed to go to town, and they really have. For a start they really know how to set the scene and they use visuals (static and animated) along with sound to do it. You can hear the wind buffeting the attic room with the wardrobe, you feel cold as the icy wind of Lantern Wood blasts you and you feel warm as you wander through Aslan's Camp.

Beyond the ambience it is really nice to just explore the world they have created. You can look around by moving the mouse in any direction and click on objects. Selecting the Globe reveals a map allowing you to change your location. There are even games built in to test a level of wits.

I really appreciate the attention to detail. These designers have gone much further. At the beginning, instead of the standard loading bar, you see the door handle of the attic room turning. The same "alternative" approach to the loading bar has been taken throughout, as you watch emblems of the various factions from the story slowly appear instead. Details such as giving the lamp in the wood a flickering flame have not been missed.

Truly this is a feast for the senses, and a great example of what multimedia can be made to do if you have the imagination, and the client is willing to pay for the time.