FREE CD »

S
AL
38 SOFTWARE+TUTORIALS

TO F
RI
TU S O INSIDE BACK COVER
RT GE
PE PA

ISSUE 120
EX
ISSUE 120

TM

www.webdesignermag.co.uk
DREAMWEAVER FLASH PHOTOSHOP

BUILD GREAT
ONLINE GAMES
Add classic arcade fun to your site with
"RAISING YOUR WEB DESIGN GAME"

Flash and Dreamweaver

HOW TO… IT’S HIP

Code collision detection with ActionScript
TO BE
www.webdesignermag.co.uk

Use drag-and-drop techniques in Flash

Produce perfect pixel art with Photoshop SQUARE
Draw stunning promotional wallpapers Go retro with ISSUEISSN
1201745-3534 £5.99

our pixel art

20
Create a snap card game in HTML
Positioning backgrounds using CSS workshop 9 771745 353003

001_WD120.indd 1 14/6/06 15:43:16

 Welcome
experts
OUR

LINING UP THE FINEST MINDS IN WEB

DESIGN FOR YOUR ONLINE EDUCATION

Todd Yard
MAKING THE MOUSE (WELL, RAT) WORK MARVELS
This issue Todd sends you back to your childhood
with a look at creating a Pac-Man style game. As a
senior software engineer, web developer, author
and technical editor, he’s well versed in the dark art
of the web. Head to www.27bobs.com for more.
Mark Shufflebottom
BRINGING YOU THE BEST IN RETRO GAMING
A media course teacher at Bournemouth University,
Mark is the man Web Designer turns to for Flash
expertise. He knows all the right tricks to make a
game addictive, so this issue we’ve got him creating
a retro Defender-style shooter.
Nick La
GET JIGGY WITH OUR COVER-ART PUZZLE TUTORIAL
Creating interactive Flash art is easy when you know
how, and Nick certainly knows how! This issue he
uses his skills as a web designer and graphic
illustrator to build a stunning puzzle game, which
can be totally customised to suit your site content.
T
he World Wide Web isn’t all about search
engines and shopping carts you know, so
this month we let online gaming push its
way to the forefront.
Don’t get us wrong, we here at Web Designer
take our work very, very seriously. Almost
too seriously, if I’m honest. Only the other
day I lost valuable sleep dreaming about the
animated GIF issue of Web Designer that never
was. But believe it or not, we do like to just
relax from time to time and let our hair down
– which means fun and games, frankly. Yep,
we’re all partial to a joystick twiddle from
time to time, so what better way to celebrate
it than with a gaming special? We’re talking
the about the most exciting foray into online
and Flash gaming development that you’ll
see, with virtually everything geared to
entertaining and interactive content.
Kicking off with a spanking cover from
Army of Troll’s Gary Lucken, we dive into a
bevy of games-flavoured sites in our latest
gallery. The history of online gaming is
unearthed by David Jenkins in our lead feature
on page 22, before the best Flash-fuelled
button bashers are announced in our top 20
countdown. Our regular tutorial section kicks
off with an awesome Flash rendition of arcade
classic Defender and a simply superb drag-
and-drop jigsaw puzzle based on our cover
art. Page 54 welcomes back Todd Yard to the
Web Designer fold with a rodent-filled version
of Pac-Man. The second part of our Photoshop
guide to drawing promotional wallpapers is
stooped in gaming glory thanks to a Space
Invaders theme, while an introduction to
the retro-tastic world of pixel art follows on
page 70. Then, incredibly, I take the reins
to Dreamweaver duty with an exercise in
JavaScripting. The tried-and-tested game of
Snap gets the point-and-click treatment with
a cool slice of code for randomly shuffling
arrays. For the non-gamers among you there’s
a look at positioning backgrounds with CSS,
and of course our regular ecommerce section.
All the tutorials have been designed to make
them easily customisable if you so desire, and
as always you’re encouraged to send us details
of your own stunning projects to the usual
address or pop a post on our new forum at
www.webdesignermag.co.uk/forum.
Right, now that’s done, anyone up for a
swift 90 minutes on Pro Evo?
Mark Billen
DEPUTY EDITOR

Editor’s picks Just a few of the main reasons why

Web Designer 120 shouldn’t be missed…

Steve Jenkins
SORTING OUT YOUR BACKGROUNDS THROUGH CSS
As a keen Dreamweaver advocate, Steve’s perfectly
placed to guide you through positioning images. 34-38 48-51 54-60
After a day’s graft on tutorials and our tech desk, It’s time for a Flash gaming chart Chop it up and put it back Don’t get ratty with this faultless
there’s nothing he likes more than a bit of footie. show with our rundown of the together with a puzzling Flash Web Designer rendition of one of
best 20 you’re likely to find walkthrough that looks ace the most famous arcade classics
Check out his site at www.thesouthend.co.uk.

Web Designer | 3

003_WD120.indd 1 15/6/06 11:09:46

 COVER ARTIST
Army of Trolls
www.armyoftrolls.co.uk | info@armyoftrolls.co.uk
This issue’s cover art is courtesy of the talented Gary
Lucken, who runs design and illustration agency Army
of Trolls. His obsession with pop culture began with a
childhood love affair with videogames on the Commodore Pet and C64, and
has grown to encompass everything from Japanese food packaging to horror
films and toys: “Even though I am grown up, I refuse to miss out on all the fun!”.
Lucken began to focus his skills on pixel art and character design while working
for a games company in the mid-Nineties, and despite a client list including
Honda and the BBC, he’s in it for the sheer enjoyment: “I find pixelart addictive.
I would be doing it even if people didn’t want to pay me for it.”

Army of Trolls’
detailed work for
Honda (above)

Lucken’s colourful
isometrics have
retro appeal (right)

4 | Web Designer

004_WD120.indd 1 13/6/06 12:27:20

 get interactive
This tells you about what to click and do

CLoser look
Highlights the way certain elements appear

movie sequence
Animation, video and cool stuff to watch

the cream of the web crop

hear this
Gives you a clue to any audio elements

Motor rollers
Browsers can compare how makes and
models of production cars would perform
using Honda’s diesel engine technology, all
through nice use of Flash rollovers

Bash-‘em-up
The main ‘game’ aspect of this site is
limited, but this sequence that lets you beat
up an old diesel engine into something much
better is a fun idea that works really well

 | Web Designer

008-013_WD120.indd 1 13/6/06 12:29:11

 GOT IT
FLAUN ?
Feast your eyes on our round-up of the best gaming
creations to grace the web. There’s some real coding T IT!
If you k
have pe now of an excit
being m rhaps built on ing website o
genius at work here, and whether it’s Air France’s addictive We’re alwighty fin
a
e
e then t you regard as
e
r
ys in ll u s
flight sim or a naked chase that has you hooked, these top great UR te ab
Ls or sturested to hear aout it.
n n ing site bou
sites will keep you clicking. Fire up your browser and enjoy! so don’t
b e sh launche t
at webd y,d s
esigner rop us a line
@
publish imagine-
ing.co.u
k
Sunny outlook
A bright outlook for motoring is
reflected in the eye-popping approach to
colour that is employed right the way through
this charming mini-site

Honda Grrrgame
www.honda.co.uk/grrrgame
Designed by: Unknown
The off-the-wall approach that Honda added to its
‘Hate something, Change something’ marketing
campaign extends to the web with this humorous
URL. All the bright colours and quirky animation
techniques from the TV adverts have been thrown
into a big Flash-based mixing bowl to produce a
mini-game about Honda’s new diesel motors. We
essentially get a penguin bashing an engine into
shape with a hammer, plus a range of zany content
spanning downloads and press information.

Web Designer | 

008-013_WD120.indd 2 13/6/06 12:29:29

 the cream of the web crop

Come fly with me

As the game area scrolls along,
shifting the mouse up or down alters the
flight path enough for you to dive up and
down and grab the on-rushing blue icons

Travelling light
Show your skill and you’ll take your
passengers to the furthest destination, but
you’ll also be able to log your name into the First-class graphics
game and pit yourself against global players The premise of this little game is simple
but the execution of the flight animation and
the floating icons is polished, spreading a
positive message about Air France’s service

Fly Further
www.flyairfrance.com
Designed by: Playerthree
If piloting a jumbo jet or long-haul airliner was
as easy as twiddling your computer’s mouse, this
site would be the perfect training tool. Air France
and design agency Playerthree have put together
a genuinely entertaining and challenging online
game that underlines the message of passenger
comfort. As you weave through clouds you collect
various icons relating to inflight entertainment
and dodge those that threaten dodgy weather
conditions. Head to page 20 for a profile on
Playerthree, where we get inside the minds of the
team of Flash supremos that created the game.

10 | Web Designer

008-013_WD120.indd 3 13/6/06 12:30:23

 Naked ambition
As you control your exhibitionist
character you’ll find plenty of obstacles
scattered around the many levels, designed
to slow you down and let the police catch up

Retro appeal
Everything has that humourous pixel-
art look that retro videogames used to have,
which adds to the undeniably silly vibe that
Game for a laugh echoes through this entertaining game
The arrow keys are your main method
of guiding ‘Sputter’ around the place, but if
he’s not quick enough it’ll be all over before
you know what’s hit you

The Streaking Game

www.thestreakinggame.com
Designed by: TVM Studio
Not quite the version of strip poker you might have been
hoping for, this hilarious simulator for throwing off your
inhibitions is still well worth a look. Assuming the role
of pixellated pervert ‘Sputter Freesway’, you must hijack
public events by garnering as much attention for your
naked self as possible while dodging the cops in the
process. It’s all done in a light-hearted, cartoon manner
that really suits the instant level of playability, and shows
just what TVM Studio can do with a spot of ActionScript
and a healthy dose of humour.

Web Designer | 11

008-013_WD120.indd 4 13/6/06 12:31:16

 THE CREAM OF THE WEB CROP

Wooded wonderland
The first thing that strikes you with this
site is the beautiful artistic techniques used to
create the different environments, while the
animated elements are totally seamless

Riddle me this
Within the sheer eye-candy hides a
series of devilish little puzzles that will trigger
a series of animation sequences designed to
clear a safe path for the lost characters

Animal crossing
By checking out the consequences
of each nugget of animation you’ll realise
what you need to do in order to make steady
progress through this wondrous site

12 | Web Designer

008-013_WD120.indd 5 13/6/06 12:33:00

 Underwater sounds
As you make your way through the
site you’ll sample selected tracks from The
Polyphonic Spree’s album, although you can
turn it off if it’s not to your taste!

Home page
On the final screen you’ll be reunited
with the remaining Spree clan and can access
a quick link to their home page by clicking the
little hut perched on the hill

The Quest For The Rest

www.questfortherest.com
Designed by: Amanita Design
Remember that band that had about 50 members who
all wore cassocks and seemed like a bizarre cult? Well that
was The Polyphonic Spree, and this site is the promotional
gem that helped them market their album back in
2004. The gist is all about guiding three lost members
of the band back to the rest via three interactive Flash
environments packed with lateral puzzles that, when
solved, clear the pathway home. Clicking on certain
hotspots reveal some superb bursts of animation and a
tangible sense of care over some gorgeous content.

Web
Web Designer|| 13
Designer xx

008-013_WD120.indd 6 13/6/06 12:34:28

 hot news from the web design world

A new set of scaleable fonts should make a huge difference to

mobile devlopment and improve legibility at low resolutions

Type goes high-tech

Give small screens the big-screen treatment with monotype
imaging’s new selection of fonts for mobile devices
The fonts on mobile phones aren’t really words and letters at Monotype Imaging. “Fonts can Utah families for user interface
design-quality – they’re just there to show you have unique looks and personalities, just as people development and implementations, and
the numbers you’ve dialled or the texts you’ve do. Because of varied and distinctive design traits, a semi-condensed ITC Officina Serif Medium that
received. If you’re lucky there’ll be smaller versions the right font can allow a product to stand out scales well and can be used in many different
for handling web content – which you won’t be
able to change. The latest smartphones are an
improvement, but more needs to be done.
Font design house Monotype Imaging has come
“The right font can allow a product to
to the rescue of designers everywhere with the
release of a set of scalable fonts for mobile devices.
Intended initially for phone themes, they’ll give
stand out from the competition”
anyone building mobile content something that’s from the competition and more intimately connect applications. As mobile phones become more and
both easier to read and able to carry an effective with the user.” The fonts include ITC Musclehead, more like mobile computers, good font support
brand or typographically stylish message. designed for “shouting messages” and Nadianne will help web designers deliver as exciting an
“Typefaces are a differentiating technology with Medium, a more “romantic” font for personal experience to mobile browser users as they do for
a powerful edge,” explains Allan Haley, director of messages. Others include the Blueprint and the desktop. www.monotypeimaging.com

16 | Web Designer

016-019_WD120.indd 1 15/6/06 10:53:29

 News

Adobe gets spry

Get into the ajax experience with spry, adobe’s new
framework that aims to enhance your flash work
May 2006 saw web developers and designers
from all over the world attend the AJAX
Experience event in San Francisco. Looking at the
hottest new web technologies, it was two days of
deep conversation – and plenty of announcements.
Adobe brought its new AJAX framework Spry to
the table. Spry builds on work done with Flash and
Flex, and focuses on working with XML data sets,
as well as providing Flash-like display widgets and
effects. With nearly everything you need in a cross-
browser set of libraries, this is an effective way of
building, and AJAXifying, the type of user interface
that’s become familiar to web designers building Flash
applications. It’s also a lot easier to use Spry to write
Get to the cutting edge
at Euro OSCON
O’Reilly’s Open Source Convention will be in
code than traditional AJAX approaches. Although Spry Brussels on 18-21 September, four days that
comes with a set of its own user interface widgets examine the technology, business, politics, and
(don’t expect the final version to have the same social dimensions of open source, open culture,
widgets as the initial beta), it can also work with Flash open APIs, and all that’s built on top of them. If
components using FABridge. This comes from the Flex you’re into Web 2.0 and the mash-up world hop
on a Eurostar, as this is the event for you.
development team, and allows Flash to be controlled
http://conferences.oreillynet.com/euos2006
by external JavaScript.
You can use Spry and FABridge to work with your
XML data, displaying it with Flash. It’s not surprising
that the combination of Spry, Flash and FABridge is
very similar to the open-source JavaScript, Flash and
XML OpenLaszlo platform.
Download Spry from the Adobe Labs website at
http://labs.adobe.com/technologies/spry.

Express yourself! Exclusive

microsoft
first look at

Could microsoft’s Web software rival

dreamweaver? All hail the beta release! expression Prototype your web
in nex t month’s designs on your Mac
Microsoft has been busy this month, releasing betas of not Karelia’s Sandvox is a low-cost website design
one, but two web design applications. Nearly a year after it was
Web Designer
tool intended to help beginners get started
first rumoured, Expression Web Designer has finally hit the download – just drag and drop your designs and content,
sites. A CTP – somewhere between alpha and beta quality – release, and then click a publish button to get your site
Web Designer is a hefty 230MB download, and you’ll need to be online. A Pro edition adds the ability to work with
running the final release of .NET 2.0. raw HTML, and with PHP scripts. If you need to
quickly put together a site prototype, or want
Positioned firmly against professional web design tools like
clients to show you the shape of the site they’re
Dreamweaver and GoLive, Expression Web Designer is Microsoft’s dreaming about, head to www.karelia.com.
first foray into professional web design for several years. Taking a lot of
lessons from its web application development tools, this is a tool for
designers working with web application developers (especially those
working with ASP.NET). There’s a lot in Expression Web Designer, from
its extensive CSS design tools to its myriad task panes that help deal
with specific web design problems. Microsoft is pushing very hard
for developers to use CSS, and has used Expression Web Designer to
improve on the CSS tools included in Visual Studio and Visual Web
Developer Express.
Microsoft has also addressed some of the issues of team working by
allowing design teams to set up different roles. Reporting tools help
designers see CSS and accessibility errors in their pages and sites, while
developers can use Expression Web Designer to add ASP.NET controls
and data connections to a page. Microsoft is putting a lot of weight 5million.co.uk
behind its new design tools, with a recent set of events across Europe There are now more than five million .uk
to follow on from its MIX06 conference. Expect to see more when the domains. The five millionth was registered on
16 May, Hosepipebanbuster.co.uk. Nominet,
Expression family is launched in late 2006 or early 2007. Download now
the UK domain registry about to celebrate its
from www.microsoft.com/products/expression/en/default.mspx.
tenth birthday, is handling more than 144,000

“Expression Web Designer is Microsoft’s first foray registrations a month, and 57 per cent of the .uk
domains are associated with a live site – with over

into professional web design for several years” three million in use. www.nominet.org.uk

Web Designer | 17

016-019_WD120.indd 2 15/6/06 10:44:15

 The WWW heads north Top
Downloads
Edinburgh plays host to an entirely different
festival with WWW2006
May saw the 15th International World Wide Web
Conference arrive in Edinburgh. Perhaps the biggest
global event for anyone involved with the web,
WWW2006 saw a mix of people exploring the
future of the web. Speakers included Jeff Barr
from Amazon and the creator of the web, Tim
Berners-Lee. A packed programme filled every
day, with sessions covering everything from
the development of the HTTP protocol and the
plumbing behind our websites to a day-long session from Get your AJAX on with
the World Organisation of Webmasters exploring best
practices in web page and site design.
downloads from the
The conference called on webmasters working
biggest names around
with e-government sites to work on producing sites that were http://code.google.com/webtoolkit
more accessible to disabled users. A survey from the University of www.nikhilk.net/scriptsharpintro.aspx
Southampton showed that 61 per cent of UK Government websites
Google recently launched GWT, the Google Web
don’t fully comply with the WCAG accessibility guidelines. As Adam Toolkit. Write your code in Java, and it’ll compile
Field from the University of Southampton pointed out, things aren’t and deploy as JavaScript-driven AJAX applications.
quite as bad as they seem, although a lot of work remains to be It’ll even make sure that the browser’s back button
done. “There is a big push within Government to improve web carries on working.
accessibility,” commented Mr Field. “Although 61 per cent of sites do
not comply with WCAG, the 39 per cent that do is encouraging.” Microsoft’s entry comes from a spare time project
If you weren’t there, don’t worry. You can download a selection called Script#. Working inside Visual Studio .NET,
web designers can use the same C# language they
of podcasts from the conference website –these are a short series
use for ASP.NET to build and design their ASP.NET
of 20-minute documentaries featuring lead items and panels. Head
applications to build AJAX applications.
to the website at www2006.org to find out more.

Back88 Slashdot Slashdot.org

info: The tech news and discussion site Slashdot.org just had a major

to the future
makeover, launching a CSS-based site after a competition. The winner,
Alex Bendiken, won a laptop. Here’s how he did it: http://summit.
makalumedia.com/2006/05/30/the-slashdot-redux.

the evolution of a site

6nov 2004
The familiar Slashdot look and feel,
which lasted over six years

5may 2006
Slashdot’s new competition-winning
5jan 1998 CSS site design
Slashdot, back at the start of 1998

18 | Web Designer

016-019_WD120.indd 3 15/6/06 10:44:31

 stuff
Hot

We’ve trawled technopolis to

track down the latest web kit
Colour me beautiful
PANTONE
Price: £59.53
Huey
Web: www.pantone.co.uk
Sporting a duo of the industry’s top awards, Pantone’s Huey will calibrate
your monitor to ensure that your site’s colours are true-to-life and accurate,
even adapting your screen to suit changing room light. The Digital Imaging
Marketing Association awarded it Best In Show 2006, while the Technical
Image Press association have
decided that it’s this year’s Best
Imaging Peripheral. High praise
indeed; Huey should find a
home in any professional web
designer’s toolkit.

Notebook of steel
Alienware Area-51
Superman Notebook
Price: $2,539 (US only)
Web: www.alienware.com/special_edition/superman
Superman returns, to empty your wallet and make you the envy of your superhero friends. There are only 350
of these special-edition laptops being created by those purveyors of top-notch computer kit Alienware to
commemorate the new film, and as we go to press 312 fans have already parted with the best part of £1,400 to
show their allegiance to the son of Jor-El. To match the man, Alienware has obviously packed the Area-51 with its
trademark high-end kit, which zips through Flash-packed pages faster than a speeding bullet. If you’ve plenty of
cash in your spandex, accept no substitute.

016-019_WD120.indd 4 15/6/06 10:44:59

 Catching up with today's talent
The Playthree lineup: (left to right), Greg Edwards,
Pete Everett, Tom Jackson, Dave Streek (aka Gravy)

Playerthree www.playerthree.net
David streek, playerthree’s
DIRECTor, talks games, inspiration
and the future of the web
Building games all day; that sounds like fun.
Does it ever feel like work?
It feels like very hard work when we occasionally
pull a deadline all-nighter, otherwise we could
certainly think of worse jobs to be doing. Actually,
it’s a genuinely enjoyable job, but no more than
any other creative role. Lots of different clients,
briefs and styles to produce. As for the ‘fun’ side,
apart from testing our work, we don’t actually
have time to play any games as entertainment in
the office. We’re always keeping an eye of what’s
happening in our industry, though.

Where does the team find inspiration?

We’re all avid gamers and collectors of
videogames so have huge personal experience
to draw from. We’re all graduates of design, platform game
technology and engineering courses so the
functional and visual side offers interest and
challenge. Finally, we’ve grown up with the
Internet and digital technologies. To avoid
inspiration from the rest of the world we’d have to
be living in a small dark box.
Do you prefer to create stuff for big businesses
or smaller independents?
It really doesn’t matter as long as the person
Avatar: “An
enormous
with partner
site codes and
secret areas
and abilities”
we’d have to be honest and make reference and think. At the moment, the nearest equivalent
to the increasing rise of higher consumer for the web would be Flash providing true 3D
bandwidth and the use of linear video clips and support as per the less-used Shockwave, and
offering a faster and more reliable
“To avoid inspiration from the multi-user server setup.

What advice would you give

rest of the world we’d have to
in control at the client side really is the person
with the final say. It’s a lot easier to produce a web designer who wants
good entertaining work if there’s a clear line of to break into the interactive
approval rather than the dreaded consensus of
opinion! Let’s just say we’ve not added to www. be living in a small dark box” gaming scene?
They have to love games, play them
clientcopia.com up till now, but there have been and read about them. They need to
several close calls. adverts. In many ways, mirroring the early rise of understand the mind of the casual gamer, which
computer games in the Eighties, processor and I do think is a very different market from the
What kind of trends do you see emerging? bandwidth limitations of the web made for some traditional console gamers. Next to that, immerse
Although our feet are firmly grounded in games, very creative advancements in technology and yourself in branding and advertising, regardless
one of the purest forms of online interaction, animation. Use of video was limited so there were of the quality. Without this sector there wouldn’t
some very clever combinations of interaction and be an industry to work in.
moving image.
Today and in the future, however, the cynic
here says that as processor speed and bandwidth
become irrelevant we’ll start to see more and
more of the web as simply another delivery
method for linear television (programmes and
Harpoon
adverts) endlessly regurgitating content in the
Lagoon: “This
easiest way. Ninety per cent of today’s computer
was a fun fishing
game for the games look great (and are expensive to produce),
www.fingertime. but are, by and large, clones of each other.
com site… with The optimist here says that just as things
millions of settle down, up pops something like the Toonami Twin Power: “A manic flash 8 AS2 side scrolling
plays so far!” Nintendo Wii and it makes everyone stop, look shooter, our small homage to R-Type”

20 | Web Designer

020_WD120.indd 1 15/6/06 11:12:42

 The A-Z of
Message ecommerce

board
Air your opinions on the web industry or our magazine in
general in our regular roundup of readers’ opinions
email: webdesigner@imagine-publishing.co.uk
post: Web Designer, Richmond House,
33 Richmond Hill, Bournemouth, BH2 6EZ
Forum: www.webdesignermag.co.uk/forum
A is for Actinic
B
C
D
E
Community service
As ironic my snail mail letter about the Web Designer forum
may be, I felt compelled to make a statement about what
Mail of the month
is an understated resource. I realise that your whole site Dreamweaver dying?
remains in its infancy to a large extent, but I think us as I must admit that looking around the internet these days
readers also have a part to play in making the forum a much and then leafing through Web Designer leaves me slightly
more useful resource. Perhaps the many discussion strands worried. It seems to be that the moral war between the
that you have for the featured programs Dreamweaver, Flash, bloated Flash zealots and the HTML traditionalists has Whether you are looking to
and Photoshop could be best used as a way for members left Dreamweaver-based development on the scrapheap. build or upgrade your own
to post development problems that could then be resolved Virtually all the sites you feature in your Gallery or profile business web site, or develop
with the relevant Tech Support pages? in Behind the Scenes are of a .fla persuasion and, while
an ecommerce site for a client,
Ira Underlever undeniably pretty on the eye, eschew all thought of what
true accessible design is all about. you should talk to the
Don’t apologise for sending your feedback by letter, Ira, just as Issue 19’s brilliant Jason Arber feature raised great points recognised ecommerce leaders.
long as you don’t give up on posting at the forums just yet! about the integrity at the heart of what we designers are
But yes, your point is one that could provide a nice rallying call really in it for, so it’s a pity we don’t heed the advice. Our award-winning ecommerce
for generating interest in our forums. We’ve got high hopes for Daniel Crabtree solutions offer a unique
them as well, and certainly using them as a point of reference combination of great value,
for our Tech Support pages is high on the agenda, so make sure This is certainly an argument that will never stop raging, depth of features and
you let our experts know how they can help. Daniel. HTML remains the bedrock of a universal, stable, and
industrial-strength security;
accessible web, whereas Flash has taken it to a whole new
Ecommerce crazy creative plateau. From that perspective it makes sense for us combined with search
Can I just congratulate you on the reintroduction of your to devote the bulk of our coverage to it, as a more forward- engine-friendly design and
tried-and-trusted ecommerce section? This was always a big thinking publication. We have a duty to promote good comprehensive support options.
part of my enjoyment of the magazine and a core reason practice, certainly, but we must also produce a magazine that
behind my subscription, so to find it go AWOL during the oozes excitement and inspiration. Choose from:
first few Imagine issues was a big disappointment. Thankfully However, HTML and Dreamweaver are far from dead, with • Actinic Catalog, the ideal
you’ve acknowledged that this coverage of the commercial a healthy proportion of innovative work still cropping up out ecommerce start-up.
aspect of building web content is still a pertinent one for all there. In many ways Macromedia’s green giant is set for a
• Actinic Business, for the
online developers. Well done! resurgence, with our next issue carrying a couple of features
Jon Hardacre devoted to a very bright future indeed. serious business user and
Rumours of what version nine has in store are already rife larger-volume store.
Hello Jon, and thanks for your email. We’re absolutely delighted and the acquisition by Adobe promises to make this a very • Actinic Developer, the tool of
to hear so much positive feedback like yours about the return interesting time for pledging your allegiance to the mighty choice for web professionals.
of our hugely popular ecommerce section. It’s a great example markup. Long live Dreamweaver!
of how open we are to hearing what you want from the For a FREE 30-day trial visit
magazine, and we were overwhelmed by the calls to bring it www.actinic.co.uk/shopping
back. Contrary to popular belief, it was never in our thinking to lose these pages completely, but rather re-evaluate
Or call 0845 358 8729
their handling of the subject. We just hope that the
new format doesn’t alienate ecommerce, instead to find out more.
establishing it as an important focal point for the
‘The definitive example
magazine and promoting the creative side of a very
technical aspect of the industry. of the breed’ – PC Plus

Cover versions
Hi, team! How good are your covers? I think that the
last few issues have looked awesome thanks to some
first-class artwork from some really cool people. Any
chance you could do a calendar with them all on as a
free gift this Christmas?
Stacy Barat

Thanks Stacy, we’re really proud of the last lot of covers

Flash might be the
choice for cutting- and it’s all thanks to some seriously talented artists. They
edge sites like www. might have something to say about us using them for
thebar.com, but it
still has a way to go a Christmas calendar, but how about a promise of more
before killing HTML of the same in 2007? Watch this space…

021_WD120.indd 1 15/6/06 10:37:56

 GAMING ONLINE HAS EVOLVED INTO A WHOLE NEW EXPERIENCE.
DAVID JENKINS STRAPS HIMSELF IN TO PLAY ON THE SUPERHIGHWAY
he idea of playing online is almost as
old as video gaming itself. Long before
Xbox Live, Flash, or even the Internet
itself developers were experimenting with
hardware and software, creating genres and
themes that are still in regular use today.
With the emergence of the World Wide Web,
and as connection speeds have increased, so
too has the scope and variety of games – to the
point where no marketing website worth its salt
can be found without some form of interactive
entertainment – and the most popular online
titles can attract millions of concurrent users.
22 | Web Designer
022-028_WD120.indd 1
Back in the Seventies, when all that existed of
the Internet was the military and education
network ARPANET, nascent massively multiplayer
online games like MUD (telnet://british-legends.
com:27750) were in their golden age.
The Atari VCS console had a modem as long
ago as 1983, as did the Nintendo Entertainment
System (in Japan, at least). However, it is the PC
that has been the driving force for online games
in all their guises, with the massively popular
action title Doom becoming one of the first
important commercial hits to owe its success in
large part to the Internet.
14/6/06 16:27:55
 Doom was a landmark in first-person gaming, spawning
