Flash can be a useful tool to jazz up a website, but is often used pretty inappropriately. One rule I always abide by is: 'Never make a large flash intro sequence, especially if it involves a fair amount of loading time, silly animations and ridiculous sound effects'. The flash developer at Hema (a Dutch department store) took this mantra and threw it out the window, doing everything wrong...
...except the result is BRILLIANT. It makes their product list come to life and actually serves a useful function, guiding people around their products, keeping them entertained and leaving a sizable impression on them for next time.
Normally these animation things only serve to boost the developer's ego, but I think in this case, he or she should be praised - it's silly, but great too :)
It's nearly that time of year again, where the Edinburgh Festival takes over the city and people flock to visit the huge variety of performances on offer. And as always, the website / booking service is getting a bit of abuse across the web. They say the online booking system is greatly improved this year, but the website still remains the same design (shame). I haven't fully checked this year, but usually there is also a major lack of a decent, interactive venue map.
Last year I decided to tackle this problem head on by creating the Fringe 2008 Map - I did this project as a 24 hour app or Mashed 2008 - and although I've not done anything this year for Mashed 2009, I'm happy to say I've given the Fringe Map a few tweeks and a redesign for 2009.
Screenshot of the newly-designed Fringe Map 2009.
So, if you'd like to take a look at this years map, click the link below. As always, the map is fully interactive, with users being able to update and edit venues as well as being able to sort the map in a large variety of ways, depending on your needs. And just as a bonus, a few of my favourite food/drink venues are on there too, in case you're unsure where's good to go!
And just to show the Fringe website services aren't all bad, I was pleased to see a nicely designed Flash "game" used to promote this year's festival. It's called "The Fringe Thing" and is an experiment-based discovery tool, whereby the "thing" (it looks much like an egg) can be interacted with in a number of ways, with the ultimate aim of finding out what it is. Some of the experiment videos are great fun as well - and although it has no real purpose, it's a nice little app to kick things off :)
The Fringe Thing - Experimental Game [click to visit]
After installing adsense onto the site, the next logical step was to set up a Google Analytics account, to help analyse my web traffic (visitor numbers, bounce rate, popular pages etc). It's only been up a few days, but it has already hinted at some useful results:
- One or two stories are much more popular than others
- Visitor bounce rates are quite high
- Lots of people view the site by theme / tag
I'll keep analysing the site and probably do a more detailed post in a few weeks (showcasing what it can do for a small company website), but in the meantime I'll just use some of this info to theme this post.
When I looked at the data, the most popular story this week was one I posted months ago about unusual bridges and bridge-building games. Considering I've done a number of posts on architecture before, I think it might be the gaming-nature of the post that has proved particularly popular.
So, I'm pandering to this demand and going to quickly showcase a couple of cheap, downloadable games I have recently bought. First off, I don't normally buy games (not for PC anyway), I just play free, online ones. And this is the same route I used to find these games as they both started off as free demo / beta versions. Compared to most console games, I think these are both great value for money and hugely playable, so check out the demos at least:
Trials 2 (Second Edition) I've been playing this game ever since its first inception on miniclip, and it has got better and better. OK, now it costs $9.99 for the full version, but it has morphed into a highly-playable 3D version of the original flash game.
Trials 2 was addictive enough, but the second edition has much better (HD) graphics, way more levels, a great variety of driver viewpoints and a really good online competition system.
All you have to do is get to the finish line driving a motorcross bike over obstacles, jumps and moving objects. Only those levels classed as "hard" are really difficult to complete, all the rest it's just a case of finishing as quickly as possible and seeing how you compare against the world!
The website has loads of videos / screenshots etc, but here's one for you right now:
Crayon Physics Deluxe I was about to describe this as a 'Drawing / Physics Game' but decided this might give the wrong impression - it's not a learning tool, just a game that utilises 'real physics' to let objects react like they would in the real world.
The general idea is having to guide a ball to a star, overcoming obstacles by drawing shapes and making machines to help you on your way. This new 'deluxe' version allows you to create axles, wheels and levers, giving the user loads of breathing room for creativity.
The original game also had an impressive soundtrack (albeit one song) and the new version keeps up this theme, as well as adding a new island-based exploration layer to the game.
Bear in mind the original game was out years ago, so some of the technology behind the software may not seem quite as revolutionary, but I think the playability more than makes up for it.
I always enjoy looking at a small animation within an article to help explain the point being made. Scientific articles are particularly good at this (see Wikipedia: Parallax GIF but you also see similar work across a wide variety of news and sport reporting. Sometimes, the use of animation can make an article come alive and add much more meaning (especially with space constraints!) than a text-only article. See BBC: Large Hadron Collider (CMS) for a great example).
The above examples use simple animation (such as GIF images) as well as more versatile tools (such as Flash). Flash has really been adopted by the internet community and gone are the days when you'd reach a limited audience with its use. I've done some work with Flash before, but mostly for design (websites, adverts etc). There are plenty of examples out there where Flash is used in useful and dynamic ways. See Geowise - InstantAtlas, Flash Earth and the majority of modern video sites (iPlayer Labs are a great way to see what's on its way too!).
So I decided it would be interesting to explore the middle ground. Instead of using animation to explain experiments, I wanted to use it to document them. Obviously this has been done before, but I thought it would be an interesting exercise to see how easy it can be and how useful the result is.
As I was sat on the bus in central Edinburgh, I saw a busy pedestrian crossing. It struck me that those who knew the crossing well would move across early (knowing when the green man would come), whilst those who didn't (or those who were more cautious) would wait. Also, those who didn't know the crossing and also lacked considerable caution would just risk it whenever, often needing to turn back.
The pedestrian crossing in question - Hannover Street, Edinburgh.
I thought this would be much better mapped from above, to see if the patterns could show us anything. If this task was repeated, some scientific analysis could be performed - possibly answering the following questions:
- What percentage of people wait for the green man?
- Does the number of people waiting affect the caution shown by the people in general?
- What percentage of pedestrians are locals who know the traffic light system?
OK - so before I go any further, I'd best point out I'm not intending to answer these questions - but I thought I'd create a system that possible could. So I set up a Flash animation of the crossing using Koolmoves Flash software. Take a look at the result below (it should repeat every 30 seconds or so):
As you can see, I made a graph of the pattern that updates with the (simplified) animation. The pedestrian lights are shown at the top and a timer ticks along at the bottom. It took about an hour to set up, but with new data could easily be repeated in 10 minutes or so and possibly combined to show an average pattern across many scenarios. It's just an idea - but Flash is pretty versatile - with a little work it could be hooked up to a database and continually refreshed showing current data. So next time you need help in describing an experiment, why not give it a go?
Now I'm not a huge Bob Dylan fan, but if I were I'm sure his website would make me very happy! Not only does it have a 'random page button', but it also has a very impressive music player.
Click at the top of the page and you get a full menu of all his records, which an be selected and any tracks previewed. They even spin on a nice little Flash record player - and best of all it all runs smoothly:
You can click the pic above to go to his site or click the link below - Music websites often frustrate me but this one definitely gets the thumbs up!
This is pretty funky - nice idea! This comes from Simon Heys Website, so take a look at his other stuff too! I've seen a fair few designs for funky clocks recently (animated and real), seems to be a bit of a trend - everyone likes to know what time it is I guess!
Adverts appear all over the web and often take a similar form, constrained by the size and shape advertising space is given on websties. The most common of these is the banner, normally with a width-length ratio of between 1:6 and 1:8.
I've been asked to make these for various companies before, often to send out to other companies as part of an advertising or link-sharing deal. I've had some experience with Flash before, but I was interested to see how quickly a simple banner could be made to get a simple point across quickly.
For the sake of simplicity (and cost...there's a free demo version), I like to use KoolMoves - Flash Creation Software. This is the easiest piece of Flash software I've used and I would especially recommend it for beginners.
So, I set about making a banner detailing a special offer for a fictional company - FauxCorp - to see how quickly a simple message could be put across. It took me 10 minutes to create this, but anyone new to the software would maybe need 2 hours first to explore the software.
This banner uses very simple effects:
1. A full size rectangle with gradient fill to create the background.
2. Four text boxes for the various messages
3. Two shapes to create the FauxCorp logo
4. An image of a gift
4. Fade in/out, slide and zoom effects on the various text boxes
5. Slide in and fade out effects on the FauxCorp logo
6. Spiral effect on the gift image
So, it can be quick and easy to make an animated advertising banner using the right software. The free version adds a watermark to the swf file, but older versions allowed full use (except saving to propreitary format).
The BBC seems to be rather busy at the moment, launching various beta releases of new concepts, often with little talk of their development previous to launch.
First up - and most revolutionary - is the BBC Sound Index, which trawls through a number of online music services and stores various data to help see "what's hot" right now, giving a list of top 1000 songs and artists. Although not much of this project code / data has been released to the public, it is still an interesting development and one which is well worth watching - lots of potential here.
It's all part of getting towards 'Web 3.0 / The Semantic Web', which is seen as the next big thing for the internet as a service. For more information on this, check out: The Semantic Web.
Next up is a new Climate Change service called BBC Bloom. This is a nice interactive application showing practical ways to help individuals combat climate change. It has an element of user control and you can log in to save your 'climate task list'. It's another great looking flash application from the BBC and really does make this subject more engaging.
I'd be interested int ehir budget for such projects, but these days having 'climate change' in your project name always helps bring in more funding :p. However, the BBC has obviously upped its budget for new web services, possibly on the back of the success of iPlayer - watch this space for more interesting applications soon!
Just a small round up of nice things I've seen recently. First up, a BBC radio programme that won the Sony Award for Multi-platform Radio at the 2008 bash. Now, I didn't catch any of this programme but i can see that the 'multi platform' nature of the show is stitched together using an interactive google map on the main page - the show was called Bangladesh River Journey.
This map is nothing particularly special, although I like the way separate pages can be scrolled within each map marker, allowing a lot o0f content to be added without too much clutter. However, there is nothing particularly groundbreaking here. I think what it highlights is that relatively simple maps can really help bring a diverse set of media into a coherent web of content.
Another nice site I found was a high-res flash site for Sparks (an energy drink company). I particularly liked the high quality and large image (much bigger than a computer screen) that had to be explored to find the content. Obviously, this would only work well for a website with little meaningful content (a BBC site like this would be disastrous!), but it's great for a high-impact design site and fits in with the "fun" image of an energy drink.
It also adds a bit of 'real-life' into the web as it's basically just a large photo of a wall with things pinned to it using flash. Normally, when a document is much bigger than the screen, scrolling around it causes disorientation, but here that doesn't really matter - it's fun trying!
