Dan's Interactive Media Pages

Normal Maps from Photos

2012-01-27T23:07:00.002Z

Normal mapping is a vital part of 3D modelling and rendering these days. In some cases it take hours off your modelling time, and in others hours off your rendering time (and sometimes both).

A while ago I came across this tutorial about making normal maps from photos. I finally got round to trying it.

Introducing the fruits of my labours - this example of mine is the side of a well worn pound coin.

You don't need Photoshop to do this, and to prove it I used the GIMP image manipulation program to make the normal map, and then applied and rendered in Carrara below.

You can see from this render that it works, but some of the edges need to be sharper.

A brief critique of this attempt shows the angle of the light source was too low when photographing the coin, making long shadows, and positioning the light source slightly higher would shorten the shadows and give sharper less buttery results, but having tested it using the 3D preview mode in the GIMP Normal Map Filter, it isn't half bad, and much quicker than trying to build a high res mesh, or digitally painting a height map for conversion to a normal map using tools like the Nvidia Normal Map Filter.

For some objects you really should give this a try.

Of course, even this early attempt is usable if supported by other channels such as shine and highlight (specular) using a grayscale map based on the same photos as the normal map. I also used the same grayscale map to mix two shades of coin colour to show a diffrence where dirt gets ingrained and where it gets rubbed off and used the same map again to give two levels of reflection because dirt is not as reflective as metal. Combining all these with the normal map brings a whole different level of realism.

I'll explain how I used the same photos as the normal map to make the grayscale specular map that I also used for reflection and grime in my next post.

Game Development - High Score Leader Boards in Flash

2011-10-18T11:07:00.003+01:00

One way of increasing the repeat appeal of a game, particularly for 1 player games, is to include a leader board of high scores. This gives the player an additional goal of beating their previous best score, allowing them to compete with themselves, and other players, even if the game has only 1 player mode.

As long as your game stores the player's score under the variable "score" this example should provide a good starting point for your own leader board or high score board.

In this example I am using ActionScript 2.0 in Flash.

The Code

The code for this is split into 3 parts. First we create a multidimensional array for keeping the scores and player signatures. Second, we store the score from the game, third we create the leader board that transfers data in and out of the array.

Part 1 - Create a Multidimensional Array

In my game the leader board only shows the top 10 scorers. For each one it displays the score and a 3 character signature from the player.

Before we can store data we need to create the place to store it. In this case I am using a multidimensional array. Multidimensional because I want to store 10 elements (1 for each of the top 10) with 2 data elements (score and signature) per player. Doing it this way allows me to sort them later based on score so I can display them from highest scorer to lowest scorer.

My approach was as follows:

/*NEW ARRAY*/
/*Make a new array object*/
var leaderboard_array:Array = new Array ();

/*'Push' data elements onto the array*/
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});

This code must run only once, run it again and you will add to the end of your array, eventually making it huge.

In effect we create an array of 10 elements, that each contain an array of 2 elements. An array within an array. Using the approach I have, where I have named each 'sub'-element "initials" and "score" means that later I can refer to these directly by name - which makes coding a bit easier to do and debug.

My new array includes pre-coded default values, this means something will display the first time and we don't get a blank leader board.

Part 2 - The Game

Your game is your own. The important thing is that you store the players "score" at the end of the game.

Because the my_array.sort(Array.NUMERIC)in Flash does not work correctly (see here), we cannot use strict datatyping when we define our variables. So, when you first define the "score" variable, all you need to do is:

var score = 0;

Don't do:

var score:Number = 0;

Or the code won't work later, when we have to treat "score" as a string for sorting.

When the game is over, just make sure you store the player's score in the "score" variable, e.g.:

score = endgamescore;

Part 3 - The Leaderboard

At this point we have an array, and a "score". In this part of the program we need to do the following as essential elements.

a. Test whether the player's latest "score" is greater than the lowest score on the current leader board.
b. If it is, allow the player to input a 3 character signature and store it, along with the "score" in the array replacing the previous lowest score.
c. Sort the array by score so each one is listed in order of greatness.
d. Display the contents of the array in text box to show the leader board to the player.

There is more to it than that, especially since sorting numerically in Flash is not actually possible by direct means - I have gone into detail on that on another post - so much of the code is required to solve that problem.

The following code relies on the stage containing:

1. A text input box with the instance name "initials_txt"
2. A button with the instance name "button_btn"
3. A dynamic text box with the instance name "lb_txt"

The code is then as follows:

/* vars */
/* strict datatyping is off for score and sortscore in order to sort it due to restriction in Flash */
var sortscore = 0;
var initials:String = "";
/*set character limit on input text*/
_root.initials_txt.maxChars = 3;
/*PRE-POPULATE LEADERBOARD WITH CURRENT DATA FROM ARRAY*/
for (var i = 0; i < leaderboard_array.length; i++) {
    _root.lb_txt.text += leaderboard_array[i].initials + " " + leaderboard_array[i].score + "\n";
}
/*ADD NEW SCORE ON SUBMIT*/
_root.button_btn.onPress = function () {
    /* get player name value*/
    initials = _root.initials_txt.text;
    /*convert score to decimals ready for correct sorting*/
    sortscore = score / 10000;
    /*convert score values in array to decimals ready for correct sorting*/
    for (var i = 0; i < leaderboard_array.length; i++) {
       leaderboard_array[i].score = leaderboard_array[i].score / 10000;
   }
    /*sort current board by score - low to high*/
    leaderboard_array.sortOn ("score");
    /*if player score is higher than lowest score on board, replace it with player score and name*/
    if (sortscore > leaderboard_array[0].score) {
        _root.leaderboard_array[0].initials = initials;
        _root.leaderboard_array[0].score = sortscore;
    }
    /*sort again to position the new score and initials correctly in order compared to other scores in array*/
    leaderboard_array.sortOn ("score");
    /*convert all the 'decimaled' scores back again to real scores*/
    for (var i = 0; i < leaderboard_array.length; i++) {
        leaderboard_array[i].score = leaderboard_array[i].score * 10000;
    }
    /*reverse the order of the array to show scores from high to low*/
    leaderboard_array.reverse ();
    /*clear existing text from the leader board text box*/
    _root.lb_txt.text = "";
    /*print new array content to the leader board text box*/
    for (var i = 0; i < leaderboard_array.length; i++) {
        _root.lb_txt.text += leaderboard_array[i].initials + " " + leaderboard_array[i].score + "\n";
    }
};

That's the main thrust of it - read the comments in the code to see what each lump of code is doing. Of course there is scope to develop on this yourself, but I hope this helps. Happy leader board-ing.

Generating QR Codes from the Google Chart API

2011-06-17T23:11:00.002+01:00

Quick Reference (QR) Codes are a type of Matrix Barcode capable of storing much more information than your normal stripy barcode.

Many organisations have taken to using QR codes as part of an integrated marketing campaign to store web page URLs, allowing users to capture the 'barcode' on their mobile phone cameras in order to visit the site in a quick and easy fashion.

QR Codes from Google Chart API

The Google Chart API has, among other things, the facility to generate QR codes of all types, encoding within them text, binary data or Kanji strings that you define - up to the maximum data limit of a QR code.

The Google Chart API is very simple to understand and returns a PNG file in response to the parameters you set.

Below I have a JavaScript/HTML implementation of the Google Chart API, that returns a QR code based on the text you input.

Generate a QR Code - JavaScript Implementation of Google Chart API

QR Code Generator Source

The source code for my JavaScript implementation above:

<script type="text/javascript"> function changeSrc()   {   var qrCodeText = document.getElementById('qrText').value;   document.getElementById("qrImage").src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl="+qrCodeText;   document.getElementById("qrLink").value="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl="+qrCodeText;   } </script><br /> <style> .DAtextbox { width:250px; font-size:12pt; padding:5px; } .DAsubmitbut { width:250px; font-size:12pt; padding:5px; text-align:center; } .DAimg { border:1px solid #CCCCCC; padding:0px 50px 0px 50px; } </style><br /> <p>  <input name="qrText" type="text" class="DAtextbox" id="qrText" value="Enter Your Text"><br /> <p></p><p><input name="Submit" type="submit" class="DAsubmitbut" value="Generate QR Code" onclick="changeSrc()"><br /> <p></p><p><img class="DAimg" id="qrImage" src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=http://dansinteractive.blogspot.com/2011/06/generating-qr-codes-from-google-chart.html" width="150" height="150" /><br /> <p></p><p>  <textarea name="textfield" cols="18" rows="6" readonly class="DAtextbox" id="qrLink">

Happy QR Code Generating.

Editing Vado HD Video With Premiere Elements 7

2011-05-14T01:17:00.000+01:00

If like me you have had some frustration trying to get Premiere Elements to work with VADO HD video, without hanging on import, you may find this solution helpful.

When for a recent birthday I was the glad recipient of a new VADO HD pocket video camera, and a new sealed Premiere Elements 7, I was excited to get editing some footage. However I quickly ran into trouble - when importing the VADO footage into Elements it would either hang, or if it did import would apparently have no picture. Worse, because of the way the Elements video library previews video assets from all your projects by default, Elements would fail to start up and hang - purely because some VADO HD footage was in the library.

If Premiere Elements won't start because of a dodgy video file in the library

First, if Elements won't start, or hangs, because you have some incompatible footage in the library the simplest cure is to rename the suspect file, or rename the folder it is in, before you start elements. This will break the link Elements has to the file. Then Elements will start properly and give you a 'file not found' icon where the video thumbnail once was in the library. At this point you can simply click on it in the library and delete it.

Making Premiere Elements read VADO HD video files

In trying to solve this I have tried 2 conversion methods (one using Super, and another using Prism), but either of those means a laborious process of mass conversion, and you end up with duplicate files in different formats, and the converted files are either much larger than the originals, or a lower quality I found.

The best solution was simply to install the K-Lite Codec Pack. The installer checked for conflicting codecs as it went along, giving me the option to remove them automatically (which I did). I used the advanced installer option so I could choose what to install, and selected the "lots of stuff" option so I got pretty much everything - including the all important h.264.

Once installed I ran Premiere Elements, imported a native unconverted VADO HD video file and added it to the timeline with barely a pause in the action.

Forget laborious file conversion - try installing the K-Lite Codec Pack before you do anything else.

Still stuck?

If you still have problems you may find the following helpful:

Batch converting VADO HD
Handbrake Video Transcoder
Converting Video for Premiere

Convert Flash to HTML5 with Adobe Wallaby

2011-04-29T21:47:00.001+01:00

.NET magazine reports this month that Adobe has released a "Flash-to-web-standards converter" called Wallaby, that basically takes your FLA file and spits out standards compliant HTML5 with accompanying JavaScript.

I must say I was waiting for Adobe to make a move like this ever since Apple got the mardies and decided to not support the Flash Player on its mobile devices. But I thought it might be a feature of CS6, I didn't expect it to be a free Adobe AIR app that I could download today.

.NET quotes senior product manager at Flash Professional as saying "Wallaby's initial focus is on converting banner ads and simple animations to HTML5, to cater for iOS, but that future development will be driven by consumer requirements..." buy .NET for more info.

So, while not expecting great shakes for some of my more advanced Flash work, I can't wait to see what it can do... I'm going to have a play.

Experimenting with Sound in Flash - DJ Music Mixer

2011-04-09T00:21:00.003+01:00

As soon as I realised the possibilities available with Sound Objects in Flash I realised that you could write a simple sound mixing app using ActionScript.

I started this experiment ages ago, but ran into a problem with the sound I couldn't solve straight away. 18 months later I remember it exists and blow the dust off to find the problem still waiting for me.

Just in case any one else has struggled with the same problem... I now have the solution, or at least know why that particular approach wouldn't work and have an alternative.

Once you set up a Sound Object you can either use attachSound to connect an embedded sound from your document Library, or you can use loadSound to load in an external MP3 file. But... and this is where I went wrong... you can't do both. In other words, if the first time you initialise the sound object you use attachSound you can't later change the sound using loadSound and expect it to behave normally. At least that was my experience.

My experimental app was a 2 channel audio mixer that used 2 Sound Objects, one for each channel. The mixing was done very simply by reducing the volume of one Sound Object while simultaneously increasing the volume of the other. So far so good.

However, for the Sound Objects to properly initialise, (and therefore the volume control code work properly) they needed to have a sound loaded into them straight away. The most obvious solution to me was to use attachSound to connect a sound embedded in the movie. So I made a couple of MP3s of 0 second duration and used those embedded within the app. Fine, the Objects initialised OK.

However, to be useful you need to be able to load external MP3s in, or it's only a 2 song show. And that's where the problem arose, because I would need switch from using attachSound to loadSound after the object initialised, and all of a sudden the volume control stops working as expected.

And that's what stumped me. It was only coming back with fresh eyes that allowed me to spot this discrepancy.

So, how to overcome it?

Simples - use loadSound from the first, but get Flash to load a non-existent sound by getting it to load nothing (e.g. ""). Sure, Flash will error, and complain it can't find the file, but the Sound Object will still initialise correctly - and the error is only visible when you test the movie from within the authoring software, not once exported.

Hey presto, when I load an external sound it all works, because I used loadSound all along and didn't change method later on. My music mixing app finally works.

It's possible there are other factors or other solutions - happy to hear about them, but that's how I got round it.

If it helps, happy to help.

Graphically Displaying Yahoo Weather API Data in Flash

2011-04-02T10:49:00.003+01:00

In my last post I looked at querying the Yahoo GEO and Weather APIs from within flash in order to return an XML file containing weather and forecast information.

Last time I simply pulled out the location and the weather condition text that gave a general description of the current weather. But actually the XML contains many more items than that. One of which is the prevailing temperature of the location being queried.

Displaying the temperature as text is relatively easy but you can also be more graphic, as in my virtual thermometer above.

In this prototype I am simply using the temperature data, which Yahoo provides as an integer, to determine the length of the 'mercury' in the thermometer.

How it was done

The Graphics

First I made all the pretty graphics in Fireworks (but you could use Photoshop, Paint.net, PhotoPlus etc.), and imported the assets into Flash. The important thing is that your scale (that's the Celcius and Farenheit rulers are correctly in line with each other, and the increments are spaced evenly on each scale).

To do this you need to understand the following:

-40C is the same as -40F (that's where the two scales meet)
0C is the same as +32F
+50C is the same as +122F

On that basis you should be able to construct C and F scales that line up the way they should. I did it by making two the same and then scaling the F scale smaller vertically so that -40 F and 122 F lined up with -40 C and 50 C respectively.

I also chose to run my scales from -40C to +50C because using the Yahoo Weather API I needed a scale that would reasonably take all global temperatures. I figure that somewhere might get close to -40C and somewhere might get up to +50C. If it turns out my scale isn't big enough I can always ammend it.

The 'Mechanics'

Once the graphics are in Flash I create a small red rectangle for the 'mercury' and turn it into a MovieClip (press F8) with the registration point at the bottom left, and with the instance name "liquid_mc". Then I create a transparent rectangle for the tube in which the 'mercury' travels and turn it into a MovieClip with the instance name "tube_mc" - this needs to be exactly the same height as the distance between the lowest temperature on your graphical scale (in my case -40C) and the highest temperature (in my case +50C) - for me this turned out to be 360 pixels, but it will vary depending on the size and shape of your graphical representation of the scale.

I place the two MovieClips on top of the graphic in the right place at the bottom of the graphical glass tube so when the the 'mercury' grows it will grow up from the bottom.

Then I select the graphic, the "tube_mc" and the "liquid_mc" and turn them all into a MovieClip with the instance name "thermometer_mc", so that "tube_mc" and "liquid_mc" are inside "thermometer_mc".

Finally, create a button, and add it to the stage with the instance name "submit_btn". Users will need to press this to run the query of the Yahoo API and display the result.

The Code

Then I create a new layer, give it the name 'actions' (so all my code is neatly in one place), and put in the following actionscript. Read my comments in the code to see what is happening:


stop ();
/*Thermometer*/
/*calculate the pixel height of 1 degree c by dividing the height of the thermometer tube by the number of degrees c it covers*/
var degree:Number = _root.thermometer_mc.tube_mc._height / 90;
/*calculate zero - because our thermometer starts at -40C we use this to ensure future calculations take account of this fact*/
var zero:Number = degree * 40;
/*Accessing the Yahoo API to find out the weather in any location using postcode and country code*/
/*set the search terms as variables, you can pull these from user input with some different ActionScript */
_root.submit_btn.onPress = function () {
var zip = "SW1A 1AA";
var country = "UK";
/*Find the WOEID*/
woeidXml = new XML ();
woeidXml.ignoreWhite = true;
/* run the loadWoeid function when the XML file loads that contains Yahoo's reply to our query below*/
woeidXml.onLoad = loadWoeid;
/* ASK QUESTION 1 - query the Yahoo API using YQL and the search terms above */
woeidXml.load ("http://query.yahooapis.com/v1/public/yql?q=select%20woeid%20from%20geo.places%20where%20text%3D%22" + zip + "%2C" + country + "%22&diagnostics=true");
/* this function will run when the XML file loads that contains Yahoo's reply to our query */
function loadWoeid () {
/*parse the XML response and store the woeid value as a variable in Flash called 'woeid'*/
woeid = woeidXml.childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0];
/*find the WEATHER from the WOEID just gathered*/
/* we nest this function for question 2 within the function for question 1 because doing it this way means that question 2 is not asked until question 1 has an answer*/
weatherXml = new XML ();
weatherXml.ignoreWhite = true;
/* run the loadWeather function when the XML file loads that contains Yahoo's reply to our query below*/
weatherXml.onLoad = loadWeather;
/* ASK QUESTION 2 - query the Yahoo Weather API using the woeid we found out in question 1 above */
weatherXml.load ("http://weather.yahooapis.com/forecastrss?w=" + woeid + "&u=c");
/* this function will run when the XML file loads that contains Yahoo's reply to our query */
function loadWeather () {
/*parse the XML response and store the current temperature condition value as a variable in Flash called 'temp_xml'*/
temp_xml = weatherXml.childNodes[0].childNodes[0].childNodes[12].childNodes[5].attributes.temp;
/*set current temperature variable from XML*/
var temp_c:Number = temp_xml;
/*set height of the thermometer liquid_mc graphic based on the temperature extracted from the XML*/
_root.thermometer_mc.liquid_mc._height = (temp_c * degree) + zero;
}
}
};

As you will see, this is virtually the same code as in my previous post, the main difference is how we use the extracted data to change the height of a MovieClip that represents the 'mercury' in the thermometer. To find the temperature of a different location simply change the values of zip and country on lines 10 and 11.

I went a bit further (not explained in this post) and put in some text input fields so that the user can define their own location (maybe I will get time to explain that in a future post).

Meanwhile, happy temperature... er... displaying.

Finding the Weather with YQL and the Yahoo API

2011-03-21T02:02:00.003Z

I spent some of this weekend examining the potential of the Google API for finding out the weather in my area. My long term aim is to include some nod to local weather in a Flash app I am working on. While the Google API was easy to tap into (see here) it is not very well documented and apparently unofficial and may change or vanish without warning (see discussion here) - which wouldn't bode well for inclusion in an app.

It was Jason Emerick's blog that pointed me towards the Yahoo API as an alternative with better documentation and official support. Now I have always been a fan of Google over Yahoo, but needing reliability I sloped over to Yahoo and revived my dormant account. It wasn't long before I was utterly convinced that Yahoo have an excellent API with excellent support, and a terrific console to help you try out your queries and test the results.

Differences between getting Google weather and Yahoo weather

While powerful, the Yahoo API didn't give me the weather information I was after with quite the same ease as the Google API. With the Google API all you needed to do is call the API URL and append your location to the end:

http://www.google.com/ig/api?weather=london,uk

The results are XML you can parse using your chosen language (in my case ActionScript).

Yahoo on the other hand isn't quite as straightforward (though much better once you get the hang of it). This is because you can't directly query Yahoo's weather API using your chosen location as you can with Google. Yahoo instead requires you to specify the WOEID (Yahoo's proprietary "Where On Earth ID") of the location you want to know the weather for.

Once you know the WOEID of the location, finding the weather for that location is as simple as:

http://weather.yahooapis.com/forecastrss?w=44418&u=c

WOEIDs appear to be an invention of Yahoo for identifying locations. Actually they are a really good idea, as it means your query will always work, even when places and names change.

The challenge is, of course, that most people won't know what the WOEID for their location is and so won't be able to use it to find out the weather in their area. I don't know my WOEID, that's for sure.

So we have to first find out our WOEID from our known location. You can do that like this:

http://query.yahooapis.com/v1/public/yql?q=select%20woeid%20from%20geo.places%20where%20text%3D%22SW1A%202AA%2Cuk%22&diagnostics=true

The Yahoo API console is very helpful in letting you experiment with the queries, and producing URLs like the one above for you to call in your code.

So knowing that with 2 questions I can still get the information I need from Yahoo, I felt more confident pressing ahead with the Yahoo API with its better documentation and promise to give 6 months notice to any changes. A far cry from Google's relative silence on the issue with their unofficial weather API.

Using ActionScript to query the Yahoo geo and weather APIs

So ultimately I have to ask 2 questions of Yahoo with my ActionScript. First - what is the WOEID for my location given as postcode, country? Second - what is the weather forecast for this WOEID?

For question 1 my ActionScript will use this query via the Yahoo YQL API to find out the location's WOEID:

http://query.yahooapis.com/v1/public/yql?q=select%20woeid%20from%20geo.places%20where%20text%3D%22SW1A 2AA%2Cuk%22&diagnostics=true

For question 2 my ActionScript will simply reference Yahoo's weather API using the WOEID from question 1 as a query term, resulting in an XML file containing weather information for the location represented by that WOEID:

http://weather.yahooapis.com/forecastrss?w=26355493&u=c

The trick with the ActionScript is to ask the questions in the right order, and to write your code so question 2 is not asked until it has the answer to question 1 (else you won't get a proper reply and your ActionScript won't get the XML it is expecting and will return 'undefined' where you were expecting the weather status).

Here's my solution, read the comments to see what I am doing there:


/*Accessing the Yahoo API to find out the weather in any location using postcode and country code*/
/*set the search terms as variables, you can pull these from user input with some different ActionScript */
var zip = "SW1A 2AA";
var country = "uk";
/*Find the WOEID*/
woeidXml = new XML ();
woeidXml.ignoreWhite = true;
/* run the loadWoeid function when the XML file loads that contains Yahoo's reply to our query below*/
woeidXml.onLoad = loadWoeid;
/* ASK QUESTION 1 - query the Yahoo API using YQL and the search terms above */
woeidXml.load ("http://query.yahooapis.com/v1/public/yql?q=select%20woeid%20from%20geo.places%20where%20text%3D%22" + zip + "%2C" + country + "%22&diagnostics=true");
/* this function will run when the XML file loads that contains Yahoo's reply to our query */
function loadWoeid () {
/*parse the XML response and store the woeid value as a variable in Flash called 'woeid'*/
woeid = woeidXml.childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0];
/*test the value we have stored with a trace*/
trace (woeid); 
/*find the WEATHER from the WOEID just gathered*/
/* we nest this function for question 2 within the function for question 1 because doing it this way means that question 2 is not asked until question 1 has an answer*/
weatherXml = new XML ();
weatherXml.ignoreWhite = true;
/* run the loadWeather function when the XML file loads that contains Yahoo's reply to our query below*/
weatherXml.onLoad = loadWeather;
/* ASK QUESTION 2 - query the Yahoo Weather API using the woeid we found out in question 1 above */
weatherXml.load ("http://weather.yahooapis.com/forecastrss?w=" + woeid + "&u=c");
/* this function will run when the XML file loads that contains Yahoo's reply to our query */
function loadWeather () {
/*parse the XML response and store the current weather condition value as a variable in Flash called 'condition_xml'*/
condition_xml = weatherXml.childNodes[0].childNodes[0].childNodes[12].childNodes[5].attributes.text;
/*parse the XML response and store the current weather place name value as a variable in Flash called 'place_xml'*/
place_xml = weatherXml.childNodes[0].childNodes[0].childNodes[6].attributes.city;
/*test the values we have stored with a couple of traces*/
trace (condition_xml);
trace (place_xml);
}
}