numerous clones aiming to recreate the addictive gameplay
Although more commonly remembered for its
groundbreaking 3D graphics, 1993’s Doom was just as
innovative in its use of online technologies. Beyond
anything else the game was initially only distributed
online (with the first third of the game available
free as shareware), with an estimated ten million
people downloading the file in just two years. The
game’s initial success inspired a legion of fans who
busied themselves creating modifications (mods)
for the games, which ranged from simply changing
the sound effects and creating new levels to ‘total
conversions’ that looked and played completely
differently (www.doomworld.com).
By comparison, the ability to actually play the game
in deathmatch mode was fairly limited, largely thanks
to the speed of modems at the time, and most fans
elected to play it over a LAN.
At the same time as Doom was revolutionising
the traditional PC market, the introduction of
Macromedia’s (now Abode’s) Shockwave, and later
Flash, plug-in technology was having a similarly
transformative effect on the web. Although well
behind the curve in terms of offline graphics, the ease
of use of editing tools such as Macromedia Director
meant that it was well within the means of even
relatively inexperienced web users to create their own
interactive entertainment.
The same ease of use and inexpensive
development costs have led to huge communities
of amateur online games designers, with many
independent developers cutting their teeth on
free Shockwave or Flash games before creating
commercial products. In many cases these games
are sold online, but they’ve also migrated to the
technologically similar mobile phone market (or
even Xbox Live Marketplace). The Behemoth’s Alien
Hominid even managed to make the jump from free
Flash game to a full-fledged console game. Naturally,
Macromedia/Abode has been all too happy to
encourage and aid prospective developers and the
camaraderie within the design communities, and the
often-experimental nature of the games themselves
has been likened to the golden age of offline 8-bit
022-028_WD120.indd 2
“The often-
games. And it’s not just amateur programmers who experimental nature
of Flash games has
have taken advantage of the cheap and flexible
nature of web-based gaming, though, with almost
every consumer website – whether it be advertising
a new movie or a new car – featuring some type of
simple Flash game. This includes traditional retail been likened to the
publishers who increasingly create miniature versions
of games for their own promotional websites, with golden age of offline
some games such as the web version of Katamari
Damacy (http://katamari.namco.com/game/index.
html) gaining a cult following of their own.
8-bit games”
Viral marketing is also increasingly popular, with
the ARG (alternative reality game – a sort of cross
media text adventure utilising not just website but
also mock emails, phone messages and even real-
world objects) created for Halo 2 (http://ilovebees.
com) proving immensely popular with fans desperate
for even a hint of news on the game.
Despite all the avenues for gaming on the web, for
most publishers the primary focus of online gaming
follows the model already established by Doom. In
1998, Sega’s Dreamcast became the first console to
feature a built-in modem as standard. Unfortunately,
by the time the console launched in the West Sega
was almost broke and didn’t have the bank balance to
market the console properly in the face of the soon-
to-arrive PlayStation 2.
Even so, the Dreamcast allowed for uncensored
access to the web (something still not allowed by any
home console) and hosted many primarily online-
only games such as Chu Chu Rocket!, Phantasy Star
Online and a version of Quake III Arena.
GOING LIVE
Although it did require a separate purchase, the Xbox
Live service for the original Xbox has proven to be
the most important milestone in online gaming in
modern times. Launched in 2002, and upgraded for
the recent launch of the Xbox 360, it is a centralised
service where, for a small recurring fee, you are
given your own unique “gamertag” which is used in
every game and allows you to construct an online On its 1996 release, Quake – again by id Software – tested
friends list. Although the centralised service means a hardware to the limit with its advanced graphics
Web Designer | 23
14/6/06 16:28:26

Nintendo’s
popular DS
offers wi-fi
connectivity
single uniform
interface, where
Microsoft provides the server
bandwidth and removes the need for
separate fees for individual games, it
has not been popular with all games
publishers. Electronic Arts famously
refused to support Xbox Live because of
concerns over lost revenue, only relenting
after some behind-the-scenes deals that
involved Microsoft dismantling its entire
XSN sports simulation division, which was
seen as a rival to the EA Sports brand.
In contrast to Microsoft and the Xbox,
Sony has shown relatively little interest
in online gaming with the PlayStation 2,
with no centralised Xbox Live equivalent.
Most games that can be played online
require no fee, but the quality and
“The introduction of Shockwave
was having a transformative
effect on the web”
reliability of the service has often been
criticised. Nintendo (whose GameCube
modem was only properly used with one
game: a new version of Sega’s Phantasy
Star Online) and Sony’s apathy towards
online gaming in the current generation
of consoles is understandable when
you consider that less than ten per cent
of Xbox owners actually chose to sign
up to Xbox Live. Since the advent of the
Xbox 360, though, the first of the next
generation consoles, that figure has risen
to around 50 per cent.
The first new consoles in the post-Xbox
Live world have both been portable: the
Nintendo DS and the PSP (PlayStation
24 | Web Designer
022-028_WD120.indd 3
Portable). Both feature wi-fi adapters
able to connect online, with the PSP also
including a built-in web browser and the
ability to download system updates and
playable demos. Again, though, Sony
has been slow to promote the console’s
ability to play games online (referred to
by the system as infrastructure mode – as
apposed to the Ad Hoc mode for local
wireless connections).
TECH TO IMPRESS
This unbecoming bout of modesty is
surprising, especially given how fully
featured many of the games are, with
SOCOM: U.S. Navy SEALs – Fireteam Bravo
accommodating up to 16 players with a
full in-game voice support via an optional
headset, and a pre-game lobby that even
allows you to create and manage clans
(groups of people that regularly play
together in the same team).
In contrast to the PSP, Nintendo has
been very keen to promote its Nintendo
Wi-Fi Connection (WFC) service in games
such as Mario Kart DS, Animal Crossing:
Wild World and Metroid Prime: Hunters.
Although free to use and offering a
very stable connection, the amount
of interaction with the other players is
purposefully restricted to try to limit
younger players coming into contact with
too many uncouth strangers, with unique
Friend Codes for each game having to
be swapped before a friends list can be
HOW IT’S DONE
Want to start building web games?
Here’s our essential itinerary for
assembling the ultimate online games-
building toolkit for beginners
WHAT?
Macromedia
Director MX
WHERE? www.
adobe.com/
products/director
WHY? It won’t be much use in terms
of technology when you try to create
your first PlayStation 3 blockbuster,
but Director is the best way to learn
the basics of how to create a game
from scratch. Much of the interactive
content you see on the web, as well as
interactive DVDs and kiosks, will have created. In Mario Kart no interaction was
been created using Director or one of possible during or before a game, in
Macromedia’s Flash-only bundles. Animal Crossing only a limited amount
of onscreen text was allowed, while in
Metroid Prime voice communication was
enabled before a match – suggesting
that Nintendo is happy to experiment
with and expand the online features with
each game. (A version of the Opera web
browser is also planned for the DS before
WHAT? GameDev.net the end of the year.)
WHERE? www.gamedev.net So far, relatively little is known about
WHY? Online help and communities Sony or Nintendo’s plans for its next-
for Director and Flash are not difficult generation consoles. Online gaming is
to find, but they don’t always deal still meant to be free for the PlayStation
directly with video games. This is one
3 (due out this November), and is implied
of the biggest sites on the web for any
to be – but still not confirmed as – a
kind of games developer. Although
the articles and resources do tend centralised service. Sony is promising
to be biased towards console and all manner of Xbox Live-style features
PC development the forums and though, including voice and video chat,
matchmaking, friend lists and score
community are the real resource,
where you can be more or less rankings. What they’ve been more
guaranteed to meet someone helpful, interested in talking about so far is Xbox
not matter what your question.
WHAT? The
Live Marketplace-style microtransactions,
where it will be possible to add small
Complete
Guide To Game
Development,
extras to games for just a few pounds
Art & Design
WHERE?
www.ilex-
press.com (ISSN:1904705480)
WHY? Creating a video game that’s
actually fun is not just a question
of technology. This book describes
everything that goes into designing
and building a modern video game
and is an interesting read purely on its
own merits. Every stage of the process
is detailed, from initial concepts right
through to testing.
The sections on planning and pre-
production are as relevant for mega
budget console games right down to
your first Flash game. Anyone lucky enough to get a PS3 by the end
of 2006 may be able to enjoy free online gaming
14/6/06 16:28:45

“The real draw – such as extra levels, weapons or, in the
example of the karaoke game Singstar,
of MMOs comes song tracks.
Nintendo’s approach to online is
typically idiosyncratic, although the
from the social recently renamed Wii console (due out
this year and apparently pronounced
consequences “we”) has been confirmed as having
an in-built wi-fi adaptor and optional
of interacting Ethernet connection. Almost nothing has
been said about online gaming though,
with and beyond the implication that Super Smash
Bros. Brawl will be one of the first games
fighting
to be playable online. Details about the
Wii’s “virtual console”, which allows it
to play retro games from all previous
alongside real Nintendo consoles and others such as
the Mega Drive and PC-Engine, have also
human players” been sketchy beyond an indication that
the games, including possible new indie-
FIND YOUR PLAYGROUND We suggest some of the hottest places to get into online gaming, from
Flash-based fun to all-out multiplayer mayhem
NAME: Newgrounds NAME: Multiplayer Online Games Directory
TYPE: (Flash-based/MMORPG/Console) Flash TYPE: (Flash-based/MMORPG/Console) MMO
URL: www.newgrounds.com URL: http://mpogd.com
This is one of the most active web-based World Of Warcraft might be the most popular
game sites on the Internet. Most are created MMO at the moment, but you’ll be surprised
in Flash, including the famous Alien Hominid, to find out how much competition it has.
but there’s also a range of downloadable This site lists every MMO known to man, with
games featuring all manner of other information on pricing, updates and user
technologies. The forums are also very useful. levels. It’s also a great place to find free MMOs.
26 | Web Designer
022-028_WD120.indd 4
developed titles, will be downloadable
onto a 512 MB built-in flash memory
chip. The WiiConnect24 feature is also
currently shrouded in secrecy, with only
some cryptic comments claiming that
it will be able to remain in an Internet
standby mode, which consumes virtually
no electricity but allows for new content
to be downloaded at any time of day
– including updates for games and even
demos for uploading to the Nintendo DS.
LIVING THE DREAM
Although the console world is usually
seen as far more accessible to a
mainstream audience, it is unlikely that
the PC will ever stop being the driving
force in online gaming. This is made no
clearer than in the burgeoning massively
multiplayer online (MMO) market, which
NAME: GamesModding.com
TYPE: (Flash-based/MMORPG/Console) PC
URL: www.gamesmodding.com
You’ll find whole communities of modders
dedicated to specific games, all busily
creating mods and total conversions. This
site doesn’t keep track of them all but it does
include tutorials and links for creating your
own content for just about every PC game.
WOW isn’t just a
game, it’s a way
of life. Nearly
seven million
gamers agree…
has still yet to make any serious inroads
into the console arena. MMOs have an
obvious lineage all the way back to MUD
(Multi User Dungeon) and represent one
of the most obvious and popular uses for
the Internet: the creation of a perpetual
virtual world inhabited by millions of
people. At first a world defined only in
terms of text descriptions and inhabited
only by dozens of people at a time (as
in the case of MUD), in modern times
they have become fully 3D virtual worlds
with thousands of simultaneous players
(although the most popular MMOs
have millions of subscribed players,
generally only a few thousand can play
concurrently on the same server).
The MMO was popularised by 1997’s
Ultima Online, which used fairly ugly
isometric graphics, and 1999’s EverQuest,
NAME: Game Maker Games
TYPE: (Flash-based/MMORPG/Console) PC
URL: www.gamemakergames.com
Another great site that’s useful both as a
development resource and a good place to
get free downloadable games. This is one of
the busiest homebrew PC websites on the
web and a spin-off from the official website
of PC games-creation tool Game Maker.
14/6/06 16:29:03

Although it does not now quite match WOW’s 50 per cent market share, the popularity
of MMOs like EverQuest laid the foundations for a new gaming experience
which featured 3D graphics – albeit
very simple ones by today’s standards.
EverQuest was such a success it was
nicknamed EverCrack and has been the
main model for most Western MMOs
ever since. (Although not popular in
Japan, where PCs are seldom used for
playing games, the MMO market is
hugely popular in the rest of the Far
East, particularly China and South Korea.
There the most popular games, such
as Lineage, are locally developed and
generally feature less complex graphics
than their Western counterparts.)
These early titles defined all the common
Although rudimentary by today’s standards, Ultima Online was one of the early
MMOs that really started to explore this new way of gaming
022-028_WD120.indd 5
INDUSTRY
OPINIONS
What the guys in the gaming world think
about the Internet as an exciting medium
for the future of the industry
NAME:
Lars Brubaker
JOB: CEO,
Reflexive
features of the modern MMO, including Entertainment
the idea of a monthly fee for playing “The advantage
of publishing
(although the first month is almost
online is that any game that can find
always free), on top of the cost of buying a viable audience is a viable game. Or
the initial software. Gameplay tends to as we like to say, ‘you can cater to a
be relatively simple by offline standards, niche’. A retail game, in contrast, has
“Many of the
revolving around combat with computer to appeal to a few key individuals of a
controlled monsters, which generally distributor, and the buyer for a retailer.
requires no arcade skills, and the trading If these five or so people don’t find the
of any looted items they might have or
which your character has created using
game interesting then the game can’t
get on the shelf. And even if the game most important
their learned skills. Since most MMOs
are derived from offline role-playing
finally makes it to the shelf it has to move
enough units in the first three weeks to
keep its slot. Online games can find their
milestones,
games (hence the extraordinarily
ungainly abbreviation MMORPG) the
own audience and take whatever time is
required to do this.” such as online
NAME: John
Vechey
consoles and
JOB: Co-founder
and director of mainstream
PopCap.com
“We started as an
online company
MMOs, have
and though now we do other areas,
we’re focused on online first as the been made
primary method for interacting with
our customers. Online allows us to
be flexible, really know our customer,
possible only
constantly be able to add more things
than just the games, offer better because of
customer service, etc. In effect, PopCap
has utilized the web in virtually all
aspects of game design, development,
increasingly
distribution and support, and has grown
far faster via this avenue than it could fast broadband
have through ‘traditional’ methods.”
connections”
Web Designer | 27
14/6/06 16:29:21
 Popular console titles like Final Fantasy have migrated into equally
successful online adventures for players around the globe
levelling up of your in-game character
is the primary gameplay goal, with the
defeat of monsters and creation of items
furnishing you with experience points, a
set number of which are needed to reach
each new level – often capped at around
level 50 or 60.
Since the gameplay on its own
is relatively simplistic, the real draw
of MMOs comes from the social
consequences of interacting with and
fighting alongside real human players,
or against them in so-called PvP (player
vs player) areas of the game. So attached
do some players become that not
“Within ten only do they play for hours at a time
(stories of people dying of exhaustion,
years it’s
particularly in the Far East, are common
tabloid fodder) but in-game objects are
increasingly sold online for real money.
likely that Despite criticisms about the
shallowness of combat and gameplay in
all PC and MMOs, most alternatives have fared with
little success. Action-based MMOs such
console as first-person shoot-’em-up PlanetSide
have not proven anywhere near as
games will be popular, and purely social virtual worlds,
such as Linden Lab’s Second Life, have
also yet to attract anywhere near the
downloaded same size of audience. Second Life’s more
modest fan base may simply be due to its
rather than complexity, though, with a completely
open world that theoretically allows
bought in you to mould it in any fashion you want
– turning it into an action game, online
shops” store, graphical chat room or anything
in between. With more intuitive controls
28 | Web Designer
022-028_WD120.indd 6
New MMOs are offering far more sociable and flexible spaces, with Second Life
allowing gamers to quite literally create the world around them
and editors this may well point towards
the future of online worlds, but for the
moment most developers have a very
different inspiration in mind.
The huge success of EverQuest and the
other early 3D MMOs such as Asheron’s
Call led to a huge surge of competitors
such as Square Enix’s Final Fantasy
XI, LucasArts’ Star Wars Galaxies and
NCsoft’s City Of Heroes. The half million
or so users of these games sounds
impressive until you consider that
Blizzard’s World Of Warcraft, the current
leader in the MMO arms race, already has
over six million subscribers after less than
two years on the market.
Although the game does not deviate
greatly in terms of basic gameplay
or combat, and features generally
unremarkable graphics, it does go
out of its way to be as accessible as
possible – not only to newcomers to
the MMO concept but also those that
cannot afford to invest as much time
in playing it as more obsessive fans.
With features such as the ‘rested’ state,
in which characters can earn twice as
much experience as normal if they’ve not
played for a few days, the game does its
best to be all things to all players.
FUTURE TACTICS
Online games, more so than any other
aspect of video gaming, are to a large
part hostage to technology. Many of
the most important milestones, such
as online consoles and mainstream
MMOs, have been made possible only
because of increasingly fast broadband
connections. (The other most important
technology has proven to be secure
online microtransactions, now used by
home consoles but pioneered by the
gambling industry on the PC.)
The idea of downloadable online
games may be as old as consoles
themselves, but it’s only recently with
Xbox Live Marketplace and Half-Life
developer Valve’s Steam service that
they’ve become a major commercial
force. Thus, with the complexity of
browser based games increasing every
year, the online future is a difficult one
to predict.
If there’s one thing that World Of
Warcraft‘s massive success makes
clear it’s that it’s never really about the
technology at all – just the experience.
Within ten years it’s likely that all PC
and console games will be downloaded
rather than bought in shops, online play
options will be de rigueur in almost all
titles and browser-based games will
feature complex 3D graphics at least on
par with dedicated titles today.
This won’t be the real revolution,
though, but rather the fact that players
from around the world will be able to
meet, co-operate and compete in virtual
online environments as seamless and
consistent as the real world. The Internet
may have brought the world closer
together, but video games will transport
it to the next level. END
14/6/06 16:29:56
 scenes
Behind the
Eurostar Quest
Looking to crack a Da Vinci-style code while on the move, Thomas Woodgate
climbs aboard the Eurostar Quest puzzle site with its creators from De-construct
One of the many industries to benefit from
the Internet is the film industry, with more
ambitious projects spurting from the creative
brains behind the marketing campaigns aimed at
squeezing every last drop out of the buzz created
by a movie. Well, the best-selling novel that claims
a fabrication and cover-up of the greatest story of
all certainly wouldn’t require much help. That said,
using the euphoria surrounding one subject – The
Da Vinci Code – and applying it in conjunction with
the needs to remarket a brand – Eurostar – and
then using the help of the Internet to create a slick
Some mini-games deviate from the Da Vinci Code, yet marry the
story more closely with the Eurostar destinations featured
30 | Web Designer
030-031_WD120.indd 1
online game has created a well-rounded assault
aimed at boosting the awareness of both brands.
The Eurostar Quest mystery game, which was
designed in conjunction with the marketing
campaign for The Da Vinci Code, was completed by
De-construct and uses sticky gaming attributes to
portray the premise of the film – but does so with a
design befitting of the film’s style. Eurostar’s integrated
marketing agency, Space, invited the De-construct
team to pitch an idea that tied Eurostar with the The
Da Vinci Code movie. The team was excited about it
from the very start, as Eurostar was keen to evolve
its brand beyond that of just
a train operator to more of a
whole travel experience.
“The focus was always on
The brief was made clear: achieving a balance between
to centre around the film and
build excitement for London engaging destination content and
and Paris as two of Eurostar’s
key destinations. With a clear rich gameplay experience”
vision of the project, it quickly
spiralled into something that was bigger than the
creative agencies had first thought but it was a result
that De-construct was certainly ready for. But using
the ‘fierce competition’ analogy took on a whole
new slant when it was discovered who the two
agencies they were up against, as Dan Douglas from
The main interactive screen set
is a table on Eurostar, cleverly
weaving story and promotion
De-construct explains: “We had to compete against
two other interactive agencies for the project – one
of whom had recently designed Eurostar’s main
website and the other was three times our size so the
competition for the work was serious.” Not one to
spoil an ending, Web Designer doesn’t need to tell you
how this one panned out.
Teamwork makes dream work
There were many factions pulling together in the
same direction; TBWA London developed the UK
offline advertising and had no input with the online
side, while Glue London was spearheading the UK
online advertising and the global Eurostar Da Vinci
identity was developed by Leg, an agency based in
Paris. All these agencies needed to get involved for
consistency. The site and game, however, was entirely
done by the in-house team at De-construct, “We are
13/6/06 14:03:40
 very proud of the results,” boasts Douglas. One
would assume that capturing the essence of the
movie, and indeed the book before it, would have
been an extremely important part of the design
process, but it appears a tighter emphasis on the
overall brief was the overriding factor – more so
than aiming to replicate that what has gone before.
“It was essential that we focused on building
awareness for Eurostar and interest in London and
Paris more than creating another massive Da Vinci
puzzle site,” says Douglas. “From the outset it was a
Eurostar game with a Da Vinci flavour. The focus was
always on achieving a balance between engaging
destination content and rich game play experience.
The launch of the movie was pivotal in planning
the game – we needed to tie in with the film’s
pre-release PR activity.” With Eurostar guidelines
requiring that the team remain within the overall
visual identity, the De-construct team pushed
The Eurostar game
the boundaries a little further by incorporating a transports you to key
darker look than Eurostar was used to, but it was a locations; London and Paris
necessity born out of needing to keep to The Da
Vinci Code‘s look and feel. level of difficulty by adjusting functionality, timing been excellent. We’ve been dropping in on a few
The wonders of Flash have been talked about and clues,” explains Douglas. “We used a range of forums to read a few of the posts – the most honest
across the net for many a year, and the conception testers, from non-web savvy to coders, to check reviews you can get,” says Douglas. “The consensus
and application of the Eurostar Quest site certainly every level of gameplay. Eurostar also conducted is that it is the richness and diversity of the
gameplay, and the thought required to solve each

“It is the richness and diversity of the gameplay, and
the thought required to solve each puzzle, that has
got most people hooked”
benefited from the latest instalment of the app.
Use of Flash 8 meant that improved performance,
image quality and legibility, as well as reduced file
sizes, enabled the team to deliver a superior user
experience. And with a team of eight residing over
the website’s creation, flatscreens were created
for each puzzle, from which working models were
then built. Each puzzle was coded separately by
assigned teams to slot into the overall framework of
the site, allowing multiple puzzles to be produced
concurrently. There are certain games that appear
– such as finding the hidden letters in the film
on the lightbox – that are unique to the site and
don’t appear in the Code at all, with inspiration
drawn instead from the destinations themselves
as apposed to the movie from which the style of
the site is taken. “Our team visited each destination
to try and find what makes each one unique and
worth visiting,” says Douglas.
“The Lightbox game, for example, came from the
diversity of culture and architectural gems found
around Waterloo Bridge. The photography sums
this up. We then added the hunt for letters to make
people look a little closer.”
But with the site’s design taking shape it was
important that several phases of testing was
undertaken and the team did this on an ongoing
basis throughout the production process. “Initial
working models of each puzzle were tested for
their playability, and then fine-tuned to the right
User Acceptance Testing based on typical user
journey scenarios that we devised.”
It is evident from the first visit that a sophisticated
back-end complements the smooth design on
the front-end. With extra security added to guard
against hacking, this hasn’t stopped those who
have posted and swapped answers and tips to
the game, which is a sign of the popularity the site
has been enjoying. “Honestly, the feedback has
The game
draws on
players’
general
knowledge
as well as
Da Vinci
trivia
puzzle, that has got most people hooked.” As if any
extra validation was needed, more than 1.2 million
unique visitors have frequented the site, one of the
many reasons De-construct and Eurostar have been
pleased with the project.
The team’s aims were to maintain intrigue and
interest by leveraging the build-up to the eagerly
anticipated movie release in tandem with the
Eurostar Quest site. The good timing and great prize
on offer has spawned rumours of people setting
alarms so that they were ready to solve the latest
puzzles immediately, proving that those who seek
The Da Vinci Code fulfilment will stop at nothing.
www.jointhequest.com

Web Designer | 31

030-031_WD120.indd 2 13/6/06 14:04:24

 20
TOP
FLASH
GAMES WITH TODAY’S TECHNOLOGY AT THEIR FINGERTIPS, FLASH GAME
DEVELOPERS HAVE DONE THE INTERNET PROUD WITH ADDICTIVE
CREATIONS THAT SHOWCASE WHAT THE APPLICATION CAN REALLY DO
A
S A YOUNG KID, A LONG, LONG TIME AGO, buying
games was a novelty and mainly out of pocket money
reach for most of the time. Actually programming
games from magazines was one solution; another
was continually nagging the parents until they finally
conceded. How things have changed. These days there are thousands
of free games online, and this is thanks in no small part to the creation of
Flash-based technology. The creations and variety that can be experienced
is outstanding. The sheer quality of the games and depth can encourage a
highly addictive trait even among lesser gamers. Companies up and down
the land purportedly lose many hours to staff quickly honing their sporting
34 | Web Designer
034-038_WD120.indd 1
skills, shooting swathes of enemies or finding that last clue in relatively
simple yet highly entertaining games. In fact the limitations that are
imposed on programming methods seem to only encourage designers to
become more inventive and produce highly original pieces of work. That
said it also provides the perfect platform to resurrect classic games that
had been consigned to the technological dustbin in the sky – Sonic The
Hedgehog being a prime example.
After scouring the Internet and playing too many games into the early
hours, then suddenly realising that this article wasn’t actually being written,
a Top 20, in no particular order, finally emerged, showcasing the most
imaginative and addictive games that are currently available. Enjoy…
13/6/06 14:56:11
 TOP 20 FLASH GAMES

20
WORLD DOMINATION
www.totallygame.com
Designed by: Dunja
Conquering the world is always a favourite pastime,
and when you can go up against some of the world’s
most corrupt and sadistic leaders it’s even more
pleasurable. In this addictive turn-based strategy game
it’s possible to spy on, appease, propagate a doctrine
or simply bomb the hell out of four opposing leaders
and their countries with your arsenal of nuclear rockets,
planes and soldiers. It holds the attention span quite
admirably as you try to second-guess the oppositions’
19
COMCASTIC
www.comcastic.com
Designed by: Unknown
A pretty ‘out there’ site, this one. You can get abused
by Mr ‘Professor’ T, create and send talking puppets as
emails and even test the quickness of your mouse skills.
Professor T comperes a cultural quiz which takes in TV,
film and music, and berates you every time you get a
question wrong (which was quite often in this case). The
quiz is quirky and amusing, even down to the end-of-
pier background music, and highlights the progression
in multimedia. Once you’re bored with that, why not
try out some puppetry and even record it along with
a sample of your voice and send a Puppet Email? You
have to wonder sometimes!
18
SPECIAL MISSION
http://hallpass.com/media/
specialmission.html
Designed by: Unknown
The great thing about these types of games is that it
doesn’t matter what language it’s in, you can be sure
to pick them up relatively easily. Which is a good job,
as our Japanese really ain’t up to scratch. That aside,
this is a great speedy little run-and-gun-’em-down in
which you have to rescue POWs (who bizarrely have a
tendency to lift up their robes once released). It’s based
on Metal Slug, which was originally released in 1996 for
the Neo-Geo game console, and this Flash variation
maintains its renowned fluid hand-drawn animation,
sense of humour and fast-paced action.

15
moves in your quest for world domination.

17
STACKOPOLIS
www.stackopolis.com
Designed by: Unknown
Winner of a recent Webby Award, Stackopolis pushes all
the right addiction buttons in much the same way as
Tetris. With attractive animations and graphics, a stress-
inducing soundtrack and relatively simple gameplay, it
combines all the right elements to produce an all-time
classic puzzle game.
Simply select and move the tiles to the specified
pattern – a 3D impression and a top-down blueprint
are provided – before the time runs out. With over 20
unique levels that’s a lot of rather enjoyable frustration
to ultimately endure.
16
FORBIDDEN SIREN
www.forbiddensiren.com
Designed by: Keiichiro Toyama
Now we know this isn’t a game in itself, but it is such
a stunning example of Flash work (and it is game
related) that we thought we would include it. Utilising
a simple point-and-click navigational approach, the
presentation combines a multitude of different digital
media including video, digital publication and audio.
Mysterious and quite edgy, this demo introduces you
to four of the main protagonists in the Forbidden Siren
game (for PlayStation), introducing you to the narrative
and background of the story. Each of the scenarios
needs to be fully explored before the rest are unlocked
RUNESCAPE and made available
www.miniclip.com/runescape_game.html
Designed by: Unknown
RuneScape is one of the largest MMORPGs available,
in part down to the cost factor – zilch – but also due
to its highly addictive nature. With a massive 20 skills
that you can partake in and hopefully master at some
point, it can become more of a hobby than an actual
game. The graphics aren’t particularly inspiring but it
makes up for this with its gameplay and diversity, and,
let’s be honest, it is still a Flash game that is absolutely
free so there can’t be many quibbles. Time to learn
another skill I think; let’s try making some bread…

