Being inspired by historical art and design...

(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

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

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)

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

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

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!

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.