And that's a wrap. Ideally I wanted to get a single answer from Yahoo by linking the 2 questions in their API, but that proved difficult using just YQL because Yahoo would not provide weather data using YQL unless you knew the location (another apparently random code different again to the woeid) or you provided a US zip code (so no good to us Europeans). So I settled on this 2 stage solution that works for me.

Bugs or traits include being able to swap where I input a postcode with the name of a city, and you still get working results from Yahoo provided it has heard of the city.

Anyway, I know how I will use this, so if you have a use for this happy coding.

Addendum

Here's an implementation of the above code that takes user input and delivers the result.

Annual Clock Flash App

2011-03-19T15:34:00.006Z

Some projects are just plain fun. You get an idea, you get inspiration on how it should look, you research the maths that goes behind it and crack on until it is done. The Annual Clock is one such project for me. I actually finished it as a Flash application almost a year ago, but only just got round to converting it into a screensaver.

The Idea

Visually it was inspired by astronomical clocks of yester-year (such as the one below).

My aim however was not to portray the movement of heavenly bodies as much as it was to portray the passage of time in a more unique way than the standard hour, minute and second hands. Something about a clock that showed all layers of 'time' passing at once seemed an exciting and relatively unique prospect. My approach took a series of discs, each portraying a different element of time measurement, radiating out from the centre, with each disc moving progressively more slowly working from the instant, through seconds, minutes, hours, daylight, days, moon phases, months and seasons. I stopped there since the next levels (e.g. years, centuries, milleniums etc) would give the clock a lifespan, something I wanted to avoid. Rather than using hands I had the discs rotate instead, with the centre point representing the person - the instance of time in which we exist now.

But enough of concept.

The Maths

The code for the passage of time is pretty straightforward. You take the current computer system time and date, and use it to rotate the discs as a proportion of 360 degrees. Not too difficult. The tricky part was dealing with items that don't stick rigidly to our calendar such as Easter, the moon phases, and the solstices and equinoxes.

For the Easter calculation I did an ActionScript implementation of a formula on the BBC H2G2 website.

For the solstices and equinoxes I did an ActionScript implementation based on the astronomical algorithms of Jean Meeus (Astronomical Algorithms, 1st Ed., 1991) which someone had posted online somewhere (can't remember where now). Meeus's formulas calculate the date of the current year's solstices and equinoxes, but gives the result as a date using the Julian calendar. (In fact Meeus's formulas calculate the time of the events to within 4 minutes of actual with any error down to orbital perturbation - how cool is that?)

However a Julian date was not suitable for my needs, and meant some highly complex conversion from the Julian to the Gregorian calendar based on a formula published online by Utrecht University.

I confess I didn't understand most of the formulas (but then I am not an astrophysicist or mathematician - and I gave all sources their dues in my ActionScript comments). But that's the great thing about ActionScript's mathematical functions - if someone has written it out, it is fairly logical how you need to set up the same thing in ActionScript.