“The limitations that are imposed on programming methods seem

to only encourage designers to become more inventive”
Web Designer | 35

034-038_WD120.indd 2 13/6/06 14:47:30

 20
TOP
FLASH
GAMES
14
TANKS
http://tanks.freeonlinegames.com
Designed by: Unknown
It seems as if this game has been around for years
– and indeed it has – but classics always last the test of
time, and Tanks is no exception. This is a fairly faithful
reproduction of one of the earliest versions of the
game for home computers (alternatively known as
Scorched Earth), and it doesn’t disappoint. Trajectory
and power bombing are still the main objectives and
it provides the ability to have as many as five tanks
on the screen at once, resulting in a good playability.
Simple and basic, but still great fun after all these years.
11 SOCCER SHOOTOUT
www.georgiapacificsoccer.
com/mls/soccergame.html
Designed by: Georgia-Pacific Corporation
Writing this article on the eve of the World Cup, we had
to include a football game. Knowing the way England
get knocked out of the majority of tournaments, this
particular game may not be the best choice. However,
penalty shootouts it is, and with this point-and-click
sim it’s a case of battling it out from both sides – the
penalty taker and the goalie. It’s simple and basic
but keeps the interest. Let’s just hope we’ve all been
celebrating by the time you read this and haven’t been
on the receiving end of another penalty debacle.
36 | Web Designer
034-038_WD120.indd 3
13
3D POOL
www.shockwave.com/
gamelanding/swpool.
jsp#None
Designed by: Shockwave.com
Pool games are ten a penny online, but not many can
12
match the detail and overall graphic crispness of 3D
Pool. The only drawback is that you need a fairly high-
spec computer to enjoy it to its fullest capabilities,
but in reality the majority of us will already be fully
set up anyway. Once you master the American style
of playing pool, you will be amazed by the realistic
physics produced by the quality game engine – along
with the 3D graphics, which are sublime, it makes this
one of the best pool games online. AUTOFRAG: SUMO
www.meltedmedia.co.uk/
games/autofrag
Designed by: Studio Budgie
There had to be a driving game in this collection of
top games, as they’re one of the most-played genres
around, and this little gem is worthy of inclusion. Like
a cross between a stock derby and a bout of Sumo
wrestling, this game does take a unique twist on most
driving games. With a mounted machine gun and
rockets at your disposal it’s a case of destroying the
other cars, which is accomplished quicker by forcing
them out of the arena. “When your opponent pulls,
push; when your opponent pushes, push.”
10 9
BIKE MANIA
www.flashgames247.com/
play/693.html
Designed by RedLynx
Fans of the legendary TV programme Kick Start!
will love this trials bike game, which owes a great
deal to previous games like BMX Backflips and Trials
Mountain Heights, the latter being notoriously difficult.
Negotiating your bike over barrels, rocks, cars and
various other obstacles without flipping takes a steady
couple of fingers and a real sense and understanding
of balance. It’s easy to play right from the off, but is also
extremely challenging at the same time. The graphics
FINAL FORTRESS are pretty good and the fluidity is exemplary.
www.totallygame.com
Designed by: Dunja
Defend at all costs! Excellent 3D graphics definitely
make this siege-style shooter worth a look. Taking a
futuristic slant on usual siege-type games with a laser
canon being the focal point of your defence, the game
also provides a welcome strategic element. With this
you can re-enforce your battle line with anti-aircraft
and anti-sea attack weapons as well as deploying
mines to destroy the oncoming tanks and land-based
units. The shooting can be a tad tedious at times,
but that siege mentality along with the 3D models
combine to suck you in.
13/6/06 14:59:48
 20
TOP

FLASH
GAMES

8 7
TACTICS ARENA
www.digisonline.com
Designed by: Seed, aka Vito Sze
The characters in this turn-based strategy game are
beautifully drawn and animated, following in the
footsteps of Final Fantasy and Warlords. Commanding an
amalgamation of fantasy warriors and mystical creatures
this chess-like online battle will keep you up until the early
hours. Once you have set up an account and logged in
(relatively painless), simply create your own army and then
pit your wits and strengths against other fantasy absorbed
gamers. Tactics Core, a trial version, is also available to get
you quickly up to speed instead of making a laughing
stock out of yourself in the virtual world.
6
ENGLAND ACADEMY
http://news.bbc.co.uk/
sport1/hi/funny_old_game/
games/4654596.stm
Designed by: Grasshopper.uk.com
Trust the BBC to commission and deliver an intelligent
and extremely playable sports game. This Six Nations-
inspired rugby contest is one of those games that
will have mates goading and ear bashing across the
country. The ability to actually practice kicking, line-
outs, scrums, and tackling before heading into a full
blown battle with the country of your choice is greatly
appreciated, and also much needed in some elements MOMENT ZERO
of the game. Still, it’s highly enjoyable and a must for www.geocities.jp/flashgame_
any rugby fan. All together now: swing low, sweet zone/zero.htm
chariot, coming for to carry me home… Designed by: Seed, aka Vito Sze
Coming out of the Flash Game Zone in Japan, this
imaginative shooter is exceptionally well designed
and put together. It’s also very unique and doesn’t
imitate many other shooters, as you will experience
immediately the first wave of mechanical droids
rapidly approach you. Mastering the dynamic crosshair
target that utilises a lock-on target mechanism is the
key to this tour de force, as you need to swiftly lock-on
and destroy all approaching enemies and shots fired at
you, which visibly become faster and more frequent. It
has a well-designed engine that provides a wealth of
targets and multiple paths which, overall, proves to be
a winning combination.

5 PRICILLA GONE MISSING

http://port.snarlik.se
Designed by: Johan Tornkvist
Students often come up with fascinating and unique concepts as thought
4
processes are encouraged to stretch to the limits, and it seems Tornkvist
has produced a gem of a game here. Having studied at the increasingly
infamous Hyper Island he has created a beautifully crafted game, with
sumptuous graphics and attention to detail interspersed with clever
navigational methods and original ideas – and all this centred round an odd
little grey character. It’s a great point-and-click adventure game, and even
more impressive as a first attempt.

YETISPORTS 1-10
www.yetisports.org
Designed by: Chris Hilgert
The infamous penguin bashing. Probably
one of the quickest Flash games to spread
around the Internet in recent years, YetiSports
part one soon built up a huge following back
in 2002, with email and office challenges in
abundance. Despite its simple conception, it
proved to be an extremely addictive game.
In fact, it became so popular that a full-time
company was created and there are now ten
parts to the series, as well as a tournament
and special editions. The design is sumptuous
and the playability still simple and flawless, so
it’s no surprise that the penguin-bashing yeti
has developed into a global phenomenon.

37 | Web Designer

034-038_WD120.indd 4 13/6/06 14:48:03

 TOP 20 FLASH GAMES

3 2 STICK CRICKET
www.stickcricket.co.uk
Designed by: A talented Aussie
With England finally overturning our
illustrious antipodean cousins and
returning the Ashes back to where
they belong, cricket really ingrained
itself into the consciousness last
year. Stick Cricket had been around
for quite a while before that event,
but it probably benefited from its
national popularity. Quite simply, it
is as addictive as hell yet extremely
simple to play. How some of those
top scores are achieved though is
beyond belief, but with an enormous
world following it’s hardly surprising.
Now providing the ability to play
head to head and create league
tables the competitive streak is only
just emerging.

THING THING 1-3

www.diseasedproductions.net
Designed by: xX_Weasel_Xx
With a backdrop out of a particularly grimy-
looking scene in Sin City and a nod to the
beautifully orchestrated bloodbaths in Kill
Bill, this excellent little third-person shooter
will have you as hooked as the films. The
Thing Thing trilogy initially started out with
the character escaping from an asylum,
hotly pursued by a horde of enemies. By part
three, nothing has changed apart from the
vast improvement in design and the options
available. The mission is still to mow down any
enemy behind, in front and above you and to
simply make haste your escape. No red has
vividly stood out as much on a screen before.

ULTIMATE FLASH SONIC

www.flash-game.net/game/951/flash-sonic.html
Designed by: Dennis Gid (Yuji Naka and Naoto Ohshima)
Out-and-out classics; you just can’t beat them!
The infamous blue hedgehog became the
ultimate symbol for Sega and the mascot was
probably its saving-grace.
With a turn of speed akin to a Bugatti Veyron,
1
in the early Nineties. Finding the perfect spot
and then crouching down, wheel-spinning his
rubber paws and then letting rip to see just
how far he would fly was always a top agenda
– especially if you had just been robbed of
and a healthy dose of attitude, Sonic The your rings by those pesky spikes. All hail the
Hedgehog became a part of any gamer’s life blue spiky one!

“Flash provides the perfect platform to

resurrect classic games”
Web Designer | 38

034-039_WD120.indd 5 13/6/06 15:05:41

 Tutorial Flash

THE BRIEF
ON THE CD Create a retro scrolling
shoot-’em-up
Tutorial files:
Defender-start.fla,
Defender-finish.fla

TUTORIAL OBJECTIVE
To recreate the arcade classic
Defender for the web using Flash
FLASH IS THE PERFECT CHOICE FOR GETTING INTO SOME CLASSIC GAMING ACTION.
TIME REQUIRED
One hour COME WITH US ON A JOURNEY INTO RECREATING AN EIGHTIES ARCADE PIONEER
SKILL LEVEL IN THIS TUTORIAL we will take an in-depth look at how to next wave of attackers was coming from. In the original game,
recreate a giant in the world of old-school video gaming. the aliens would pick up little men from the planet’s surface
Defender was a game that was fast-paced and required tons of and drag them into space, but this version will see them taking
skill and a deep pocket of loose change back in the 1980s. The energy from the city on the ground. We’ll update the game to
game revolves around defending a planet from the attacking take advantage of faster processor speeds to give us detailed
aliens, as with most of the original arcade games. Defender was graphics and parallax scrolling landscapes. We’ve also included
one of the first to feature side scrolling with a radar map at the some of the original features such as side-scrolling, a radar
top of the screen that enabled you to see exactly where the map, and smart bombs that kill all aliens on screen.

42 | Web Designer

042-047_WD120.indd 1 14/6/06 17:30:11

 Your expert
Mark Shufflebottom teaches on the BA Hons and MA Interactive Create a retro scrolling
shoot-’em-up
Media Courses at Bournemouth University and has been a regular
contributor to Web Designer for many issues. He specialises in
everything from 3D graphics to back-end code such as PHP.

01 Get started 02 Invisible action 03 Add the button

From the CD, open ‘defender-start.fla’. Change the frame
rate to 24 in the Properties palette and change the
background colour to #000033. Open the library (Apple/
Ctrl+L) and drag the symbol ‘defender-logo’ onto the
stage. Double-click the layer name and rename it ‘start’.
Create a symbol in the library (Apple/Ctrl+F8). Choose
button as the type and name it ‘invisible’. Select the hit
frame and press F6, then draw a rectangle. Click back
Scene 1 tab just above the timeline. Add the word ‘start’ to
the bottom of the stage (put a box around it if you like).
Drag the invisible button onto the stage and give it the
instance name of ‘start_btn’ in the Properties palette.
Select frame2 and hit F5 to extend the timeline. Add a
new layer named ‘code’. Select frame2 and hit F6 to add a
keyframe. Open the ActionScript editor and add this code.

04 Create the panel 05 In the frame 06 Dynamic text

Press Apple/Ctrl+F8 to create a new symbol and name
it ‘top-panel’ and make it a movie clip. Add the ‘panel.
png’ symbol to the stage and add a new layer, dragging
it below the first. Draw a rectangle 84 by 36 pixels in the
centre, making the colour black at 40% opacity.
Draw two other rectangles either side and change the
opacity to 70%. Return to Scene 1, create a new layer and
add a keyframe at frame3. Name it ‘top’ and place the ‘top-
panel’ symbol on the stage from the library. Position at 0
pixels on the x and y axis. Add the text as shown.
Make the text with the value ‘0’ for score and energy into
dynamic text on the Properties palette. Fill in the variable
name in the Properties palette to ‘score’ and ‘energy’.
Create a new symbol, naming it ‘smart-bomb’, and make it a
movie clip. Drag three copies of ‘smart.png’ onto the stage.

07 Bring in the bombs 08 Squaring up 09 The ship comes in

Add a keyframe at frame2 and remove a bomb. Do the
same at frame3, and at frame4 add a keyframe removing
the last bomb. Add a new layer and open ActionScript.
Add a stop(); and return to scene 1. Place on the stage and
name this ‘smart_mc’, to display the smart bombs.
Create a movie clip symbol (Apple/Ctrl+F8) and name it
‘mini-descender’. Draw a white square, 2 x 2 pixels, on the
stage with the rectangle tool. At Scene 1, drag the mini-
descender onto the map and name the instance ‘small1’.
Create a movie clip symbol and name it ‘ship small’.
This time draw an orange rectangle 4 x 4 pixels and return
to Scene 1. Drag ‘small ship’ onto the stage and place in
the centre of the map. Name this instance ‘miniShip_mc’.
This completes building the map view of the game, as the
‘small1’ instance will be duplicated for each alien.

Web Designer | 43

042-047_WD120.indd 2 14/6/06 17:30:23

 Tutorial
10 Create the rocket
Now it’s time to create your rocket. Make a new movie clip
symbol (Apple/Ctrl+F8). Name it ‘rocket’ and click OK. Place
the ‘ship.png’ image from the library onto the stage. Add a
keyframe at frame2 and select the rocket. From the Modify
menu, choose Transform and Flip Horizontal.
13 Animate the laser
Drag the keyframe to frame2 and add a keyframe at
frame3. Stretch the laser to the left with the Free Transform
Tool so that you have a streak of light. Add a new keyframe
at frame5, reduce the width of the laser and move it to the
left. Add a shape tween between the last two keyframes.
16 Create the alien
Drag ‘alien.png’ onto the stage, select frame6 and hit F5.
Select the image and hit Modify>Convert to Symbol. Name
this ‘descender graphic’. Name the instance of this on the
stage ‘down_mc’. Lock this layer and add a new layer. Drag
‘alien.png’ onto the stage and position on top of the first.
44 | Web Designer
042-047_WD120.indd 3
11 Add the rocket
Add a new layer and select frame1. Open the ActionScript
panel and add a ‘stop();’ command. Return back to Scene
1 and add a new layer and place it below the panel. Name
the layer ‘rocket’ and add a keyframe at frame3. Drag on
the rocket and name the instance ‘rocket_mc’.
14 Pulsing sound
Create a new layer and add a keyframe at frame2. From the
sound drop menu on the Properties palette choose ‘pulse’.
Add another new layer and open the ActionScript panel.
Add a stop(); command to frame1 then add a keyframe at
frame5 and add the code as shown in the screenshot.
17 Alien energy
Select this new alien and choose Modify>Convert to
Symbol. Name this ‘Edescender’. Name the instance
‘up_mc’. Double-click the instance and draw a rectangle
underneath. Select this and choose Modify>Convert to
symbol. Name this symbol ‘pod’ and double-click to edit.
12 Firepower fill
Now to add the laser symbol fired by the rocket. Create a
movie clip symbol and name it ‘laser’. On the new stage
draw a rectangle with no stroke from the registration
point over towards the right-hand side. In the mixer panel
choose a linear fill and create a similar gradient to this.
15 Add the laser
Click the Scene 1 icon above the timeline to return to
Scene 1. Add the laser from the library to the stage. It will
appear as a white dot, so position over the centre of the
rocket and name it ‘laser_mc’. To create the alien, we need
to create a new movie clip symbol and name it ‘descender’.
18 Explosion effects
Add a keyframe at frame2 and change the colour of the
rectangle to yellow. Add a keyframe at frame3 and frame4
and change the colour to red then yellow. Create a new
movie clip symbol (Apple/Ctrl+F8) and name it ‘explosion’.
Draw an oval shape and fill it with a radial gradient.
14/6/06 17:30:37
 Create a retro scrolling
shoot-’em-up

IN DETAIL
Xxx xxxxtoxxxx
Coming terms
xxwith the code
Our game
Xxxxx xxx features
xxx x a hefty chunk of code, which may be a touch
xxxxx
confusing for ActionScript newbies. Fear not, as we reveal all and lift
xxxxlid in this overview of the code
the
ALTHOUGH XXXXXX
XXXXXXXX THIS VERSION
xxxx xxx
of the
x xold-school
xx classic
Defender
xxxx has an assortment of code snippets to make
xxxx
it work, by and large the vast majority of the game engine
xxxx on frame3 of the code layer. Because there are nearly
exists
160 lines of code it can be quite daunting for the novice

19 Alien explosion
Double-click on the ‘descender’ symbol in the library and
add a new layer. Add a keyframe at frame3 and drag the
explosion symbol to the stage. Resize the explosion to the
size of the alien, then add a keyframe at frame2. Make the
explosion bigger and add another keyframe at frame6.
coder trying to make head or tail of this beast. Yet for what
is actually happening in the game, 160 lines of code doesn’t
seem like all that much!
The first ten lines of code are quite easy to understand as
we are just setting up some variables which are used in the
game – you will spot these being used in the code later on.
Lines 12 to 30 are setting up the random position of
the first alien, then duplicating this five times. Each alien
is then assigned a new position, then the radar version of
the alien is also duplicated and given an x and y position
corresponding to the main alien on the map. Use ‘for’xxxx
Xxxxx loops
xxxtox duplicate
x xxx x the movie clips and generate the right
Lines 31 to 79 set up what Flash checks every frame and xxxx of aliens. It’s easier than placing six aliens on the stage
number
this first section of code is all about checking if the player
is pressing the keyboard. The rocket and various firing or
smart bomb events are triggered.
The lines 80 to 99 are positioning various elements on
the screen, such as the laser so that it is always with the
rocket and the background and ground parallax scrolling
is controlled here. This is done by moving in the opposite
direction to the rocket at differing speeds.
The next section of code is controlling the movement of
the aliens up and down the screen while scrolling them with
the background. This is from line 100 to 149. The aliens are
monitored going down and are given energy pods. If they

20 Booming sound
Select the explosion at frame6 and change the alpha to 0%.
Add a tween between the two keyframes and add a new
layer. Add a keyframe to frame2 and add the sound ‘boom’.
Add a new layer with a stop(); command at frame1 and add
a keyframe at frame2, copying the code above.
make it back to the top they deplete the energy. All the time,
Flash checks to see if the aliens are being shot.
The final section of code creates new aliens when they
reach the top of the screen and checks if there is a collision
between the rocket and the ground. If so, the game is Checking
Xxxxx xxxxthe
xxxkeyboard
x x xxx x input is a simple job; just make sure that you
pushed on to the Game Over screen. xxxx each frame so that the game is responsive to the user controls
check

21 Alien invasion 22 Create the flash 23 Name the instance

Add a keyframe to frame6 and add the above code to
the ActionScript panel. Return to Scene 1 and drag the
‘descender’ symbol onto the stage. Place it on the ‘rocket’
layer and name the instance ‘descender1’. This will be
duplicated to get the right number of aliens on the stage.
Draw a pale blue rectangle on the stage to fill the stage
underneath the top panel. Select the rectangle and
choose Modify>Convert to Symbol, naming it ‘flash’.
Double-click to edit it and drag frame1 to frame2. Add a
new layer, open the ActionScript panel, and add this code.
At Scene 1, name the flash instance ‘flash_mc’, which
should now be a white dot. This will flash when an alien
is shot. Create a new movie clip in the library and draw
a white box 1 x 1px with no stroke. Right-click this in the
library, choose ‘linkage’ and tick ‘export for ActionScript’.

Web Designer | 45

042-047_WD120.indd 4 14/6/06 17:30:50

 Tutorial
TECHNIQUE
Customising
your own game
A game of Defender may not be quite
right for your website. Customising the
game will make it suit your content

24 Starfield background 25 Add to the stage

Click OK to close the linkage panel and create a new movie
clip symbol and name it ‘stars’. From the CD open ‘step24.
txt’ in a text editor, then copy and paste the code to the
ActionScript panel for frame1. Return to Scene 1 and create
a new layer named ‘stars’. Drag this below the other layers.
Add a keyframe at frame3 of the stars layer and drag the
‘stars’ symbol to the stage. It should display on the screen
as a white spot. Place this in the bottom right corner of
the top panel on the stars layer. Now for the parallax
background. Create a movie clip symbol named ‘ground’.

01 Jump ship
To change the rocket, open the ‘rocket’ symbol
and add your own spaceship. This can be done by
drawing in Flash or bringing one in from an external
app. Remember to flip the image for both directions.

26 A firm grounding 27 Copy and paste

Drag the ‘terrain.png’ symbol to the stage of the ‘ground’ Copy and paste the ‘ground1’ symbol and position in the
symbol. Return to Scene 1 and create a layer above the same place on the stage, changing the name to ‘ground2’.

02 The bad guys

stars layer, naming it ‘ground’. Add a keyframe to frame3, Create a new movie clip and name it ‘background’. Add
drag the ground symbol to the stage and position at 0 on ‘city.png’ to the stage and return to Scene 1. Create a layer
the x axis and 350 on the y axis. Name it ‘ground1’. and name it ‘background’. Drag it below the ‘ground’ layer.
Changing the aliens is more complex as there are
several movie clips that refer to their movement.
‘Descender graphic’ is the alien going down the
screen and ‘Edescender’ is the alien with the energy.

03 A change of view 28 Add the background 29 Fire the engine

Changing the scenery is simple, as the two movie
clips that refer to this are ‘ground’ and ‘background’.
Changing the colours and look of these elements
will change the feel of the game completely.
Add a keyframe at frame3 and drag the background
symbol to the stage. Position the background at 0 on the x
axis and 359 on the y axis. Name the instance ‘background1’
and add a 3px blur filter. Copy and paste the symbol,
positioning in the same place. Name it ‘background2’.
Select the code layer and add a keyframe at frame3. Open
‘step29.txt’ and copy the code into the ActionScript for
frame3. Add the sound ‘game start’ from the drop menu on
the Properties palette. Extend every layer except ‘start’ to
frame20. Add a layer above the others, called ‘explosion’.

46 | Web Designer

042-047_WD120.indd 5 14/6/06 17:31:04


SMART BOMBS
Destroy all aliens on the map at any
time with by pressing the ‘tab’ key to
activate the smart bomb
DESCENDING ALIENS
The aliens’ mission is to get to the
bottom of the screen, collect the
energy and escape
30 Rocket explosion
Add a keyframe at frame 20 and drag ‘rocket explosion
anim’ to the stage. Name the instance ‘rocketExplode_mc’.
Add a keyframe to frame20 of the code layer and open the
ActionScript panel, adding this code. Select frame25 of the
‘explosion’ layer and hit F7. Do the same for the code layer.
042-047_WD120.indd 6
31 You lose!
At frame25 of the ‘explosion’ layer add the text as shown
above, making the score text dynamic with score as the
variable. Add the invisible button and name it ‘start_btn’.
Open the ActionScript panel at frame25 of the code layer
and add the code from the file ‘step31.txt’ from the CD.
Create a retro scrolling
shoot-’em-up
RADAR MAP
The radar at the top of the screen
displays the location of all the aliens as
you scroll through the environment
ENERGY PODS
Energy pods are collected by the
aliens when they reach the bottom of
the screen, so stop them escaping!
PARALLAX SCROLLING
The ground, background and starfield
all scroll at differing speeds, giving an
old-school parallax scrolling effect
32 Finish the into
Select frame1 of the ‘start’ layer and add the text as shown
in the centre of the screen. Add the appropriate symbols
from the library to illustrate the text so that the player will
know the object of the game. Save the project and press
Apple/Ctrl+Enter to test the game.
Web Designer | 47
14/6/06 17:31:21
 Tutorial Flash
Get jiggy
The puzzle pieces are randomly
scrambled to the assigned region, just
as in a real jigsaw

Filter feature
Flash 8 filters are used to make realistic
puzzle pieces. Not Photoshop! And
Shaping up look how great they are!
Invisible target movie clips are used to
check if the puzzle piece is placed in
the correct spot

Snap to grid Match making Scaled down

If the puzzle piece is placed to the If the puzzle piece doesn’t match the The puzzle pieces are scaled down to
droptarget, it will snap and resize to droptarget, it will return to its random 70% to save the working space and so
100%, indicating that it is correct position on the right that they can be seen clearly

THE BRIEF
ON THE CD Build a jigsaw puzzle
game in Flash
Tutorial files:
Flash file, PSD, exported
PNGs and a final SWF file

TUTORIAL OBJECTIVE
We will show you how to design your
own custom jigsaw puzzle game

TIME REQUIRED DON’T LET YOUR WEBSITE GO TO PIECES. DESIGN A CUSTOM FLASH
Two to three hours PUZZLE GAME AND ENCOURAGE VISITORS TO HAVE A BIT OF FUN
SKILL LEVEL HERE WE’LL LEARN how to make a Flash jigsaw puzzle
game using any artwork you prefer. It is fun, easy, and best
of all it’s extendable! This tutorial will show you how to use
Flash 8’s filters to make realistic puzzle pieces without using
Photoshop effects. This will save you tons of time because you
don’t have to render the effects in Photoshop and export each
individual piece separately. You will learn how to make the
puzzle pieces by masking the artwork, and then applying the
Drop Shadow and Bevel filters. The benefit of this approach is
you can change the puzzle artwork instantly by replacing the
artwork PNG file.
The puzzle pieces are randomly placed on the right-hand
side and are draggable. As soon the player put it in the proper
target (invisible movie clip), it will snap to the right position.
When the puzzle is completed, it displays an animation and a
button will appear that allows the browser to play again.

48 | Web Designer

048-051_WD120.indd 1 14/6/06 17:31:59

 Your expert
Nick La is a Toronto-based graphic and web designer, and is a Build a jigsaw puzzle
game in Flash
regular contributor to Web Designer. His work has been featured on
many design portals and design magazines. Visit www.ndesign-
studio.com to see his portfolio and goodies.

01 New document 02 Boxing clever 03 Scrambled scene

In Photoshop, make a new document 700 x 500px. Find a
background image that you would like to use. Here we use
a wood table texture background. To make a puzzle game
box, first make a rectangle selection and then paste in the
puzzle artwork. This is the intro scene of the game.
Using the same technique as in step one, create the two
sides of the box. Tint the sides with 80% of black. Using the
Type Tool, type in the text labels of the box (we also added
a barcode just for fun). Then use the Gradient Tool to make
the reflection on the box at the top-left corner.
In separate layer group, make a smaller version of the
puzzle box. Make one of the boxes upside down. Paste in
the artwork and scale it down so the player can use this
sample image for reference. Create a black playing board
as the guide within which the puzzle should be placed.

04 Define the puzzle size 05 Puzzle pattern 06 Duplicate curve lines

Paste in the artwork and make sure it fits within the
playing board. In this tutorial, our puzzle size is 294 x
367px. We will need this measurement to make the puzzle
pattern. Now export all your graphics (wood background,
board, boxes, and so on) to PNG files.
The quick and easy way to make the unique-looking
puzzle pattern is to do it in Illustrator. First make a
rectangle box 294 x 367px, which is the dimension of the
artwork. Then use the Pen Tool and draw two different
curve lines of the puzzle pattern.
Duplicate the vertical curve line to the right side and flip
it over. Make sure they are distributed evenly within the
box. Now duplicate the horizontal line downward twice.
Again, make sure they are distributed evenly. Set the curve
strokes to a black stroke with no fill colour.

07 Path finding 08 Flashy work 09 Game setting

Now select the box and all the strokes. Go to Pathfinder
palette, click on Divide. This will divide the box into
different pieces. That’s it. Now we just make 12 different
unique-looking puzzle shapes. Save this file – we will need
it to make the puzzle pieces in Flash.
In Flash, create a document 700 x 500px. Import the wood
background and lock the layer. Make a new layer, name it
‘graphics’, and place the box in the middle. Create another
layer, named ‘button’. Make a button and assign it go and
stop at frame label “begin” on mouse release.
Make a new layer named ‘actions’ and assign a stop() event
in frame1. Then in frame5 insert a keyframe and label it
‘begin’. In ‘graphics’ layer frame5, insert a blank keyframe.
Import the small puzzle boxes, puzzle board and the
sample artwork image we’ve created.

Web Designer | 49

048-051_WD120.indd 2 14/6/06 17:32:11

 Tutorial
10 Puzzle shapes
Make a new layer, called ‘invisible pieces’. Copy and paste
the puzzle shapes we’ve created in Illustrator (step seven).
Select the top-left shape and convert it to a movie clip
symbol by pressing F8. Name this symbol ‘shape1’. Repeat
this for the rest of the shapes: shape2, shape3, and so on.
13 Duplicate puzzle piece
Right-click ‘piece1’ and Duplicate. Name it ‘piece2’. Double-
click ‘piece2’ to edit it. Unlock the mask layer and delete the
current shape. Hit Apple/Ctrl+Shift+V to paste shapes2-12.
Deselect shape2, cut shape3-12. Select shape and artwork,
align the shape x & y = 0. Repeat this for piece3, 4, 5, etc.
16 Apply a Bevel
Select piece1 MC on stage. Go to the Filters palette and
apply a Bevel filter (Blur X: 5, Blur Y: 5, Angle: 45, Distance:
1). Apply a Drop Shadow filter (Blur X: 5, Blur Y: 5, Angle:
180, Distance: 1). This will give a 3D effect to the puzzle
piece. Repeat this step for the rest of the pieces.
50 | Web Designer
048-051_WD120.indd 3
11 Puzzle piece one
Select all the puzzle shapes and copy them to the
clipboard. Create a new movie clip symbol (Apple/Ctrl+F8).
Name this ‘piece1’. Now you should be in the symbol-
editing mode. In the first layer of piece1, import the puzzle
artwork PNG file and align the x and y origin to 0.
14 Set invisible targets
Go back to the main timeline. Select the shape1 instance
on stage and name it ‘target1’. Repeat this step for the rest
of the shapes: target2, target3 and so on. Select all target
shapes, go to the Properties palette and adjust the alpha
to 0%. This will turn all target shapes to invisible.
17 Declare variables
In the actions layer, frame5, type in the ActionScript code
shown. Here we need two variables: no_piece (number
of total puzzle pieces) and success (number of successful
piece). A loop condition randomly places all puzzle pieces
to the assigned region and scales them to 70%.
12 Set mask layer
Make a new layer above the artwork. Now press Apple/
Ctrl+V to paste the puzzle shapes (copied in step 11) in the
new layer. Keep all shapes selected, align them to x & y = 0.
Deselect only shape1, press Apple/Ctrl+X to cut shape2 to
shape12. Set this layer to mask.
15 Proper placement
Make a new layer above the ‘invisible pieces’ layer. Drag all
the puzzle pieces (piece1-12) from the Library to the stage.
Now select the piece1 instance on the stage and name the
instance ‘piece1’. Repeat this step and name the rest of the
pieces in sequence order: piece2, piece3, and so on.
18 Swap shop
Select ‘piece1’ MC on stage. In the Actions palette, type in
the ActionScript code shown. Here we use swapDepths()
event to swap the depth of this movie clip to the highest
level. This will stop the pieces overlapping. Use startDrag()
event to make this clip draggable on mouse pressed.
14/6/06 17:32:24
 Build a jigsaw puzzle
game in Flash

IN DETAIL
Raising your game
Although it’s great as it is, you can also develop
this jigsaw to suit your site. Why not change the
image, or make it more difficult to complete?
IN THIS TUTORIAL we have demonstrated how to
make a 12-piece puzzle. However, this puzzle game
is fully customisable and extendable, so it’s a useful base
from which to work if you want to change the image or
amount of pieces to suit your particular site. For example,

19 On release
Type in the code as shown. On mouse release, we will
disable the dragging function. Then there is a if condition:
if this droptarget is equal to target1 MC on stage, then this
X & Y = target1’s X & Y. Then, it will resize this MC to 100%,
disable the button, and add 1 to variable success.
if you are building a band site it you could use the album
cover artwork, and obviously this puzzle would be a perfect
addition to a children’s website.
If you want to use the same code and make different
puzzle games, all you need to do is to replace the puzzle
artwork file in the Library palette. Because we are using
the masking technique for the puzzle pieces, as soon you
replace the artwork file, it will update all puzzle pieces
without rebuilding. Isn’t this is great? (Note that these Flash
filters will only be supported by the Flash 8 Player, so be sure
you publish the game in Flash 8 format.) We have a variable no_piece to define the total number of puzzle
Let’s say you want to make this game more challenging pieces in the jigsaw, so you can customise it easily
by increasing the puzzle pieces. You can do that by doing
just a bit of extra work. First you have to make the puzzle
shapes in Illustrator, using the simple technique we have
showed you in the tutorial. Be sure to remember to change
the variable no_piece equal to your desired puzzle pieces,
for example, 16.
Also, you have to label your invisible target movie clips
correctly and assign the droptarget to correct target or your
puzzle parts will not snap into the right spot. The most time-
consuming bit is probably setting the invisible target movie
clips and puzzle pieces.
Perhaps you can make this game more interesting by

20 Return to random setting up different levels of difficulty. A 12-piece puzzle

Then there is another if condition: if the variable success
is equal total number of piece, it will play frame label
“completed”. If the droptarget of this movie clip does not
match the target MC on stage, it will then place it back
randomly to the assigned region.
would be the easy level, 16 pieces would prove a bit more of
a challenge, and a 20-piece jigsaw could be the real toughie
(use a picture of baked beans to make it even harder!). Or
you could even set up a few different themes and artworks Invisible movie clips are used to check if the puzzle piece has been
and allow the player to choose. Be creative and have fun! dropped into the right spot

21 Copy the code 22 Completed frame 23 Fade-in final artwork

Select the entire code and copy it to clipboard. Now select
‘piece2’, in the Actions palette, paste in the code. Change
all reference of ‘target1’ to ‘target2’. Repeat this step for
the rest of the puzzle pieces. Be sure to remember to
change the target name according to the piece number.
In the ‘actions’ layer, enter a keyframe at frame 12. In the
Actions palette, type in the code as shown above. Here
we have a for loop condition that will remove piece1 to
piece12 movie clip. This will remove all of the puzzle
pieces from the stage.
In the ‘graphics’ layer, make a fade-in animation of the final
artwork. In frame 22 of the ‘actions’ layer, enter a stop();
event to stop the animation. Make a button and assign
the ActionScript to go back to frame label ‘begin’. This will
allow the player to play over and over again.

Web Designer | 51

048-051_WD120.indd 4 14/6/06 17:32:38

 Tech support
Having problems creating your Flash web games? Our coding guru
Mark Shufflebottom gets to grips with gaming and website Flash gripes
Q Pieces of eight
I have recently upgraded to Flash 8 and have
noticed that when embedding my Flash files in
Dreamweaver and viewing in Explorer, Internet
Explorer highlights the Flash image until you
click on it, at which point it becomes part of the
page again. Is there any way to make the SWF
file an unobtrusive part of the page? I notice that
Firefox doesn’t have this problem. Can you shed
any light on this?
Andrew Burton
A
The problem actually lies with later updates
Q Quiz mastering
to IE 6 on the PC and not Flash 8. Microsoft
recently lost a lawsuit to Eolas over a patent
infringement. This forced them to make
changes to Internet Explorer version 6.
The main change that affects web browsing
in the update is with the ActiveX controls
on a page. Elements like embedded movies,
Java applications, Flash applications, or any
element added to the page with the ‘object’,
‘embed’ or ‘applet’ tags are affected. Before
the update, people could interact with these
A Both of these judgements can be made using
“Crucial to any game is whether two or
more objects are touching on the screen.
This is known as collision detection”
Head to the website we’ve recommended for a way to add Flash content to your site without
requiring your visitor to click to access it
52 | Web Designer
052-053_WD120.indd 1
elements directly. Now a click is required
to make them commence. The web page
http://blog.deconcept.com/2004/10/14/
web-standards-compliant-javascript-flash-
detect-and-embed offers great advice and
there’s a download that gives an alternative
method of adding Flash content which does
not require a click to start the content. It uses
an external JavaScript file and a few JavaScript
tags to place the SWF on the page. This works
well in differing browsers and platforms, fixing
this annoying niggle for IE users.
Flash can make excellent judgements for your game player by using
logical conditions, or ‘if’ statements in layman’s terms!
I am programming a game for my site and want
to work out how to make a judgement for a quiz.
At the end of the quiz I’d like to take the player to
different screens based on how many answers
they got right or wrong. Is this easy to do?
Samantha James
the if statement in ActionScript. This will
basically judge whether the answer selected
Q Game play
is correct and then keep a tally of the correct
answers. When the quiz has been completed
then again the script will make a judgement
based on the tally that is kept, so in answer to
your question, yes this is easy to achieve.
Let’s take the script for the individual
answers. We’ll assume that there is a button
next to each answer on the stage. A variable
needs to be set up at the beginning that will
collect the correct answers. Write this as: var
correctTally:Number= 0; at the beginning of
the quiz. Now add this code assuming your
button instance is named correct_btn:
correct_btn.onPress=function(){
correctTally++;
};
gotoAndStop(nextFrame);
Now on the last frame you just need the
following code to make the judgement in
your quiz:
if (correctTally>10){
gotoAndStop(“win”);
}else{
gotoAndStop(“lose’);
}
Obviously, you can change the number to
suit the amount of correct answers. The code
will then push the player onto either a ‘win’
or ‘lose’ frame label. Pop this into your quiz
game and you’ll soon have Flash pushing your
players to the right frames.
I am trying to create a timer for my game, but I’m
sure there is an easier way. I have placed a movie
clip on my stage which has nothing in it, except
that the timeline is dragged out to 360 frames as
my frame rate is 12 frames per second and this
gives me 30 seconds. At this point I have some
code that takes the player to the time up page. Is
there an easier way to handle this?
Laura Johnstons
13/6/06 15:08:43

If you have a problem, and no one else can help, send it in to the
Web Designer team! We’ll do our best to print your problems on our
pages, but we cannot reply personally to every email.
Send your queries to:
Tech support
Your expert
Mark Shufflebottom has been teaching on the BA and MA Interactive Media courses
at Bournemouth University for the past five years, where he teaches 3D applications,
interface design, online gaming, small screen device production and of course all things
Flash and ActionScript. Mark has recently won an international award at the BEA Festival

webdesigner@imagine-publishing.co.uk in Las Vegas for the production of an Interactive, real-time, 3D narrative.

Expert advice
This function checks every frame to see if

A A simpler way to do this is through code. It

may look more complex, but it is quite simple
to get this to work. First you’ll need to add a
text box to the stage to display your time in.
Make this dynamic with the variable set to
‘timer’ in the Properties palette. Create a new
layer and rename this to ‘code’. Select frame 1
or when the timer is to start and add this code:
var startTime:Number;
startTime=getTimer();
var timer:Number;
This sets up the variable startTime and gives
it the value of time from Flash’s own time
function using getTmer();. Now it is essential
that the time is decreased each second to
show the changes on the screen. The next
variable is the actual timer variable, this will
be displayed in the dynamic text box on the
screen. There is no value set to this, as this is
done in the next block of code:
onEnterFrame = function() {
timer = int(30-(getTimer()-
startTime)/1000);
if (Number(timer) == 0) {
gotoAndStop(“timeUp”);
delete
onEnterFrame;
} Create timers through code rather than through long
};
the timer reaches zero and if it does then
the it moves the playhead to a frame label
named ‘timeUp’. At this point it deletes the
onEnterFrame function.
The real magic in this particular code
though is the second line which rounds the
timer variable to a whole number (integer). It
does this because 30 seconds are depreciated
by taking 30 from the current time held in
Flash’s getTimer function. This time value is
subtracted from the startTime and it is divided
by 1000 because Flash counts in milliseconds!
It sounds complicated but works perfectly and
runs independently on the timeline so your
timer won’t slow down if the frame rate of
your movie drops.
movie clips as they are more accurate
Collision detection
Crucial to any game is whether two or more objects are
touching on-screen. This is known as collision detection.
This affects so much of gameplay – touching a bad guy
or a laser shot shooting a bad guy – that it is important
to understand how it works. The main way of checking
collision detection is to use the hitTest method:
if(instanceA.hitTest(instanceB)){
//do something
}
This uses the objects bounding box but there is also
another way of doing it which uses instanceA’s exact
co-ordinates, but only instanceB’s registration point:
if(instanceA.hitTest(instanceB._x,
instanceB._y, true)){
//do something
}
Try experimenting with both to see the results in action.

Technique: Drag-and-drop drama

Q I’ve been trying to create a game in which the player drag the right
graphics onto other graphics to match up characters. I have a good idea
how to do the dragging based on startDrag, but how do I test if the correct
graphic is in place? There’s a person on one side of the screen and various
A This isn’t too difficult. What you have to do is split your dummy graphic up
into sections so that if you drag the right graphic onto the body a collision
can be tested between the two. The best idea is to make the registration
point of the two images the same; therefore you can make the x and y
elements on the other, and users match up the items on a dummy graphic. location of the dragged object equal the first if it hits the right target.

01 What a drag 02 Drop me here 03 Oops, wrong one!

Start the coding off by adding a startDrag()
command to the right object. This assumes that
there is a movie clip on the stage with the instance
name of ‘headDrag_mc’. Notice when the user clicks
on this movie clip the dragging process starts.
This code shows that when the user stops clicking
it will stop dragging. The code then checks to see
if it is touching a movie clip on the stage called
‘headTarget_mc’. If it is, the x and y co-ordinates are
positioned the same and it snaps into place.
If you want to have more than one item to drag to
confuse the player, then just add the code shown
above to other objects. This makes them draggable
but as it isn’t the right object for the game then
there is no collision code.

Web Designer | 53

052-053_WD120.indd 2 13/6/06 15:08:56

 Tutorial Flash

THE BRIEF
ON THE CD Coding arcade classics in
an object-oriented style
Tutorial files:
PacRat.fla and PacRat.swf
plus all the files you need

TUTORIAL OBJECTIVE
Create an OOP Pac-Man-style tile game
using Flash 8 and ActionScript 2.0

TIME REQUIRED USING OBJECT ORIENTED PROGRAMMING TECHNIQUES YOU CAN

Five hours CREATE GAMES THAT ARE EASIER TO DEBUG AND EXTEND
SKILL LEVEL RECREATING THE gameplay of the classic arcade hit
Pac-Man is a wonderful challenge for a game developer
moving into more complex areas of Internet game
development. It appears simple, but includes such features
as bounded movement, collision detection, pathfinding and
artificial intelligence, all of which need to be tackled.
To aid in breaking down and overcoming these challenges,
a smart developer would look to the benefits of using an
object-oriented approach to coding. In this context, that
simply means that distinct objects will maintain their own
states and control their own behaviour, and in this tutorial that
is exactly what we will explore.
All of the code included on the CD for this tutorial is heavily
commented, so we’ll steer clear of too much code to instead
discuss concepts of how everything is put together, focusing
on construction and design of the gameboard and levels.

54 | Web Designer

054-060_WD120.indd 1 15/6/06 15:29:52

 Your expert
Todd Yard is a senior software engineer at Brightcove in Cambridge, Coding arcade classics in an
object-oriented style
Massachusetts. Previously he was a partner and developer at EGO7 in
New York, where he helped to build its Flash CMS and collaboration
suite of applications. His personal website is www.27bobs.com.

01 A touch of class 02 Establish an interface 03 On the level

For those not used to working with external class libraries,
consider this a crash course. All of the code for this game
will be managed in external ActionScript classes. The main
.fla will contain only graphics and symbols linked to those
classes. All classes will be in the same directory as the .fla.
The first piece we will look at is how to draw the
gameboard. To accomplish this, we will first establish an
interface that will define the methods that any level for
the game will need to implement. An interface is a sort of
contract to guarantee that a class will do what we expect.
Save ILevel.as to the directory you’ll use for developing
your game and open it in Flash. You will see that it defines
seven methods, but does not implement anything in those
methods. However, we can have the game enforce that all
levels implement these methods to ensure behavior.

04 Level up 05 Board already? 06 Laying tile

With the interface defined, save Level1.as to the same
directory and open it up as well. It implements the ILevel
interface and so implements each of the interface’s
methods. If our game forces levels to implement the ILevel
interface, this Level1 class will now fulfil that requirement.
Take a look at getBoard() in the Level1 class, which uses a
two-dimensional array to define the gameboard. At the
top are comments that define what each number in the
array represents (wall, pellet, clear or power). By changing
the values in the array, the board can be altered.
The next step is to have some way to render the level data
for the user to see. This is done in GameBoard.as. Save that
file to your directory and open it up. In the drawBoard()
method, a grid array passed to the method is run through,
and BoardTile movie clips are attached the stage.

07 Frame of reference 08 Enter Flash 09 First render attempt

The Level1 defines the layout of the gameboard, and
GameBoard draws that to the stage. What is needed is the
BoardTile class to determine how a single tile is rendered.
Save BoardTile.as to your game directory and open it up.
This class mostly controls going to a timeline frame.
To tie these pieces together, create a Flash Document and
save it as PacRat.fla. Set the frame rate to 30fps and change
the stage dimensions to 510 x 600. Create a new movie clip
symbol named ‘BoardTile’ and Export it for ActionScript
with the Identifier and AS 2.0 class as BoardTile.
Create another new symbol, this one named and exported
as ‘GameBoard’ with the AS 2.0 class set as GameBoard as
well. Then, in the first and only frame of the main timeline,
type the code you see in the screenshot. Test the movie
and you’ll see… well, not much yet.

Web Designer | 55

054-060_WD120.indd 2 15/6/06 09:43:16

 Tutorial
10 Frame the solution
The problem is that there are no graphics to show the
types of tiles on the board. If you look in BoardTile.as, you’ll
see four constants that should map to four frames in the
BoardTile symbol. Return to PacRat.fla and create three
layers and four frames in the BoardTile symbol.
13 Second attempt successful 14 Capture the moment
Test the movie, and the gameboard should appear. We
have three pieces (Level1, GameBoard, BoardTile) all
‘hooked up’ by our timeline code, but each is taking care
of its own behaviour and rendering. All we did was provide
graphics, instantiate the level and attach a GameBoard.
16 Rounding the corner
Use the Pathfinder to unify the blocks into a compound
shape, then set fill to none and the stroke to 6pts #0088CF.
With the shape selected, apply Effect>Stylize>Round
Corners with a radius of 10. Beneath the walls, draw a 510 x
600px #231F20 rectangle for the background.
56 | Web Designer
054-060_WD120.indd 3
11 Defining boundaries
Rename the layers, bottom to top, ‘bounding box’, ‘graphic’
and ‘code’. In the first frame on the code layer, add a stop()
action. On the bounding box layer, create a 30 x 30 box
aligned at the top left of the symbol’s registration point.
Make the layer a guide, lock it and set it to outline mode.
Now we have a board layout, we’ll make it a bit prettier
with a combination of Photoshop and Illustrator. Capture
a screenshot of your test movie, then paste it into a new
Photoshop document, cropping it to 510 x 600px. Save the
image as a JPEG, then open it in Illustrator.
17 Branding the game
As a last step, drop your logo into the centre of the maze.
With the layout we coded, we can make a neat enemy
entry point using the ‘p’ in the Imagine logo, but feel free
to use your own branding here. Add any additional effects
you would like and export the final background as a PNG.
12 Pellets and power
Make each of the four frames on the graphic layer a
keyframe. In the first frame, draw a 30 x 30 black rectangle
aligned at top left (the wall). In frame two, draw a small
circle in the middle of the bounding box area (the pellet)
and in frame four, draw and centre a star (power).
15 Blocking it out
Use File>Document Setup to change the document size
to 510 x 600 pixels. Lock the layer with the screenshot and
create a new layer above it. Using 30 x 30 pixel boxes (the
tile size), cover the walls with rectangular blocks. Don’t
worry about the outer wall – that will be masked.
18 Back in Flash
In Flash, import your background image to the stage. Now
that you have an image to show the user the walls, you
don’t need the rectangle graphic in BlockTile. Enter symbol
editing mode for BlockTile and delete the graphic in the
first frame. Test your movie. The pellets now can’t be seen.
15/6/06 09:43:25
 Tutorial
TECHNIQUE
Set up a
message centre
A text overlay is used for all user
messaging in the game. Here we’ll see
how to enable that with a single class

19 Smashing cheese! 20 Bitmap caching

To make the pellets visible, go back into BoardTile and
delete the shape from frame two. Draw instead a small pie
piece (a piece of cheese) at #FFCC66 in the middle of the
bounding box. Make this into a movie clip named ‘pellet’.
Test your movie to see them appear.
As we will be displaying a lot of pellets in the game and
they are all static images, select the pellet instance on
the stage and in Properties check ‘Use runtime bitmap
caching’. This will blur the pellet, but not noticeably so.
Now Flash does not need to constantly redraw the vector.

01 Overlay background
In your game .fla, create a new movie clip symbol
named and exported as ‘Message’ with the AS
2.0 class set to Message as well. In symbol editing
mode, draw a 235 x 80px #666666 rectangle with its
top left corner at Message’s registration point.

21 Glowing green 22 Game controller

In frame four for the power pellet, delete the star shape With the gameboard completed, it’s time to put together
and instead drop another pellet instance, scaling it up the rest of the pieces like the character sprites (user and

02 Message text
slightly. In the Filters palette, add an Adjust Color filter enemies) and the game logic (how many lives, how things
and drag the Hue slider to 63. Then add a Glow filter with are scored, etc) and start the game. This is all taken care of
colour set to #2FFF3C and Blurs to 15. in the PacRat.as class. Copy that to your game directory.
Convert the rectangle into a clip, ’message graphic’.
Name the instance in Message ‘__graphic_mc’, and
apply a Bevel. Create a layer above this and add a
multiline textfield named ‘__message_tf’ with any
embedded font and some default text centred.

03 Top of the class 23 PacRat’s purpose 24 More graphics

That’s all it takes for our graphic, and you can
customize it however you wish. Make sure that you
have Message.as copied to your game directory. It’s
a simple class that you pass a message string to and
it will position the text in the background graphic.
The PacRat class takes care of plugging all the pieces
together. Open the file to see it is about 300 lines of code
controlling the creation of the individual game elements
like the gameboard, sprites and messaging. It also takes
care of monitoring game state and rendering to the stage.
Although the PacRat class takes care of controlling the
game, the graphics are still contained in our .fla. We’ve
taken care of the game tiles, but we still need sprites, a
score board and user messaging dialog. Head to the .fla
and create a new symbol named ‘mouse body graphic’.

58 | Web Designer

054-060_WD120.indd 4 15/6/06 09:43:36

 Coding arcade classics in an
object-oriented style

IN DETAIL
All work and no play…
It’s important that amid all the code and graphic creation that we
don’t lose sight of the game itself. There’s no point in creating a
great-looking game if the playability doesn’t cut it!
ALTHOUGH WE DIVED right in to plugging all the code
pieces together and building the graphics, there is an
important step when creating a game that should occur
before any of that takes place, and that is the planning
stage. This means deciding not only how we should set up

25 White mouse
Using simple shapes, draw the top view of the head and
body of a mouse inside mouse body graphic. Create a
new symbol named ‘sprite graphic’. Within this create four
layers, top to bottom: ‘labels’, ‘code’, ‘body’ and ‘tail’. Drop
the mouse body graphic symbol onto the body layer.
for coding and graphics, but also, more fundamentally, what
the game is about, which will help us tremendously in those
later stages and with creating a far more immersive gaming
experience for the player.
First, it’s great to come up with a storyline that will drive
gameplay. Pac-Rat was obviously inspired by the title of
Pac-Man. As the game style requires a tiled maze, the notion
of lab mice running through an environment gobbling
cheese came almost immediately. With the world of the
game (an experimental lab) came logic for the power-ups,
irradiated cheese. Enemies could be other lab mice that are For Pac-Rat, how about creating and adding a scientist’s hand
irradiated themselves. By creating a storyline that engages placing the player’s mouse at the start of a level?
the user, even a simple one, you provide a way for a player
to immerse themselves in the game when all that is really
happening is that arrow keys are being pressed.
Once you know what the game is about, that storyline
can drive how the game changes over the course of a
player’s session. Pac-Rat would be a level-based game, so
you could have multiple mazes to explore. The scientists
running the experiment could throw in additional mice, or
even random rewards (like the fruit in Pac-Man). The enemy
mice could even become faster and more intelligent as the
levels progress.
The story can inspire additional touches as well. How

26 The tail end
On the tail layer, use a thick white line to draw a curved
tail. With the line selected, turn it into a movie clip symbol
named ‘animated tail’. Double-click the symbol instance to
enter symbol editing mode and set a total of ten frames on
the animated tail’s timeline.
about a white-coated arm placing your mouse on game
start? What about ambient sound of the scientists muttering
as your rat scurries about the maze? Before a line is coded
you should lay out how, and more importantly, why the
game is played. This will give you a solid base from which to A splash screen is a great way to engage the user and give a
develop the entire game. professional edge. Here’s one for another tiled gobbler, Area 52

27 Animated flip 28 Frames and layers 29 Colour-coded rodents

Make a keyframe at frame six and in this keyframe flip the
tail horizontally. This will animate the tail as the movie clip
loops to make it appear as if it is moving back and forth.
It’s not a smooth animation, but fits the game. Hit ENTER
to test, then return to the sprite graphic timeline.
Extend all layers to 29 frames, then set keyframes in frames
10 and 20. In the labels layer, add the label “chasing” to
frame 1, “evading” to frame10 and “reviving” to frame
20. Place stop() actions at frames 1 and 10, then add a
keyframe and a gotoAndPlay(“reviving”); action in frame29.
Place blank keyframes in frames 2 and 11 of the body and
tail layers. On frame1, set the tint of these clips to #66FF00.
Copy these green clips to frame25. This sets a green mouse
in the chasing frame, white mouse in the evading frame,
and alternating green/white in the reviving frames.

Web Designer | 59

054-060_WD120.indd 5 15/6/06 09:43:49

 Tutorial
Clip control
Graphics in the tiles, such as these
morsels of irradiated cheese, are
controlled by frames in movie clips
Backing up
The gameboard background,
including all the walls, is an image
created in Illustrator
Tile techniques
The tiled gameboard used in Pac-Rat
is created using a multidimensional
array of tile types
30 Set the sprite
To tie the mouse to the code, create a new movie clip
symbol named and exported as ‘UserSprite’, with the AS
2.0 class set to UserSprite as well. Inside this, create three
layers: ‘hit’, ‘graphic’ and ‘bounding box’. Set the bounding
box layer to guide and outlines and draw a 30 x 30px box.
60 | Web Designer
054-060_WD120.indd 6
31 Prepare for collisions
Drag a copy of the mouse body to the graphic layer and
scale and centre it in bounding box. On the hit layer, draw a
transparent rectangle inside the mouse body to represent
the hit area for the sprite. Turn it into a movie clip symbol
named ‘hit clip’ and name the instance ‘__hit_mc’.
Better bitmaps
Bitmap caching is used to enable
better performance since vectors do
not have to be redrawn
Timeline animation
Animation of the character sprites is
done using nested timeline animation,
keeping separate from code
Mouse over
Containing sprites within the grid
is done using ActionScript to check
board position
32 Game over
Duplicate UserSprite and call the copy ’identifier’ (AS 2.0
class EnemySprite). From PacRat.fla, drag the Message
and Scoreboard clips into your movie and copy the last
ActionScript files to your directory. On the timeline, delete
step nine’s code and replace it with “new PacRat(this);”.
15/6/06 09:44:03
 Tutorial Photoshop

THE BRIEF
ON THE CD Design explosive
desktop wallpaper
Tutorial files:
atomic explosion.psd,
Space Invader 1680x1050.psd,
Superb night shot skyline.jpg

TUTORIAL OBJECTIVE
Create a desktop pattern using vector
graphics, bitmaps and layer effects
GIVE BORING WALLPAPER THE BLAST-OFF WITH THIS STUNNING
TIME REQUIRED
Up to two hours SPACE INVADERS-INSPIRED CITY SCENE
SKILL LEVEL WE’RE TAKING YOU back in time with this tutorial,
back to when roller skates were cool, Grange Hill was
good, and Space Invaders was the only game worthy of your
pocket money at the arcade. To create this wallpaper we’ll be
combining vector graphics, this time adding a 3D feel that can
be faked thanks to Photoshop’s move-and-copy function.
To bring the artwork into context we are going to be adding
a retro twist in the form of the granddaddy of all games,
Space Invaders. We will then be creating some retro graphics
that have that pixel vibe but on a huge scale. We’ll also be
bringing the original Space Invaders artwork bang up-to-date
by applying a 3D effect and working in some subtle lighting
effects, giving the overall feel of a B-movie explosion-fest.
Some of the techniques used here cover Photoshop’s finer
points, and once mastered they can be used in a variety of
ways to achieve spectacular results. Once you’ve completed
this tutorial, why not try applying these 3D techniques to text,
buttons, and other site elements?