The moon phases are based on the mean moon phase duration as reported by NASA from the year 2000 (so it won't be perfect forever, but pretty good for this purpose).

So, my particular thanks go to Meeus, Utrecht University and NASA for helping me with the bit I could never work out on my own without some serious long term astronomical observations of my own. The practical upshot is a Flash based clock application that not only shows the passage of time from seconds to seasons, but also one that can predict Easter, the equinoxes and solstices, and understands that moon phases are not precisely 28 days long. Thanks folks.

Free Download

Feel free to visit the application page and download the v0.9 release as a screensaver.

Sliding Image Viewer in Flash

2011-02-03T10:20:00.002Z

You may have come across flash menus where you drag a selector over a row of small images which slides a larger row of the same images into view. This code example is a basic solution to that problem.

Method

1. First produce all your images. You need a large version and a thumbnail version of each. Then import them into Flash.

2. Place your thumbnail images in a row on the stage. Make sure the centres of the images are equally spaced. Then select them all, and press F8 to convert them into a MovieClip.

3. Place your larger image in a row on the stage above the thumbnails, in the same sequence as the thumbnails. Make sure the centres of the images are equally spaced. Then select them all, and press F8 to convert them into a MovieClip. Give the MovieClip the instance name items_mc.

4. Create a draggable selector. Mine has a transparent fill so that I can click on it anywhere, but still see through it. Convert it into a MovieClip called slider_mc. Place it over the centre of the first thumbnail in the row.

5. Find out the distance in pixels between the centre of the first large image and the centre of the last large image. This will be used for the variable itemwidth in the ActionScript.

6. Find out the coordinate of the centre of the first thumbnail. This will be used for the variable sliderleft in the ActionScript.

7. Find out the coordinate of the centre of the last thumbnail. This will be used for the variable sliderright in the ActionScript.

And that is all your preparation done.

The Code

Insert the following code in the first keyframe of your movie. Then replace the values of the itemwidth, sliderleft and sliderright variables with the values you worked out in steps 5-7 above.


/*This whole mechanism assumes that the CENTRES of all items are equally spaced.*/
/*starting x coordinate of the CENTRE of the first item in the row*/
var itemstart = _root.items_mc._x;
/*Item width is the distance between the CENTRE of the first item in the row and the CENTRE of the last item in the row*/
var itemwidth = 1920;
/*this time I use the difference between coordinates of the CENTRE of the first and last items to determine the width*/
var sliderleft = 40;
var sliderright = 520;
var sliderwidth = sliderright-sliderleft;
/*slider*/
/*Allows us to drag the slider in a straight line between 2 fixed coordinates when the mouse button is clicked on it*/
_root.slider_mc.onPress = function () {
this.startDrag(false, sliderleft, 340, sliderright, 340);
}
/*stop drag when we let go*/
_root.slider_mc.onRelease = function () {
stopDrag();
}
/*stop drag when we let go if we happen to be outside the boundaries of the flash movie*/
_root.slider_mc.onReleaseOutside = function () {
stopDrag();
}
/*repositions the items_mc depending on how far we have dragged the slider is based on a ratio of how far the slider has been dragged along the available length. 0 means the slider is at the start, 1 means it is at the end, 0.5 would mean it is in the middle*/
onEnterFrame = function () {
sliderratio = (_root.slider_mc._x - sliderleft)/sliderwidth;
_root.items_mc._x = itemstart - (itemwidth*sliderratio);
}

When you are done, press CTRL+ENTER to test. You should be able to bring any of the larger images into view by dragging the slider over the thumbnail version of the same image.

And that's a wrap.

Link Flash Buttons to Web Pages

2010-08-26T12:45:00.001+01:00

This is simple stuff compared to doodling apps and platform games, but no less vital if that's what the job requires. Here I give a brief intro to making Flash link to external URLs.

We can often think of Flash as creating standalone apps that talk only internally, but sometimes there is a need for your Flash work to link to external web pages, either because you are making a Flash menu for a website, or because you want your Flash based CD ROM interface to link to your website.

Whatever the reason, it's really simple.

Example

In this example I have 2 simple buttons that link to other websites.

Make some buttons

In this example I have a simple button symbol in the Library. I drag 2 instances of the button onto the stage and give each the following instance names: "google_btn" and "bbc_btn".

Then I add the following ActionScript.

The Code

This ActionScript is added to the first keyframe on the root timeline:


_root.bbc_btn.onPress = function () {
    getURL("http://www.bbc.co.uk/","

_blank

");
}
_root.google_btn.onPress = function () {
    getURL("http://www.google.co.uk/","_blank");
}

How does it work?

Nothing could be simpler. We use a simple onPress event handler, so as soon as the button is pressed the action happens. The action is very easy to follow - we are using getURL and then specifying the URL and the target window.

getURL("http://URL_GOES_HERE","_TARGET_WINDOW_HERE");

And that's a wrap.

Simple Platform Game Engine in Flash

2010-08-25T00:17:00.002+01:00

This year my students will be learning about game engines. For 3D they will most likely use the Unreal Development Kit, along with 3DS Max/Carrara 8 Pro for content creation. But that's all 3D - what about the 2D games? Well, for 2D, my platform of choice is Flash.

Problem is, that unlike the UDK, or Unity, or even the FPSC, Flash is not a game engine - and that means, not only creating and scripting content for 2D games, but also scripting the whole engine.

It's something I have been meaning to do for a while. And while I know that many talented developers have posted Platform game solutions online, there is something about working through the problem yourself that I really like. Besides, I don't always get on well with other people's code - and if I am to teach my students to code their own, I need a solution I have worked out so I know it inside out and backwards and can really explain it to them.

Many of you will want the code now, but I am still fine tuning it. Meanwhile, here is version 4d as a peep of how it is going so far (I am currently on version 4f).

Controls:
JetPack = SPACE
Left = LEFT ARROW
Right = RIGHT ARROW
Climb Ladder = UP/DOWN ARROW

When it is finished I will post the code and an explanation.

Controlling Sounds

2010-08-20T20:45:00.011+01:00

The basic way of including sound in your Flash movies is to add them to keyframes in the timeline. And this is fine for sounds that must coincide with animated events, or simple audio feedback on button rollovers. But if you want more sophisticated control over sounds, like starting and stopping them individually, or changing their volume, then you need to use ActionScript.

Preparing sound for ActionScript control

In Flash you can either load an external sound, or you can export sounds in your document Library for ActionScript. If you want to learn more about loading external sounds read my post on making an MP3 player in Flash. In this post I am going to just look at exporting sounds from the Library.

First off then you need to import all the sounds you need into your document Library of your .fla file. To do this click File > Import > Import to Library. Then browse for the sound file you need and click "OK". The sound will be imported into your Library. If you can't see your Library click CTRL+L (Cmd+L on the Mac).

Repeat this import step as often as you need to for every sound you need to appear in the Library.

Once they are imported you need to change their linkage settings to you can access the sounds with ActionScript. To do this right-click one of the sounds in the Library and choose linkage. When the Linkage Properties box opens tick the Export for ActionScript option, the Export in first frame will automatically be selected, this is fine. Then you need to give the sound an Identifier. By default the Identifier will be the same as the sound's original filename, but I find it helpful to give it an Identifier that makes it easy to remember what it is e.g. "backgroundmusic" or "whizzysound". Once you have given it a new Identifier you can click the "OK" button.

Repeat this step for every sound in the Library that you want to control with ActionScript.

Controlling sound with ActionScript

All this code should be added to the first frame of your Flash movie. I like to create a separate layer called "Actions" just for the code to keep it separate from other layers and so I know where all my code is when I want to edit it.

So far you have set some sounds in the Library to export for use with ActionScript and given those sounds Identifiers. Now we write the code to make use of those sounds.

Creating a sounds object and attaching a sound
First you create a sound object for each of the sounds you want to use, and then attach those library sounds to the objects. In this example let's pretend we have just one sound in the library with the identifier "backgroundloopsound". Here's how you create the sound object, and then attach "backgroundloopsound":


/* create a sound object */
var sound1_snd:Sound = new Sound(sound1_mc);

/* attach a sound from the library to the sound object */
sound1_snd.attachSound("backgroundloopsound");

In the above code I have created a sound object called "sound1_snd". I have given the object a target of sound1_mc which will allow me to control the sound independent of other sounds - but for this to work I must also add an empty MovieClip to the stage called "sound1_mc". I do this by creating a new MovieClip symbol in the library with nothing in it. Then I drag this symbol to the stage and give it the instance name "sound1_mc".

Then I have used "attachSound" to attach "backgroundloopsound".

Controlling the sound through the sound object

Now that we have a sound object with a sound attached, we can control the sound by controlling the object. Here are some examples.

Starting Sound


/* to make it play automatically, just put it in your code near the top */
sound1_snd.start(0, 100);

In the code above, the first 0 in the parenthesis means that the sound should be started at the beginning. If you have a 20 second sound, and you want to start it from 10 seconds in, then you should write sound1_snd.start(10, 100). The 100 in the parenthesis tells Flash how many times to loop the sound, when setting this, think about how long someone might stay on the scene and make sure you have enough loops or the sound will stop before they leave.

The previous start sound code starts the sound as soon as the frame loads in the flash movie. If you only want a sound to start when the user clicks a button, you need to first make the button and give it an instance name such as startSoundButton_btn, and you need to surround it by an event handler such as onPress:


_root.startSoundButton_btn.onPress = function () {
sound1_snd.start(0, 100);
}

Other ways of controlling sound

You can stop the sound:


sound1_snd.stop();

You can change the volume of the sound:


/* 0 = no volume, 100 = full volume, 50 = half volume etc... */
sound1_snd.setVolume(50);

If you want any of these to work when the user clicks a button, once again, you need to make a button and an event handler.

Here's an example

For this example I have 2 sounds in the library, one is a recording of me saying the word 'background" once. The other is a recording of me saying the word 'button' once. These were saved as WAVs and imported into the stage.

Then I right-clicked the 'background' WAV in the Library and chose "Linkage" and I set it to export for actionscript and gave it the handler "backgroundsound".

Then I right-clicked the 'button' WAV in the Library and chose "Linkage" and I set it to export for actionscript and gave it the handler "buttonsound".

Then I made an empty MovieClip by creating a new MovieClip symbol in the Library with nothing in it.

Then I dragged an instance of the empty MovieClip onto the stage and gave it the instance name "bgsound_mc".

Then I dragged another instance of the empty MovieClip onto the stage and gave it the instance name "buttonsound_mc".

Then I made a button symbol in the Library and dragged 4 instances onto the stage. The buttons were given the instance names: "button_btn", "bgmute_btn", "allmute_btn" and "unmute_btn".

I then added static text by each button to remind me which was which.

Once all that was done it was time to add the code.


/* create a sound object for the background sound */
var background_snd:Sound = new Sound (bgsound_mc);
/* attach a sound from the library to the sound object */
background_snd.attachSound ("backgroundsound");
/* create a sound object for the button sound */
var button_snd:Sound = new Sound (buttonsound_mc);
/* attach a sound from the library to the sound object */
button_snd.attachSound ("buttonsound");
/* start the background sound loop and set it to mute as default */
background_snd.start (0, 1000000);
background_snd.setVolume (0);
/* set the button sound to play on button roll-over */
_root.button_btn.onRollOver = function () {
    button_snd.start (0, 1);
};
/* making the mute background button work */
_root.bgmute_btn.onPress = function () {
    background_snd.setVolume (0);
};
/* making the mute every sound button work */
_root.allmute_btn.onPress = function () {
    background_snd.setVolume (0);
    button_snd.setVolume (0);
};
/* making the un-mute button work */
_root.unmute_btn.onPress = function () {
    background_snd.setVolume (100);
    button_snd.setVolume (100);
};

That's it

That's the basics. You can of course use different event handlers such as onRollOver, onRollOut, onDragOver to trigger the sounds or change their volume. You can of course use event handlers to trigger more than one sound, or more than one action, you might start one sound while changing the volume of another at the same time for instance.

It's up to you to be creative, now you know the basics.

Slider Input With a Difference

2010-08-19T17:04:00.004+01:00

Slider or sliding inputs for user interfaces are not new, we get them in desktop software and on the web. But this one is slightly different. Instead of sliding the handle along a bar, the handle stays still and the bar moves. This is helpful when the bar contains measurements that are too big to fit on the screen.

In this example we are pretending to measure height. Just click and drag the pointer to measure.

As you can see the code that prevents the ruler dropping off the end is a bit clunky, but it will do for now.

How to make it

Make a MovieClip of a ruler, with the scale spaced evenly along its entire length - set the registration point to be the bottom-left of the MovieClip. Then make another MovieClip for the ruler pointer - set the registration point to be the bottom-left of the MovieClip too.

Place both MovieClips onto the stage and scale them so that the fit together nicely, but also so the ruler is much much longer than the stage is high.

Give the ruler the instance name 'ruler_mc' and the pointer the instance name 'pointer_mc'.

Then insert the following code onto the first frame of the movie.

The code

The comments will give you some idea of what does what:


var damping:Number = 20;
/*the higher the number the slower the ruler will move*/
var rulerdivisions:Number = 20;
/*this helps us work out the how far the along the ruler you are*/
/*make the rule move when the pointer is dragged on*/
moveruler = function () {
    if (_root.ruler_mc._y >= _root.pointer_mc._y && (_root.ruler_mc._y - _root.ruler_mc._height) <= _root.pointer_mc._y) {
        movefactor = (clickstart - _ymouse) / damping;
        _root.ruler_mc._y += movefactor;
    } else if (_root.ruler_mc._y <= _root.pointer_mc._y) {
        _root.ruler_mc._y = _root.pointer_mc._y;
    } else if (_root.ruler_mc._y - _root.ruler_mc._height) {
        _root.ruler_mc._y = (_root.pointer_mc._y + _root.ruler_mc._height);
    }
    measure = Math.floor ((_root.ruler_mc._y - _root.pointer_mc._y) / (_root.ruler_mc._height / rulerdivisions));
    measure_txt.text = measure+" cm";
};
/*check when the pointer is dragged*/
_root.pointer_mc.onPress = function () {
    clickstart = _ymouse;
    moveRulerInterval = setInterval (moveruler, 15);
};
/*check when the dragging stops*/
_root.pointer_mc.onRelease = function () {
    clearInterval (moveRulerInterval);
};
_root.pointer_mc.onReleaseOutside = function () {
    clearInterval (moveRulerInterval);
};

And that's all there is to it. If you have a neater way of stopping the ruler from dropping off either end, feel free to post your solution as a comment.

Making it useful

If you want to use the input of this interface for something useful, perhaps to base other calculations on it, simply use the 'measure' variable within your formula, to represent the user's input.

Doodling Program in Flash AS2

2010-08-05T00:38:00.002+01:00

Inspired by Dragon's Den this week, when 2 guys demonstrated a fun drawing program they had made, I decided to learn some more about Flash's drawing API to make a very much simpler doodling application in Flash.

Try It

It might look complex, but the hardest bit is only 26 lines of ActionScript, including comments. What makes me laugh the most, is that the whole application comes out as less than 2Kb.

The Code

It's getting late in my time zone, so I won't dissect the code in this post. But enjoy the code, and I'll explain it another time:


//Code from http://dansinteractive.blogspot.com
//default settings
var layernum = 0;
var curcolour:String = "0x000000";
var curlineweight = 5;
//draw the line
drawline = function () {
["layer"+layernum+"_mc"]lineStyle(curlineweight, curcolour, 100);
["layer"+layernum+"_mc"]lineTo(_xmouse, _ymouse);
};
//start drawing on mouse press
_root.paper_mc.onPress = function() {
layernum += 1;
startx = _xmouse;
starty = _ymouse;
createEmptyMovieClip("layer"+layernum+"_mc", this.getNextHighestDepth());
["layer"+layernum+"_mc"]moveTo(startx, starty);
drawlineInterval = setInterval(drawline, 10);
};
//stop drawing on mouse release
_root.paper_mc.onRelease = function() {
clearInterval(drawlineInterval);
}
_root.paper_mc.onReleaseOutside = function() {
clearInterval(drawlineInterval);
}
//colour selector
_root.black_mc.onPress = function () {
curcolour = "0x000000";
}
_root.blue_mc.onPress = function () {
curcolour = "0x0000FF";
}
_root.cyan_mc.onPress = function () {
curcolour = "0x00FFFF";
}
_root.green_mc.onPress = function () {
curcolour = "0x00FF00";
}
_root.magenta_mc.onPress = function () {
curcolour = "0xFF00FF";
}
_root.red_mc.onPress = function () {
curcolour = "0xFF0000";
}
_root.white_mc.onPress = function () {
curcolour = "0xFFFFFF";
}
_root.yellow_mc.onPress = function () {
curcolour = "0xFFFF00";
}
//line thickness selector
_root.line1_mc.onPress = function () {
curlineweight = 1;
}
_root.line3_mc.onPress = function () {
curlineweight = 3;
}
_root.line5_mc.onPress = function () {
curlineweight = 5;
}
_root.line10_mc.onPress = function () {
curlineweight = 10;
}

Happy doodling.

Simpler Click and Drag Rotation in Flash AS2

2010-08-02T23:42:00.003+01:00

Although this is more lines of code, the code is easier to follow.

The last example used trigonometry to calculate the angle of rotation and gave a realistic simulation of dragging an object in a circle. This is much more basic, and sets the rotation of the object based on a horizontal drag only.

The Script


/* sets the starting point for the maths that follows */
var objectnewdeg = 0;
var objectdeg = 0;
var mindeg = 0;
var maxdeg = 300;
/* this function rotates the object live as the user drags */
rotateobject = function () {
/* this checks whether the user is rotating within the max and min rotation factors defined in the variables above, it only allows rotation if it is within the set limits, otherwise the object won't move */
if (objectnewdeg>=mindeg && objectnewdeg<=maxdeg) { 
curpoint = _xmouse; 
objectnewdeg = objectdeg+(curpoint-objectstartdeg); 
_root.object_mc._rotation = objectnewdeg; 
} 
};

/* This starts the object rotation function and sets the starting point of the user's click - all rotation is then based on the difference between where the user first clicks and where they drag to */
_root.object_mc.onPress = function() { 
objectstartdeg = _xmouse; 
objectrotInterval = setInterval(rotateobject, 10); 
};

/* This stops the rotation as soon as the user let's go. It also checks that the user has not been able to drag further than the min or max limits before the code could correct them, and if they have, adjusts the rotation to fit within the limit boundaries */
_root.object_mc.onRelease = function() { 
clearInterval(objectrotInterval); 
if (objectnewdegmaxdeg) {
_root.object_mc._rotation=maxdeg;
objectnewdeg = maxdeg;
}
objectdeg = objectnewdeg;
};

/* This is the same as the function above, but executes if the user has drifted off the object when they stop dragging */
_root.object_mc.onReleaseOutside = function() {
clearInterval(objectrotInterval);
if (objectnewdegmaxdeg) {
_root.object_mc._rotation=maxdeg;
objectnewdeg = maxdeg;
}
objectdeg = objectnewdeg;
};

While this code may have more lines, it's much simpler to follow. In addition it also allows you to set a maximum and minimum rotation factor, so you can set how far you want the user to be allowed to rotate the object in either direction.

To use it, simply paste it into frame 1, and create and MovieClip on the stage with the instance name 'object_mc'.

Try It

Making it Useful

Let's say you wanted to use this to make a user input for a program. The user rotates the object (say a dial or a volume knob) and you want to use the numerical value of the object's rotation for something. Nothing could be simpler.

If you want the numerical value only once the user has stopped dragging then base your program on the variable objectdeg.

If you want the numerical value to constantly update as the user drags, then base your program on the variable objectnewdeg.

Click and drag rotation in Flash AS2

2010-08-02T22:59:00.001+01:00

In Flash I often find that some things which seem hard, are easy, and some things which ought to be easy are hard. Making things rotate when you click and drag them is, for me, one of the latter. It doesn't take much code, but figuring the code out hurt my brain.

You'd think this would be easier - you'd think there would be a class already in existence for this. But as there isn't here's an ActionScript 2 solution.

The Script With Comments

The comments explain how it works:


/*sets starting points for the maths that comes later*/
var objectnewdeg = 0;
var objectdeg = 0;
/* This is the Rotate Object function, it updates the rotation of the object continuously as the user drags */
rotateobject = function () {
    curpoint = (Math.atan2(_root._ymouse-_root.object_mc._y, _root._xmouse-_root.object_mc._x)/Math.PI)*180;
    objectnewdeg = objectdeg+(curpoint-objectstartdeg);
    _root.object_mc._rotation = objectnewdeg;
};
/* This initiates the

Rotate Object function

 when the user clicks on the object */
_root.object_mc.onPress = function() {
    /* This finds the position around the object that is first clicked in degrees and sets it as a variable that is used in the function above */
    objectstartdeg = (Math.atan2(_root._ymouse-_root.object_mc._y, _root._xmouse-_root.object_mc._x)/Math.PI)*180;
    /* starts the function above and sets the repeat frequency as 10 */
    objectrotInterval = setInterval(rotateobject, 10);
};
/* This stops the

Rotate Object function

 when the user releases the object, so it stays where the user left it, then records the new rotation of the object as objectdeg ready for when it is rotated again. */
_root.object_mc.onRelease = function() {
    /* stops the function above */
    clearInterval(objectrotInterval);
    /*records the new rotation of the object as set by the user's drag as variable objectdeg, ready for next time they drag */
    objectdeg = objectnewdeg;
};
/* This is almost a repeat of the release code above, but takes account of the fact the user might drift off the object when they drag it, hence onReleaseOutside. */
_root.object_mc.onReleaseOutside = function() {
    /* stops the function above */
    clearInterval(objectrotInterval);
    /* records the new rotation of the object as set by the user's drag as variable objectdeg, ready for next time they drag */
    objectdeg = objectnewdeg;
};

The Script Without Comments

And if that code above looks scary, it's not so bad without comments - only 19 lines.


var objectnewdeg = 0;
var objectdeg = 0;
rotateobject = function () {
curpoint = (Math.atan2(_root._ymouse-_root.object_mc._y, _root._xmouse-_root.object_mc._x)/Math.PI)*180;
objectnewdeg = objectdeg+(curpoint-objectstartdeg);
_root.object_mc._rotation = objectnewdeg;
};
_root.object_mc.onPress = function() {
objectstartdeg = (Math.atan2(_root._ymouse-_root.object_mc._y, _root._xmouse-_root.object_mc._x)/Math.PI)*180;
objectrotInterval = setInterval(rotateobject, 10);
};
_root.object_mc.onRelease = function() {
clearInterval(objectrotInterval);
objectdeg = objectnewdeg;
};
_root.object_mc.onReleaseOutside = function() {
clearInterval(objectrotInterval);
objectdeg = objectnewdeg;
};

Copy and paste the code into the first frame. Then place a MovieClip on the stage and give it the instance name 'object_mc'.

Test the movie and you should be able to click the object anywhere and drag it to rotate it.

The centre of rotation is the Registration point that you set when you made the object into a MovieClip.

If you want to re-use the code yourself, just replace every instance of the name object_mc with the instance name of your object.

Try It

Applying it to something useful

I originally developed this for use with my VirtualCompass teaching aid. This uses drag rotation to allow the user to position several different elements on the screen.

Design: Another Reconsideration - Ivan Chermayeff, 1969

2010-08-02T14:43:00.002+01:00

When, as a young college design student, I discovered the existence of Ivan Chermayeff I felt I had found the one professional graphic designer that really understood the purpose and role of his vocation. His approach resonated with me as being honest, open and direct - and as such was a refreshing change from what can seem to be a rat race of mimicking styles and trends at speed without pause for genuineness or genius. Chermayeff's own philosophy has had a massive impact on my own thinking about my role as a designer, and the ideals I hold about how I should apply my craft.

Years later, when studying at University I came across an article originally written by Chermayeff in 1969 (and if memory serves correctly re-published in Idea: Special Issue: Chermayeff & Geismar, 1981) entitled "Design: Another Reconsideration". I drank in every word, photocopied it, and used it to fuel part of my dissertation. Since then I have often wanted to read it again, but never found it re-printed or archived anywhere on the Internet.

Yesterday, when visiting my parents, I took a look in their attic and found some of my old college work. Stuffed into one of my essays I was suprised and pleased to find the photocopy I must have made over 10 years ago.

I wouldn't know how to get hold of it now, so I have attempted to transcribe the article from my photocopy. If Ivan Chermayeff or IP owners of Idea magazine object, I will gladly take this down.

But in my opinion, this is too good to miss.

Design: Another Reconsideration

Every few years, or is it months – on some days it seems like minutes – I ask myself, as I'm quite sure most other designers do, what is it I do every day. What is design anyway? And whatever it is, do I personally really want to do any more of it? Is it of any importance? To society? To communications? Even to clients?
It is easier to begin answering these questions by sneaking up on them; by deciding what design is not.
Design is not what a considerable number of self-described designers think it is.
Design is not art.
Design is not terribly significant.
Design is not always better than nothing.
Design is the solution to problems, real, important or unimportant. The problems of design are not designer problems, they are client problems. Design must therefore grow out of a reasonable understanding of these problems, and their goals and aspirations.
If design solutions do not come directly out of the problems they face, then they will not be design solutions, but be arbitrary, and will probably lean heavily on current fads of typographic or illustrational style. Such designs will also be no good, or to put it another way, will not be design. Truman Capote when asked what he thought of the writing in some best seller, a few years back, replied, “That's not writing, that's typing.” The same thing applies to design. If it's not an answer to a problem, it's not design, it's layout.
I suppose I should backtrack and make clear that “design” refers to Graphic Design or other predominantly visually oriented areas of activity. It include the shell of the typewriter but not the guts.
Because design is concerned with symbols rather than structures, looks of machines rather than their works, typefaces rather than words, a concerned designer can get frustrated.
In order to design a good symbol the designer must understand what it will represent and the more he investigates, presuming a highly cynical, objective, and unbiased questioning attitude, the more likely the designer will want to influence the structure, to change it for the better, or quit.
Every problem of every client is different, and every client is different. (You can argue that they are all the same, but that would be a confession the design is a waste of time and money.) Under these circumstances the only way to keep up or reach a high level of design (in no way synonymous with successful) is to maintain a continuous and unrelenting interest in what the problem at hand really is. It is an old adage that once a problem is truly described, the solution comes along with the description.
Herein lies one fundamental problem with design as a viable activity.
Simply put:
Design problems are more interesting than design solutions.
It seems more challenging to design a new concept, than to design an ad about it. Talking about problems, visually or in print, is not as rewarding or interesting as dealing with them intimately.
All this, of course, is only true if the problems are interesting. Not all problems are either interesting, valid or worth working on or thinking about for a second, unless it's a matter of survival.
I feel it is extremely important for designers to be more interested in areas outside their own. Design is a service operation. Thinking about and developing solutions to other people's problems.
Designers usually don't write very well.
Designers don't usually even communicate very well, even thought communication, or one form of it, is their life's work.
Designers should read.
Designers should make themselves aware of everything.
Designers must be selective.
Designers must think.

Ivan Chermayeff
New York, May 1969

(Source believed to be: Chermayeff, I. (1981). Design: Another Reconsideration. Idea Special Issue: Chermayeff & Geismar. Unknown (1), Unknown.)

3D Explained a different way

2010-03-30T19:13:00.003+01:00

To add to my earlier posts about 3D stereoscopy, this BBC clip compares different ways of perceiving 3D that can all be used by artists and animators.

Free web design helps from SitePoint - JQuery and more...

2010-03-16T22:04:00.002Z

I have probably mentioned SitePoint before, but that is because they have some really useful things for web designers.

The offering that prompted me to blog tonight was some free sample chapters from their JQuery book, and better still - 100 free JQuery codes as well.

Get it here: http://bit.ly/a0sN6a

Their website is well worth checking out while you are there to see what other freebies are available.

Boom to Bust - Where have all the websites gone?

2010-03-15T20:40:00.004Z

This BBC article about some of the once big names of the Internet brought back memories for me. It is strange to think that most of my current students were only kids at the time, anything between 5 and 10 years old. They probably won't remember most of these. But for me, as one who was working in a new web industry as a brand new web and graphic designer, many of these were the every day names we saw as examples of success.

It is interesting to see that not one of those names survives today.

For students of web design now, it is well worth looking at these early examples to see how things have changed (technology), and how some things have not (usability issues and big corporation buy-outs).

It is also interesting to see how Boo.com might have survived if it were launched today. While back then the internet was too slow to cope with the technology they were trying to use, today it would be no bother. Too ahead of its time perhaps? Or too willing to ignore the constraints of the time? You decide - but the lessons are still important now.

Any way - enjoy the article:

http://news.bbc.co.uk/1/hi/magazine/8568509.stm

And if you want to see what those sites might have looked like why not look them up in the Wayback Machine:

http://www.archive.org/

Game Engines go Free

2010-03-05T18:45:00.005Z

If you have been tempted to cross the boundary between 2D interactive media or games or 3D animation into 3D games, you will probably know you need to get a decent 3D game physics engine.

That's where my brain has been lately, and consequently I have turned my attention to physics engines. In my mind it was initially a toss-up between Epic's UnrealEd, which comes with Unreal Tournament, or the FPS Creator from The Game Makers.

UnrealEd would have been first choice since I know it is used by a local university on their Game Art degree, on the other hand the FPSC had good features too, and in some ways was less complex and perhaps more suitable for allowing (high school level) students to quickly preview their characters and in-game objects.

However as I did some digging I found that the current plethora of game engines out there, including some open source offerings, has made the area highly competitive. So competitive in fact that well respected commercial engines are now becoming available FREE for personal use, or under developer licenses where you only pay if you make money. This combined with all the free stuff, makes for quite a choice.

Commercial Game Engines for Free

UDK - Unreal have released what they call the Unreal Development Kit, it contains all the tools previously only available to commercial developers or those with a lot of spare cash. This now seems to replace UnrealEd from my point of view.

FPSC - The Game Makers have released a free developers edition of FPSC. It has all the features of the pay for version minus network games and compile - but the pay for is only £30 these days anyway.

Unity - Described as being the best game engine this side of a $million, it normally retailed at about $200, but a free development version is now available too, and looks pretty amazing.

Freeware or Open Source Game Engines

Blender - Has long been capable of producing 3D games made interactive with Python scripting.

Platinum Arts Sandbox 3D Game Maker - purports to be popular with educational environments.

Cheap Game Engines

The 3D Game Maker - I thought I would throw this one in. Although very limited in terms of customisation, for some educational purposes (e.g. Level 1 and 2) this could be ideal. With a bit of technical know how students can include their own 3D models (.x format) in their games.

Well, I already owned FPSC, the 3D Game Maker, and UnrealED, but now I have downloaded Unity and the UDK (be interested to see how UDK is different from UnrealEd). I can hardly wait to get started.

True Full Screen in Flash Player 7 or 8

2010-02-18T19:53:00.007Z

Most flash based video players have a "full screen" option that makes the video fill your screen even if it originated from a small square in a web page.

But it can be used to make any SWF file fill the screen.

I use both MX 2004 or CS3 depending on which computer I am using. And I know there are still a lot of MX or 8 users out there. So, in case I forget, and in case anyone else finds it helpful, here's how you do full screen in MX 2004 or 8.

The whole thing is summed up in detail here:
http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html

The ActionScript

Here is my AS2 implementation:


/*first set the initial fullscreen value which is 0 because we are not yet in fullscreen */
var fullscr_status = 0;
/*Then a function that runs when the fullscreen button is pressed, this tests whether we are in fullscreen (1) or not (0). If not we go into fullscreen mode. If allready in fullscreen mode we come out of it. */
_root.button_btn.onRelease = function() {
 if (fullscr_status == 0) {
  //Fullscreen on
  fullscr_status = 1;
  Stage["displayState"] = "fullScreen";
 } else if (fullscr_status == 1) {
  //Fullscreen off
  fullscr_status = 0;
  Stage["displayState"] = "normal";
 }
};

The thing that is different for MX 2004 and 8, when compared to using ActionScript 2 in CS3 is this:


Stage["displayState"] = "fullScreen";

and


Stage["displayState"] = "normal";

these are different in CS3.

The HTML

The fullscreen ActionScript won't have any effect unless the object and embed parameters are set to allow fullscreen as follows:

For object:


param name="allowFullScreen" value="true"

For embed:


allowFullScreen="true"

The HTML object and embed I use is described on the Adobe site here:
http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode_04.html

An Example

Just click the square.

Design Out Crime

2010-02-10T19:07:00.005Z

I received an email today from the Design Council and was immediately interested in an article about using design to cut crime. For me this is exactly what design is about, that is solving real world problems. As Ivan Chermayeff would encourage me to think - these solutions should come out of an understanding of the problem.

So what was the article about? Beer glasses, that don't break, or if they do, cause less damage to people - we are talking about cutting down incidence and opportunity for 'glassing' attacks.

That means designing something that has some aesthetic value, a practical use, and limited abuse.

Read the full article here:

http://www.designcouncil.org.uk/Design-Council/Files/Landing-pages/Design-Out-Crime/Alcohol-related-crime/?id=5335&WT.dcsvid=NDA5OTYwNDIwOAS2&WT.mc_id=

And you can watch a video about it below:

Designing the next generation British pint glass - the design story from Design Council on Vimeo.

What makes an 'Imax' 3D cinema image 3D?

2010-01-04T20:37:00.005Z

I was discussing 3D stereograms last year in relation to Channel-4's 3D week, but I came across this interesting video clip on the BBC website when I was looking for information on 'The Pixar Story' a documentary "about the pioneering computer animation studio ".

The 3D shown here does not require coloured filters in the glasses, but does still adhere to the age old principle that 3D is constructed in the brain from seeing two slightly different images with each eye. Rather than coloured filters these use polarising filters. This gives the best colour reproduction of all the 'cheap' glasses methods - but I will let the video tell you more:

Further information may be found here >

Happy New Year

2010-01-01T00:04:00.002Z

I wish you all a happy and prosperous 2010.

For me 2010 will see me continuing to work hard and learn hard, and getting the right balance between work and family. I believe that way points to satistfaction, health and success.

Happy new year.

How to Become an Animator - Free e-Book

2009-12-28T18:25:00.002Z

I won't pretend it's not a marketing campaign from AnimationMentor.com, because that is exactly what it is. But if animation is what you like, and you think animation is where you want to end up, then you just may find this valuable.

It's taking about 40 minutes to download so no review of content at present. But at a price of FREE, I'm not complaining.

You can download it here: http://www.animationmentor.com/landing/becomeanimator/ebook.html

Meanwhile, I will add my review later when I have had a chance to read from it

Custom Snow Effect in Flash

2009-12-09T20:47:00.015Z

Whether or not we get a white Christmas outside, I can make sure I get one in my Flash work any time I like.

Components add to the functionality of Flash, basically making more complex actionscripts available to those of us who lack the time or the knowledge to program them ourselves. The Adobe Exchange is a great place to find components for Flash from MX right through to CS4, some free, some you have to buy.

Free Snow Effect Component

The component I want to tell you about is the free Snow Flash Effect component from FlashWanted by Corso Ria.

Download it here (you will need to get a free Adobe Exchange account):

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1278523

Once downloaded just double click the MXP file and it will automatically install into the Flash components panel.

This particular component works with Flash versions MX 2004, MX 2004 Pro, 8 and CS3 (and maybe CS4 but I haven't tested it), so if you don't have access to the latest version of Flash, this should still work for you. In fact i'll be using MX 2004 to show you how it works since I don't have CS3 on this machine and I can't be bothered to pull the laptop out - it's really easy.

Basic Snow

To kick off you need to open the Components panel, and then open the FlashWanted group. In there you will find a component called "sneg".

Drag "sneg" to the stage and scale it to cover the area you want to be snowy.

Then, with the instance of the "sneg" component you dragged onto the stage selected, you need to open the Component Inspector.

Most of the fields in the Component Inspector are pretty self explanatory, and a bit of experimenting with the settings will give you the effect you want. You can even make the background transparent by changing the alpha setting, allowing you to overlay the snow over other layers.

And that's it.

CTRL+ENTER to test the movie and the snow begins to fall.

Customising the Snow

By default the snow is made up of very small white dots, but you can use your own flake design by using a symbol from your library.

To do this you need to first make a MovieClip to use as a snowflake, and then set it to export for actionscript. Do this by right clicking the symbol in the Library, and choosing the Linkage option.

Then set the identifier, what you type here is what you will also type in the Library Symbol field in the Component Inspector. I used 'flake_mc' as the identifier in mine.

Feel free to test away.

Further Customisation

If you are like me you will always be curious about how far you can push the technology beyond its original or obvious intention. I have seen other snow effect components in use that had more than one type of snowflake and allowed the snowflakes to tumble, or turn, as they fell.

It seemed pretty logical that, if I am specifying a MovieClip as a snowflake, any actionscript within that MovieClip that refers to the clip itself, ought to work. And, I was right.

In the previous step we looked at how the component allowed us to specify a particular MovieClip to use as a snowflake, rather than its own default 'dot'. What this means is that we can actionscript our snowflake MovieClip to apply certain attributes to itself, and this actionscript will work independently for each flake the component places on our stage.

In other words we can make 'intelligent' snowflakes to make up for where the component lacks. While the component takes care of the snow falling, each flake takes care of its own turn speed and appearance etc.

Here's how.

Random Flake Appearance

I am going to cheat a little here, this script will not actually generate random flakes, but what it will do is randomly choose a snowflake design from a selection that you will make.

What I did was make 5 different snowflakes and place each one on a different keyframe within a MovieClip called 'snowflake_mc'. Don't forget to put a stop(); action on each of these keyframes or your flakes will keep cycling through the 5 designs as they fall (which doesn't happen in real life). It's also a good idea to make sure each snowflake on each frame is positioned over the 'centre point' in the middle of the MovieClip symbol.

So what I end up with is a MovieClip called 'snowflake_mc' containing 5 frames, each frame containing a different snowflake design and a stop(); action.

The next stage is to open the symbol we specified in the Component earlier - flake_mc. Inside flake_mc you need to swap the snowflake design with the MovieClip you just made containing 5 flakes. Give this the instance name of 'snowflake_mc'. So what we end up with is a symbol called 'flake_mc' that is set to export for actionscript that contains another symbol called 'snowflake_mc' that contains our 5 flake designs.

Now for the actionscript. This goes on the first frame of 'flake_mc':


/*randomly select which flake design to use */
var flakedes = Math.ceil(Math.random()*5);
/*set flake design to the one selected */
snowflake_mc.gotoAndStop(flakedes);

First we create a variable called 'flakedes' that is a randomly generated number between 1 and 5. we do this because we have 5 flake designs. This then acts as a random flake selector. We generate the number using Math.random, but this only gives us a number between 0 and 1. To turn this into a number between 1 and 5 I multiply it by 5 and then round it up using Math.ceil. (If I rounded down I would get a number between 0 and 4, rounding up guarantees between 1 and 5).

Then we tell the 'snowflake_mc' MovieClip (the one with 5 frames) to gotoAndStop at the frame number we just randomly generated. This then randomly displays on of our 5 flake designs.

Voila! As the component places a new flake on the stage the appearance of the flake is now randomly one of the 5 designs you made.

Flake Tumbling

This requires trickier actionscript (but still easy), but no extra graphics. A pure code solution to flake tumbling. This goes on the first frame of 'flake_mc' beliw the code we already have:


/*Generate a random small number of equal chang of being positive or negative. Positive equates to clockwise rotation, negative anti-clockwise */
var rotfactor = ((Math.random()*4)-2);
/* This function tells the snowflake_mc movieclip within the flake_mc clip to rotate by the rotfactor. */
function snowflakeroll () {
snowflake_mc._rotation += rotfactor;
}
/* this runs the above function every 40 milliseconds. */
setInterval(snowflakeroll, 40);

I wanted the flakes to tumble very slowly, all at different speeds of slowness, and in either direction. So the first part generates a small number, between -2 and 2. A negative number will equate to anti-clockwise tumbling, a positive number clockwise tumbling. We generate this number again using Math.random but this time we multiply the number by 4, to give us a random number between 0 and 4, but then we -2 from that number giving us a random number between -2 and 2.

We use this number as the variable 'rotfactor'.

What we then want to do is use the value of 'rotfactor' as the amount the snowflake will rotate each frame.

However within the MovieClip inside the component onEnterFrame doesn't work. So instead we approximate frames by using setInterval.

setInterval works by calling a function repeatedly, with an interval between each call. If we set the interval small enough it will be as good as calling each frame.

First then we have to write the function, then use setInterval to call the function.

Our function is very simple:


function snowflakeroll () {
snowflake_mc._rotation += rotfactor;
}

First we define the function and give it a name 'snowflakeroll', then we give the function its instructions which in this case is to tell the 'snowflake_mc' MovieClip to change its rotation value by 'rotfactor'. By using += rather than just = we add rotfactor to itself each time the function is called so it gets larger each time thereby increasing its angle of rotation with each call of the function.

Then we just need to call the function using setInterval:


setInterval(snowflakeroll, 40);

We call the function by name, and then we define the interval in milliseconds. In this case 40 milliseconds calls the function frequently enough to creat a smooth rotation animation.

And that's it

And that's it. You're done. You have now got a basic component that simply chucks snow out, to give you random flakes with random tumbling speeds both clockwise and anti-clockwise.

Given all that we have done, I think it safe to assume they don't have to be snowflakes. What other MovieClips could it chuck out, and how could these be scripted? Over to you.

Happy Christmas.

So... do ColorCode (Amber+Blue) 3D glasses work with LCD Projectors?

2009-11-18T16:25:00.002Z

I said I would test it out, and the verdict is... yes.

At least, it did with the Dell projector I tried it on. While I initially found that there was more ghosting on the projector image when viewed through ColorCode (Amber+Blue) glasses, than my LCD monitor, at least it was 3D.

I have not yet had success with Cyan+Red at all on a projector.

Changing "Video Mode" improves image

The Dell projector I used allowed me to change the "video mode", which is basically a bunch of different colour level presets. I found that in "game mode" the ghosting pretty much vanished even on the projector.

So there you have it.

ColorCode (Amber+Blue) can work with a projector.

Channel-4 3D Week

2009-11-10T22:00:00.006Z

I was at Sainsbury's today (unusual, but I happened to be near one) and came across a big point-of-sale bin thing with loads of FREE 3D glasses in it. Apparently Channel-4 is hosting a 3D week, which according to my 3D glasses arm will feature "never-seen-before archive footage and continue[s] through the week with loads of awesome 3D films and concerts to enjoy".

Anaglyph TV

Now, the image below (from the C4 website) doesn't look like anything special to the naked eye, but when viewed through the special Sainsbury's glasses will take on a 3D appearance. It is an anaglyph.

To view anaglyphs you need special "3D glasses" that have coloured filters. But there are several different colour combinations around, and you have to make sure you get the right one for what you are watching. You can get Red Blue, Red Cyan (the most popular), Red Green and, as I learned today, Blue Ochre (sometimes called Blue Amber, or Blue Brown).

And guess which ones Channel-4 have opted for?

Blue Ochre of course - which means you probably don't have an old pair of 3D glasses hanging round the house which will work for 3D week. Your "Journey to the Centre of the Earth" glasses will not work, and neither will your "Shark Boy and Lava Girl" pair.

Better get yourself down to Sainsbury's and get some Blue Ochre.

But what's with all the different types?

Why not just stick to one type and have done with it? Simply put, different colour combinations have different benefits. Red Cyan is probably the most popular because it allows the creation of both colour and B&W anaglyphs (as does Red Green). Red Blue only allows B&W and the images are very dark.

But more information on the different types can be found here:
http://nzphoto.tripod.com/sterea/anaglyphs.htm

However, and this was news to me until today, Blue Ochre when viewed in a dark room, has better colour transmission than the others. So this is probably why Channel-4 opted for it. After all, if you want people to think that 3D is more than just a gimmick, it needs to look good.

Blue Ochre not free but very clever

While all the other anaglyph colour methods are pretty much public domain, the Blue Ochre combination is apparently patented. Not the idea of the anaglyph - that has been around for too long, you can't patent that - but according to this website it is the method for converting an image for Blue Ochre is patented:

What makes it patentable (the "secret sauce") is the mathematical formula that modifies the luminance of the right eye record and the luminance and chrominance of the left eye record to best transmit the colour information. The darker brown is necessary for balance, because blue is low luminance.

Whilst I haven't read the patent (http://www.patentstorm.us/patents/6687003/fulltext.html) thoroughly, their process doesn't seem to attempt to determine which point in each image represents each point in the three dimensional scene, so it seems to me that they are effectively presenting a luminance-based stereoscopic pair combined with a flat chrominance image based on the average of the two views.

(http://www.dvinfo.net/forum/archive/index.php/t-128661.html)

Apparently this method was invented at the Technical University of Denmark, and has been branded as ColorCode. More information can be found here: http://www.colorcode3d.com/.

What makes it so clever, and therefore worth paying for perhaps, is explained on their website:

The ColorCode 3-D system is the only in the world to reproduce high quality 3-D Stereo images and movies with full color- and depth information on all display types.

(http://www.colorcode3d.dk/group.asp?group=39)

And I can't argue with this claim. I know from experience that Red Cyan may work on a CRT or TFT monitor, but utterly fail on a projector. You can also get a fair amount of ghosting. If ColorCode (Blue Ochre) can crack this, it will be worth the license fees for TV companies who want good quality 3D without a trace of gimmick.

I will test my new Sainsbury's ColorCode glasses on the LCD projector at work, and if the result is good I will be very impressed and let you know.

Flash Projects #7 - Making a Flash MP3 Player

2009-11-09T21:09:00.006Z

Finally here is the solution. It turns out you can use NetConnect and NetStream to make an MP3 player in Flash, but only if you encapsulate all your MP3s as FLV files. Not really very helpful since it means converting your MP3 files - it just makes more work.

And busy designers really don't want the job to take longer.

However there is another way to make an MP3 player in Flash, that still gives us all the control we need, but the pausing and playing is just a tad more complicated. But nothing you can't handle I am sure.

The Code

First, here's the code, then I will explain it:


//set default starting position for playback in seconds
var playpoint = 0;
//create sound object
var audio_sound:Sound = new Sound();
//play button
this.play_btn.onPress = function() {
//play the mp3 from the point defined in the variable playpoint
audio_sound.start(playpoint);
};
//pause button
this.stop_btn.onPress = function() {
//define the variable playpoint as the same as the current position, this is given in milliseconds so we divide it by 1000 to convert it into seconds
playpoint = (audio_sound.position/1000);
//stop the playback
audio_sound.stop();
};
this.m1_btn.onPress = function() {
audio_sound.loadSound("track1.mp3", false);
//true = streaming and therefore autoplay, false = not streaming and therefore just sets the file for when you hit the play button.
};
this.m2_btn.onPress = function() {
audio_sound.loadSound("track2.mp3", false);
};

The Explanation

Here goes. First, instead of using NetConnect and NetStream as we did for the video player, we are going to use loadSound. This still gives us a fair amount of control, in some ways more than the NetStream would give us, but it doesn't automatically pause when you play something that is already playing, as NetStream does. So while the rest is no more difficult, just different, pausing and then playing again is slightly more complicated using loadSound.

As with any program, we can only work with the information available, or that we can find out. With the loadSound approach we can find out one very important thing that will help us make a pause/play mechanism - we can find out our current position in the MP3 as it plays. In the code above we do this as follows:


audio_sound.position

Not hard, but on its own it is not a pause/play mechanism. We make it into a pause/play by storing the current position as a variable called playpoint at the time of pause. In effect we remember where we got up to. Then, when we play, we tell it to play from where we left off by asking the variable playpoint to tell us where we got to. As follows:

When pausing:


this.stop_btn.onPress = function() {
playpoint = (audio_sound.position/1000);
audio_sound.stop();
};

First we set the variable playpoint to store our current position. This is actually given in milliseconds so we divide it by 1000 to convert it to seconds - and that's what you see being done here. Then we tell it to stop.

When resuming playing:


this.play_btn.onPress = function() {
//play the mp3 from the point defined in the variable playpoint
audio_sound.start(playpoint);
};

We simply tell it to start, but include the start position as playpoint so it resumes from where we left off.

Isn't that what pausing/playing really is? Stopping, and then starting from where you left off?

The other code is effectively a menu, allowing you to choose which track to listen to. The term false on the end means the track won't play straight away, but will wait for you to press play as well. Change the false into a true and just clicking on the menu will make the track start as well.

Have fun.

eLearning Business Game (Arrays in action)

2009-09-28T21:45:00.003+01:00

My last post was all about my array sorting problem. But I thought you might want to see the final product.

It was actually a game I put together to help my new students relax and get to know each other, but then I tweaked it and made it available for anyone to download.

Available here: http://digitalarena.co.uk/teach/markettraders/

The array was used in the part of the game that displays the team's performance as a graph. I needed to find a way to make the graph always fit in the available space. That meant finding the highest score and then working out a scale ratio that I could apply as the graph drew, so it always fit in the graph space.

So what has this to do with arrays? Well... finding out the absolute highest score of each team's highest score meant storing them all in an array and then sorting them (lowest to highest). Then I just had to retrieve the last item in the array to get the highest.

Sorting Numeric Arrays with Actionscript

2009-09-25T19:57:00.014+01:00

Just lately I have been having fun with arrays. Of course, I say "having fun", what I mean is having problems. Especially with sorting numerically.

Arrays are really useful, they allow you to store data, select data, order it, etc. You can create them from strings and other variables, and turn them into strings and other variables. All in all, they can be very handy.

I found them handy as part of a game I was writing a couple of days ago. As part of my code I needed to find the number with the highest value out of a choice of 3 numbers. The logical solution was to put all 3 numbers into an array, then sort them numerically, then retrieve the last item in the array (this should, after sorting, be the one with the highest value).

Numeric sorting is not numeric

Let's say we start with the following array:

var my_array:Array = [650,12,86];

Then we sort them numerically:

my_array.sort(Array.NUMERIC); //doesn't work correctly

After this command you might expect flash to order the array as:

12, 86, 650

But what you actually get is:

12, 650, 86

This is because, as the Flash documentation explains, 'Numeric fields are sorted as if they were strings, so 100 precedes 99, because “1” is a lower string value than “9”. '

In other words, the Numeric sort does not sort numerically at all. It sorts alphabetically. Odd sort of numeric, but it can't be helped, we have to find a solution.

Prepending 0s so all values have the same number of digits

Of course this only happens because not all the values had the same number of digits. If the lower values began with a 0 then a numeric (alphabetical) sort would work correctly. So my initial plan was to use an if statement in a for loop to check for 1 digit, 2 digit and 3 digit numbers and prepend (put in front) 0s to make them all the same number of digits as follows:


for (var i = 0; i<finalscores_array.length; i++) {

if (finalscores_array[i]<=9) {

finalscores_array[i] = "000"+finalscores_array[i];

} else if (finalscores_array[i]<=99) {

finalscores_array[i] = "00"+finalscores_array[i];

} else if (finalscores_array[i]<=999) {

finalscores_array[i] = "0"+finalscores_array[i];

} else {

finalscores_array[i] = finalscores_array[i];

}

}

With for loops we can repeat a peice of code until a condition is met. This loop repeats for the length of the array (that's the number of items in the array). It starts by checking how many digits the first array item has. Then depending on how many digits the code prepends 3, 2, 1 or no 0s. On the next repetition it checks the next array item, and so on until all array items have been checked and had the required number of 0s prepended so that they all have the same number of digits, and then the loop ends.

The result is that the original values:

650, 12, 86

become

0650, 0012, 0086.

Now when we sort them numerically, it does put them in the right order:

0012, 0086, 0650.

Leading 0s alter the value (it's a decimal v. octal thing)

Wouldn't it be great if that was the end of your troubles?

The problem is that if we then want to do anything with the values afterwards, like doing anything other than displaying them, we need to remove the 0s we just added. And it is not nearly as easy taking off, as putting on.

The reason we have to remove the leading 0s is because Flash, like lots of other programs, does not treat numbers beginning with 0 as decimal numbers. It treats them as octal. This means that 0650 does not have the same value as plain old 650 (without the leading 0).

0650, as octal, actually has the decimal value of 424.

0650 is in fact a totally different number to 650.

So while prepending leading 0s solves our array sorting problem, it actually changes our values. just because a leading 0 in Flash means it is an octal value, not a decimal value.

Leading 0.0 do not alter the value (it's a less than 1 thing)

But then I realised. Hang on a minute says I (yes, programming problems really can have you doing a good Ben Gunn impression). Hang on a minute says I, Flash handles numbers begining with a 0 all the time. What about 0.1, 0.2 etc. It has no problems with decimal values of less than 1.

And here is my solution. Instead of using my for loop to prepend just 0s, I will use it to prepend 0.0s, as follows:


for (var i = 0; i<finalscores_array.length; i++) {

if (finalscores_array[i]<=9) {

finalscores_array[i] = "0.000"+finalscores_array[i];

} else if (finalscores_array[i]<=99) {

finalscores_array[i] = "0.00"+finalscores_array[i];

} else if (finalscores_array[i]<=999) {

finalscores_array[i] = "0.0"+finalscores_array[i];

} else {

finalscores_array[i] = "0."+finalscores_array[i];

}

}

The result is that the original values:

650, 12, 86

become

0.0650, 0.0012, 0.0086.

Now when we sort them numerically:

my_array.sort(Array.NUMERIC);

It does put them in the right order:

0.0012, 0.0086, 0.0650.

OK, I know that doing this has changed the values too, but at least they are still decimals (not a totally different numbering base). Because they are still decimals it is easily rectified, it's just a case of shifting the decimal point a few places. And we can do this by very simple multiplication...

...just multiply them by 10,000.

0.0012 x 10000 = 12
0.0086 x 10000 = 86
0.0650 x 10000 = 650

So, to finish off, now we have prepended 0.0s to our original values, then sorted them, all I need to do to get the highest value is retrieve the last item from the array, and multiply it by 10000.

var highestscore:Number = (my_array[my_array.length-1])*10000;

The Faster Way

Having made this wonderful discovery, it is good to know that all the code required to debug and investigate the problem is not necessarily needed to apply the solution. Pre-pending using the IF and ELSE IF is only necessary if you want to pre-pend digits to a String (as in converting 650 to 0650). Now that we have discovered that only decimals (as in 0.650) will sort correctly there is a much simpler way to achieve this.

Simply - divide the original number by 10000 (after all, we convert them back by multiplying them by 10000).


for (var i = 0; i<finalscores_array.length; i++) {

finalscores_array[i] = finalscores_array[i] / 10000;
}

I count that as 7 lines fewer code, than the pre-pending method.

That's the difference between what we do to understand a problem and what we do to apply a solution.

And there we have it. Hopefully some of you will find this helpful. Frankly I don't know why numeric sorting doesn't just work. But since it doesn't, here is a cheap and cheerful workaround - in summary:

1. Divide them all by 10000 (so that every number begins "0.")
2. Sort them
3. Multiply them all by 10000 (so you get the original values back)

Happy sorting.

Design industry calls for "More Rounded" design graduates

2009-09-16T21:43:00.003+01:00

This is always one issue that concerns me about my students. You get the creative ones who hate computers, then you get the computer geeks who think knowing the software will somehow make up for their lack of creativity.

They are both wrong. Where interactive media is concerned anyway.

Design Week reports that the D&AD Xchange conference for tutors once again highlighted the "mismatch between the kind of graduates design colleges are providing and what consultancy creative heads require".

And what do design consultancies require in new graduates? In their own words "More rounded" graduates. By this they mean more creatively rounded - more understanding of creativity, more understanding of design. Rather than a 2 or 3 year higher education in design some have even suggested a 3 year foundation course in design (allowing design students to experience a wide variety of creative disciplines while developing their creativity) followed by only one year of specialisation.

For some of my students that would mean not getting into the web design and interactive media technology for another 3 years - and meanwhile, they learn to be creative designers in many different media.

Oddly perhaps for art & design (though not so odd perhaps for a wanabee web designer) many of my students seem to resist the creative development required to be an effective designer. Many are focused so much on learning the technology, they are in danger of being technically good, but creatively stunted - able to use technology, but not to solve design problems.

As Neville Brody puts it: "We imagine to be able to do anything, and our software helps us believe we can... But we must move beyond the 'how' to reconsider the 'what' and the 'why'."

This is my greatest fear for some of my design students. They are most interested in learning how to do something, but ignore the important business of learning how to decide what they should produce and why.

Those who persist in making this mistake may well regret it. Leaders from the industry have spoken, they want creative people, not just technitians.

If they resist the creative development aspect of their education, they may get what they want in the short term, but in the process fail to become what their employer wants.

FREE eBook - The Principles of Successful Freelancing

2009-09-05T11:27:00.003+01:00

Whether you are a Freelance, Student or work within a studio, you will probably find Sitepoint's latest offer an interesting if not valuable read.

It's a 200 page eBook on The Principles of Successful Freelancing.

It normally costs about $30 but Sitepoint are giving it away FREE for the next 8 days.

To get the book you must either follow them on Twitter or submit your email address to their mailing list.

Sitepoint often give away selected chapters from their books as tasters, but this is the first time I have seen them give away an entire book. Clearly a good strategy for increasing their Twitter following (currently 49,662) and mailing list sign-up - we could all learn a trick there.

GO GET IT: http://twitaway.sitepoint.com/

Help for BlueOnyx Server Maintenance

2009-08-31T10:58:00.004+01:00

My last post looked at setting up a testing server for web designers. One of the options included building your own server running BlueOnyx for easy set-up and easy server management.

The thing that makes server management so easy is the web based interface. Originally the interface was only available for Sun Cobalt hardware, but once Cobalt was discontinued Sun Microsystems released the source code as open source. Since then others have developed it to work with any hardware (great news for us) and is most currently available as BlueOnyx.

PDF Manual

Because the BlueOnyx server management interface is based heavily on the sourceode for the Cobalt RaQ 550 the old RaQ 550 manual still contains some useful instruction on managing the system, and you can download it in PDF format here:

http://www.sun.com/hardware/serverappliances/pdfs/manuals/manual.raq550.en.pdf

Comparisons

The great thing about the BlueOnyx (and Cobalt RaQ) is how easy the server management interface made server management for non-techies.

Server managment after all was traditionally done through a shell interface (not unlike the windows command prompt). Setting up a web site involved manually creating users and folders, manually setting permissions and quotas, and manually editing several config files without making mistakes.

What the BlueOnyx interface does (and what the Cobalt RaQ interface did) is turn this process into an interface. You simply fill in the blanks and press "go" and scripts automatically create the folders and permissions and update the config files. Happiness.

There are other web based server management systems such as Plesk or Webmin.

Plesk is perhaps the easiest (it really is aimed at hosting companies, providing an interface for customers), but it costs money.

Webmin, is secure and powerful and popular with techies, but IMHO much more difficult to use than BlueOnyx because you still have to do many things manually. You still need to create the folders, set the permissions etc... albeit through a browser rather than a command prompt. And that requires a fair amount of technical knowledge.

BlueOnyx arranges things differently. It assumes you have limited technical know-how, but that you do know what you want at the end, and arranges the interface into tasks rather than tools. So much easier.

Setting Up Your Own Testing Server

2009-08-31T08:10:00.020+01:00

Call it what you like, a "testbed", a "testing server", a "sandbox server", it all amounts to the same thing - a server for testing your sites, scripts, databases before you "go live".

When it comes to web design I prefer to use Dreamweaver (in conjunction with Flash, Fireworks and occasionally Photoshop). And when it comes to static websites that's all fine, you can test them in Dreamweaver by hitting F12 and getting a preview in your browser. But for more advanced sites this will not do...

3 good reasons why you need a testing server

Going beyond static sites, to sites that include server-side scripts (such as PHP or Perl (CGI)) or database connections such as discussion forums, content management systems or shopping carts, it is really useful having a place to test before you "go live". Having your own server allows you to regularly test as you develop without long upload times, and without your client getting glimpses of half finished work.

It's also great for designers wanting to learn or improve their dynamic web skills. So you want to learn some PHP? So you want to learn how to get Flash to talk to a database? So you want to practice setting up and customising a content management system or shopping cart? You're going to need a server - it's a handy place to practice without needing to buy webspace.

Finally, if you want to use Dreamweaver's testing server facility when you set up your site in the "manage sites" window... you need a testing server.

Admittedly, if you have a website of your own you could use your own website host for testing and practice by shoving it in a folder separate from the rest of your site. But this is far from ideal, since your testing site will be running from a folder below the web root, when you intend to run it from the web root when you "go live". Much better is to test it as it will run when live.

Relax

I confess that if I had not learned what I now know, the whole idea of setting up a server would be enough to send me back to bed for another couple of hours. It sounds complex, but some very clever and generous people have made it much easier than it used to be - read on.

Before we go any further - LAMP or WAMP?

Before we go further let me introduce the server platforms I will be discussing today - LAMP and WAMP.

L - Linux

A - Apache

M - MySQL

P - PHP

W - Windows

A - Apache

M - MySQL

P - PHP

You will already be aware that Linux and Windows are operating systems, and really that is the only major distinction between the platforms above.

Apache is FREE open source web server software.

MySQL is FREE open source database server software.

PHP is a FREE open source server-side scripting language/engine.

Loads of websites run on LAMP or WAMP. Loads of web hosting companies use LAMP or WAMP to host websites commercially. In fact, last time I checked, Apache was the most installed web server in the world.

Loads of free web software runs on LAMP or WAMP too:

PhpBB
Zen Cart
Joomla
Drupal
Moodle

To name but a few...

All free and all running on free server software. At some point I guarantee you will want to install at least one of these for a client or for your own use, you need some practice, you will need to test it as you "skin" or "theme" it, you need a testing server running Apache, MySQL and PHP.

(Although I am not going to explain commercial alternatives in this post, you should be aware that you don't have to use FREE open source server software, a popular proprietary alternative would be Microsoft's Internet Information Server (IIS), MSSQL a database server and ASP or ASP.NET for server-side scripting. The drawback is that this all requires a commercial license. the other drawback it that I won't be explaining these today.)

A couple of approaches

There are probably many approaches you can take, but I am going to discuss what are to me 2 of the easiest options:

1. Install a server on your development computer

2. Set-up a server using an old computer

Let's start with the first...

Install a server on your development computer - WAMP

This is my least favourite of the two options, but if you want something quick, and you don't have an old computer kicking around it's a good alternative. I use a Windows XP machine for web design and development, so this solution is effectively a WAMP solution.

The easiest way is to get a pre-configured bundle of Apache, MySQL and PHP and install it as an application onto your Windows machine. There are several free options, but I recommend:

XAMP: http://www.apachefriends.org/en/xampp-windows.html

Apache2Triad: http://apache2triad.net/

Setting-up

Download the installer, run it, and voila, you are done.

The installer sets up all the server software you need, and creates a web root folder. To test your site all you need to do is copy the files into the web root folder and start browsing. Your new installation of Apache, MySQL and PHP will process files in or below the web root folder as though they were on a web server (in fact they are on a web server at this point).

Couldn't be simpler.

Although I have used this type of approach many moons ago with Apache Triad, and while it is quick and easy, I recently built a server on a totally separate computer, rather than installing it on my development machine, and I prefer it - I guess I just don't like to clutter my graphics workstation up with too much other software (it's sucking my resources dry man, I can feel it) - just a little harmless paranoia. Which brings me to...

Set-up a server using an old computer - LAMP - the "real deal"

I did this just last week as the culmination of sporadic research over several months. You might think that setting up your own server hardware and software is the stuff of IT technitians and not the realm of designers, and depending on the type of designer you are, or your background you may still want to leave it to your techie friend. But I managed it so I urge you to read on.

And of course the great thing about this approach is that you are not making a simulation of a web server, you will end up with an actual web server in every sense. Stick it in a datacentre and you really could use it to host yours and your clients websites and email (if you wanted), this is the "real deal".

And being the "real deal" it has several advantages:

1. More than one person can use it as a testing server simultaneously - which makes it ideal for web design studios with several designers, and ideal for schools/colleges/universities/education allowing more than one student to upload and test their projects.

2. Each user can have their own login and testing server space. In fact each project can have it's own server space and login.

3. FTP, HTTP, HTTPS, PHP and MySQL all work the way they should.

As a testing server it is ideal because it is a real server.

There are loads of LAMP options out there, but being designers, not technitians we want one that is:

1. Easy to set-up

2. Easy to operate once set-up

3. Free - we're on a budget

Which, after my research and experience, leaves me with one option that ticks all boxes:

BlueOnyx: http://www.blueonyx.it/

It is described as a turnkey solution (meaning it is as easy as turning a key to get up and running) and it really is straightforward.

Setting-up

1. Is your network suitable?

Before we go any further you need to check that you are the right kind of network to have a server. Answer the following questions with a "YES" and you can go ahead:

Do you have a network hub or router with a spare LAN socket?

Do your other computers connect to the hub or router using ethernet cable or wireless?

Does the router connect to your broadband connection?

If you answered "YES" to all 3 questions, then you can go ahead. Hoorah.

2. Get your machine

First you need an old computer that works, but which you no longer need. the computer should have at least the following:

Processor (CPU): Reasonable speed

RAM: At least 256Mb

HDD (at least 40Gb)

Graphics Card: (spec irrelevant)

Network Card: 10/100 Mbps

Other Drives: Floppy, CD ROM

The higher the spec the better, but don't worry too much, I am running a working testing server with BlueOnyx on the following very low spec machine:

Processor: PII 266MHz

RAM: 256Mb

HDD: 80Gb

Graphics: 8Mb

Network Card: 10/100 Mbps

Other Drives: Floppy, CD ROM

Sound: None

And it all works like a dream. The fact is that my testing server doesn't have to put up with much load. It won't be experiencing thousands of visitors, only me, and in most situations a testing server probably won't have more simulaneous users than the number of designers using it. Obviously, the more users the the better your computer needs to be but the main areas of concern are:

HDD - Improve this to hold more files

RAM and Processor - Improve these to handle more simultaneous visitors

Web servers DO NOT need a good graphics card, they spend most of their time without a monitor plugged in because they are managed over the web via a web browser or shell client. Nor do they need a sound card.

3. Check you don't need it

Make sure you really don't need the machine for anything else.

Make sure you don't need any of the information on the Hard Drive. What we do next will wipe it completely. You will lose all data, software, downloads, accounts information, everything.

If you are using an old windows machine with an OEM Windows XP sticker on it, you need to know that we will be wiping Windows off the machine, and you won't be able to transfer the Windows licence to another machine. OEM licenses stay with the machine.

Are you sure you can spare this machine?

OK, let's move on.

4. Set up the machine for install

For installation you need to temporarily hook up a monitor and keyboard to the computer you plan to use. Make sure it has power but don't turn it on yet. Make sure it is connected to your network hub via the ethernet port in the network card.

5. Download and burn the BlueOnyx server set-up disk

The BlueOnyx set-up disc needs downloading as an ISO file and then burning to a blank CD.

Download the ISO file here:

http://www.blueonyx.it/index.php?page=downloads

Once downloaded you need to burn the ISO to a blank CD.

If you don't have software to burn the ISO to a blank CD, I recommend:

http://download.cnet.com/CDBurnerXP/3000-2646_4-10409086.html?tag=mncol

Burn baby burn.

6. Install the server software

This is the really exciting bit. Your old computer becomes useful again as a testing server.

Open the CD ROM drawer and insert the set-up disc.

Reboot the machine.

Booting from CD :-)

In most cases your computer will check the CD drive first, to see if it can boot from CD. If this is the case follow the on-screen prompts until installation is complete.

MAKE SURE you write down or remember usernames, passwords and IP addresses you put in during installation. You will need them later.

Not booting from CD :-(

You will know if the computer does not boot from CD if you see Windows starting up, or nothing happens and it complains it cannot boot. If this is the case you need to make sure the computer boots from the CD ROM drive before it boots from HDD by changing the "boot order" or "boot priority" in the BIOS.

Do this by pressing reset or restarting the machine, then hitting the F8 or F10 keys as soon as it starts booting up (a note on the screen should tell you which key).

Then the BIOS menu will appear and you need to hunt around for the "boot order" or "boot priority" and set CD or Optical Drive to be FIRST.

I would show you in detail but all BIOS menus are different (get your techie friend to help if you are not sure).

7. After installation

Once the server has finished installing (you will know because it will reboot and tell you to remove the CD) it is ready to begin acting like a server.

At this point you can unhook the monitor and then find a place where it won't get in anybody's way and plug it into the network there and switch it back on.

After a few minutes it will have booted up and you will be able to access the server via the web browser of any computer on the network and finish the set-up.

To do this simply input the IP address you gave to the server into your web browser.

You will then get lovely web interface to the server and be able to finish setting up.

And that's a wrap

At this point you have a web server. Look out for a future post on how to set-up "sites" on the server so you can test your work.

If you want to have a go on your own. Check my next post.

Descartes Day

2009-08-24T07:10:00.007+01:00

In these modern times with such a rapid pace of progress we often mistake old or antiquated as meaning irrelevant. But we couldn't be more wrong.

I learned yesterday, from a child's book, that major principles on which much of my Actionscript is based were invented (or discovered) 372 years ago in the year 1637. The man we have to thank for bothering to write his discovery (or invention) down is the mathematician and philosopher Rene Descartes (pronounced day-cart).

And what was this great principle? What we now take for granted, the Cartesian Coordinate System (what we refer to as X and Y coordinates).

Allow me to quote that kid's book:

"Graphs turn pairs of numbers represented by x and y into meaningful shapes. This idea was invented by the French philosopher Rene Descartes, who is perhaps more famous for saying "I think, therefore I am." It allowed people to solve geometric problems with algebra and algebraic problems with geometry."
(Bridgman, R, 1000 Inventions and Discoveries, Dorling Kindersley Limited,
2002, pp 90)

If Descartes hadn't invented the system no doubt someone else would at some point - such is human ingenuity - so I don't for one minute suggest that _xmouse or _root.movieclip._y would not be possible without him. But the fact that Descartes was at least one of the independent inventors, and could be bothered to record and share his invention way back in 1637, deserves him some credit. So, today I briefly doff my cap to Descartes for his coordinate system (in much the same way I might tip my hat to Sir Tim Berners-Lee (inventor of the WWW) or Thomas Knoll (a founder developer of Photoshop) were I to pass them on the street).

The Wikipedia article on Cartesian Coordinates is an excellent introduction, and even gives formulas for transformation, reflection and rotation of geometry (all of which could form the basis of some useful Actionscript).

Just remember that with Flash the (0,0) point of the cartesian coordinate system is the top left hand corner (not the bottom left hand corner as it is with graphs).

Moving on...

Mouse Control for Flash Games - Part 2 - (Top Down Driving Game with Steering)

2009-08-12T17:32:00.013+01:00

A couple of months ago I posted a solution for getting a MovieClip to follow the mouse, with easing. It was a quick solution for controlling the 'player' in a top-down car game.

Since then I have revised the code to also make the 'player' rotate in the direction of travel, to simulate the effect of the car steering.

Take a look:

Original Movie (without steering) - Demo SWF

Modified Code (with steering) - Demo SWF

As you can see the rotation produced by the modified code offers more realistic looking game play, allowing the 'player' car to appear to swerve as the player moves the mouse, and making the 'player' car straighten up as it comes to the end of its movement.

The Code

The code is actually remarkably simple, much simpler than I expected. As I look back through my development versions it gets progressively simpler as I cut out all the redundant code and am left with only what matters.

I will give you the code below, the comments explain how it works. Just paste it into your Flash Actionscript panel, and click the format button to make it nice and easy to read:


/* Includes code from http://dansinteractive.blogspot.com http://www.digitalarena.co.uk */
/* This code works best if your movie is set to run at 30fps. */

/* The higher the frame rate the lower this number must be. */

var easing = 10;

/* Influences how far the player_mc rotates in response to the mouse distance from the player_mc. The lower the number the greater the rotation. */

var rotatefactor = 4.5;

/* This function animates the player_mc in response to mouse moving. */

onEnterFrame = function () {

/* Works out the current distance between the X coordinate of the mouse and the X coordinate of the player_mc */

mousediff = _root._xmouse-_root.player_mc._x;

/* Moves the player_mc along the X axis towards the location of the mouse with easing to provide some delay and smooth movement. */

_root.player_mc._x += mousediff/easing;

/* Rotates the player_mc towards the mouse. The amount of rotation is determined by the difference between the player_mc location and the mouse location along the X axis, and the rotation factor defined in the variable at the top. The closer they are together the smaller the amount of rotation, the further apart the larger the rotation.
With the _rotation method a negative number means anti-clockwise (counter-clockwise) and a positive number means clockwise. Even so, we do NOT need to test which side of the player_mc the mouse is on to determine whether the angle of rotation should be positive or negative. This is because we base the rotation on the distance between the mouse and the player_mc, and if the mouse is to the left of the player_mc this code will return a negative number which in turn will give us a negative rotation factor. Cool.*/

_root.player_mc._rotation = mousediff/rotatefactor;
};

As you can see, the whole affect is achieved without trigonometry. As such it simulates the visual appearance of the 'player' car steering, but is not a mathematically accurate model of steering. But it is only intended to provide user mouse control of a car for a simple top-down driving game - accurate physics are not necessary.

The thing I am most pleased about (apart from the cool effect) is how little code it takes. Without comments, it is a mere 7 lines long. And yet it provides so much more engaging game play (I think so anyway). If you find it helpful, leave a comment.

Later.

Now Includes Demo SWF Files

2009-08-10T12:28:00.003+01:00

I have a fair number of posts on here that describe funky uses of actionscript, but without showing examples of what I am talking about.

The good news is that I have now started adding demo SWFs to previous blog posts, and all future posts will include working examples by default.

Hopefully this will make it that little bit easier to see if my code is doing the thing you are needing help with.

What fun.

Manipulating Colour in Flash - #4 - Building an Interactive Colour Mixer

2009-08-07T13:23:00.010+01:00

Now we are beginning to see the end result of all my experiments with manipulating colour using Actionscript. Using the techniques from my previous posts, and a few others to get a working interface, this post explains how to make a simple RGB colour mixer that gives a preview of the colour and the hexadecimal value in a form that can be copy and pasted.

Demo SWF

The Interface

While it is very tempting for those with a graphics background to want to start by designing a groovy interface (including me), it is sometimes a good idea to get just a basic prototype working so you can get the bugs out of the code - and that's what you see here.

The demo above shows my basic interface. Before we can go much further you will need to lay out something similar on your stage. The items in the demo above are labelled, check the key below:

KEY:

A = MovieClip, instance name 'colourspot_mc'
B = Input Text, instance name 'red_txt', variable 'red'
C = Input Text, instance name 'green_txt', variable 'green'
D = Input Text, instance name 'blue_txt', variable 'blue'
E = Dynamic Text, variable 'displayhex'
F = MoveiClip, instance name 'redpointer_mc'
G = MovieClip, instance name 'redclicker_mc'
H = MoveiClip, instance name 'greenpointer_mc'
I = MovieClip, instance name 'greenclicker_mc'
J = MoveiClip, instance name 'bluepointer_mc'
K = MovieClip, instance name 'blueclicker_mc'

Once you have set up your objects on the stage as above, you are ready to start coding.

The Code

I won't go into long and drawn out explanations of everything this time. The colour manipulation is explained in previous posts on this blog, and other things are explained within the code as comments.

NOTE: For some reason blogger is not treating this code very well. When you dump it into Flash make sure you hit the 'Format' button so it looks as it should.



/* set default values for R, G and B */
var red = 0;
var green = 0;
var blue = 0;
/* Create colour object to control colourspot_mc */
var my_color:Color = new Color(colourspot_mc);
/* Button triggers conversion of RGB into hex, then applies it to the colour object */
onEnterFrame = function() { /*This enables colour to be constantly updated */
 /* ensures that only values between 0 and 255 can be used for red */
 if (red>255) {
  red = 255;
 }
 if (red<0) {
  red = 0;
 }
 /* convert red decimal into hex */
 var decred = new Number(red);
 hexred = decred.toString(16);
 if (decred<=15) {
  hexredfinal = "0"+hexred;
 } else {
  hexredfinal = hexred;
 }
 /* ensures that only values between 0 and 255 can be used for green */
 if (green>255) {
  green = 255;
 }
 if (green<0) {
  green = 0;
 }
 /* convert green decimal into hex */
 var decgreen = new Number(green);
 hexgreen = decgreen.toString(16);
 if (decgreen<=15) {
  hexgreenfinal = "0"+hexgreen;
 } else {
  hexgreenfinal = hexgreen;
 }
 /* ensures that only values between 0 and 255 can be used for blue */
 if (blue>255) {
  blue = 255;
 }
 if (blue<0) {
  blue = 0;
 }
 /* convert blue decimal into hex */
 var decblue = new Number(blue);
 hexblue = decblue.toString(16);
 if (decblue<=15) {
  hexbluefinal = "0"+hexblue;
 } else {
  hexbluefinal = hexblue;
 }
 /* build the final 6 digit hex figure and prepend with 0x as needed by Flash */
 hex = "0x"+hexredfinal+hexgreenfinal+hexbluefinal;
 /* build the final 6 digit hex figure and prepend with # as needed by HTML */
 displayhex = "#"+hexredfinal+hexgreenfinal+hexbluefinal;
 /* set the colour property of the colour object controlling the MovieClip */
 my_color.setRGB(hex);
 /* Update the location of the pointers */
 _root.redpointer_mc._x = ((_root.redclicker_mc._width/256)*red)+_root.redclicker_mc._x;
 _root.greenpointer_mc._x = ((_root.greenclicker_mc._width/256)*green)+_root.greenclicker_mc._x;
 _root.bluepointer_mc._x = ((_root.blueclicker_mc._width/256)*blue)+_root.blueclicker_mc._x;
};
/* Set the red decimal value with a clicker */
_root.redclicker_mc.onPress = function () {
 redleft = _root.redclicker_mc._x;
 clickpos = _xmouse;
 clickval = clickpos-redleft;
 clickprop = (clickval/_root.redclicker_mc._width)*256;
 red = Math.floor(clickprop);
 /*moving the pointer
 _root.redpointer_mc._x = clickpos;
}
/* Set the green decimal value with a clicker */
_root.greenclicker_mc.onPress = function () {
 redleft = _root.greenclicker_mc._x;
 clickpos = _xmouse;
 clickval = clickpos-redleft;
 clickprop = (clickval/_root.greenclicker_mc._width)*256;
 green = Math.floor(clickprop);
 /*moving the pointer */
 _root.greenpointer_mc._x = clickpos;
} 
/* Set the blue decimal value with a clicker */
_root.blueclicker_mc.onPress = function () {
 /*Getting the zero point on the clicker bar */
 redleft = _root.blueclicker_mc._x;
 /*Capturing the location of the click on the clicker bar */
 clickpos = _xmouse;
 /*Calculating how far along the clicker bar the click was made */
 clickval = clickpos-redleft;
 /*Calculating the proportional distance along the bar at which the click was made as a figure between 0 and 1, then converting that into a value between 0 and 256. */
 clickprop = (clickval/_root.blueclicker_mc._width)*256;
 /*Converting the figure to an integer by rounding DOWN to the nearest whole number. Rounding DOWN ensures we can get 0 at the bottom and 255 rather than 256 at the top. */
 blue = Math.floor(clickprop);
 /*moving the pointer object to the position clicked on the clicker bar */
 _root.bluepointer_mc._x = clickpos;
}

And there we have it.

Solving Issues as You Go

It is always interesting to solve some issues as you go. For instance, I hadn't quite decided whether I wanted users to be able to type RGB values, or just limit them to using the colour bars.

When I decided that some users might want to be able to type them (as it might be easier and faster in some situations) I realised that some users might enter a value greater than 255 - which would then give inaccurate results. So, at the last minute I included the code that converts any number higher than 255 into 255 and any number lower than 0 into 0. Like I say, always interesting.

Another implication was with the pointers on the colour bars (items F, H and J in my diagram). Making the RGB numbers updatem depending on where the user clicked, and moving the pointers to the place the user clicked was one thing. But now we had to also work it the other way, and get the pointers to move to the place on the colour bar representing the value the user typed. It wasn't difficult, just a case of working the equation the other way, but it needed doing.

Sometimes seemingly small decisions about user experience can have a significant impact on our code. That doesn't mean we shouldn't put the user first, but it does mean we should be prepared to modify our code when needed. After all, our interactive applications need to actually do what the user wants, if we want any users to use them.

Google Advantages with Blogger

2009-08-06T21:49:00.004+01:00

I have been using Blogger since August 2007 very happily. And though everyone has their favourite blog system, and although I have even been recommended that Wordpress is better, there is something that some bloggers may not be aware of - really fast Google indexing for Blogger posts.

I don't know how long it takes for someone using Wordpress to have their blog posts begin appearing in Google. No doubt it will vary depending on the rating the blog has under the highly secret Google algorithms. But as a Blogger user I can honestly say that I have had a blog post appear in the Google search results within 2 hours of posting - this very day - and not buried pages deep either.

Less than 2 hours after publishing this post:

http://dansinteractive.blogspot.com/2009/08/converting-decimal-rgb-values-into-6.html

I found it on the number 1 spot on Google (out of about 13,300 results) under this search term:

convert 2 digit hex actionscript

Of course this is obviously related to the fact that Google owns Blogger, but the reasons are less important than the results. I almost don't care what other features other blog systems may have. Until they can beat me into the Google index I will stick with Blogger.

Converting Decimal RGB Values Into a 6 Digit Hexadecimal

2009-08-06T20:02:00.016+01:00

Recent posts have looked at the Actionscript required to convert decimal numbers into hexadecimal strings. And if we don't look any deeper everything looks hunkydory for mixing any colour we like using RGB values, and then convert to a hexadecimal number you might use to define a colour in HTML.

But we still have a problem to solve.

Low Numbers v. High Numbers

HTML and Flash can both use hexadecimal values to define colours, but the hexadecimal values must be defined as a 6 digit number - 3 pairs representing the 3 colour channels Red, Green and Blue. For example:

White: Decimal Red 255 + Green 255 + Blue 255 = Hexadecimal FFFFFF

In most cases this won't present a problem, after all decimal 255 equates to hexadecimal FF. The problem comes when the decimal value drops below 16. Lets take a look:

Decimal 255 = hex FF
Decimal 16 = hex 10
Decimal 15 = hex F
Decimal 1 = hex 1
Decimal 0 = hex 0

Notice that as soon as the decimal value drops below 16 the hexadecimal value drops into single digits. Lets see what this means in practice:

Black: Decimal Red 0 + Green 0 + Blue 0 = Hexadecimal 000

This is a problem because to convey colour values to HTML or Flash consistently we need a 6 digit hexadecimal number, but what we have here is only a 3 digit number.

To solve the problem we need to remember how hex counts. As an example let's count to thirty in hex:

0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E

In this example values 16 and above all have 2 digits in hex. We need to find a way of making the lower numbers all have 2 digits too. This is actually very easy, in fact we do this all the time, most commonly when we write the date. Take for example 1st January 2009 written numerically - 01/01/09. We can turn a single digit number into a 2 digit number, without changing its value, very easily by placing a '0' (zero) in front (this is called prepending), like so:

1 becomes 01
2 becomes 02

All we have to do then is prepend single digit hex values with a '0' (zero), like so:

00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F

If we do this we can display black as a 6 digit hex number after all:

Black: Decimal Red 0 + Green 0 + Blue 0 = Hexadecimal 000000

But how do we do this in Flash with Actionscript?

Prepending Single Digit Hexadecimal Numbers With '0' Using Actionscript

I am sure there are many and varied ways to do this, but I prefer the following method. First I will give you the code, then I will explain how it works.

/* R is defined as a value between 0-255 in a text input field by the user */

_root.calc_but.onPress = function() {
var decimalred = new Number(R);
hexred = decimalred.toString(16);
if (decimalred<=15) {
hexredfinal = "0"+hexred;
} else {
hexredfinal = hexred;
}
}

Here's how it works:

1. First we take the user inputted value (a number between 0 and 255) and pass it to 'decimalred' specifically defining it as a number.

2. Then we convert the 'decimalred' number into a hexadecimal string and pass the result to 'hexred'.

3. Then we test to see if the original value inputted by the user was 15 or less. We do this because we already know that any decimal between 0 and 15 will convert to a single digit hex number.

4. If the original value inputted by the user was 15 or less, then we use Actionscript to prepend a '0' to the converted 'hexred' value like so:

hexredfinal = "0"+hexred;

Then we pass the result to 'hexredfinal'.

5. If the original value inputted by the user was not 15 or less, then we don't prepend anything, we just pass the 'hexred' value straight to 'hexredfinal' untouched.

In this way we can make sure that in the conversion from decimal to hexadecimal, all values between 0 and 255 are shown as 2 digit hex numbers. This allows us to produce the 6 digit numbers required in HTML and by Flash.

What fun.

Manipulating Colour in Flash - #3 - Successfully Converting Decimal to Hexadecimal Using the toString Method (even with user defined variables)

2009-08-06T16:08:00.022+01:00

My last two posts looked at how you can use Actionscript to change the colour of a MovieClip, and to convert decimal colour values into hexadecimal.

Teething Trouble

But as I work towards harnessing these techniques to make a simple colour mixer in Flash I suddenly ran into difficulty converting decimal to hexadecimal when the user defines the decimal values in text input fields.

I must confess that to begin with I spent a while being stumped by this. As I Googled around for a solution there were similar questions, but no answers. Anyway, I am happy to say, there is a solution.

No doubt some of you will have a similar problem, so let me talk you through the problem I experienced and then the solution (I hope it helps).

The Problem

In my tests the toString method easily converted a decimal defined as a variable in a keyframe to a hexadecimal as follows:

/* This works */
var R = 255;

mybutton_but.onPress = function () {
hex = R.toString(16);
trace(hex); //Returns FF
}

However, when the value of R was defined by the user through a text input box it suddenly stopped working, as follows:

/* This DOESN'T work */
/* value of R is defined as 255 in a text input field by the user */

mybutton_but.onPress = function () {
hex = R.toString(16);
trace(hex); //Returns 255
}

For some reason, when the value of R was defined in the keyframe the toString method successfully converted the decimal value 255 and returned FF, but when the value of R was defined in a text input field the toString method failed to perform any conversion on the decimal value 255 and returned 255.

Preparing to Find a Solution

When I struggle with solving these niggly little problems I often find that taking some time out and doing something else gives the mind time to unwind (and also mull over the problem without having to try out every idea instantly). The brain is a fantastic problem solver, if it is given the right conditions. As a college lecturer I know that the ideal conditions come when an individual is relaxed but alert. So, if needed, take a break, unwind, get some sleep or remove distractions. I spent the morning cutting the grass and sorting out the chickens, then in the afternoon found the solution.

The Solution

As I said before, none of my Googling revealed an answer to my problem, but as I hunted around for anything I could find that might give me a hint, or prompt an idea I came across this snippet on WikiBooks.org:

var i = new Number(555);
trace(i.toString());

I must have seen several similar examples yesterday evening and got nothing from them (too tired no doubt). But having taken a break from the problem since then, and relaxed, my brain was ready to spot the significant detail that was the solution:

var i = new Number(555);

And there it was, staring out at me. Something I had not yet tried. So I modified my code as follows:

/* This DOES work */
/* value of R is defined as 255 in a text input field by the user */

mybutton_but.onPress = function () {
var decimalred = new Number(R);
hexred = decimalred.toString(16);
trace(hexred); //Returns FF
}

Why it Works

So why didn't it work before, and what's the big difference that makes it work this time?

I suspect that the reason it did not work before was because the user defined variable 'R' was already being treated by Flash as a string and so using the toString method to convert to a string did nothing, because it was already a string to start with.

Result: 255 (string) in, 255 (string) out.

The solution is really hidden within the problem (as are so many design solutions). We are converting a decimal value (representing a colour channel intensity) into its hexadecimal equivalent. We want to do this using the toString method. However, the toString method is for datatype conversion. This means converting one datatype to another datatype, in this case a non-string into a string. For this to work we need to force Flash to treat the user input 'R' as a number so that we can use toString to convert it into a string in hex format.

The script above does this by passing the user defined decimal value 'R' to a new variable 'decimalred' - with 'decimalred' specifically defined as being a new Number. This forces Flash to treat the user defined value as a number datatype thereby allowing toString to work as expected and convert the decimal number value to a hexadecimal string.

Result: 255 (number) in, FF (string) out.

And that's a wrap.

It is precisely this kind of problem that I see as being the drawback of having come to Flash and Actionscript from a graphic design, rather than a programming background. Nevertheless, I hope that by posting my solution I have helped at least one other poor designer get to grips with with one small area of Actionscript. If my Googling is anything to go by, this may well be the only explanation of this problem on the web (at time of posting of course).

Happy coding.

Manipulating Colour in Flash - #2 - Dynamically Changing MovieClip Colour

2009-08-04T18:19:00.010+01:00

Converting decimal colour values into hexadecimal is one part of the puzzle, but then we have to use the result to dynamically change the colour of a MovieClip.

One of the inconsistent(?), and certainly annoying things about Flash is the way you modify the colour of a MovieClip with Actionscript. We already know you can modify various attributes of a MovieClip such as _height, _width, _x, _y, _rotation... but there is no attribute for colour.

The Colour Object

What you have to do instead is create a create a colour Object which in turn controls the colour of the MovieClip. It's not difficult, take this as an example:

var my_color:Color = new Color(MovieClipName_mc);

In this code we call the object 'my_color' and in the parenthesis we specify the instance name of the MovieClip the colour object will be controlling the colour of, in this case a MovieClip called 'MovieClipName_mc' - you can of course name your MovieClip differently, provided you specify its name in the parenthesis as above.

Changing the Colour

We know the name of the colour object - 'my_color' - so now we can tell Flash the colour value of that object in hexadecimal (just as we would specify a colour in HTML). Here's the code:

my_color.setRGB(0xFFFFFF);

In HTML we prefix a hexadecimal colour value with '#' as in '#FFFFFF'. In Actionscript we prefix with '0x' as above '0xFFFFFF'.

FFFFFF of course represents the colour White (if white is a colour), if you change this value in the script above the MovieClip specified in the colour object will adopt the same colour.

Practical Use

That explains the principles of how we can use a colour object to control the colour of a MovieClip, but how about a practical example...

1. Create an object on the stage, select it and hit F8 to turn it into a MovieClip. Give the MovieClip the instance name of 'colourthing_mc'.

2. Create a new layer, name it 'Actions', then select the first frame of the layer.

3. Now create a Dynamic Text Box of the Input variety on the stage. In the properties panel set the variable to be '_root.usercolour', the reason for this will be explained in my comments below.

4. Now create a Button on the stage and give it the instance name 'calc_but'.

And that's the easy bit, now for the easy code:

/* This is one of those really silly things about Flash. Instead of having a colour attribute like they have _width and _height attributes, you have to create a colour Object which in turn controls the colour of a specified MovieClip. Here's how you do it: */

var my_color:Color = new Color(colourthing_mc);

/* This next step sets up for allowing the user to specify the colour of the MovieClip. */

/* First we create the user controlled variable */

var usercolour = "000000";

/* Then we create another variable that is the result of formatting 'usercolour' as required for Flash to understand it as a hexadecimal value by pre-pending it with '0x' */

var hexusercolour = "0x"+usercolour;

/* Then we setRGB of 'my_color' to that hexadecimal value */

my_color.setRGB(hexusercolour);

/* All that remains is to create a dynamic text box that allows the user to input their own hex value for the 'usercolour' variable and a button that will update the 'my_color' value with the user value from the text box, whenever it is clicked.

The important thing to remember when setting up the text input box, is to se the variable very precisely. If the variable it is updating is in the root timeline, then you must define the variable in the text box as '_root.variablename' not simply 'variablename'. In this case the variable for the text box must be '_root.usercolour'. */

/* This code then makes the button update the colour object with the user specified value. */

_root.calc_but.onPress = function () {
var hexusercolour = "0x"+usercolour;
my_color.setRGB(hexusercolour);
}

And that should be it.

Now we have been able to change the colour of an object through user input of the hex value. This could be developed further to allow the user to change the value by using sliders. This will require us to change 0-255 values into hex values on the fly. But knowing what we know from my previous post, this shouldn't be too hard.

Manipulating Colour in Flash - #1

2009-08-03T21:36:00.003+01:00

Following on from my previous post, I have begun to look into how I can use Actionscript to work with colour.

This experiment looks at how we can convert decimal RGB values into hexadecimal using Actionscript.

It's very simple...

The Code

/* First we set the RGB values as decimal integers (whole numbers) from 0-255, as you would see them defined in any graphics program. This example would reproduce white, but you can change the values to be anything you like between 0-255. */

var R = 255;
var G = 255;
var B = 255;

/* Then we convert the RGB decimals to their hexadecimal equivalents. The toString method is the easiest way I have found of doing it (thanks to Colin Moock). This script takes the value of each of the variables and converts the datatype from a numeric value (in this case 255) into a string using '16' as the radix argument of the method. As a result 255 becomes FF, the hexadecimal equivalent. The code below then simply stitches the converted values of the R, G and B variables together to form a 6 digit hex number for the colour. */

trace(R.toString(16)+G.toString(16)+B.toString(16)); //Returns FFFFFF

What I like about this method is its simplicity. It would form the basis of a very simple colour mixer program, since the R, G and B values could easily be set by sliders, or the user keying in decimal values for each of the channels.

Over to you... meanwhile, I play with colour some more.

Thoughts on Colour

2009-08-03T18:02:00.009+01:00

Colour is a fascinating thing. As a child there was always that wonder of discovery that went with mixing colours to make new colours... always resulting in that grimy brown in the end.

I have since learned that as a child I was playing with subtractive colour, the mixing of pigments to subtract from white and make black. Meanwhile your computer monitor uses additive colour, mixing light to add to black and make white.

It gets even more interesting when you introduce colour wheels and start to notice the relationships between primary, secondary and tertiary colours. Or the difference between tint, hue and shade, or complementary colours and colours in common.

16 Million +

Computers make mixing colours so easy, in fact, with the right tools it becomes less about art or aesthetics and more about mathematics. Did you know for instance that the 16 million or so colours your monitor can display are made up of just 3 colours, red, green and blue? Each of these is called a channel, a red channel, a green channel and a blue channel. In fact your computer can display 256 increments (levels of colour strength) on each channel and by mixing those colours in different amounts you get all the colours available to your monitor.

Just think about it, 3 colour channels, 256 increments of each to mix:

256 x 256 x 256 = 16,777,216 possible colours

Decimal v. Hexadecimal

In decimal we count from 0 to 9 before starting over, giving us 10 increments. like so:

0 1 2 3 4 5 6 7 8 9

Using decimal to define colour we start with 0 as the lowest colour value, and end with 255 as the highest, giving 256 increments.

However, HTML (and at times Flash) prefers hexadecimal which differs from decimal in that we count from 0 to 15 before starting over, giving us 16 increments. Like so:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Using hexadecimal to define colour we start with 00 as the lowest colour value, and end with FF as the highest, giving 256 increments also.

We can say that a decimal 255 and a hexadecimal FF are of equal value. They represent the same number. Likewise a decimal 0 and a hexadecimal 00 are also equal.

Defining Colour Values Numerically

A present we are looking at specifying RGB colour, that is colour defined by the amounts of Red, Green and Blue in their makeup.

When defining RGB colour numerically, it is vital to remember the order of the colour channels. It is always Red, then Green, then Blue. Take the following decimal example:

255,192,128

Knowing the order of the colour channels means we can understand that this means the Red channel is on full blast at 255, the green channel is at three-quarter strength at 192 and the blue channel is at about half strength at 128.

Using hexadecimal we would write the same colour as:

FFC080

The first 2 digits are the red channel, the second 2 digits the green channel and the last 2 digits the blue channel.

Fascinating stuff.

Anyway, as a result of my interest in digital colour, I have decided to take the plunge and see how Flash can be used to manipulate colour. From my initial reading an understanding of the above will be vital to colour manipulation with Actionscript.

Sliding-Page Effect - Navigation in Flash

2009-07-27T19:55:00.014+01:00

The other thing that http://www.fuelfugitives.com/ got me interested in was the way the navigation works. The wonder of Flash is that you don't load a new "page" when you click a "link" (or button). In fact anything can happen - make a noise, play a video, basically anything you can imagine and code. This means we are not constrained to the traditional ideas of navigation transitions from "page" to "page".

Fuel Fugitives utilises a nice idea I have seen a few times. Instead of simply changing to another "page" or screen, you slide gracefully from one place to another, as though all the "pages" are actually on the same sheet, you just change which part of the sheet you are looking at.

Well, unable to resist the challenge I decided to work out a way of getting the same effect myself, using Flash and AS2.

Let's get started

1. Create a new Actionscript 2 document and set the frame rate to 30fps.

2. Create an object on the stage, hit F8 and convert it into a MovieClip, with the registration set to the middle.

3. Create 3 more instances of the MovieClip (for a total of 4), space them out, and give them the instance names object1_mc, object2_mc, object3_mc, and object4_mc.

4. Select (using SHIFT) all of the instances of the MovieClip on the stage, then hit F8 and convert the group into a MovieClip with the registration set to the top left. This new MovieClip should contain all the other clips on the stage. Give this new MovieClip the instance name objholder_mc.

Once that's done it's time for the Actionscript.

The Actionscript

/* First we set a variable called currobj. This will store the name (or in this case number) of the movieclip we want centred on the stage. We will use it later to centre that movieclip if it is not already centred. */

var currobj = 1;

/* Now we need some easing to give the slide animation a bit of style */
var easing = 6;

/* Then we set variables to define the centrepoint we want to centre movieclips to. */

var hmiddle = Stage.width/2;
var vmiddle = Stage.height/2;

/* Then we create the function that moves the current movieclip (defined by currobj) to the centre (defined by hmiddle and vmiddle). */

onEnterFrame = function () {

/* Finding the difference between the object holder x and y and the centre x and y */
objh_v = _root.objholder_mc._y;
objh_h = _root.objholder_mc._x;
vdiff = vmiddle-objh_v;
hdiff = hmiddle-objh_h;

/* Finding the object x and y within object holder. By using the ["object"+currobj+"_mc"] the code works for every object, all we need to do is update the value of the currobj variable. This means that we can keep our code small and reusable. */

obj_h = _root.objholder_mc["object"+currobj+"_mc"]._x;
obj_v = _root.objholder_mc["object"+currobj+"_mc"]._y;

/* Finding the difference between the current object (currobj) x and y and the centre x and y */

finalvdiff = vdiff-obj_v;
finalhdiff = hdiff-obj_h;

/* Finally we get onto the animation. This basically tells the objholder x and y to move so that the currobj MovieClip inside objholder is centred. All the calculations up to now allowed us to find out exactly where objholder needed to move to for this to happen. So that we get the easing effect on the animation, objholder only moves just under half the actual distance to its destination on each frame (this is controlled by the easing variable). */

_root.objholder_mc._y += finalvdiff/easing;
_root.objholder_mc._x += finalhdiff/easing;
};

/* Making the objects act as links to the next object. I am working on a way to write this code only once for any number of objects, on the basis of telling Flash the total number of objects, but not there yet. meanwhile we need a function for each object manually telling it to go to the next by setting the currobj value to the next object. */

_root.objholder_mc.object1_mc.onPress = function () {
currobj = 2;
};
_root.objholder_mc.object2_mc.onPress = function () {
currobj = 3;
};
_root.objholder_mc.object3_mc.onPress = function () {
currobj = 4;
};
_root.objholder_mc.object4_mc.onPress = function () {
currobj = 1;
};

Over to you...

As you can see, the code is fairly straightforward (hopefully the comments explain how it works). But so far all we have is the mechanics, to be really effective you need to have good graphics to go with it. A good idea!

That's what Fuel Fugitives has, now over to you.

Controling Flash Navigation through the URL

2009-07-27T10:03:00.008+01:00

Just came across this site http://www.fuelfugitives.co.uk/ which uses the URL in a really interesting way to allow you to access different parts of a Flash Movie depending on the URL. Even though it is the same Flash Movie, not different pages.

This is useful because it means you can bookmark or "add to favourites" a specific part of the Flash Movie. It also means you can use your browser back button to return to a previous part of the same movie (normally with Flash this would result in you leaving the page containing the embedded movie).

So how did they do it?

I'm still looking into that, but a quick view of the source code indicates that some cool javascript is the answer. Will investigate more later... meanwhile - gardening.

Having cleared nigh on 168 square feet of garden (and finding bricks, carpet, bags of clothes and all manner of rubbish buried there by previous owners) with the help of a brother, I have come back to find the answer, and after a bit of searching found if not the solution, a solution...

And the answer is...

http://www.asual.com/swfaddress/

To quote the website:

SWFAddress is a small, but powerful library that provides deep linking for
Flash and Ajax. It's a developer tool, allowing creation of unique virtual URLs
that can point to a website section or an application state. SWFAddress enables
a number of important capabilities which are missing in today's rich web
technologies including:
Bookmarking in a browser or social website
Sending links via email or instant messenger
Finding specific content with the major search engines
Utilizing browser history and reload buttons

There are some cool little demos too so you can see it in action, and sure enough, seems to be pretty much what I saw on http://www.fuelfugitives.co.uk/, the site that started me looking in the first place.

So that seems to be it. One more thing to add to my todo list, but I fully intend to put this to good use this holiday. I hope you find it useful as well.

Drag n' Drop (with momentum) in Flash

2009-07-24T21:31:00.012+01:00

A few weeks ago I had the opportunity to attend a JISC e-learning event. A fair number of educational technology vendors were present promoting their latest products and services, but for a brief moment one thing caught my eye. The SMART Technologies SMART Table.

It wasn't so much the idea of the SMART Table that intrigued me but the interactivity it offered. The e-learning game running on the table at the time was a diagram of the human body on which the students would have to correctly identify the different body parts by dragging labels onto them from the edge of the screen. As they were dragged the labels would turn as though being pulled by little strings, then when released would continue on to a gentle stop as though they had their own momentum.

I thought that idea of dragging and dropping labels that had weight and momentum was really cool, and I immediately realised that you could do a similar thing using flash.

Well, now that the first evening of my holiday is here I have begun work and have a basic solution for the momentum part of it (I will add the turning and following part another day when that is done).

So here it is, drag and drop, with momentum, in Flash:

Here's it is

If you are not yet an AS3 whizz or using an older version of Flash, don't worry, this one uses AS2.

Let's get going.

1. Create a new AS2 document.

2. Create a shape on the stage, select it and hit F8, then turn it into a MovieClip

3. Give the new MovieClip the instance name of object_mc in the Properties panel.

And that's the easy bit done. Now for the ActionScript.

4. Create a new layer in the timeline and give it the name Actions.

5. Select the first frame of the Actions layer, then hit F9 to open the Actions panel.

5. Input the following code into the Actions panel (hopefully my comments will explain everything, if not, leave a comment):

/* set some variables we will use later */

var posBh = 0;
var posBv = 0;
var posAh = 0;
var posAv = 0;
var trajh = 0;
var trajv = 0;
var drag = 0;

/* sets the level of friction, the higher the number, the more friction.*/

var friction = 1.35;

/*We make the object draggable, and set the drag value to 1*/

object_mc.onPress = function() {
this.startDrag();
drag = 1;
};

/*We stop dragging and set the drag value to 0*/

object_mc.onRelease = function() {
this.stopDrag();
drag = 0;
};

/*This part controls the momentum of the drag on stopDrag()*/

onEnterFrame = function () {

/*If we are dragging the object (and we can tell we are because drag == 1) then we gather information on the trajectory of the drag for ready for when we stop drag. We do this by comparing the X and Y position of the object between frames and so finding out its X and Y velocity. This is stored in the variables trajh and trajv.*/

if (drag == 1) {

/* Calculate Y trajectory/velocity*/

posBv = posAv;
posAv = _ymouse;
trajv = posBv-posAv;

/* Calculate X trajectory/velocity*/

posBh = posAh;
posAh = _xmouse;
trajh = posBh-posAh;
}

/*If the object has stopped being dragged (and we can tell because drag == 0) we then apply some momentum so the object keeps moving after it is let go. We do this by telling the X and Y position of the object to keep moving each frame with the value of the X and Y velocity as stored in the variables trajh and trajv. However we also apply some friction by reducing the value of trajh and trajv a little on each frame. We do this by dividing the variables trajh and trajv by the friction value on every frame and then setting trajh and trajv to have this new value.*/

if (drag == 0) {
trajh = (trajh/friction);
trajv = (trajv/friction);
_root.object_mc._x -= (trajh);
_root.object_mc._y -= (trajv);
}
};

And that's your lot.

CTRL ENTER to test your movie. You will find you can click and drag the object on the stage and if you let go while moving it will carry on with momentum but come to a gradual halt.

You can increase or reduce the amount of friction the object encounters on release by changing the value of the friction variable. Remember, the more friction the quick it slows, the less friction further it travels (like on ice). Have fun experimenting.

Summary

Although this was inspired by my experience of the SMART Table, it won't ever be that versatile because while the SMART table can handle several kids all working at once, Flash will always be limited by the number of "mouse" type inputs your computer supports at once. Usually one.

But we interactive media types don't care for such trifling limitations. Inspiration is one thing, and application is another. I don't have to make a SMART Table clone.

I can still use my flash experiment in a variety of ways to spice up my interactive applications, so the inspiration and the experiment was worth it.

Creative COW - a real hidden gem...

2009-06-03T23:00:00.003+01:00

I have been recieving emails from Creative COW for ages now but only just found time to really take a look at what they were about... and that was because they sent me an email telling me about Stereoscopic 3D (something bound to get my attention, and certainly of interest to a student of mine who produced an anaglyph 3D animation recently).

So I clicked on over to Creative COW only to be astonished that they actually publish a PDF magazine you can download for free, with excellent articles by real professionals about film and media production.

I immediately downloaded the latest issue, and then all back issues.

It is not often you find something so well produced totally FREE.

Mouse control for flash games

2009-06-03T00:56:00.006+01:00

Another of my students hit me with a conundrum to solve, and as usual I can't resist the challenge.

They are constructing a flash game to help new computer users become more comfortable with using a mouse. The idea is to have a top down driving game in which the player must move the car side to side to avoid on coming traffic and bad guys.

My student is already aware that you can easily make the player character follow the mouse, but they were not happy with such instant precise movements for the game (cars, after all, just don't respond like that). So I have been looking at some code to add a dampening or easing effect on the car so there is a smoother response when the mouse is jerked.

Demo SWF

Easing with mouse chasing movieclips

To kick off, the frame rate of the movie is 30fps for nice smooth animation. Then chuck the following code into the first frame:

var easing = 0.1; //The higher the frame rate the lower this number must be

onEnterFrame = function () {
_root.player_mc._x += (_root._xmouse-_root.player_mc._x)*easing;
};

And it really is that simple. To tighten or loosen the easing just ammend the easing variable.

Then just whack a movie clip on the stage called player_mc and you're done.

Taking the game code further

It is too late at night to waffle about it now, but you may find the developed code helpful. I may even get round to finishing it:

/* Students are required to design and build a simple game that teaches mouse control. However one student complained that the mouse is too sensitive for his game idea (a topdown car game).

One solution to his problem is to have acar contolled only along the X axis (left and right) andthat we do some simple algbra to dampen or ease the control ofthe player car.

Here goes.*/

/*First declare some variables */

var easing = 0.1;
/*easing sensitivity, the greater the frame rate the smaller this value needs to be.*/

var crashcount = 0;

/*Then we hide the mouse cursor so the user is not distracted and can focus on the player movie clip instead (which will be constrained to follow the mouse only on the X axis.*/

Mouse.hide();

/*Now a function to implement the easing and test for collisions with the enemy*/

onEnterFrame = function () {
/*Here's the easing*/
_root.player_mc._x += (_root._xmouse-_root.player_mc._x)*easing;

/*Because of limitation on Flash's hit test (whole bounding box or just a single point) the following code checks for collisions on 2 single points on the player, the top right, and the top left of the player. Because all collisions will be front on, this will be sufficient to see if the player collided with the enemy. We choose the single point method because it allows us to lump all the enemies into one movie clip and for us to weave between the gaps without raising a collision as we would if we used the bounding box.*/

if (_root.enemy_mc.hitTest(_root.player_mc._x+(_root.player_mc._width/2), _root.player_mc._y-(_root.player_mc._height/2), true)) {
crashcount += 1;
} if (_root.enemy_mc.hitTest(_root.player_mc._x-(_root.player_mc._width/2), _root.player_mc._y-(_root.player_mc._height/2), true)) {
crashcount += 1;
}
};

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

2009-05-28T20:08:00.005+01:00

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

2009-04-08T21:42:00.006+01:00

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

2009-03-06T19:20:00.014Z

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

2009-03-01T20:56:00.002Z

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

2009-02-27T16:13:00.008Z

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

2009-02-26T20:17:00.011Z

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

2009-02-23T23:52:00.021Z

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:

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

Flash Projects - #5 - Custom Video Player Mute Control

2009-02-23T22:50:00.012Z

Building further on the custom FLV player in previous posts, and definitely inspired by the BBC iPlayer, I decided to add further functionality, including a mute control to turn off the sound for a video currently playing.

The ActionScript is really very simple, and logical. Once you understand how to stream and attach video, attaching sound for control is very straight forward.

Quick recap

The original code required you to create a netConnection object and attach to that a netStream object:

//Net connection for video stream to video object
var myConnection_nc:NetConnection = new NetConnection();
myConnection_nc.connect(null);
var video_ns:NetStream = new NetStream(myConnection_nc);

Then you were instructed to attach the video stream to a video object on the stage:

this.vidHolder_mc.vid_video.attachVideo(video_ns);

Attaching audio

Setting up to control (or mute) the audio is not all that different. Use the following code:

//Attach audio of FLV for volume control
flv_mc.attachAudio(video_ns);
var audio_sound:Sound = new Sound(flv_mc);

Notice that the video and the audio both attach the same netStream object video_ns. While the audio will still be heard without attaching it separately, if we want to control it, we must attach it to a movie clip of its own as above. In this case a movie clip called flv_mc.

Controlling audio

Because we want a mute button that will change depending on the mute status (showing whether the sound is currently muted or not - visual feedback is such a wonderful thing), you need to create a variable to store the current mute status.

Insert the following code right at the top of your ActionScript:

//Mute control status, 0 = mute off sound on
var mutestatus = 0;

Then you need to create a movie clip to act as the mute button. This has just two frames, one containing an image of a speaker making noise, the other containing an image of a speaker not making noise (decide how to depict this however you like). Give the first frame the label muteon and the second frame the label muteoff. Don't forget to put a stop(); action on each of the frames or you will have an animated flickering button. Then drag an instance of the mute button onto the stage and give it the instance name mute_mc.

The following code will then allow you to mute and un-mute the sound, insert this at some point after the line you just inserted above:

//Mute control
_root.mute_mc.onRelease = function() {
if (mutestatus == 0) {
_root.mute_mc.gotoAndStop("muteon");
mutestatus = 1;
audio_sound.setVolume(0);
updateVolume();
} else if (mutestatus == 1) {
_root.mute_mc.gotoAndStop("muteoff");
mutestatus = 0;
audio_sound.setVolume(100);
updateVolume();
}
};

How does it work? Very simple. First it checks to see what the mute status is (whether it is muted yet or not). If it is not muted, it tells the button to look like it is muted (goes to the frame with the muted speaker picture), then sets the mute status to 1, then sets the volume to be 0, then updates the volume to make the 0 take effect. If, however, it is already muted, it tells the button to look like it is not muted (goes to the frame with the noisy speaker picture), then sets the mute status to 0, then sets the volume to be 100, then updates the volume to make the 100 take effect.

And that's a wrap.

Being inspired by historical art and design...

2009-02-18T23:22:00.003Z

(I have published this article on another of my blogs, so sorry if you have seen it before.)

Too often I hear students moaning that historical sources are boring, uninspiring, and in some cases irrelevant to the world of contemporary graphics. More often than I am comfortable with students would rather study their peers on Deviant Art than their superiors in an art gallery.

While I do understand what my students are saying, from their point of view, I suggest that the problem is not with the historical art, but in our misconceptions about how we think other people's artwork should influence or inspire us.

Take the video for Coldplay's Viva La Vida for example. A fantastic piece of contemporary art & design, packed with modern digital effects, almost totally inspired visually by 19th Century oil paintings.

See if you agree...

Take a close look. You will see animated painterly effects, cracks in the image like the crazing in an old painting, the dress of the performers, the props, the colours and yes, even the lighting, all influenced by oil paintings nearly 200 years old.

Compare the colours and lighting from the video with this portrait of Nelson. The similarities are striking.

Other examples of paintings from the same era follow. Do you see similarities with these too?

As you watch the video you will have seen many visual elements borrowed from paintings like those above. They have taken the visual language of these paintings and used it in the video.

One painting in particular that appears to inspire the video is the one on the cover of the "Death and All His Friends" album. It features a painting entitled "Liberty Leading the People". It was painted in 1830 by Eugène Delacroix in oil on canvas and currently resides in the Louvre museum in Paris. But if you look closely as the video plays, you will notice a lot of the background imagery appears to be either taken from or inspired by this painting (watch out for the red flag imagery, and towards the end, "Liberty" herself).

What is my point? Just because you are asked to find examples of historical art for research does not mean you will have to produce an oil painting. For inspiration you might take colours, texture, lighting, composition, style, story telling, imagery, semiotics, mood, effects... anything you like.

You don't have to feel like you need to be inspired to use the media or technique - though you might be.

Inspiration comes in many ways from many sources. Do you have the eye to look beyond the surface? If you have, you may yet produce great things, original things, that go beyond the graphical fashion of the now.

The Coldplay video proves my point. So look deeper.

Where Interactive Media Can Go

2009-02-16T20:14:00.004Z

Those of you who are old enough may remember back in 1993 a revolutionary new computer game was released - MYST. Back then it used the Mac's hypercard system (you know, the one that might have been a forerunner to the internet if only anyone had realised the potential of linking between stacks on other machines), simple yet effective.

As far as today's interactive media is concerned, the original MYST was pretty low tech. When I consider the simplicity of the original MYST back end it becomes clear that pretty much anyone with an intermediate knowledge of Flash and Actionscript could produce a comparable game today.

What set MYST apart then wasn't the technology, but the creativity with which the technology was used.

And this is what I keep trying to get my students to understand. It isn't all about being able to use the software, loads of people can do that. It is about the thinking, the ideas and the creativity.

That is why we emphasise the design process over the final outcome.

Of course later versions of MYST are a lot more complex than the original in 1993, but the ideas, the thinking and the creativity is still what drives the process, even if the technology has changed.

As demonstrated in this making of video...

The Making Of Myst Iii Exile via Noolmusic.com

Functions, functions, functions

2009-01-10T00:02:00.003Z

Being originally trained in graphic design, I missed out on formal training in computer programming. The subtleties of programming were all self taught and learned as needed, rather than learned in a logical and structured way. This, and the fact that I come from an art background (definately part of seeing the world a little differently) perhaps explains why I tend to come onto programming solutions to my interactive media problems in a round-about way.

The purpose and value of functions is a perfect example of this. A programmer could probably explain it to me until they were blue in the face, but in fact the best explanation I have ever had came accidentally in two halves, while actually looking for a solution to something else.

The following is actually bits taken from two different chapters in the Flash MX 2004 ActionScript reference ("Using built-in functions" and "Returning values from a function"). Why they didn't just explain it this way in the first place I will never know. Still, if having it explained this way makes sense to you I share it below for your benefit:

A function is a block of ActionScript code that can be reused anywhere in a SWF file. If you pass values as parameters to a function, the function will operate on those values. A function can also return values.

To call a function, simply use the function name and pass any required parameters.

For example, the following function returns the square of the parameter x and specifies that the returned value must be a Number:

function sqr(x:Number):Number {
return x * x;
}

Some functions perform a series of tasks without returning a value. For example, the following function initializes a series of global variables:

function initialize() {
boat_x = _global.boat._x;
boat_y = _global.boat._y;
car_x = _global.car._x;
car_y = _global.car._y;
}

More Coding for Fun (while still solving the design problem)

2009-01-03T22:47:00.006Z

Well, as usual I take the opportunity in the holidays to practice and develop my Interactive Media skills. Last time I made a Ukulele Tuner, this time, prompted by a relatives' purchase of a OO gauge railway for Christmas (and my own love of making things and building models) I put together a program to speed up scale calculations to make it easier for me when (and if) I find time to make scale model buildings for my relatives' railway.

Here it is produced in Flash with ActionScript, graphics produced in Fireworks and exported as PNG 32. Ultimately I will compile it into a windows executable using Zinc or Flash Studio once it has been thoroughly tested:

The model railway community on the Model Rail Forum, the New Railway Modellers forum and the Model Railway Forum were very helpful. Although I like to make models when I have time, I am by no means an OO or even a model railway expert at this point in time, so input from the potential user base was absolutely vital.

I guess the lesson I would want my students to take from this is that you don't have to be an expert in a field to successfully design for it. But you do have to do thorough research and be genuinely interested in learning about the field and learning about what is important to your client/the user. If you haven't learned to be interested you may find that what you produce meets the needs of precisely no-one - and you won't even get paid.

This lesson was summed up nicely by a designer who has influenced my approach to creative practice, Ivan Chermayeff. In a long time ago interview with ID magazine (I think it was ID), in an article called "Design: Another Reconsideration", Ivan simply states that "designers should be interested in everything" (para).

I think he is right. Almost the one industry a designer will not design for is his or her own industry. They will be employed to design for a variety of other industries throughout their career however, so an interest in other people's area of expertise is vital. After all, design is about problem solving (another lesson from Chermayeff), so designers need to be interested in the problems and get inside them, because as Ivan once described - solutions come directly out of an understanding of the problems (para).

That's why my research took me directly to the community of model railway enthusiasts. Because in talking to them (here, here and here) I would come to correctly understand the problem (the issues surrounding calculating scale conversions for model railways, the scales themselves, what the user needs it to do etc.) Once I understood the problem, the solution was pretty much obvious, all I had to do was apply my new understanding to the interface, visual appearance and make it work.

And the result? The community feedback was positive about the current version, so I know I have been successful. While a few suggestions for even further development have since been made, for now I have a working product that actually meets my own needs, and the needs of real live users.

Only possible, because the users were consulted about the design problem, and their input turned into a solution. Problem solved.

Switches and Key Listeners for Game Controls

2008-10-10T23:38:00.008+01:00

Well I just can't help fiddling around with code to see what I can do. I began toying with making some kind of game where you control a craft of some kind and must avoid the bad things and pick-up the good things.

Rather than dive straight into graphics I followed the best practice and began making the code work first. What follows is the simple beginnings of a game control script that uses a key listener object to check what key the player is using. Then, instead of using if else as I might usually be tempted to do I decided to use a switch to check which key is being pressed and change the direction of acceleration accordingly. For this to work for you, all you need to do it dump a movieclip onto the stage with the instance name "ship_MC", then copy the following code into your first key frame:

/*Up, down, left and right keys control direction. Space is the emergency brake.*/

/*Set initial values for direction and speed, and the rate of acceleration */
xspeed = 0;
yspeed = 0;
accelerate = 1;

/*Create the key listerner object*/
var myControlKeyListener:Object = new Object();

/*Set up a conditional response to the key press that changes the value of xspeed and yspeed depending on which key is being pressed and for how long.*/
myControlKeyListener.onKeyDown = function() {
switch (Key.getCode()) {
case Key.SPACE :
trace("space");
xspeed = 0;
yspeed = 0;
break;
case Key.LEFT :
trace("left");
xspeed -= accelerate;
break;
case Key.UP :
trace("up");
yspeed -= accelerate;
break;
case Key.RIGHT :
trace("right");
xspeed += accelerate;
break;
case Key.DOWN :
trace("down");
yspeed += accelerate;
break;
}
};
/*Add the key listener*/
Key.addListener(myControlKeyListener);

/*Animate the direction and velocity of the ship_MC movie clip according to the value of xspeed and yspeed */
onEnterFrame = function () {
this.ship_MC._x += xspeed;
this.ship_MC._y += yspeed;
};

The comments between the /* */ in the code above explain how it works. If you have not used switch before, and tend to stick to if else you will find in some cases that switch is much easier to work out the logic for and takes less typing.

Demo SWF

Flash Projects - #4 - Custom Video Player Dynamic Menu

2008-09-01T00:29:00.020+01:00

I am typing late on this one, so I will probably re-write it for clarity in a few days. Meanwhile I hope you find it helpful.

Having programmed a custom FLV player in Flash, I wasn't satisfied with hard coded video selection menu. This would mean that whenever I want to add another video would I need to edit the source file, add another button, add the actionscript for the button, recompile the movie and re-upload the movie - with all the attendant cacheing issues. Not a great approach.

Better would be to have the video selection menu generate itself dynamically from data in an XML file. This way I would only have to compile the video player once, but could update the menu by uploading a new XML file.

I hunted down some code on the web (I forgot the URL or I would link to it), it didn't work but with a minor tweak I was left with the following:

xStart = 0;
yStart = 0;
bWidth = 101;
bHeight = 35;
menuXml = new XML();
menuXml.ignoreWhite = true;
menuXml.onLoad = loadVidData;
menuXml.load("menu.xml");
function loadVidData() {
for (var i = 0; i<this.firstchild.childnodes.length; i++) {
var bn = this.firstChild.childNodes[i].attributes.buttonName;
var b = _root.menuHolder_mc.attachMovie("button", bn, i);
b._x = xStart;
b._y = yStart+(bHeight*i);
b.txt = bn;
b.onPress = function() {
//trace(this.txt);
_root.video_ns.play(this.txt+".flv");
currentvid = this.txt+".flv";
_root.heading = this.txt;
};
}
}

Essentially it sets a few variables to start with - the starting co-ordinates of the menu when it builds (xstart and ystart), and the dimensions of the buttons that make up the menu (bWidth and bHeight). You can set your own values for these to suite your design.

Then it creates an XML object and loads an XML file called "menu.xml". If you choose to name your XML file differently, make sure you change it in the Actionscript too.

The next part builds the menu based on the content of the XML file by attaching a copy of the button library item (more about this later) for each entry in the XML file. It positions each button one below the other based on the bHeight value you set earlier.

The text on each button is also taken from the XML file variable txt.

Then we have the Actionscript that tells the button what to do when clicked. In this case it tells the video_ns netstream object to play a file with the name defined by the XML variable txt. (The Actionscript adds the file extension .flv to the end of the value defined in the XML variable txt).

We also set the currentvid variable (purpose explained in the other tutorial).

Finally we set a variable called heading to have the same value as the XML variable txt. This is used to display the title of the video in a dynamic text box.

Putting It All Together

The Menu

First create a movie clip to be used in your menu as a button. This will be repeated vertically for each video file in the XML file. The button needs to have a dynamic text box on it to display the name of the video that will be shown when it is clicked. The variable name of the dynamic text box should be txt.

Right click the button in the library and select "linkage". Set the movie clip to export for Actionscript and give it the identifier "button".

Then create an empty movie clip on the stage, and give it the name menuHolder_mc. The script above will actually fill this empty movie clip with the menu, this makes it possible to adjust the position of the menu visually, by moving the positio of the menuHolder_mc movie clip. (It will also allow us to animate the movie clip in a future tutorial).

The Title

Create a dynamic text box with the variable name heading. Put it where you want it on the screen.

The XML File

Now the flash movie is done we need to format an XML file in such a way that the Flash movie will be able to parse it to make our menu. Sample XML code follows:

<?xml version="1.0" encoding="iso-8859-1"?>
<menu>
<menu buttonName = "Vid 1"/>
<menu buttonName = "Vid 2"/>
<menu buttonName = "Vid 3"/>
<menu buttonName = "Vid 4"/>
<menu buttonName = "Vid 5"/>
<menu buttonName = "Vid 6"/>
</menu>

You can enter as many <menu buttonName = "video file name without file extension goes here"/> lines as you like. Just make sure you put the exact file name, minus file extension. If, for instance, your file name is "Summer Holiday.flv" you put "Summer Holiday".

The Flash movie can cope with spaces in the filename, and don't forget, it is the filename that is being used to label the buttons, so I recommend you name your files with the title of the films and with spaces.

Let's face it, "Summer Holiday" reads a lot better than "holiday_video_001" on the video select menu.

Finishing Off

All you need to do is make sure the XML file, the Flash movie video player, and the FLV files listed in the XML file are all in the same folder. Then it should just work.

Anyway, as I said, it is pretty late (01:30am) for me, so I know the above is not as clear as it could be. I will rewrite in a few days.

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

2008-08-29T19:40:00.007+01:00

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.

Online Developer Tutorials from .NET

2008-08-22T14:16:00.005+01:00

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

TrueSpace 7.6 FREE?

2008-08-16T22:25:00.003+01:00

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.

Flash Projects - #3 - Custom FLV Player

2008-08-14T20:22:00.059+01:00

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

2008-08-14T00:20:00.004+01:00

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

Uke Tuner - Flash Based Ukulele Tuning Application

2008-07-26T10:56:00.004+01:00

Now that I teach interactive media, rather than practice commercially for a living, I sometimes get fidgety, wanting to do more of my own but never having the time.

Finally the holiday's arrived and I was able to get inspired, on account of my wife buying a Ukulele. She was using an online tuning system, but it wasn't as helpful as it could have been. The problem with the online tuning system, was that it only gave audio samples of a Ukulele string being plucked. However it is much easier to tune an instrument to a continuous tone. In Uke Tuner I gave the option, plucked note, or continuous tone, so the user can choose their preferred method. Then of course I went overboard on graphics and interactivity - just for the fun of it.

You can download Uke Tuner 0.92 (Beta) here free >

For the more technically minded, graphics were produced in Fireworks then exported as PNG 32 to preserve alpha channels or SWF, for use in Flash. Audio was recorded from a Yamaha PSR-240 keyboard via a line-in cable from the keyboard's headphone socket. Sound was recorded and processed with Audacity then exported as WAV 32-bit for use in Flash. Interactivity was produced in Flash, with ActionScript 2. Flash Audio settings were set to export sound at 22Khz stereo and 128kbps. Playback speed is 30 fps to make it animate more smoothly. The application was compiled with MDM Flash Studio because it has a faster projector engine than the Flash Standalone Player, extends the ActionScript classes available in Flash with some additional functionality, and allows the creator to tweak the display options (such as turning off the blue bar at the top).

Accessibility and Colour Blindness

2008-07-20T18:46:00.006+01:00

Colour blindness has been more relevant to me this year more than previous years on account of having a colour blind student.

While it certainly doesn't make life easier for an Art & Design & Interactive Media student it doesn't make it impossible to work in the design industry either. I did know of a former product designer, who was colour blind, who had a successful career in industry and in teaching.

Even so, as a teacher, it is helpful to have some understanding of colour blindness so I know what to expect, and can help the student develop strategies to cope with areas of difficulty.
One resource I found recently is a website called Vischeck.

Vischeck provides colour blindness simulation tools, including an image previewer, a website previewer and a Photoshop filter. The site also gives information about a Daltonization algorithm for correcting images for colour blind people. All fascinating stuff.

I downloaded the Photoshop filter and installed it for Photoshop and Fireworks. It works fine in both.

I wondered how the normal visible spectrum would look to a colour blind person, and so I used the Photoshop filter to adjust a bog standard colour wheel. The results were truly astonishing:

I just cannot imagine a world so radically different to the one I see now.

Now I know why my student picked a muted grey/green instead of a vibrant green to represent grass in a client visual. To them they looked the same.

This insight into how colour blind people actually see the world is probably the most valuable outcome of this find. Meanwhile the Photoshop filter will allow me to demonstrate it to other people, and to gauge usability of my own designs.

Creative Reading

2008-03-17T12:42:00.004Z

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

2008-03-08T09:25:00.006Z

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

2008-03-07T22:23:00.006Z

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

2008-02-16T12:49:00.008Z

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.

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.