62 | Web Designer

062-067_WD120.indd 1 15/6/06 09:49:37

 Your expert
Rodger Page is a new-media designer and multimedia editor who Design explosive
desktop wallpaper
has been using Photoshop and Flash for years. His plans are to teach
digital arts at a college or university, but for the moment enjoys
authoring CD and DVDs here at Imagine Publishing.

01 Cropping to fit 02 Filter effects 03 Level it out

Select the city image and open it in Photoshop. Select
the Crop Tool (C) and enter the following values: Height
1680px by 1050px at 72dpi. Drag out your crop box so that
you have more of the sky than foreground. This will give
you more room to fit in the invaders we’ll be adding.
Head to Filter>Artistic>Cutout, and enter the following
values: No. of Levels: 8, Edge Simplicity: 1, Edge Fidelity: 2.
This effect blocks out the colour and flattens detail, giving
it a vector image feel. It adds to the overall effect, but you
can leave out this step if you prefer.
To optimise the image and make it feel more like a desktop
pattern, we need to make the background pure black.
Navigate to Image>Adjustments>Levels, select the black
colour picker and click on an area of sky that’s about 80%
black. Bring up the highlights slightly and click OK.

04 Invader creation 05 Go with the grid 06 Vector shape

Create a new document 1000px by 1000px at 72dpi and
RGB. Create a new layer and name it ‘invader 1’. To help
you design the spacecraft, search the Internet to get some
ideas. Recreating an invader as a vector object will allow
you to resize as many times as you wish with no distortion.
As the invaders are made up of basic blocks, a grid makes
it easy to build the spacecraft. Select View>Show>Grid and
ensure Snap To Grid is on. From Photoshop>Preferences
select Guides, Grid & Slices. Change the Gridlines to 100
pixels and subdivisions to 4 and click OK.
Select the Pen Tool, and with vector shape layers selected
at the top, follow the grid to create the invader. The path
should automatically snap to the lines. To make things
easier, hold down Shift to ensure a perfectly straight line.
Choose a fill colour of red and name the layer.

07 Bring in the invader 08 Duplicate the layer 09 Lighten up

Select the Move Tool, highlight your space invader layer
and drag it into your main image. Transform the scale and
the perspective of the invader (Apple/Ctrl+T), holding
down Apple/Ctrl to transform the perspective. This will
help the overall 3D effect, really making it stand out.
Duplicate the space invader layer (Apple/Ctrl+J), double-
click on the colour thumbnail next to the vector mask and
change the fill to black. Hide the black invader layer and
highlight the red invader layer. The hidden layer will form
the basis for the 3D depth of the space invader.
The red space invader should automatically rasterize when
you select a filter, so choose Filter>Render>Lighting Effects,
and enter: Style: Soft Spotlight, Light Type: Omni, Intensity
& Focus: 100, Material: -100, Exposure: 50, Ambience: -50.
Move the light source until you are happy and click OK.

Web Designer | 63

062-067_WD120.indd 2 15/6/06 09:51:14

 Tutorial
10 Layer fake
Select the Move Tool (V) and, holding down the Alt key,
press the down arrow once and then the left arrow once.
You will notice that there are two new layers created in the
layer palette. Repeat this about 20 times (down, left, down,
left, and so on) for each axis to fake 3D extrusion.
13 Second shooter
Go back to your invader document and draw out another
invader. Again, find an original invader to give you an idea
of what to draw – there are many different variations out
there so choose one of these or get creative. Follow step
six, but this time choose a green fill colour.
16 Position the monster
Position the monster on the horizon so that when we
come to add the layer mask he will fit perfectly on the
ground or behind the buildings. Select Hard Light from
the blending mode menu in the layer palette to make the
monster look more solid, and set the opacity to 80%.
64 | Web Designer
062-067_WD120.indd 3
11 Merge the 3D
You should now have a nice 3D extrusion effect to the
space invader, but about 40 layers are needed to achieve
the full effect. Now select or link all the black invader layers
and merge them together, leaving you with a main image
and the black merged 3D effect.
14 Add the 3D effect
Drag the new invader layer into your image and follow
steps 8 to 12. Change the transform and perspective to
match the invader’s direction. When duplicating the 3D,
hold down Alt and press the up arrow and the right arrow
to change the direction to top right instead of bottom left.
17 Glow for it
From the layer effect menu, select Layer>Layer
Style>Outer Glow. Select a deep orange colour and set
the blend mode to Linear Light. In the Elements section,
choose these settings – Technique: Precise, Spread: 0%,
Size: 16%. Set the contour to Cove – Deep and click OK.
12 Add layer effect
With the black space invader layer highlighted, select
Layer>Layer Style>Gradient Overlay. Click the gradient
colour, make it red-to-black and click OK. As the 3D effect
is on a 45-degree angle, match this with the angle of the
gradient to add to the effect of distance and perspective.
15 Creature feature
Browse the Internet for an image of the Space Invaders
monster. Once you have found a good one, use Photoshop
to draw your own version, adding a thick white stroke
around it. Copy and paste the monster into your image
and transform him down so he’s not too big for the scene.
18 Monster mask
Add a layer mask to the monster via Layer>Add Layer
Mask>Reveal All. Select the Brush Tool, ensure black is the
foreground colour in the tool bar and paint the monster’s
foot where it touches the ground. (If you position him
behind a building, fill him in to reveal the building.)
15/6/06 09:51:33

19 Explosive effects
Open the explosion image, select the Pen or Lasso Tool,
and cut out the bottom half of the mushroom. Using
the entire explosion would appear too menacing – the
colours are vibrant so using a section should be more than
enough. Copy the selection and paste into your image.
21 Make a selection
Make a selection of the explosion by holding down Alt and
clicking the thumbnail of the explosion in the layer palette.
Now make a feather of the selection (Select>Feather) and
enter a radius of 30px. The selection should appear more
rounded and slightly cropping into the image.
23 Into the shadows
We are now going to give the impression of heat rising.
Select Layer>Layer Style>Drop Shadow. Ensure Use Global
Light is not selected, set the angle to -90, the blend mode
to Hard Light, the colour to red, distance to 60px, Spread
as 20%, Size to 163px and finally click OK.
062-067_WD120.indd 4
20 Baby boomer
Transform the explosion (Apple/Ctrl+T) and reduce the
size by about half. Again, the image is meant to be light-
hearted – a big explosion will just look too over-the-top.
Position the explosion somewhere below the green
invader to give the impression that it is firing on the city.
22 Blend the explosion
Now with the feathered selection, select Layer>Add Layer
Mask>Reveal All. Invert the selection (Apple/Ctrl+Shift+I)
and with black set as the foreground colour use the Brush
Tool with a feathered edge to paint black on the layer
mask, blending in the edges of the explosion.
24 Dual explosion
Duplicate the explosion layer (Apple/Ctrl+J) and transform
the scale (Apple/Ctrl+T) to increase it by about a third
and hit Enter. Now change the Blend Mode to Hard Light,
decrease the opacity to about 30% and position the layer
below the original explosion.
Design explosive
desktop wallpaper
TECHNIQUE
Size matters with
desktop images
We are going to create three different
documents with differently proportioned
resolutions in order to suit any desktop
01 Crop tool
Layer effects are relative to the size and resolution
of the document. Therefore, there are two methods
of scaling down the document. First of all select the
Crop Tool and enter 1280px by 1024px at 72dpi.
02 Reposition objects
From the top left of your document, draw out the
crop box so it reaches the bottom of the image. Do
not crop the image; instead, grab a vertical guide
and position it to the right edge of the crop box.
03 Layer up
One by one, select each layer and position it to
the left of the guideline. This will ensure that every
element is position on the page and not chopped
in half, keeping your creation’s effect intact.
Web Designer | 65
15/6/06 09:51:51
 Tutorial
IN DETAIL
Explore the third dimension
Creating 3D effects in Photoshop can take a fair few
layers and a bit of copy-and-move manipulation,
but the results are certainly worth it!
FANTASTIC 3D objects can be created using the Move
Tool while holding down the Alt key and pressing one
of the directional arrows. This copy-and-move function
will duplicate and move an object one pixel in any one of
the four directions chosen by using the arrows. But the

25 Big up your brand
The main image is almost complete, but we need to give
it more of a desktop feel and add some branding. First we
are going to add a vector graphic, so select the Pen Tool,
ensure that Shape Layers is selected, and in the bottom
left corner draw two white graphics to house your logo.
drawback of this is not only that you’ll end up with lots and
lots of layers, but also that it is difficult to create a 3D effect
that is not on a horizontal, vertical or 45-degree angle.
For example, to create a 3D depth that extends about 30
degrees towards the bottom right, you have to hold down
the Alt key and press the right arrow three times and the
down arrow once – then repeat this until it has extended to
the desired size. But if you have a specific angle in mind, the
only way to find the result you want is to experiment, and
this sort of experimentation involves a huge stack of layers,
we’re afraid. But we have a neat tip to help you with this. A 45-degree angle consists of moving down once and right once,
Deleting layers can seem quite tricky in later versions and this will give your alien more depth
of Photoshop, so make sure that you save your document
before you begin to extrude the object. Simply reverting
back to the saved original if the effect doesn’t work out how
you planned will mean that you don’t have to go through
the mind-numbing process of deleting the umpteen newly
created layers. Another useful tip is that holding down the
shift and the Alt key and moving an object will shift the
newly created layer ten pixels in the desired direction – this
can make life easier if you quickly want to copy and paste a
layer and move it out of the way of the original.
If you’ve followed the tutorial and you’re happy with this
3D-creation process, it’s time to get a bit experimental. A

26 Add your logo
Add your own personal touch to the artwork by promoting
your URL and logo. Open up your artwork and copy and
paste the details into the main image. Depending on the
colours contained in your logo, you might need to add a
white stroke layer effect to make sure it stands out.
cool effect to try is to add a Bevel and Emboss layer effect
(Layer Styles>Bevel and Emboss) to the original layer and
then create the 3D effect as in the tutorial – this will apply
the layer effect to each of the newly created layers and give
a smoothed overall finish to your alien creation. Play around with combinations to achieve different angles to suit
the artwork you’re working with and the effect you want to achieve

27 Game gurus 28 A history lesson 29 Maker’s mark

In homage to the revolution that was Space Invaders, we
are going to add some history. So again select the Pen Tool
and draw a second vector shape to house the history text.
Position this in the bottom right-hand corner of your main
image and in line with your logo.
Once more, search the Internet for some relevant
Space invader history to add to the image. Create a text
box within the second vector graphic and type some
background text into it. Type in a header like ‘History 1978’.
We’ve set the font colour to white so that it stands out.
Search the Internet for the Taito Logo. Open it in
Photoshop and create a selection using the Lasso or Pen
Tool to make a vector shape to enable you to resize and
transform. Create a vector shape layer via Layer>New Fill
Layer>Solid Color and choose a light grey.

66 | Web Designer

062-067_WD120.indd 5 15/6/06 09:55:00

 Design explosive
desktop wallpaper

Easy 3D
Fake a 3D effect by using the copy- Add perspective
and-move function then merging to Transform the perspective of the
build up a multi-layered depth invader to suit the direction it’s
moving in for added realism

Masking layer
As a final homage to the company
that developed Space Invaders, add its
logo as a subtle background detail

Brand your creation

Add your logo so that people know
who the creator is, and add a URL to
encourage them to visit your site

Explosive effects
Adding the explosion and playing
around with the blending options will
achieve fantastic results

30 Transforming Taito 31 Blend into the back 32 Building blocks

Drag the Taito logo into your document and increase the
scale (Apple/Ctrl+T) – because it is a vector shape it will not
distort the graphic if the scale is increased. Holding down
the Apple/Ctrl key, change the perspective of the logo to
lean off to the right as above.
Position the logo so it sits just above the background layer;
this will ensure that the explosion effect is applied to the
logo and give it more depth. Set the blend mode to Screen
and the layer opacity to around 20% to ensure that it
doesn’t take attention away from our invaders.
We want the logo to sit behind the building, and the
easiest way of achieving this is to add a layer mask and
then paint over the building. Select Layer>Add Layer
Mask>Reveal All, and with black selected paint over the
buildings to reveal them. And you’re done!

Web Designer | 67

062-067_WD120.indd 6 15/6/06 09:55:46

 Tech support
Don’t fret over under-performing pictures! Send in your
Photoshop vexations and we’ll get our expert on the case
Q Export expertise
Hi, Web Designer! I would like to know if there
is an easy way to export image elements from
Photoshop and import them into Dreamweaver?
I am new to the web design area, and I mainly
create my interfaces in Photoshop and then
copy and paste each button or image out into a
new document and save each component out
individually. As you can imagine this is becoming
quite irritating, so I wondered if there is an easier
way of creating the web elements.
Rob Clifton
A You may or may not know that Adobe has
bought Macromedia for a hefty sum and
is promising seamless integration for all of
its related creative apps, so there are some
exciting times ahead in terms of making our
lives that little bit easier. It is even possible to
purchase Studio 8 with a copy of CS2 inside
(it will be interesting to see how the products
will be named). The way you are going about
exporting your separate elements is the
easiest way of doing things, but as you said
“Adobe is promising seamless integration
for all of its related creative apps, so
there are some exciting times ahead”
Slice up your document, making sure that the slices are exact to the pixel, then use the Save for Web
function to export and name the separate slices
68 | Web Designer
068-069_WD120.indd 1
yourself it is very boring. All is not lost, as
Photoshop and Dreamweaver can already
speak the same language, that of HTML. This
was a smart move on Adobe’s behalf, as most
of the designers that I know (myself included)
mock up the interface in Photoshop first and
then export all the relevant components.
So if you have an interface you’ve created
within Photoshop, using the Slice tool will
enable you to isolate selected areas of your
interface or even the entire document. The
key to getting this technique right is ensuring
all of your Slices are exact down to the pixel,
and choosing the correct file names. But
you do still have to go into to Dreamweaver
and clean things up like grouping images
into tables or layers and deleting redundant
imagery from the HTML page and the image
folder, as you don’t want to be taking up
valuable server space.
Opening your Photoshop HTML document
is a good place to start and means that you
don’t have to sort through your imagery and
import your main images. But to really take
Use the Save for Web function to export your image as a PNG
advantage of this you should try exporting
selected slices and objects and their rollover
states. For example, if you have a list of
buttons and their rollover states on different
layers, by selecting all the button slices and
using a relevant file name like ‘menu_button_
01.jpg’ and ‘menu_button_ro_01.jpg’ for the
rollover state you can manage your work flow
a lot more efficiently and take away those
laborious tasks.
Q Shadow work
I have a Photoshop document that has some
components that I want to use in Flash, namely
some graphics with drop shadows and some
other layer effects. I know that I can create a drop
shadow in Flash, but I don’t think they look as
good as the ones you can create in Photoshop. I
have tried using a GIF with transparency turned
on, but it still appears with a white halo.
Ian Benjamin
A The old chestnut of file formats. The two main
image file formats that we use for the web
are GIFs and JPEGs. GIFs are a lossless format
that compresses the graphic and does not
affect the quality but can only be used on solid
colours and contain no more than 256 colours,
so this tends to be good for simple graphics
such as buttons. JPEG is a lossy file format that
can handle continuous tone up to 16 million
colours but reduces the quality of the image to
achieve the compression.
If a JPEG is open and saved frequently the
image will begin to distort irreparably and
begin to look blocky, so the rule of thumb is
to always have a high-res version such as a
TIFF or PSD, then export the JPEG. You can
get away with resaving a JPEG about three or
four times (depending on the compression
amount) – just try opening and resaving a
JPEG a few times and zooming in to see the
15/6/06 10:10:04

If you have a problem, and no one else can help, send it in to the
Web Designer team! We’ll do our best to print your problems on our
pages, but we cannot reply personally to every email.
Send your queries to:
Tech support
Your expert
Rodger Page is a new-media designer and multimedia editor who has been using
Photoshop and Flash for years, and he is also a regular contributor to Web Designer’s
Photoshop tutorials. His future plans are to teach digital arts at a college or university,
but for the moment enjoys authoring CD and DVDs for a range of magazines with the

webdesigner@imagine-publishing.co.uk rest of the digital crew here at Imagine Publishing.

damage caused. There is an alternative in
the PNG file format. This combines the best
of both worlds, lossless compression and a
continuous tone. But the massive drawback
is that the most popular web browser in the
world, Internet Explorer, does not support it
(although Safari, Firefox and Opera do).
There is hope that Microsoft might see the
light and support this file format, since SWF
and PDF file formats already support it. This
opens up the possibilities as you can create a
PNG with, say, a drop shadow in Photoshop
and import it into Flash maintaining the alpha
channel, but SWF files convert the PNG and
embed it as a JPEG.
to 100% to add texture. For a more even
texture, tick the Restrict Colors box and click
OK. In the Options bar, set the gradient to
Linear Gradient. Create a new layer and draw
a vertical line from the top to the bottom of
the work area. To remove the colour from the
lines go to Image>Adjustments>Desaturate.
This creates a Greyscale pattern. Increase the
contrast via Image>Adjustments>Equalize.
Set the gradient layer’s blending mode to
Color Dodge. Now only the lighter lines will be
visible. Reduce the Opacity of the layer to 50%
to make the scan lines more subtle. Select the
photo layer, and use Image>Mode>Greyscale
to take the colour out of your original
shot. This should leave you with a fantastic
Expert advice
Using the file browser
For those of you who do not have a Mac and therefore
do not possess iPhoto, then using Photoshop’s
integrated file browser will allow you to quickly
and easily view any image on your computer and
effortlessly open in Photoshop. The bonus of using this
integrated feature is that the file details are displayed
– such as colour profile, dimensions, file size – along
with a whole host of other information (mostly aimed at
photographers). As in iPhoto you can also sort images
with a ranking system from A to E to easily categorize
images and get to your favourites in no time at all.

Q Under surveillance
I’m working on a website for a local band, and
I want to give the promo images that gritty
surveillance camera effect.

look, as though they’re taken on a surveillance

camera. How can I rough up the shots?
Joel Larson

A Here you need a bit of Gradient Tool know-

how, Joel. You can use this to add video-style
scan lines, giving images a caught-on-camera
effect. Select the Gradient Tool and click on
the Gradient Editor at the top of the work area.
Change the Gradient Type to Noise to add The Gradient Tool isn’t just for colour sweeps. You can
bands of colour. Now increase the Roughness create convincing camera effects with a few key tweaks

Technique: Sharpening the professional way

Q I am really into my digital photography and enjoy putting images on the
Internet. But I am more of a designer than a photographer and as such I’m
have few blanks when it comes to digital imaging. My biggest problem is
the Sharpen filter – I always end up with a white halo around my subjects.
A There are two ways of going about sharpening your images. The first is
via Filter>Sharpen>Unsharp Mask and moving the sliders around to find
a nice balance between a sharp image and where the halo appears. The
second way is a bit trickier and is what professional photographers use and
Is there a way to improve sharpness without creating a halo? involves converting to LAB colour (Lightness and Colour channel A and B).

01 Convert your image 02 Select the channel 03 Apply the filter

Open up your image and select Image>Mode>Lab
Colour. You will notice that unlike converting your
image to CMYK converting to Lab does not affect
the colour at all. Open up your Channel palette by
selecting Window>Channels.
There are three channels. L stands for Lightness
and is basically what you get when you convert an
image into greyscale. A is the range Red to Green
and B is the range Blue to Yellow. In Channels,
highlight the lightness to isolate that channel.
From the Filter menu select Unsharp Mask and move
the sliders around to get a nice balance of sharpness
before the halo becomes overwhelming then click
OK. Finally, convert your shot back to RGB and your
image will be perfectly sharpened with no halo.

Web Designer | 69

068-069_WD120.indd 2 15/6/06 10:10:16

 Tutorial Photoshop

THE BRIEF
ON THE CD
Tutorial files:
Shapes.psd,
Go retro with pixel art
Street.psd PHOTOSHOP IS ADEPT AT MUCH MORE THAN JUST IMAGE EDITING.
TUTORIAL OBJECTIVE IT’S TIME TO GRAB THE PENCIL AND START LEARNING HOW TO
MAKE PIXEL ART – THE TRENDIEST OF RETRO ART FORMS
To get a handle on the basics of
creating pixel art in Photoshop

TIME REQUIRED
Up to four hours
DESPITE COMMON PRECONCEPTIONS, pixel art is actually
pretty straightforward. In fact, if you’ve already tried your
SKILL LEVEL hand at other genres like photo illustration, abstract images or
vector art and found that you’ve no real talent for it, chances
are that you’ll find that you get on a bit better with the logical
machinations of building images pixel by pixel.
Making this kind of artwork is actually a lot like building
a model. It requires a logical approach, obeys strict rules
(although, of course, these can be broken to some degree if
necessary) and enables you to add in as much or as little detail
as you like. It’s also extremely satisfying, although it can suck
up vast amounts of your time if you’re not careful. The thing is,
you won’t care, because you’ll be having too much fun.
Of course, pixel art was born during the arcade boom of the
Eighties and its history is steeped in computer entertainment.
So, what better style of art is there to employ when making
an online game? Here, we’ll show you the basics of drawing
images one pixel at a time, then move on to demonstrate how
to build cool game settings using the skills you’ve developed.
So, on with the show…

70 | Web Designer

070-075_WD120.indd 1 13/6/06 15:11:55


01 Set up Photoshop
Photoshop is configured so that artists can create smooth
lines that look more like real brush strokes than pixellated
jaggies. But jaggies are what pixel art is all about, so first
you need to call up Preferences (Edit>Preferences>
General, or Photoshop>Preferences>General on a Mac).
04 Zoom on in
With the canvas created, the next step is to zoom right
in so that you can place individual pixels with complete
precision, building up an accurate picture. Grab the Zoom
Tool and click on the canvas until you’re at 1600% zoom
(yes, you’ve read that right). Now to set up the tools.
07 Using diagonals
This is the basic principle behind making diagonal lines,
so continue placing sets of two pixels side-by-side, then
moving one line upwards and repeating. You can also
travel in any of the four diagonal directions using this rule,
as above. That’s the basis for everything you build.
070-075_WD120.indd 2
02 Interpolation issues
Photoshop blends lines using anti-aliasing, referred to as
Image Interpolation. It wraps a set of pixels around each
line, blending it in with those around it and softening it
in the process. We need to shut this off, so under Image
Interpolation, switch from Bicubic to Nearest Neighbor.
05 Set up the Pencil
When making pixel art, the tool you’ll use most is the
Pencil. To select it, click and hold on the Brush in the
toolbar until the fly-out menu appears, then click Pencil.
Use the Brush settings on the Options Bar to set the size to
one pixel. Hit D to ensure the foreground colour is Black.
08 Making cubes
Using this technique, you can start to build up shapes.
Above, we’ve created a simple cube as a demonstration.
Notice how we’ve drawn vertical lines to mark the corners,
and how the places in which they are positioned differ in
each example to give a slightly different look to the cube.
Go retro
with pixel art
03 Retro resolution
Hit OK and open a new document via File>New. Pixel art
is a blocky art form that has its roots in video games, so
it requires the canvas to be set at ‘screen resolution’, or
72 pixels/inch. So, enter this value in the Resolution field.
Choose a Width of 640 and Height of 480 and hit OK.
06 Drawing lines
Pixel art lines need to adhere to the correct angles. We’re
placing jagged diagonal lines, but they look precise when
they adhere to the ‘two across, one up’ principle. Create
a new layer and start by placing two black pixels side-by-
side, then place one diagonally upwards to the right.
09 Colouring in
Colour shading produces that 3D look. Select the Paint
Bucket Tool, uncheck Anti-alias in the Options Bar and pick
a bright red for the front-left face. Click inside the face to
fill it. Pick a darker red for the front-right face, and a lighter
shade for the top. This shading rule applies to all shapes.
Web Designer | 71
13/6/06 15:12:17
 Tutorial
10 Making spheres
Making spheres requires more a more careful technique.
Select the Elliptical Marquee Tool and uncheck the Anti-
alias box in the Options Bar. Hold down Shift and draw a
circle. Right-click on the shape, select Stroke, enter a Width
of one pixel, set the colour to Black and hit OK.
13 All in a dither
When you’re looking to make tube shapes, you’ll need to
employ a spot of manual dithering to make the shading
look convincing. But don’t worry – it’s quite easy. All you
do is create a lattice-like blend between shades, as you can
see in the pegs in the above examples.
16 Building a scene
Right, now that you’ve got the basics, it’s time to put it into
practice and start building up a scene. Start with a canvas
of 800 x 600 at 72 pixels/inch, then create a new layer and
use the Pencil to sketch out a rough street scene. Reduce
the sketch’s opacity to around 25% on the Layers palette.
72 | Web Designer
070-075_WD120.indd 3
11 Manual shading
When shading spheres, you need to colour it in by hand.
Bring up the Swatches palette (Window>Swatches), locate
the strip of yellow shades and use these to colour the
sphere. Using the Pencil Tool, paint each colour band to
follow a slightly curved edge to make it look more 3D.
14 Getting quicker
You now know the basics of how to create objects, but
there are various things you can do to make the process a
bit quicker. It’s wise to learn the shortcuts: Pencil (B), Paint
Bucket (G), Zoom (Z), Eyedropper (I), Draw Straight Lines
(Hold Shift), Switch Foreground/Background Colour (X).
17 Trace the design
With the sketch faded a bit, create a new layer on top of
it, zoom right in and start using your new pixel art skills to
trace over the key elements. For these buildings, the key
is to think of them as being just large cubes, so repeat the
instructions found in steps six to eight.
12 Now for the highlights
To finish off the 3D look and to give each shape a sparkle,
it’s a good idea to add in some highlights. Select White
on the Swatches palette, then add a flash of white in
the middle of the lightest shade of yellow. You can add
highlights to the cubes by replacing the Y-lines, as above.
15 Use your imagination
As with most styles of artwork, the best way to increase
your knowledge is to experiment. Try making objects that
demand different techniques, and try to vary them from
simple shapes to more complex designs. Here, our trees
and fountain showcase some more unusual shapes.
18 Colour it all in
Now that the scene has started to take shape, you’re ready
to add in some colour. Grab the Paint Bucket Tool, choose
a colour and start filling in the edges of the buildings,
obeying the shading rules. If colours spill out into the
picture, make sure your drawn lines are contiguous.
13/6/06 15:12:53

19 Start adding detail
The basic part of the image is ready, so your time will now
be spent adding in all the little details that make pixel art
so interesting and worthy of close scrutiny. Here, we’ve
started by drawing in a curb on the street, then adding
other road elements like a yellow restriction line.
21 Bricking it
One of the most important pixel art skills is making
convincing textures, so let’s practise by adding some
brickwork to the sides of the buildings. Zoom in to around
500%, and with the Pen Tool loaded with a grey colour,
start drawing out a small area of brick pattern as above.
23 Take it away
You’ll end up with a load of pattern layers in the Layers
palette, so when you’re finished covering the wall, select
them all and merge them together. Make the brickwork
more interesting using the Pencil (set to the original wall
colour) to paint out a few lines here and there.
070-075_WD120.indd 4
20 White lines
To make sure that the road looks like a road and not just an
extra-large pavement, finish it off by drawing white lines
up the centre. Once you’ve drawn one, you can select it
with the Rectangular Marquee, switch to the Move Tool,
hold down Alt and drag to copy it to another location.
22 Copy and paste
Don’t worry, you don’t have to painstakingly draw bricks
across the entire wall. Once a section is completed, use the
copy-and-paste trick from step 20 to highlight the texture,
then start placing them around the wall. Make sure that
each stamp lines up with the existing pattern.
24 Hole in the wall
Now let’s turn the grey building into a bank. We’ve
added a blue band at the bottom of the wall to give it a
high-street look and constructed an ATM machine in the
bottom-left corner. It’s easy to do – just create a border
and drop in elements like the screen, keypad, card slot etc.
Go retro
with pixel art
TECHNIQUE
Layering up your
pixel elements
Layers are a great for helping you draw
items that overlap other elements
without damaging the items underneath
01 Fade it out
The best way to experiment with how an element
will look is to draw it on a separate layer. We’ve
added a skirt to the bank by creating a layer, fading
the bank opacity, then letting loose with the Pencil.
02 Testing, testing
Once the element is in place, see how it looks by
whacking the opacity back up to 100% on the layer
below. It’s overlapping parts of the bank and cinema
signs, but their original pixels are still underneath.
03 Merge it down
Once you’re happy the new element, you can
permanently add it to the main image by merging
the layers. Select the layers in the Layers palette, then
click the small arrow at the top and hit Merge Layers.
Web Designer | 73
13/6/06 15:22:03
 Tutorial
IN DETAIL
Guiding lines
Can’t be bothered to draw out every single pixel
individually? Neither can we, so here’s a way to cheat
your way to a pixel-perfect artwork
WHEN YOU COME to draw large pixel art scenes,
it’s all too common to sit and stare at a blank page
while you abstractly ponder the sheer amount of time and
effort you’re about to invest in placing all those teeny-tiny
blocks of colour, one at a time. The thought can be a bit

25 Tackling text
Text can be a bit of a pain for pixel artist, but there is a way
to make it simple. Here, we’ve created an advert to go over
the ATM that reads ‘Mortgage’. To make it, first create the
sign background, then grab the Type Tool, select Arial and
set it to 10pt, draw out a frame and start typing.
depressing, but fear not; there is a crafty technique you can
use to cut your drawing time dramatically.
Basically, all you need to do to kick-start your image is to
first create a set of guides that obey the angle rules, which
you can use as you develop your pixel scene. To do this, start
by creating a new layer in your document, grabbing the Pen
Tool and zooming on in to a close-up view.
Now, click and hold the mouse to place your first point,
then hold down the Shift key and draw downwards. You’ll
automatically create a long, straight line.
Next, find the approximate mid-section of the line and Creating a guide can save a great deal of time when you come to
start to draw lines that bisect it, ensuring they follow the draw large pixel art scenes
two-across, one-up rule. When you’ve done this, move to
the Layers palette and reduce the opacity of the layer down
to something like 45%. Now your guide is in place, and
you’re ready to start using it.
Now, you can start to create your main image by creating
a new layer above the guide layer, then using the Move Tool
to move the guide around to the point at which you want to
start drawing. For example, to use it to build a quick cube,
simply position the guide, select the layer above it to draw
onto, then single-click to place the first pixel at a point on a
guide line. To quickly extend the line, all you need to do is
hold down the Shift key and single-click the mouse at the

26 On the skew
Next, you’ll need to skew the text so that it matches
the slant of the sign. To do this, use the Layers menu to
rasterize the text, then select Edit>Transform>Skew. In
the Options Bar, enter a Set Vertical Skew value of -26.565
degrees. You should find it now lines up perfectly.
point you want the line to end. Then just rinse and repeat
for every line in the cube.
Using this technique you’ll find that building the base of
complex scenes is made much easier, and it will help you
quickly create fine detail that adheres to the angle rule. You Here, we’re using the guide to help us trace over our sketch of the
can now concentrate on where your imagination takes you! street scene. It makes drawing the buildings so much quicker!

27 Paint more in 28 See right through 29 Time for a film

Now that you’re used to painting in details, get creative
on the rest of the bank. Here, we’ve created some steps
leading to the doors, a huge BANK sign and a window with
lots of things going on behind it. Oh, and we’ve added a
banana skin. Humour is very important in pixel art!
Creating transparency effects is simple. To make a window
look see-through, just use paler colours when drawing
items set behind them. You can finish things off by
creating a new layer, painting in white reflections in the
corners, then dropping the Opacity to 40%.
When you’re happy with the bank, tackle the rest of the
buildings. We’ve opted to turn the yellow one into a
cinema, so we’ve created a huge billboard on the top, used
the text skew trick to add in some movie times, and put a
cranky old air conditioning unit on the top.

74 | Web Designer

070-075_WD120.indd 5 13/6/06 15:22:22


Textures
Save time when making textures by
drawing a small section, then copying
and pasting it around the image
Cashing in
Drawing details like this ATM make
the scene come alive, and will have
viewers peering in for a closer look
30 Movie posters
To add some more humour to the scene, we’ve had some
fun thinking up some images for the film posters. Again,
use the text skew technique to do the words, and then
carefully draw the pictures with the Pen Tool. These don’t
have to obey the strict angle rules either, so just have fun!
070-075_WD120.indd 6
Look inside
Create the appearance of transparent
windows by using paler shades when
drawing the items behind them
Break the rules
Although the majority of your work
has to obey strict angle rules, don’t be
afraid to break them occasionally
31 Pixel overflow
Talking of breaking the rules, it’s often a good idea to add
a prominent item to the scene that flaunts the pixel art
angle laws to soften the piece. Above, we’ve drawn in a
drainpipe, placed a drain beneath it and then drawn a
higgledy-piggledy water stain that leads into the gutter.
Go retro
with pixel art
Word up
Creating text in pixel art is really pretty
simple – just remember to skew it to
26.565 degrees
Sign of the times
Don’t forget to add humour to
your images, because it’s a staple
ingredient in pretty much all pixel art
32 It’s all in the details
Pixel art is all about adding details, so you’re only ever
done with a piece once you’ve run out of things to add.
The more items are in your picture, the more interesting
it will be for others to look at. As ever, when you’re happy
with your work, don’t forget to save it.
Web Designer | 75
13/6/06 15:22:43
 Tutorial
Dreamweaver

THE BRIEF
ON THE CD Build a snap game with
HTML and JavaScript
Tutorial files:
Index.htm, cardback.jpg,
1.jpg through to 8.jpg,
and cardblank.jpg

TUTORIAL OBJECTIVE
Coding a card pairing game using
only HTML and JavaScripting

TIME REQUIRED WE SHOW YOU THAT CREATING FUN WEB MINI-GAMES NEEDN’T
One hour 30 minutes RELY ON FLASH WITH THIS SIMPLE YET EFFECTIVE EXERCISE
SKILL LEVEL WHEN WE CHARGED ourselves with the task of drumming
up this issue of gaming bliss, we made a promise that
Dreamweaver fans wouldn’t be left out in the cold. So rather
than ridiculously shoehorning the most dynamic examples of
web tomfoolery into HTML equivalents, it was imperative to
be creative about our limitations. With pointing and clicking
pretty much the extent of the interactive possibilities, we’ve
raided the classic card game of snap to demonstrate what a
spot of JavaScripting can achieve. Ultimately, the premise is
about flipping a grid of face-down cards in sequences of two
until you locate the matching sets in as few moves as possible.
Our version uses a technique of image-swapping to represent
a preshuffled array of paired numbers that changes each time
you refresh the page. Easily customisable to feature your own
card images or pair sets, this shows how creative coding can
enliven your content without Flash.

76 | Web Designer

076-081_WD120.indd 1 15/6/06 15:24:36

 YOUR EXPERT
Mark Billen is the deputy editor on Web Designer and has an Build a snap game with
HTML and JavaScript
extensive knowledge on online development. His background is in
software engineering with a degree from Bournemouth Uni, where
his penchant for messing with HTML and JavaScript first took hold.

01 Card sharp 02 Back side 03 Some front

The first stage of building our game is all about producing
the set of playing cards. We don’t want them to be too
big, around 90 by 130 pixels is fine, but once you have one
blank card sorted it becomes easy to make the rest by just
replacing the main image.
Before you begin placing all the main card images, we
need a standard design for the card backs. Here we’ve
added our Imagine logo to the blank card by just reducing
the graphic down and pasting it into position. Once happy,
simply save the new graphic as ‘cardback.jpg’.
With the card backs sorted, it’s time to create the actual
cards. We want to use 16 cards made up of only eight pairs
of unique designs, so we therefore need only eight image
files. Create a set of eight cards using the same blank card
shape and save each one as ‘1.jpg’, ‘2.jpg’, and so on.

04 Fresh start 05 Table turning 06 Rack ‘em up

You should now have a total of nine main image files
including all the card fronts and the single card back. With
those ready, we can now start up Dreamweaver and open
a brand new blank HTML document that we can use to
start laying out all our gaming elements.
The layout of our game is a straightforward grid, with
all the cards laid face down. We need a table that can
accommodate 16 cards, so dimensions of four columns by
four rows is an obvious choice. Each cell will hold an <img>
element containing the cardback.jpg as its ‘src’ property.
Fill up the remaining cells of the 4 x 4 table with the
cardback.jpg image objects, and feel free to set the
cellspacing or cellpadding properties so the cards are
neatly spaced out. The table can then be aligned to the
centre of the page as shown in the screenshot.

07 Name calling 08 Cursor change 09 Check your hand

If you flip to Code View and locate the image elements in
our table, you can go about naming each card object. This
is a vital step that will be required by our code, so, starting
with 0 and counting up to 15, attach each value to the
name= property of every image tag that carries a card.
As an extra cosmetic detail for our cards, we want to
switch the mouse cursor at runtime so it suggests some
interactivity. We’ll place the style=”cursor:pointer”
property into every card image element so that the mouse
arrow changes to a pointy hand icon on rollover.
Save the page as ‘index.htm’ and open it in your chosen
browser. We’re using Internet Explorer throughout this
tutorial, but you should see the page as shown with the
mouse cursor switching to a hand as you glide over the
cards. Close the page and then return to Dreamweaver.

Web Designer | 77

076-081_WD120.indd 2 15/6/06 15:24:58

 Tutorial
10 Script writing
Back in Dreamweaver’s Code View we need to begin our
coding steps by placing some fresh <script> tags between
the title and body tags. Set the language property to
“JAVASCRIPT” and the type field to “text/javascript” as
shown, remembering to add the ‘<!--‘ comment tags .
13 Last variables
Only two more global variable declarations are required,
with firstCard a holding object that will temporarily store
the first overturned image element. Finally, we have ‘pair’,
which grabs the first selected pair number from the cards
array so as to reference which card image to load.
16 Test run
A good trick is to write some temporary test code so we
see the shuffle function working. Setting up a quick for
loop that cycles through each element in the cards array
and adds each to a string that is then outputted using
document.write() is a good way to achieve this.
78 | Web Designer
076-081_WD120.indd 3
11 Array we go
To start, the initial few lines of code we require are the
definitions for two array variables. The first, called ‘cards’,
has 16 elements that are listed in its parenthesis as ordered
pairs of values from 1 to 8. These values represent ‘virtual’
cards in the code, while a second equal length array called
‘matched’ logs any paired cards.
var cards = new
Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8);
var matched = new Array(16);
14 First function
We need a special method that shuffles the pair values in
our cards array so that the running order changes each
game. Function shuffle(deck), shown here, will process the
cards values by randomly changing their positions within
the array and therefore performing a shuffle.
function shuffle(deck){
var i=deck.length; //get the deck length
if (i==0) return false;
while (--i){
var j=Math.floor(Math.random()*(i+1));
var temp=deck[i];
deck[i]=deck[j];
deck[j]=temp;}}
17 Shuffle show
Save the page and fire it up in IE or your chosen browser.
The page should show a line of the shuffled numbers from
our cards array that will change position every time you
refresh the page. This demonstrates that the foundation of
our game works effectively. We can now attach the cards.
12 Initialise this
Immediately after those two array definitions we need
three global integer-based variables that must be
initialised on declaration. The first, named ‘clicked’, acts as
a switch for allowing only two cards to be picked at a time,
while the next two are counters for pair matches and total
moves. The latter must be set to 1.
var clicked = 0;
var matchCount = 0;
var moveCount = 1;
15 Make the call
Now that the shuffle function has been added we can
insert the line that will invoke it and pass the unshuffled
cards array into it. Straight after the last global variable
declaration for ‘pair’, enter the line: shuffle(cards); as shown
above. This will run automatically when the page loads.
18 Flipping function
It’s clear that we now need some code that will perform
the card image swapping on the basis of which card is
picked in relation to the corresponding card value in the
cards array. Underneath the shuffle function we’ll start a
new one called turnOver(e), with e being the image object
that will invoke the function.
function turnover(e){
//image swapping code to go here
}
15/6/06 15:25:21

19 Clever cards
The first line of code we need in our new function is an ‘if’
statement that will make a decision about whether there
are matches left to be found or whether the selected card
has been matched – in which case that card is effectively
removed from the game and can no longer be turned over.
function turnover(e){
if (matchCount<8 & !matched[e.name]){
//swapping code to continue here…
} }
} }}
21 Card copy
If this is the first turn, we need a record of which image
was clicked so the line firstCard=e; fills our blank variable
with the clicked image object. We’ll also grab the first array
value from cards at the element position denoted by the
image name and pop that into our global variable ‘pair’.
if (clicked<1){
firstCard=e;
pair=cards[firstCard.name];
}else{
23 Doubling up
The line of code we wrote for the swap must also be added
after the else condition of our main if(clicked<1) statement.
It is altered slightly to replace the ‘pair’ variable with
cards[e.name], before we begin a new nested if…else that
checks the variable pair does not equal cards[e.name].
}else{
e.src=document.images[“load”+cards[e.name]].
src;
if (pair!==cards[e.name]){
//no match code to go here
}else{}
} }
076-081_WD120.indd 4
Build a snap game with
HTML and JavaScript
TECHNIQUE
Adding a
move counter
20 Nest making Put some competitive edge into our
We now need a nested if…else statement straightaway
that checks the state of the variable ‘clicked’ to check
game by displaying how many moves
you’ve made
whether it is less than one or equal to one. This determines
whether the current move is the first or second.
function turnover(e){
if (matchCount<8 & !matched[e.name]){
if (clicked<1){
//first move
}else{
//second move
01 Good form
Place form tags around our table and add two rows
to the bottom with <tr>. Inside each, place cells with
<td> that span four columns and align right and
center This is where we’ll place a read-only text box,
‘moves’, and a reset button with onClick=”history.go()”
22 Swap shop
Next we need to perform the actual image swap to
reflect the value found in the cards array. We’ll do that
by changing object e’s src property dynamically so it
grabs a preloaded image of the card we want from a set
of invisible layers we’ll add in a minute. The name of the
object will be obtained by “load”+pair.
if (clicked<1){
firstCard=e;
pair=cards[firstCard.name];
02 Move display
e.src=document.images[“load”+pair].src;
clicked++;
}else{
It’s simple to put the value of our global variable
moveCount in the text box. Go up to turnOver() and
insert document.forms[0].elements[0].value
=moveCount++; after the first line of the first if. This
will increment the counter and display the value.
24 Alert you
The first line of our code for a non-match is vital. We’ll use
a javascript alert box to confirm an unsuccessful move so
that it creates a break in the code before both upturned
card images are turned back face down. Otherwise our
players won’t see the cards for long enough to remember
their position.
03 All done
if (pair!==cards[e.name]){ If you save the page now and load it in your browser
alert(“That’s not a match, try again!”); you’ll see that the counter text box counts upwards
}else{ as you turn over the cards, while the refresh button
//match code to go here should successfully reload the whole page and start
a new game with a reshuffled set of cards!
Web Designer | 79
15/6/06 15:25:33
 Tutorial
Customising the game
25 Hide away
Next we’ll switch our selected card images back, which
are referred to in the code via firstCard and e, by changing
their src properties to our cardback.jpg image that will be
preloaded into another invisible layer object, which we’ll
add to the body of our page alongside the others.
if (pair!==cards[e.name]){
alert(“That’s not a match, try again!”);
firstCard.src=document.images[“load0”].src;
e.src=document.images[“load”].src;
}else{
//match code to go here
} declaration for the cards array and increase the number
IN DETAIL
How to go about expanding or personalising your new game of
virtual snap, thanks to a little bit of creative licence and some simple
tweaks to our JavaScript listings. It really is that simple!
ALL THE TUTORIALS in this month’s issue have been
designed to be tinkered with and tailored however
you wish, and this one is no exception. Fairly obviously, it’s
pretty simple to pick your own graphics for the cards or
draw totally new ones with the principles explained here.
As long as you remember to name the files as sequential
integers from, say, 1 to 8 or 1 to whatever, then you
shouldn’t have any problems.
Of course, to expand the game with more cards will
require subtle changes to the code before it will work. For
starters, you’ll need place further value pairs within the
of elements in the matched array beyond 16. It works the
same way in reverse if you want to reduce the number of
cards, but apart from those minor alterations it should all
operate perfectly. Just don’t forget to add to or subtract Replacing the card images with your own graphics is really simple,
the amount of card images on the page, and also adjust the and this way you can get the game to suit your site
set of hidden layers that act as preloaders for all the unique
card fronts that the code swaps in as you play. That way you
shouldn’t have any problems.
You might also want to try finding a better way of
declaring a non-match during the game so that the

26 Match maker
The second part of our if…else statement deals with
a match, so although we don’t need to swap any card
images back, we must set some date into our global
variables. Our ‘matched’ Boolean array must have those
elements that correspond to the paired images set to true,
while matchCount can be incremented by one.
}else{
matched[firstCard.name]=true;
matched[e.name]=true;
matchCount++;
} www.webdesignermag.co.uk/forum.
alert() box doesn’t keep popping up and obstructing the
cards. Perhaps you could go one step further and add a
countdown timer to make everything more tricky for the
player, and create something cool to announce when
someone loses or triumphs.
Why not keep a log of who has finished in the quickest
time and with the fewest moves, adding competitive
encouragement to the game? The scope is pretty much
limitless, so have fun, and be sure to let us know how you
get on. If you create an interesting variation on this game
– or indeed any of the others in the magazine – we’d love to
see them, so post a quick link on the Web Designer forum at Adding or subtracting the amount of cards isn’t all that tough
either, and you can customise the game messages as you please

27 Clicked back 28 Read through 29 Layer maker

After the closing bracket of our nested if…else statement
and just before the closing bracket of our first one, we
must add the line: clicked=0; to initialise the variable back
to zero whether a match has been found or not. This will
allow our code to accept a pair of new turns.
Make sure all the opened braces of our if statements all
have a closing one otherwise the code won’t run, and
you should end up with the completed function code as
shown above. If you’re in any doubt, make sure you copy
out the final listing from ‘index.htm’ as found on the CD.
To speed up our code, we’ve used a set of invisible layers
to hold additional image objects containing all eight card
images plus the single cardback.jpg graphic. Add these
after the main <body> tag, naming each “load0”, “load1”,
etc, with each ‘src’ field set to the corresponding image file.

80 | Web Designer

076-081_WD120.indd 5 15/6/06 15:25:54

 Build a snap game with
HTML and JavaScript

Flip side Prompt box

Clicking a card turns it over and swaps We use a JavaScript alert to inform the
in an image that relates to an array of player of a bad match and delay the
shuffled values cards flipping back

Card objects
These image elements represent our
playing cards and always start off the
game face down

Start again Counting cards

To restart a game we’ve added a form A simple move counter displays how
button here that literally just refreshes many clicks you’ve taken so far during
the page completely a game, adding a competitive edge

30 Event call 31 Save page 32 Test it!

One final step before our game can operate correctly: at
present our turnover function is good but it has no trigger
to run it so we must set a call within the image objects
themselves. Inside the tags for each of our original cards,
place the onClick=”turnover(this);” line to attach the code.
Remove any superfluous code you may have added to test
any variable values along the way, as in step 16, and then
save the final document. A quick preview in Design View
should see the page looking like this before you then open
it up in your browser.
The game can now be loaded up and should play with
no problems at all, although you might find little glitches
across certain browsers. Check out the technique boxout
on page 79 to find out how to add the neat little move
counter box and reset button as shown in this final shot.

Web Designer | 81

076-081_WD120.indd 6 15/6/06 15:26:08

 Tech support
Dreamweaver developments ending in despair? Never fear – our resident expert
Steve Jenkins exercises his coding skills as he answers your burning questions
Q Straight to the top
I know that there is are a variety of options for
designing a page, but I generally use tables and
links to connect the pages together.
However, I often see a page where there is
a link that says ‘back to top’. When pressed this
takes the user to another section of the page.
This is a method I would like to use for my
site’s FAQ page. I’m sure this is relatively easy to
achieve, but really don’t where to start. I look
forward to your reply.
Jason S Brightman
A
To achieve this on your own pages, Jason,
you need to adopt anchors. This is a relatively
simple process but one that can cause
problems when you do not know quite how
to tackle it. A position or element of a page
Q On form
is selected (often the image header) and an
anchor added. A link is then set up to jump to
the anchor.
To set up an anchor, first select the image
or position on the page. Next head to the
Insert menu and select Named Anchor, this
“I would like to change the style of the
Submit or Reset buttons I use, matching
them to my revamped forms”
Adding an anchor will enable you to navigate to an exact location on the page with a single click
82 | Web Designer
082-083_WD120.indd 1
will reveal the related dialog box. Now give
the anchor a relevant name, such as ‘Top’, and
press OK. To link to the named anchor select
the appropriate text or image and type #Top
into the Link box in the Properties window.
To link to an anchor in a different document
in the same folder, type in the file name
followed by the name of the anchor, eg,
filename.htm#Top. (Note that anchors are
case-sensitive.) By default, anchors are
invisible in Design View (and of course in
the browser itself). To view anchors in a
Complete the customisation of a form by creating and adding a
page, go to the View menu and select Visual
matching Submit button
Aids>Invisible Elements.
In Issue 119 of the Dreamweaver Technical
Support, the Technique section told readers
how to make forms look more interesting. I
followed the instructions and now have all
my forms matching the theme of the page
they reside in. This makes my website look far
more professional, but to complete the form
A As with many of the default Form elements
customisation process I would like to change
the style of the Submit or Reset buttons I use,
matching them to my revamped forms. Could
you explain how to do this?
Tiana Bowman
contained within Dreamweaver, the Submit
button reveals itself to be a little dull and grey.
As described in the previous issue, CSS plays
a big part in transforming the look and feel
of form components such as a text field, text
area and even a drop-down list.
To a certain degree, an attached stylesheet
is able to transform a Submit button. Using
CSS the actual text of the button, eg ‘Submit’,
can be modified to match any of the styles
within the attached stylesheet. Simply select
the submit button and then choose a style
from the Class drop-down list found in the
Properties window.
To insert a completely new button style, an
image needs to be used. So, first the Submit
button needs to be created using an image-
editing package such as Photoshop or Paint
Shop Pro. It is a good idea to create a button
that is not much bigger than the original (so
stick to approximately 70 x 25 pixels). Try a few
different dimensions to see what suits your
site best (remember that the button cannot
be adjusted once in place). With the image
ready, head to the Insert menu and select
Form>Image Field.
Now select the newly created button and
press OK to add it to the form. The image will
be automatically named ‘imageField’ in the
Properties window. Change the name of the
imageField to ‘Submit’ and save.
You’ll now see that the brand spanking new
image performs the same function as the old
dull grey Submit button, and your site should
have that ultra-professional look that you
were after, Tiana.
15/6/06 10:11:37

If you have a problem, and no one else can help, send it in to the
Web Designer team! We’ll do our best to print your problems on our
pages, but we cannot reply personally to every email.
Send your queries to:
Tech support
Your expert
Steve Jenkins is a keen designer and developer who started creating websites
while attending Bournemouth University, and loves tackling the most teasing of
Dreamweaver problems. He has been a Dreamweaver advocate since the heady days
of version three, creating a wide range of site for clients and for personal use. To see a

webdesigner@imagine-publishing.co.uk sample of Steve’s work take a visit to www.thesouthend.co.uk.

Q Expert advice
Text appeal
I am creating a new menu system for my website
and want to use a text-based approach, but I
still want it to look exciting. So, to make the new
navigation system more interesting I want to
drop in a coloured background to each link that
changes colour when the mouse cursor rolls
over that link. I hope that this makes sense and
that you can help.
Luther Briggs
{background: #99FF00;} </style>.
In the above code, Td.off is the initial colour
while td.on is the changed colour. Now add
the following code for each row of the table:
<td class=”off” onmouseover=”this. Setting layer properties
className=’on’” The viable alternative to tables is layers, because they
onmouseout=”this. flexibility in page layout and reduce the page weight.
className=’off’”><font color=”#000000” However, before using layers it is a good idea to have an
understanding of their properties.
size=”1” face=”Verdana, Arial,
First there is the ID tag, which is essentially the name
Helvetica, sans-serif”>Menu 1 </
of the layer – this needs to be relevant and unique to
font></td>. avoid any confusion. Next is the L, T, W, H (Left, Top,
The code needs to be modified to add your Width, Height) boxes, which give the exact positioning

A Your request certainly does make sense and

it’s easy to get some decent-looking and
quite interesting results with the help of some
coding. Using colourful rollover links is a great
own text and font. To change the font, simply
add the name of the font you want to use
in place of the Verdana, Arial, Helvetica,
sans-serif part. To modify the actual link text,
and size of the layer. The Z-Index decides the stacking
order of layers, with one being the bottom and 2,3,4,
etc, stacking on top. Finally there is Vis, which has
four options: default, inherit, visible and hidden. This
way to jazz up a web page without increasing change Menu 1 to the text you want. specifies whether the layer is initially visible or not.
loading times with large images, so here we’ll
look at how it’s done.
Creating the menu is a two-part process
involving the addition of some style tags in
the head of the documents and some code
within the table that contains the links. First
create a table with as many rows as you need
(one row for each link).
Next, decide upon the initial colour
and mouse over colour before adding the
following code between the <HEAD> tags.
<style type=”text/css”> td.off { Use a few simple lines of code to add a splash of colour
background: #99CC00;} td.on and direction to your navigation

Technique: Add shadows with CSS

Q Browsing the web I have come across sites that use drop shadows on
what I guess are tables and images. I have being trying to think how this
is possible without much luck. The only solution I can think of is that a
background image has been used or CSS involved in some way. I hope
A Both of your suggestions do provide some sort of answer to the solution of
creating drop shadows. Using a background image will provide a solution,
but it does have a few issues that need to dealt with in an exacting nature.
A practical alternative is to use CSS, which uses layers to create the original
you can shed some light on this issue for me. container and the drop shadow.

01 Establish elements 02 Put in place 03 Custom design

To start, we need three elements between the
<style>tags. These are called .container, .shadow,
.shadow .innerdiv. Container positions the element,
shadow determines the size and shadow colour, and
the inner div is the top layer containing the text.
To display the elements in unison the following code
needs to placed in the body. <div class=”container”>
<div class=”shadow”> <div class=”innerdiv”>
<b>Your text here</b> <br /> More text. </div>
</div> </div>. This will display all the elements.
The text can be styled (via the Properties window
or a stylesheet). Images can also be inserted via the
normal procedure (Insert>Image) plus the shadow
colour can be modified and the main container
resized (via Shadow and Width).

Web Designer | 83

082-083_WD120.indd 2 15/6/06 10:11:48

 Tutorial
Dreamweaver

Y repeat
The X repeat value counters its Y
sibling and repeats an image across
the top of the page

Y repeat
The Y repeat value will send any image
repeating down the left-hand side of
the page, as shown here

Key branding
Recreate your company name and/or
logo using a selection of sizes and
colours to suit your site
Image opacity My body
Reduce the opacity of the text, Background properties and values
background or complete image to need to be applied to a tag - BODY is
make sure it does not clash with page the favoured son here

THE BRIEF
ON THE CD Managing background
images with CSS
Tutorial files:
N/A

TUTORIAL OBJECTIVE
Learn how to place background
images using CSS

TIME REQUIRED CSS OFFERS A HOST OF VALUES THAT CAN MANIPULATE, MODIFY AND
30 minutes POSITION IMAGES. HERE’S HOW TO POSITION A BACKGROUND PERFECTLY
SKILL LEVEL THE IMAGE IS an essential element of the web design
process, and Dreamweaver 8 offers the option to present
it in a number of ways. Headers, links and titles are the popular
choices, but the background image in tandem with CSS offers
a new set of rules. This tutorial is dedicated to showing the
background set of properties and values that can be applied
to an image. Positioning is the key element here, ably assisted
by the repeat value. As with all CSS properties and values
they need to be assigned to a tag, and body is the obvious
starting point. This will give any of the background properties
plenty of scope. However, for the more adventurous, the same
properties can be applied to alternatives, such as the table tag.
Before delving into the more structured elements of
background, we’ll open with background-image. By default
this will display the image across the entire page. Add a value
and the whole premise changes, offering far more control.

84 | Web Designer

084-088_WD120.indd 1 15/6/06 10:14:01

 Your expert
Steve Jenkins is a keen designer and developer who started creating Managing background
images with CSS
websites after attending Bournemouth University, and loves tackling
the most testing of Dreamweaver problems. To see a sample of
Steve’s work, take a visit to www.thesouthend.co.uk.

01 Name site 02 Server technology 03 Images folder

Before delving into the world of CSS and background
images, we are going to define a site to place any files
created. First head to the Site menu and select New Site
to open the Site Definition dialog window. Name the site,
add the URL and press Next to continue.
Next, choose whether a server technology is to be used
before pressing Next and selecting a location in which
to store any HTML files. The next step requests how to
connect to the remote server. At this point select None (as
this can be set up later) then press Next followed by Done.
When defining a site, a single folder is created to store all
the files created during the design. Good design practice is
to create a folder to store any images together. Head to the
location of the original site folder and create a new folder
inside called ‘Images’.

04 Image creation 05 Incorporating logos 06 Image selection

With a site defined the next step is to open an image
editor in which to create your site background (we are
going to use Photoshop). This image can be created in
a number of guises, for example, a large single image, a
small repeating image or a variation on the theme.
For this tutorial we are going to create a number of images
to demonstrate the different options available when
using a background image. The first image we are going
to create is a variation of the Web Designer logo with a low
opacity to use as a repeating background.
Alongside the image created in the previous step we have
put together a more basic repeating image, which would
be ideal for a background. In addition to this we have
created an image with a shadow, which will be ideal to
place along the top or left of a page.

07 Start a new site 08 Add style tags 09 CSS syntax

With all the necessary images created, the next step is to
head to Dreamweaver and create a new page. Without
adding any content save the page (File>Save As) and give
it a relevant name, eg, ‘template.html’. Now flip the page
over to the Code View ready to add the CSS code.
Any CSS code created in a HTML page needs to be placed
between style tags to be effective. At the top, locate the
<HEAD> tags. Place the following code between the
<HEAD> tags, ensuring there is a gap between the tags:
<style type=”text/css”> </style>
Now it is time to start adding the relevant code, but
before we jump into the action we are going to note how
CSS syntax is written and displayed. The standard syntax
has a selector or class name and a set of brackets with a
property and its value, as shown in the screenshot.

Web Designer | 85

084-088_WD120.indd 2 15/6/06 10:14:12

 Tutorial
10 Body selector
In this first demonstration we are going show how to set
a repeating background image. CSS applies its code to
HTML tags, and for this demo the body tag is going to be
the selector. This will allow the image to repeat across a
whole page and completely fill the screen.
13 Sneak preview
It is now a good time to save the page, so head to the
File menu and select Save As and name the file, eg,
‘template.html’. Now flip back to Design View to see how
the background image works. To view this working in a
browser, head to File>Preview in Browser.
16 Straight up
With the background-repeat: repeat code in place it is time
to take control of the image. There are two options for the
repeat command. First there is repeat-y, which repeats the
image down the page (by default to the left). For this, add
-y to the present code, ie, background-repeat:repeat-y.
86 | Web Designer
084-088_WD120.indd 3
11 Repeating code
Add body { } between the style tags (adhering to the
syntax setup) and type in background-image: between the
brackets, as above. We need to add an image to complete
this step, so press the space bar to create a gap after the
colon and select Browse from the list that appears.
14 Alternative image
To view an alterative image repeating across the page
simply head back to Code View and add the name of an
alternative image. Now save the page (File>Save or use
the keyboard shortcut Apple/Ctrl+S), head back to the File
menu and select Preview in Browser.
17 Horizon lines
The alternative to repeat-y is repeat-x, which performs the
same task but runs the image horizontally across the top
of the page. To change the direction and placement of the
image change the background-repeat:repeat-y code to
background-repeat:repeat-x. Save and preview the page.
12 Background imagery
Browse to the location of the file created previously (or any
other file you want to use) and press OK. The appropriate
code is then placed inside the body tag. By default, this will
be the URL or the local location. To be effective online this
may need to be changed, eg, ‘images/imagename.jpg’.
15 Repeating yourself
Head back to Code View to edit the body tag. Place
the cursor after the semi-colon and hit return. Add
background-repeat: repeat, then save and preview (it will
look exactly the same). The repeat statement controls how
the image is presented (by default it fills the page).
18 Just the once
There is a third value that can be used with background-
repeat: no-repeat. This stops the image repeating in any
direction, only displaying the chosen image once. By
default the image will appear at the top left of the page.
Add no-repeat in place of repeat-y or repeat-x.
15/6/06 10:14:22
 Tutorial
IN DETAIL
Beyond the basics of CSS
The basic elements of the CSS background property get the ball
rolling, but its real power lies further ahead. Practise your coding
skills and you’ll find layouts far easier to manage
THE BACKGROUND property has been given a workout
across the last few pages. However, there is a host of
related paraphernalia that has been left out, so here we’ll
delve into the alternatives and extensions that can be
applied to create more efficient code and greater control.

19 Right in the middle
CSS employs another background value that allows an
image to be positioned in a predefined location: top,
bottom, left, right or centre. Create a new line and add
background-position: center. Replacing center with an
alternative will place the image in a different position.
Dreamweaver does go some way to assisting with the
background image control. Head to Page Properties and
Appearance offers the option to add a Background image
plus the standard repeat values. This instantly provides the
necessary tag, selector, properties and values for the basics,
making it the ideal starting point.
However, this approach is limited. For real control and a
better understanding of the background property, a spot of
hand-coding is needed. This will educate users on how to
write and lay out code – even one missing semi-colon can
cause a total breakdown! The code syntax on display is the Adopt the CSS short-hand approach and reduce both your
basic or long-hand method of CSS coding, which is ideal for workload and the file sizes. It’s easier than you think!
newcomers. However, as stylesheets grow they can become
more difficult to read.
An alternative is CSS shorthand. This will reduce the scale
of the page and prove a real time saver as less coding is
involved. For example, you may have CSS that runs as:

body {
background-image: url(images/wdlogo.jpg);
background-repeat: no-repeat;
background-position: center;
}

20 Combo moves
The combination of background-position: and
background-repeat: can be used to place the background
image in various positions. Try using the background-
position: center; with background-repeat: repeat-x; (or
repeat-y), save the page and then preview.
This can be reduced to the following two lines for easier
visibility and smaller file sizes – try it and see!
body {background: url(images/wdlogo.jpg)
no-repeat center;} Create a background image with borders, shadows and texture,
and then control the positioning precisely

21 Positive positioning 22 Scrolling image 23 Create a stylesheet

The background-position: mentioned earlier has a
selection of predefined locations available. However, these
do not give precise positioning, which can be achieved by
replacing a position with pixel quantities. Add 10px 300px
after background postion:, then save and preview.
Finally, there is background-attachment, which has two
values, Scroll and Fixed. Scroll allows the background
image to travel with the page as it scrolls. Fixed allows the
image to retain its position when the user scrolls the page.
On a new line, add: background-attachment: scroll or fixed.
We’ve created the relevant code to manipulate a
background in the HEAD of the page. This needs to be
copied into a CSS file, allowing it to be linked or imported
to an HTML page. Go to File>New>Basic Page>CSS, add
the code (without style tags) and save it for future use.

88 | Web Designer

084-088_WD120.indd 4 15/6/06 10:14:35

 SecureTrading
has been in the
transaction handling
business since 1997

Ukash lets users

SET UP YOUR SITE TO SELL WITH OUR GUIDE TO

perform or accept
transactions
MAKING MONEY IN THE NEW DOT COM WAVE

without a credit

Merchant banking
or debit card

A NEW INITIATIVE FROM LEADING PROVIDER BRINGS A

SPECIAL OFFER FOR WEB DESIGNER ONLINE TRADERS
ALTHOUGH THE DADDY of online transaction
handlers is undoubtedly PayPal, if only through its
tie-in with eBay, there are other options for processing
cash. SecureTrading is actually the UK’s leading
independent light in this market, having facilitated
monetary transactions between Internet vendors
since 1997. With close links to revolutionary payment
networks such as www.ukash.com, the firm is currently
celebrating the success of a partnership programme
called ST Together (www.securetrading.com).
Launched back in November 2005, the scheme
is open to developers, ISPs, or anyone involved in
producing and hosting ecommerce sites. Signing up
costs nothing and entitles you to earn 15 per cent a
month in commission for as long as your trader is live
and in business. As an extra incentive to Web Designer
readers you’ll be entitled to a £50 introduction fee when
joining ST Together and introducing a merchant who
subsequently goes live.
The special sign-up pack also includes a free USB
flash drive carrying all the necessary documentation
that a partner needs to get up and running. A brochure
with all the instructions and stipulations that you need
to know can be requested by emailing together@
securetrading.com or by calling 0800 028 9151 and
quoting ‘Web Designer Special Offer’.

VAT’s the way we like it

CALLS FOR AN EU CLAMP-DOWN ON INTERNET VAT
DODGERS FAILS TO GET OFF THE STARTING BLOCKS
OBJECTION FROM Germany, Luxembourg and finance ministers could not reach agreement, however,
Portugal has brought a halt to a revision of VAT and at this early stage any concrete legislations appear
rules at the European Union. Despite discussions to have been placed on the back burner.
positive preliminary discussions, a re-evaluation of
how the trading tax is implemented on the web has
stalled at the interim stage. Within an e-retail context,
VAT is currently charged at the rate dictated by the
THIS
Month
country in which the merchant is based, and not set
by the rate where the buyer resides. This loophole
has been blamed for encouraging Internet vendors
to shop around for the lowest VAT nations and set up
operations there.
WEB IDENTITY Somewhat unsurprisingly, those parties in
94
Why passwords are passé opposition to any reforms are those presently
benefiting from increased VAT windfalls due to
INSIDE VIEW
96
Get government grant backing
migrating firms, with the Portuguese island of Madeira
enjoying a dispensatory rate of just 13 per cent, while
ECOMMERCE GALLERY
98
HMV’s revamped web shop
Luxembourg is charged just two per cent more. The
latter hosts some of the biggest online retailers in
Amazon, iTunes, eBay, and AOL, and therefore provides
WEB HOSTINGS
100
Choose your perfect deal a wholly legal and understandably lucrative haven from
the EU’s grab hand. Meetings amongst Europe’s chief

Web Designer | 93

093_WD120.indd 1 13/6/06 15:35:09


YOU WANT TO KNOW who visits your site the information you want to know about them,
and to welcome back previous visitors. You without having to learn the details of every
want users to sign up for accounts, special offers identity system on the Internet.
and all the other things that help turn them from Thinking about what the information you need
passer-by by to regular. If they’re shopping with is the first step; plan to use the least information
you, you want to know who they are, where they you can rather than trying to take a life history
live and whether it’s their credit card they’re and it will be easier to update your site to work
using. You can do that with a traditional user with the new identity technologies as they
name and password system easily enough; mature. Use date ranges like ‘over 21’ or ‘between
the controls in ASP.NET 2.0 let you create a
membership database and login page just by
dragging and dropping onto your entry page. “Passwords aren’t secure enough
But passwords aren’t secure enough for sites
that need real protection, and they irritate users
who don’t want to have to manage another
for sites that need real protection”
identity for anything trivial. We’re starting to see 25 and 40’ rather than insisting on a full date of
the first real pieces of what’s being called the birth. You won’t be able to check back against a
Identity Metasystem: technologies that work validated database today, but you’ll be ready for
together to make signing in more like using a when you can.
hard drive or a network connection, where you
use common protocols rather than starting THE INFOCARD VISTA
from scratch to support individual systems. In Now that beta 2 of Windows Vista is out – and
the long run, you should be able to accept the available to end users as well as the original
identity that your visitors want to use, and extract technical testers – people can start to generate
their own InfoCards. These are XML
descriptions of the information in the
InfoCard, like name, age, email address,
credit card number and so on, but the
InfoCard doesn’t have the actual name,
address or other information in it. Instead,
when the user visits a site that accepts
InfoCards and picks which of their cards they
want to present then the InfoCard tells the
site where to retrieve that information from.
If they’ve issued the card themselves, the
information comes from an encrypted file
on their PC (although in the future it might
be on a USB flash drive, a mobile phone or
retrieved from a web service).
If they’re using an InfoCard from VeriSign
VeriSign lets you include any information you want in your profile, and this is information a (which will use InfoCard with one-time
website can see if you give it permission. This way, the user controls their own details passwords generated by security fobs to log
94 | Web Designer
094-095_WD120.indd 1
GET YOUR SITE
READY FOR IDENTITY
2.0 BY TRYING OUT
THE SERVICES YOU
CAN USE NOW AND
PLANNING FOR THE
NEXT STEP. MARY
BRANSCOMBE
IDENTIFIES WHAT YOU
NEED TO DO
in to sites like eBay, PayPal and Yahoo! through
its Identity Protection Network), or their bank, or
an airline frequent flyer program or anyone else
who can verify the claims they make about their
identity, the information comes from a Security
Token Server at the identity provider. The identity
provider asks the user for their password – or
for a certificate, Kerberos credentials, biometric
ID or whatever security mechanism they’ve set
up. You don’t see that
password; you just get
the information you’ve
asked for.
This is all done with
web services, including
WS-Metadata Exchange, WS-Security, WS-
SecurityPolicy and WS-Trust, and it’s secured by
site certificates, so if you want to accept InfoCards
you need an X.509v3 SSL certificate. This
identifies your organisation rather than the URL
of your site, and includes a link to your company
logo so it’s easier for users to tell that your site
is really the bank or shopping site it claims to
be (find out more at www.ietf.org/rfc/rfc3709.
txt). You use the same GET and POST commands
you’d use for a username and password login
(and you still write to a browser cookie). You don’t
write the username login or lay out the form:
instead you use an OBJECT tag (the object is type
“application/x-informationCard”) or an XHTML
link that brings up the InfoCard selector in
Windows. Currently that’s only in Vista, although
Microsoft will add it to earlier versions of
Windows like XP and hopes that other operating
system developers will create secure identity
selectors as well. You also need code to accept
the claims you get back from InfoCard (and to
direct your now-identified user into your site).
Those claims can include the user’s name and
address, email, phone number, date of birth and
gender. Identity providers can also add their
own fields – like a frequent flyer number – to
14/6/06 17:49:40

an InfoCard. The information is separated out,
so you can check which country they’re from
without needing the entire address. And instead
of getting the full date of birth, you might just
get a confirmation that they’re in the age range
you specify. Get into the habit of thinking about
the least information you need to work with; the
user will see who you are and what information
you’re asking for before the InfoCard sends it.
Many users view cookie files with suspicion (and
delete them!) because they don’t know what
information they store or who they send it to.
Or you might get back the Private Personal
Identifier. Think of that as a nickname; it doesn’t
tell you any more about them than the user
name they’d pick to sign into your website,
but you know that instead of an easy-to-guess
password proving they’re the same user logging
in each time, it’s their InfoCard and they have
the convenience of being able to use the same
identifier for every site.
OPENING ID
The current beta releases of IE7 understands
InfoCards. Microsoft is talking to other browser
developers about adding support, and it only
takes about 30 lines of code to add InfoCard
support to a Windows application or a web
service if you use the Windows Communication
Foundation. But until Windows Vista ships next
year there won’t be many InfoCard users, and
until other operating systems pick up the idea it
will only cover Windows users. OpenID (www.
openidenabled.com) doesn’t have as many
features, but it is available now. This system uses
URLs as the basis of an identity on the grounds
that most of us have a web page we point people
to when they want to know more about us, so
why not point other sites there as well?
Someone who has a blog on www.livejournal.
com can use the URL of this blog to identify
themselves at a site using Movable Type or
094-095_WD120.indd 2
“OpenID uses URLs as
the basis of an identity”
TypePad instead of creating a new account – and
a TypePad user can comment to a LiveJournal
post in the same way. You can create a wiki with
an OpenID at Schtuff or use it to upload photos
to Zooomr. If you don’t have an OpenID from
a site like LiveJournal, you can get one from
MyOpenID (www.myopenid.com) or Verisign
Personal identity Provider services (http://pip.
verisignlabs.com) (both are free). You can create
profiles, each with a specific set of information
you’re willing to share, and choose which to use
on different sites. MyOpenID and PIP use the
Yadis discovery protocol (http://yadis.org) to
work with OpenID, and the Simple Registration
extension for taking information from a profile
instead of asking the user to fill in a form.
Enabling OpenID for your site involves more
programming than using InfoCard but the
libraries to work with it are available for Python,
PHP, Ruby, Perl and C#, with a Java library in
development. Programming for these open
identity systems still means learning the details
of how they work; if you want to use the Google
or Yahoo! authentication APIs or the OpenPGP
API or to support LDAP identities, you have to
understand them in detail and write specific
code to support them. The Higgins open-source
project hopes to simplify working with a variety
of identity providers and systems by producing
plug-ins that translate their APIs and protocols
to an abstraction layer that you can work with in
the Eclipse IDE. Higgins will support InfoCard and
OpenID, as well as LDAP, SAML, Active Directory,
XMP (the Extensible Messaging and Presence
Protocol), Extensible Resource Identifiers, Firefox,
Internet Explorer, Lotus Notes, Exchange, Groove,
Outlook and Workplace. It’s still at the draft stage
and none of the plug-ins are complete; expect
version 1.0 in 2007.
Further in the future, Intel is looking at moving
authentication away from the identity service
and onto your PC (or PDA or mobile phone).
STAYING SECURE
Windows Vista beta
2 lets users create
their own InfoCards
or install cards from
identity services
Instead of sending a password over the Internet,
the password or fingerprint or smartcard is
authenticated by a service running in a secure
partition on your PC – or using Bluetooth to
check the SIM on your mobile phone. Once the
PC is authenticated, you can trust anything on
that PC to be who it says it is.
All the major players are looking for ways to
create secure, portable identities, and in time
users will start to expect them. Now’s the time
to plan for a future in which your site can use
identities from a variety of systems. You won’t
have to maintain a database of usernames and
passwords or offer help for users who forget
them. Users won’t have to keep track of dozens
of different login credentials, none of which they
care enough about to keep secure. And with only
one place to update their details when things
change, your information about them is more
likely to stay up to date.
Separate how you identify and authenticate
users, and make sure the areas you send them to
don’t depend on the way you currently identify
them, and you’ll be ready to switch to the new
wave of identity tools as they mature.
Users can see which sites have used their OpenID for authorisation and the IP address
of the machine that was connecting to the sites
Web Designer | 95
14/6/06 17:36:12
 INSIDE VIEW

Ecommerce grants
PAUL STEWART, MANAGING DIRECTOR OF CYBERSHOPUK, EXPLAINS THAT THERE IS
SUCH A THING AS A FREE LUNCH FOR THE BUSINESS-MINDED WEB DESIGNER
SINCE 1999, CYBERSHOPUK has been working The steps involved
with web designers and business owners to explore in getting your
how the Internet can be used to their advantage. hands on grant
money are simple
These days we could be discussing a diverse list of
matters that includes providing them with training
them on broadband Internet telephones, payment
solutions, how to use online order management
systems, how to access government grants and
much more. Ecommerce is now more than just
showing people how to add a shopping basket to
their site. Ecommerce is a change in fundamental
thinking that shows them how to maximise the
Internet and how it can become their lowest paid
yet most profitable new employee!
The UK Government, supported by a number
of EU initiatives, is keen to help. Over the past 12
months, CyberShopUK has been working alongside
Business Link in Somerset to show business
owners how to apply for grants that are available
to assist with the cost of broadband, web design,
ecommerce, and training. Take the example of a source, so it is important to check in your area. The the router or other equipment. A second grant for IT
local wedding photographer. He already had a amounts available by way of grants vary, but tend to kit had to be used for the PC, router and other costs.
website. It was full of wonderful pictures of other be about 50% of the overall cost of a project. What Obviously, the grants are being sent out for a
people’s weddings, plus of course full contact is covered also varies. In one case the client was able purpose – to increase the financial viability of the
details. The site was, in effect, a brochure in to claim for broadband equipment, monthly ISP fees, business and the region. An audit is carried out to
electronic format. What the photographer needed assess if the grant money
was an electronic salesperson, employed to
generate orders and take money on his behalf. “Ecommerce is now more than actually made a difference to
the income of the business.

TAKING IT FOR GRANTED just showing people how to add Each grant provider has
its own target in terms of
Government grants have enabled us to attract the
attention of the business owner, who of course
jumps at the first hint of any 'free' money. Through
a shopping basket to their site” how much return has been
made in the area due to the
funding. Check to see what
the Connecting Somerset initiative, our wedding web design, ecommerce tools (such as a basket) and is available from the website and back this up by
photographer now has a site that not only shows training. In another case, the ecommerce grant was making a call to your area's contact. Ask if there are
off his work, but enables his clients to order prints, tightly defined as web design, allowing the client any other grants available, and if funds have expired
pay booking deposits and buy gift vouchers for the to process orders online with no direct reference to ask when new funds may be made available.
happy couple. He also has a broadband telephone
account that enables him to use wireless Internet
to make/receive calls when working away from
his office thanks to a grant that paid half of the
Sharpen up your shop skills with CyberShopUK
cost of this project. The other half came by way of
highly reduced phone call costs for his business.
These UK grant initiatives have been running for
some time now, so it is important to check to see
if they are still available in your client’s location. It is
also worthwhile checking the regional guidelines
relating to how the grants are made available. Is
there a specific financial limit? Who can carry out
the work? What aspects of ecommerce are covered? SHOPPING CART V2.3: SHOP BUILDER V2.3: WI-FI INTERNET PHONES:
A list of UK grants and provider contact details is A powerful web-based cart that A web-based shop-building system Use your wi-fi phone in over 7,000 UK
freely available from the CyberShopUK website at generates HTML for BUY ME links to that’s fully hosted. Shop Builder V2.3 can hotspots as well as at home. For £7.99 per
www.cybershopuk.com. CyberShopUK is happy to web pages. Includes design control, be used as a complete solution or as a month you can make unlimited free calls
order management and secure payment shop link from an existing site. £20 per to any UK 01 or 02 phone number. Save
provide assistance with any project that is looking processing. £99 per year (see www. month (see www.cybershopuk.com for a £5.99 when buying a handset at www.
for funding. In some cases, the grants will only be cybershopuk.com for a 30-day free trial). 30-day free trial). cyberphoneuk.com.
provided if the work is carried out by a “preferred”

96 | Web Designer

096_WD120.indd 1 13/6/06 14:16:23

 ECOMMERCE GALLERY

HMV’s new net home

USING OUR MAIN GALLERY PAGES AS INSPIRATION, WE CONTINUE OUR LOOK AT THE BEST
BUSINESS SITES WITH THE REVAMPED URL FOR HMV.CO.UK. FOLLOW THE ANNOTATIONS TO
GET VALUABLE HINTS AS TO WHY AND HOW THIS DOMAIN DOES ITS STUFF
A banner tops the page, and here
we’re introduced to the company’s
corporate identity, with logos and
colours that flow through the content
Tabbed section areas not only provide
a neat list of the available wares, but
also act as an intuitive device for
directing customers to product types

Product splash screens that introduce

a section with new releases or tailored
suggestions based on cookie data are
a superb way to capture interest
Many shopping sites use a tiered or
hierarchical design to funnel the eye
down the page. See how images get
smaller as you scroll down

HMV UK
www.hmv.co.uk
Designed by: HMV UK Ltd (in-house)
This big bundle of HTML <div> tags and fairly lengthy chunks of
JavaScript represents HMV’s new online shop front. Criticised in some
quarters for not previously addressing accessibility issues adequately
enough, this current incarnation looks and performs rather well. The
layout is largely atypical, in some ways adopting the structure of Apple’s
dot com home, which we looked at last issue, but why fix something that
isn’t broke? There are tabbed sections grouping the main product ranges
for those just browsing, first-glance roundups of the latest releases,
category menus to pick through, and keyword search fields for specific
queries. These standard elements might cause things to become quite
formulaic, although a commitment to packing the layout with eye-
catching product shots helps to alleviate any monotony.

98 | Web Designer

098-099_WD120.indd 1 13/6/06 15:43:40

 ECOMMERCE GALLERY

The layout is understated to avoid Exclusive online prices can be a good

confusion. Include the bare essentials idea. HMV charges less online because
of what people need to know before savings on overheads can be given
they buy to avoid cluttering the page back to the customer

A ‘recently viewed’ box is a good

idea when dealing with products, so
that shoppers can flick back to areas
they’ve already been to at any time

Streaming sound clips are essential

for a music store, and HMV doesn’t
disappoint. Each track has a preview to
enjoy before you decide to buy

It’s a great idea to include information

about your products, and HMV does a
nice job of whetting the appetites of
fans and potential customers

Secure customer accounts are integral

to gaining trust from your users. HMV
An extended shopping cart facility lets you store sensitive data and recall
helps buyers get a more detailed it when making new purchases
breakdown of what they have
selected and what they expect to pay

Displaying security accreditation

badges is a good tactic – it’s important
to raise confidence among your
customers whenever possible

VERDICT
MUSIC MAESTRO: HMV.co.uk may not
A ‘continue shopping’ link is a useful be wholly unique, but its efficiency and a
idea often overlooked. Make sure you no-nonsense approach to displaying its
provide clear access routes back to the products are to be commended. Highly
store to avoid confusion
usable and intuitive for all users.

Web Designer | 99

098-099_WD120.indd 2 13/6/06 15:41:17

 WEB HOSTINGS

Choosing a home
for your website
KEEP AN EYE ON THE LATEST WEB PACKAGES AND DEALS WITH OUR
COMPREHENSIVE LIST OF ISPS TO SUIT EVERY WEB DESIGNER'S NEED
IT MAY WELL be the last thing on a designer’s mind
as they put those final touches of inspiration into
a hot new online project, but hosting is pretty
important. Just remember that if you actually want
people to enjoy and appreciate your hard work then
it will need a spot on the web to call home, and that
many clients will expect you to find it.
To be fair, the choice can be slightly bewildering
thanks to the amount of choice on offer and the
technical jargon used to describe the many deals
available. That’s why our new-look ecommerce
hosting pages not only list the attributes of the best
packages money can buy but now come complete
with a quick-draw guide to what it all means.
Each month we’ll also be picking out a couple
of the featured companies and going into more
detail about why we’d recommend them, while
encouraging the industry itself to keep us informed
of the very latest offers. If you love your ISP, let us
know at webdesigner@imagine-publishing.co.uk.

WE WANT THE LATEST DEALS!

SERVICE LEVEL AGREEMENT

We don’t always have the chance to keep track of package or
FRONTPAGE EXTENSIONS
MONTHLY BANDWIDTH

price changes as they happen, and packages often change

WEB CONTROL PANEL

DATABASE SUPPORT
after we go to print – so we’re relying on you! If you’re a hosting

PHONE SUPPORT
POP3 ACCOUNTS
PHONE NUMBER

EMAIL SUPPORT
SHOPPING CART
company and want to update us on the very latest listings, or
COST PER YEAR

VIRUS FILTER
would like to investigate ways of promoting your services via
WEB SPACE

FIREWALL
these pages, email webdesigner@imagine-publishing.co.uk.
PACKAGE

NAME AND URL

1&1 (www.oneandone.co.uk) Home (Linux) 08708 503 305 £59.88 800MB 10GB 300 ✗ ✗ ✗ ✓ ✗ ✓ ✓ ✓ ✗
1&1 (www.oneandone.co.uk) Home (MS) 08708 503 305 £71.88 800MB 10GB 300 ✓ ✗ ✗ ✓ ✗ ✓ ✓ ✓ ✗
1&1 (www.oneandone.co.uk) Business (Linux) 08708 503 305 £107.88 2.5GB 20GB 700 ✗ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
1&1 (www.oneandone.co.uk) Business (MS) 08708 503 305 £119.88 2.5GB 20GB 700 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
1&1 (www.oneandone.co.uk) Professional (Linux) 08708 503 305 £179.88 6GB 50GB 1500 ✗ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
1&1 (www.oneandone.co.uk) Professional (MS) 08708 503 305 £203.88 6GB 50GB 1500 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
123 reg (www.123-reg.co.uk) Starter 0900 11 22 123 £19.08 100MB 1.5GB 15 ✗ ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✗
123 reg (www.123-reg.co.uk) Starter Plus 0900 11 22 123 £35.88 250MB 3GB 25 ✗ ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✗
123-reg (www.123-reg.co.uk) Starter Pro 0900 21 11 23 £47.88 500MB 5GB 35 ✗ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✗
2020Media (www.2020media.com) Everyday 0845 166 7456 £100 100MB 2GB Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
2020Media (www.2020media.com) PHP 0845 166 7456 £150 100MB 2GB Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
2020Media (www.2020media.com) JAVA Tomcat 0845 166 7456 £175 100MB 2GB Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
2020Media (www.2020media.com) Coldfusion 0845 166 7456 £250 100MB 2GB Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
4D hosting (www.4dhosting.com) Bronze Package 0845 166 8386 £40.00 10MB 500MB 2 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
4D hosting (www.4dhosting.com) Silver Package 0845 166 8386 £64.99 20MB 2GB 10 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
4D hosting (www.4dhosting.com) Gold Package 0845 166 8386 £79.99 50MB 2GB 50 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
4D hosting (www.4dhosting.com) Titanium Package 0845 166 8386 £149.99 500MB 5GB 500 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
4D hosting (www.4dhosting.com) Reseller Package 0845 166 8386 £299.99 1GB 10GB 1000 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
9Net Avenue (www.9netave.uk.net) Starter 0870 8726560 £99 50MB 1.5GB 10 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓
9Net Avenue (www.9netave.uk.net) Professional 0870 8726560 £199 100MB 2.5GB 25 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
9Net Avenue (www.9netave.uk.net) Corporate 0870 8726560 £399 500MB 5GB 100 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
BeamHost (www.beamhost.co.uk) Home 0871 277 9827 £59.88 800MB 5GB 100 ✓ ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
BeamHost (www.beamhost.co.uk) Business 0871 277 9827 £119.88 2GB 2GB 300 ✓ ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
BeamHost (www.beamhost.co.uk) Economy 0871 277 9827 £239.88 5GB 80GB 1000 ✓ ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✗
Christian Technology Ltd (www.christiantechnology.co.uk) Host Package 0870 742 0530 £55 inc VAT 50MB 1GB 25 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
Christian Technology Ltd (www.christiantechnology.co.uk) Pro Package 0870 742 0530 £125 inc VAT 100MB 2GB 50 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
Christian Technology Ltd (www.christiantechnology.co.uk) Base Package 0870 742 0530 £250 inc VAT 250MB 5GB Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
Clara.net (www.clara.net) Clarahost Lite 0845 355 1000 £29.99 inc VAT 10MB 1GB 10 ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Clara.net (www.clara.net) Clarahost Advanced 0845 355 1000 £699 500MB 30GB 200 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
CWCS Managed Hosting (www.cwcs.co.uk) CWCS Entry Package 0870 703 1000 £120 750MB 5GB 10 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
DataGate (www.datagate.co.uk) Exchange Hosting 08000 19 98 19 £120+ 200MB Unlimited 19 ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
DataGate (www.datagate.co.uk) Unix Shared Business Hosting 08000 19 98 19 £179.40+ 150MB 2GB 50 ✗ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Datex (www.datex.net) Level1 0800 652 2110 £185 300MB 1.5GB 5 ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✓
Datex (www.datex.net) Level2 0800 652 2110 £259 400MB 2GB 10 ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✓
Datex (www.datex.net) Level3 0800 652 2110 £330 500MB 3GB 50 ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✓

100 | Web Designer

100-103_WD120.indd 1 13/6/06 14:09:57

 WEB HOSTINGS

SERVICE LEVEL AGREEMENT

FRONTPAGE EXTENSIONS
MONTHLY BANDWIDTH

WEB CONTROL PANEL

DATABASE SUPPORT

PHONE SUPPORT
POP3 ACCOUNTS
PHONE NUMBER

EMAIL SUPPORT
SHOPPING CART
COST PER YEAR

VIRUS FILTER
WEB SPACE

FIREWALL
PACKAGE
NAME AND URL

Datex (www.datex.net) Level4 0800 652 2110 £369 750MB 4GB 80 ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓

Datex (www.datex.net) Level5 0800 652 2110 £409 1024MB 5GB 120 ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
Datex (www.datex.net) Level6 0800 652 2110 £549 1500MB 6GB 200 ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
Dedicated Servers (www.dedicated-servers.co.uk) Linux entry 0870 333 0365 £99/month 40GB 30GB Variable ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Dedicated Servers (www.dedicated-servers.co.uk) Windows entry 0870 333 0365 £199/month 40GB 30GB Variable ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Donhost (www.donhost.co.uk) Reseller Unix 0870 7414151 £470 Unlimited 20GB Unlimited ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
Donhost (www.donhost.co.uk) Reseller Windows 0870 7414151 £587.50 Unlimited 20GB Unlimited ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
Donhost (www.donhost.co.uk) Enterprise Plan 0870 7414151 £105.75 100MB 2GB 20 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✗
Donhost (www.donhost.co.uk) Commerce Plan 0870 7414151 £211.50 250MB 5GB 50 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
Donhost (www.donhost.co.uk) Designer Plan 0870 7414151 £141 100MB 2GB 20 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
Donhost (www.donhost.co.uk) Developer Plan 0870 741415 £305.50 250MB 5GB 50 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✗
Dziner Solutions (www.dzinersolutions.co.uk) Windows Shared n/a £44.50 100MB 2GB 100 ✓ ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Dziner Solutions (www.dzinersolutions.co.uk) Domain Forwarding n/a £14.50 5MB 100MB 10 ✓ ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Dziner Solutions (www.dzinersolutions.co.uk) Unix Shared Starter n/a £19.50 50MB 1GB 10 ✓ ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Dziner Solutions (www.dzinersolutions.co.uk) Unix Shared Standard n/a £44.50 100MB 2GB 100 ✓ ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
Dziner Solutions (www.dzinersolutions.co.uk) Unix Shared Premier n/a £79.50 200MB 3GB 200 ✓ ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓
eHosting (www.ehosting.co.uk) Home & Business 200 Account 0161 236 2241 £49.99 200MB 10GB 50 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
EliteUKServe (eliteukserve.net) Business Kick Start Linux 0871 717 0390 £49 50 3GB 20 ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✗ ✓
EliteUKServe (eliteukserve.net) Business Kick Start Windows 0871 717 0390 £75 50 3GB 20 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗ ✓
EliteUKServe (eliteukserve.net) Business Standard Linux 0871 717 0390 £99 100 3GB 100 ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✗ ✓
EliteUKServe (eliteukserve.net) Windows 0871 717 0390 £125 100 3GB 100 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗ ✓
EliteUKServe (eliteukserve.net) Business Enterprise Linux 0871 717 0390 £199 250 5GB 250 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗ ✓
EliteUKServe (eliteukserve.net) Business Enterprise Windows 0871 717 0390 £225 250 5GB 250 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗ ✓
EliteUKServe (eliteukserve.net) Business Pro Linux 0871 717 0390 £399 500 10GB 500 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗ ✓
Eurofasthost.com (www.eurofasthost.com) Soho 0800 3161 067 £99.00 100MB 3000MB 50 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
FastHosts (www.fasthosts.co.uk) Business 0870 888 3600 £149.99 2GB N/A Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
FastHosts (www.fasthosts.co.uk) Business Pro 0870 888 3600 £249.99 5GB N/A Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
FastHosts (www.fasthosts.co.uk) Net Pro 0870 888 3600 £299.99 3GB N/A Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
FastHosts (www.fasthosts.co.uk) Net Standard 0870 888 3600 £199.99 2GB N/A Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
FastHosts (www.fasthosts.co.uk) Starter 0870 888 3600 £19.99 100 N/A 15 ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
FastHosts (www.fasthosts.co.uk) Home 0870 888 3600 £49.99 500 N/A 100 ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
FastHosts (www.fasthosts.co.uk) Home Pro 0870 888 3600 £69.99 1GB N/A 300 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Future Internet Services (www.futureinternetservices.com) Beginner3 0845 641 0776 £ 9.99 40 mb 300 mb 3 ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
Future Internet Services (www.futureinternetservices.com) Basic3 0845 641 0776 £ 14.99 100 mb 1,500 mb 5 ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
Future Internet Services (www.futureinternetservices.com) Standard3 0845 641 0776 £ 22.99 200 mb 2,500 mb 10 ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
Future Internet Services (www.futureinternetservices.com) Business3 0845 641 0776 £ 39.99 500 mb 5,000 mb 50 ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
Future Internet Services (www.futureinternetservices.com) Advanced3 0845 641 0776 £ 79.99 1,200 mb 10,000 mb 100 ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
Future Internet Services (www.futureinternetservices.com) Professional3 0845 641 0776 £ 119.99 2,000 mb 15,000 mb unlimited ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
Giacom (www.giacom.net) Business Pro 0800 542 7500 £199 100 2GB 100 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Hostextra (www.hostextra.co.uk) Pro-Host 08702 501 500 £99.45 100 10GB 200 ✗ ✓ ✗ ✗ ✓ ✓ ✓ ✗
Global Gold (www.globalgold.co.uk) Unix launcher 0870 004 4444-- £78 50 5GB 5 ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
Global Gold (www.globalgold.co.uk) NT launcher 0870 004 4444- £80 50 5GB 5 ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
Haisoft (www.haisoft.co.uk) HaiSoft Perso 0870 080 4247 £14.90 100MB 1GB Unlimited ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✓
HaiSoft (www.haisoft.co.uk) HaiSoft Pro 0870 080 4247 £49.90 500MB 10GB Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
HaiSoft (www.haisoft.co.uk) HaiSoft eCommerce 0870 080 4247 £99.90 750MB 20GB Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Heart Internet (www.heartinternet.co.uk) Free Starter Professional 0845 644 7750 Free 2.5GB 100MB 1000 ✗ ✗ ✗ ✗ ✓ ✗ ✗ ✓ ✓
Heart Internet (www.heartinternet.co.uk) Starter Professional 0845 644 7750 £29.80 2.5GB 10GB 1000 ✗ ✗ ✗ ✗ ✓ ✗ ✓ ✓ ✓
Heart Internet (www.heartinternet.co.uk) Home Professional 0845 644 7750 £89.99 10GB 50GB 10,000 ✓ ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✓
Heart Internet (www.heartinernet.co.uk) Business Professional 0845 644 7750 £129.99 Unlimited Unlimited Unlimited ✓ ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✓

1&1 Internetters
www.oneandone.co.uk www.internetters.co.uk
With prices starting at as low as £1.99 per Visit the internetters home page and
year for a .co.uk domain, stretching up you’ll immediately appreciate its no-
to £29 per month for dedicated servers nonsense approach to web services.
with 100Mbit data transfer speeds, you’ll Packages including Gold, Platinum, and
be spoilt for choice with 1&1. Bespoke Diamond-level features begin at £49.95
options for eShops that you can build from and stretch to a very affordable £249
pre-prepared templates are also available, per year – all tailored to your individual
along with mailbox-only deals. requirements or application types.

Web Designer | 101

100-103_WD120.indd 2 13/6/06 14:10:14

 WEB HOSTINGS

SERVICE LEVEL AGREEMENT

FRONTPAGE EXTENSIONS
MONTHLY BANDWIDTH

WEB CONTROL PANEL

DATABASE SUPPORT

PHONE SUPPORT
POP3 ACCOUNTS
PHONE NUMBER

EMAIL SUPPORT
SHOPPING CART
COST PER YEAR

VIRUS FILTER
WEB SPACE

FIREWALL
PACKAGE
NAME AND URL

Heart Internet (www.heartinternet.co.uk) Reseller Professional 0845 644 7750 £299.99 Unlimited Unlimited Unlimited ✓ ✓ ✓ ✗ ✓ ✗ ✓ ✓ ✓
HostSupreme (www.hostsupreme.co.uk) Windows 2000 Unlimited Plan 0208 777 8881 £29.50-£499 100-5000MB 2-80GB Unlimited ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
HostSupreme (www.hostsupreme.co.uk) Resellers Plan 0208 777 8881 £200-800 2GB 30-50GB Unlimited ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
Hostway (www.hostway.co.uk) Silver 0808 180 1880 £79.50 150MB 3GB 5 ✓ ✗ Option ✓ ✓ ✗ ✓ ✓ ✗
Hostway(www.hostway.co.uk) Gold 0808 180 1880 £139.50 300MB 5GB 10 ✓ ✓ Option ✓ ✓ ✓ ✓ ✓ ✗
Hostway (www.hostway.co.uk) Gold Plus 0808 180 1880 £189.50 450MB 10GB 30 ✓ ✓ Option ✓ ✓ ✓ ✓ ✓ ✗
Hostway (www.hostway.co.uk) Platinum 0808 180 1880 £359.50 600MB 20GB 50 ✓ ✓ Option ✓ ✓ ✓ ✓ ✓ ✗
Hostway (www.hostway.co.uk) Platinum Plus 0808 180 1880 £599.50 1.2GB 40GB 10 ✓ ✓ Option ✓ ✓ ✓ ✓ ✓ ✗
Hostway (www.hostway.co.uk) Email Plus 0808 180 1880 £49.95 50MB N/A 5 N/A N/A N/A N/A ✓ ✗ ✓ ✓ ✗
Ideal Hosting (idealhosting.co.uk) Lite 08712 773494 £14.99 25 1GB 5 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Ideal Hosting (idealhosting.co.uk) Starter 08712 773494 £23.49 50 1GB 20 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Ideal Hosting (idealhosting.co.uk) Standard 08712 773494 £52.49 100 1GB 50 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Ideal Hosting (idealhosting.co.uk) Professional 08712 773494 £68.99 250 1GB unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Ideal Hosting (idealhosting.co.uk) Business 08712 773494 £119.99 500 1GB unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Ideal Hosting (idealhosting.co.uk) Corporate 08712 773494 £199.99 1000 1GB unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Internetters (www.internetters.co.uk) Unix Basic 50 0870 160 5555 £70 50 1GB 5 ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Internetters (www.internetters.co.uk) Unix Frontpage 50 0870 160 5555 £100 50 1GB 5 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Internetters (www.internetters.co.uk) Unix Standard 200 0870 160 5555 £160 200 2GB 20 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Internetters (www.internetters.co.uk) Unix Superior 500 0870 160 5555 £220 500 3GB 50 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Internetters (www.internetters.co.uk) Windows 50 0870 160 5555 £100 50 1GB 5 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Internetters (www.internetters.co.uk) Windows 200 0870 160 5555 £190 200 2GB 20 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Internetters (www.internetters.co.uk) Windows 500 0870 160 5555 £260 500 3GB 50 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Magic Moments (www.magic-moments.com) Magic Entry 0115 917 0000 £79.50 600MB 7GB 300 ✓ ✗ ✗ ✗ ✗ ✓ ✓ ✓ ✓
Magic Moments (www.magic-moments.com) Magic Business Professional 0115 917 0000 £199 5GB 20GB Unlimited ✓ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✓
Magic Moments (www.magic-moments.com) Magic Business e-commerce 0115 917 0000 £499 5GB 20GB Unlimited ✓ ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓
Magic Moments (www.magic-moments.com) Magic Reseller 0115 917 0000 £500 Unlimited Unlimited Unlimited ✓ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✓
Merxweb (www.merxweb.com) Starter 0845 838 2631 £59.88 150MB 3GB 25 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Merxweb (www.merxweb.com) Store 0845 838 2631 £95.88 300MB 5GB 50 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Merxweb (www.merxweb.com) Advanced 0845 838 2631 £119.88 450MB 7GB 100 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
NameHog (www.namehog.net) Email Only 0845 6120330 £11.75 25MB 1GB 5 ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
NameHog (www.namehog.net) Standard Package 0845 6120330 £35.25 100MB 4.5GB 10 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
NameHog (www.namehog.net) Professional Package 0845 6120330 £58.75 250MB 8GB 25 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
NameHog (www.namehog.net) Expert Package 0845 6120330 £105.75 500MB 15GB 75 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Namesco (www.names.co.uk) StartUp 0870 120 8888 £49.99 100MB 2GB 5 ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Namesco (www.names.co.uk) StartUp Plus 0870 120 8888 £89.99 200MB 5GB 10 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Namesco (www.names.co.uk) Business 0870 120 8888 £149.99 500MB 10GB 25 ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Namesco (www.names.co.uk) Business Plus 0870 120 8888 £89.99 700MB 15GB 50 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Namesco (www.names.co.uk) Designer 0870 120 8888 £239.88 1GB 20GB 200 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Namesco (www.names.co.uk) Designer Plus 0870 120 8888 £479.88 Unlimited 30GB Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
NetBenefit (www.netbenefit.com) Unix 0870 264 2298 £180 100MB 2GB 1 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
NetBenefit (www.netbenefit.com) Windows 2000 0870 264 2298 £229 100MB 2GB 1 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Netcetera (www.netcetera.co.uk) Starter Package 0800 2987 214 £30 500MB 1GB 100 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Netcetera (www.netcetera.co.uk) Home Package 0800 2987 214 £60 1GB 5GB 100 ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Netcetera (www.netcetera.co.uk) Developer Package 0800 2987 214 £100 4GB 10GB 100 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
Netcetera (www.netcetera.co.uk) Commerce Package 0800 2987 214 £180 6GB 20GB 1500 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Netcetera (www.netcetera.co.uk) Reseller Package 0800 2987 214 £450 10GB 30GB Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Netscalibur (www.netscalibur.com) Netscalibur Web Unix 0800 072 0000 £324 100MB 5GB 1 ✗ ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓

WHAT DOES IT ALL MEAN? New to hosting slang? We explain what all the
categories in our hostings table are talking about…

WEB SPACE
This describes the amount of physical data storage
space you’ll have available to you on the hosting
server and will have a bearing on how weighty your
site or its content is or will become over time.
MONTHLY BANDWIDTH
This relates to the amount of expected traffic and the
data transfer demands that your site will place on the
host each month. A very busy, data-intensive site will
obviously demand larger and faster bandwidths.
POP3 ACCOUNTS vendor to make doubly sure if you think that this
Does your site require email support? If so, you’ll want applies to your website.
the ability to set up personalised mailboxes to which
you can direct feedback. DATABASE SUPPORT
With sites becoming more reliant on often vast
FRONTPAGE EXTENSIONS quantities of information and utilising technologies
These are a group of programs that must operate like MySQL and SQLServer, you’ll probably require
behind the scenes on your host server if you’re a database capabilities from your host.
Microsoft Frontpage developer. Most Windows
Server-based packages will therefore have them as SHOPPING CART
standard, although you might like to ask your chosen Selling products online is a big part of ecommerce,

102 | Web Designer

100-103_WD120.indd 3 13/6/06 14:10:33

 WEB HOSTINGS

SERVICE LEVEL AGREEMENT

FRONTPAGE EXTENSIONS
MONTHLY BANDWIDTH

WEB CONTROL PANEL

DATABASE SUPPORT

PHONE SUPPORT
POP3 ACCOUNTS
PHONE NUMBER

EMAIL SUPPORT
SHOPPING CART
COST PER YEAR

VIRUS FILTER
WEB SPACE

FIREWALL
PACKAGE
NAME AND URL

Netscalibur (www.netscalibur.com) Netscalibur Web Windows 0800 072 0000 £324 100MB 5GB 1 ✓ ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓
NewNet (www.newnet.co.uk) Lite 08700 599 599 £29.90 200MB 1GB 1 £1.50 ✗ ✗ £1.50/mailbox ✗ ✓ ✓ ✓ ✓
NewNet (www.newnet.co.uk) Plus 08700 599 599 £49.90 400MB 2GB 5 £1.50 £1 ✗ £1.50/mailbox ✗ ✓ ✓ ✓ ✓
NewNet (www.newnet.co.uk) Advance 08700 599 599 £99.90 1GB 5GB 10 ✓ ✓ ✗ £1.50/mailbox ✗ ✓ ✓ ✓ ✓
NewNet (www.newnet.co.uk) Pro 08700 599 599 £199.90 3GB 15GB 50 ✓ ✓ ✗ £1.50/mailbox ✗ ✓ ✓ ✓ ✓
NewNet (www.newnet.co.uk) Enterprise 08700 599 599 £499.90 10GB 25GB Unlimited ✓ ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓
Nildram (www.nildram.net) Unix 08701 608602 £120 10MB 5GB 1 ✗ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✗
Nildram (www.nildram.net) Windows 08701 608602 £120 10MB 5GB 1 ✓ ✗ ✓ ✗ ✗ ✓ ✓ ✓ ✗
Nildram (www.nildram.net) Shared SQL Business 50 08701 608602 £300 50MB 25GB 1 ✗ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✗
Nildram (www.nildram.net) Shared SQL Business 100 08701 608602 £600 100MB 50GB 1 ✗ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✗
Pay As You Host (www.pay-as-you-host.com) Standard 0870 284 0287 £47.88 50MB 512MB Unlimited ✗ ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✓
Pabb Web Design (www.pabbwebhosting.co.uk) Unlimited hosting 07756 441059 £114 Unlimited Unlimited Unlimited ✓ ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓
The Positive Internet Company (www.positive-internet.com) Z account 0800 316 1006 £293.75 120MB 10GB Unlimited ✗ ✓ ✗ ✓ ✓ ✗ ✓ ✓ ✗
The Positive Internet Company (www.positive-internet.com) Dolphin 0800 316 1006 £2,172.58 2x20GB 40-60GB Unlimited ✗ ✓ ✗ ✓ ✓ ✗ ✓ ✓ ✗
The Positive Internet Company (www.positive-internet.com) Fully managed servers 0800 316 1006 £5,287.50 2x70GB SCSI 80-250GB Unlimited ✗ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Skymarket (www.skymarket.co.uk) Standard 1 0800 321 7788 £49 10MB 2GB 1 ✗ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Skymarket (www.skymarket.co.uk) Standard 2 0800 321 7788 £69 20MB 2GB 1 ✗ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Skymarket (www.skymarket.co.uk) Premium 1 0800 321 7788 £99 25MB 2GB 1 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Skymarket (www.skymarket.co.uk) Premium 2 0800 321 7788 £149 50MB 2GB 1 ✓ ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Switch Media (www.switchmedia.co.uk) Home 0151 236 9111 £53.88 500MB 4GB 100 ✗ ✗ ✗ ✗ ✗ ✓ ✓ ✗ ✗
Switch Media (www.switchmedia.co.uk) Business 0151 236 9111 £95.88 1.5GB 10GB 500 ✗ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✗
Switch Media (www.switchmedia.co.uk) Professional 0151 236 9111 £186 3GB 25GB 1200 ✗ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✗
theName.co.uk (www.thename.co.uk) Parking 08707 65 63 64 £52.88 25MB 500MB 15 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗
theName.co.uk (www.thename.co.uk) Forwarding 08707 65 63 64 From £15 N/A 500MB N/A ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✗
theName.co.uk (www.thename.co.uk) Hosting 08707 65 63 64 From £7.50 N/A N/A N/A ✗ ✗ ✗ ✗ ✓ ✓ ✓ ✓ ✗
Titan Internet (www.titanhosts.net) Win50 0845 125 9500 £58.75 50MB 500MB 5 ✓ ✗ ✗ ✓ ✓ ✓ ✓ ✓ ✓
Titan Internet (www.titanhosts.net) Win100 0845 125 9500 £117.50 100MB 1GB 20 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Titan Internet (www.titanhosts.net) Win200 0845 125 9500 £235 200MB 2GB Unlimited ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
WebFusion (www.webfusion.co.uk) Entry 0800 031 7800 £79.50 600MB 7GB 300 ✓ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✓
WebFusion (www.webfusion.co.uk) Home 0800 031 7800 £99.95 1.5GB 10GB 500 ✓ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✓
WebFusion (www.webfusion.co.uk) Soho 0800 031 7800 £149.99 3GB 15GB 1000 ✓ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✓
WebFusion (www.webfusion.co.uk) Professional 0800 031 7800 £199.95 5GB 20GB Unlimited ✓ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✓
WebFusion (www.webfusion.co.uk) eCommerce 0800 031 7800 £499 5GB 20GB Unlimited ✓ ✓ ✗ ✗ ✗ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Hosting Standard 0870 050 0080 £39.95 50MB 1GB 5 ✓ ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Hosting Standard Plus 0870 050 0080 £99.95 50MB 2GB 10 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Hosting Business 0870 050 0080 £79.95 100MB 3GB 15 ✓ ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Hosting Business Plus 0870 050 0080 £159.95 150MB 4GB 30 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Hosting Professional 0870 050 0080 £179.95 250MB 7GB 50 ✓ ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Hosting Professional Plus 0870 050 0080 £299 500MB 10GB 100 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Standard Multiweb 0870 050 0080 £64.95 75MB 1.5GB 10 ✓ ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Standard Multiweb Plus 0870 050 0080 £149.95 100MB 2.5GB 15 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Business Multiweb 0870 050 0080 £149.95 200MB 4GB 25 ✓ ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Business Multiweb Plus 0870 050 0080 £299 250MB 5GB 40 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Professional Multiweb 0870 050 0080 £249 500MB 7.5GB 100 ✓ ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✓
Xcalibre (www.xcalibre.co.uk) Professional Multiweb Plus 0870 050 0080 £499 500MB 10GB 150 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Zen Internet (www.zen.co.uk) ActiveSpace 0845 058 9000 £100 50MB 2GB 0 ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✗ ✗
Zen Internet (www.zen.co.uk) .NETspace 0845 058 9000 £250 100MB 4GB 0 ✓ ✓ ✗ ✗ ✓ ✓ ✓ ✗ ✗

and no self-respecting storefront can operate
without shopping cart functionality. Host support
can either mean that this is provided in some form
or that your own bespoke cart systems can be
facilitated, so do check in advance.
VIRUS FILTER
No one wants to have their site attacked, data
ravaged, or be responsible for spreading infections
across the ether. A built-in virus filter is therefore
essential to sites that can’t afford any sick leave.
FIREWALL account whenever you like, without the need to relay
Again linked to site security, firewalls represent a complicated instructions down the phone.
digital barrier that sits between your site’s server and
the hordes of malicious attackers that threaten to pull SERVICE LEVEL AGREEMENT
it down. Only trusted data is allowed to pass through This is all about getting guarantees that your host
it, thankfully. will do the best job possible for you. Some might
have clauses about what you can and can’t do, but
WEB CONTROL PANEL ultimately it’s a handy declaration of what to expect
A vital part of great hosting is control, so this is where should you sign up. Make sure you check this for all
you’ll want to pay attention. Web-based panels the requirements and backup that your site may need
let you log in remotely and intuitively tweak your before making the big decision!

Web Designer | 103

100-103_WD120.indd 4 13/6/06 14:10:48

 The place where your work does the talking

Illustration representing lyrics

of a song called ‘Imaginary’

Greg Coe
www.gregorycoe.co.uk
greg@gregorycoe.co.uk
Skills: Flash (competent in
ActionScript 1.0 and 2.0),
Swift 3D, Photoshop,
Illustrator, Dreamweaver
Employment status:
Unemployed student
until graduation
“I am currently finishing my degree Logo design for the graduate showcase Grow held at Brick
in Interactive Media Production at Lane London as part of Free Range design shows
www.growgradshow.co.uk and www.free-range.org.uk
Bournemouth University, looking
to develop a career in interactive
design. I wish to specialise in digital
advertising, either being involved
in concept design and/or flash
developing and illustration.
My passion is creating design
solutions that engage and stimulate.
Although I am keen to experiment
with different ideas/styles, my work
has a crisp effervescent streak that
runs throughout.
I am a self-motivated designer
who demonstrates the ability to
push the boundaries with his creative
juices! I am always testing my limits,
particularly with illustration and
visual style, and am continuously
learning new software. I never
settle for the safe option; concept
design is as important to me as the
visual realisation, and no idea is ever
completely dismissed as beyond
my skill set, as I continue to push my
skills to the max…” An intro screen that introduces
the user to a viral game

110 | Web Designer

110-113_WD120.indd 1 15/6/06 16:10:19

 MAKE I
Portfolio is what we like to think of as our creative HAPPE T
recruitment section, providing you with a window into the To keep
N!
student this section go
themse or freelance ing we rely
industry and an opportunity to see what today’s design lves de on
for your forward. It is g signers to put
minds are up to. From stunning illustrations to fully fledged talents a
of you w
reat exp
nd ever
ys
osure
us a lineill be considere ingle one
sites, there’s a whole range of talent on show no d so
imaginw at webdesig drop
e-publi n
shing.c er@
o.uk

(Left, centre and right) Splash screens of

the ‘Mutate’ male fragrance CD-ROM to be
distributed as part of a fragrance packaging

Corporate Flash website redesign for

multimedia company Xplorer (July 2005)
www.xplorer.co.uk

Web Designer | 111

110-113_WD120.indd 2 15/6/06 16:10:32

 The place where your work does the talking

Kall Kwik’s revamped website, A fully interactive CD-ROM

featured in Superbrands 2005 designed for Euro Tunnel

Wayne’s simple yet perfectly

judged portfolio site

An online marketing promotion for

a range of bath products

A suitably sober site design for

a marine security company

112 | Web Designer

110-113_WD120.indd 3 15/6/06 16:10:41


A site design for a property
development company
Wayne
Roberts
www.lushnewmedia.com
wayneUK@hotmail.com
Skills: Photoshop,
QuarkXPress, Illustrator,
Flash, and Dreamweaver
Employment status:
Previously worked for Lawton
Communications and The
Walker Agency, both ad
agencies in the south of
England. Was employed by
Franklin Lloyd Culley & Stone
in Southampton 1998-2003,
before joining current employer
kdesigngroup in Winchester.
Wayne boasts ten years of experience
within the graphic design industry
and has worked for some of the
leading ad agencies along the South
coast. His current position as New
Media Designer at kdesigngroup
were responsible for the rebranding
project of Kall Kwik UK which was
subsequently included in the
Superbrands 2005 book. An avid
Mac user since 1991, he is presently
teaching himself how to integrate
websites with ASP and PHP while also
finding the time to dabble in other
software packages such as Reason,
Premiere, and After Effects.

A luxury yacht site, complete

with lavish 360° virtual tours

Web Designer | 113

110-113_WD120.indd 4 15/6/06 16:10:49