Table Of ContentFlash
FLASH MX APPLICATION Be INTERFACE DESIGN
© 2002 Apress
Originally published by Friends of ED in 2002
Credits
All rights reserved. No part of this book may be reproduced,
stored in a retrieval system or transmitted in any form or by any Authors Commissioning Editor
means, without the prior written permission of the publisher,
Pete Aylward jim Hannah
except in the case of brief quotations embodied in critical articles
Ken Jokol
or reviews.
Jamie Macdonald Technical Editor
Paul Prudence julie Closs
The authors and publisher have made every effort in the
Gien Rhodes
preparation of this book to ensure the accuracy of the information.
However, the information contained in this book is sold without Robbie Shepherd Project Manager
warranty, either express or implied. Neither the authors, friends of Todd Yard Richard Harrison
ED nor its dealers or distributors will be held liable for any damages
caused or alleged to be caused either directly or indirectly by this Additional Material Designer
book. Peter Fletcher Katy Freer
Reviewers Indexer
First Printed October 2002
jason Anderson Fiona Murray
Kristian Sesley
Trademark Acknowledgements
Kim Christensen
Steve McCormick
jon Steer
Michael Walston
Proof Readers
jon Sounds
Simon CoUins
Richard Harrison
Chris Matterface
ISBN 978-1-59059-158-1 ISBN 978-1-4302-5217-7 (eBook)
Fiona Murray
DOI 10.1007/978-1-4302-5217-7
Catherine O'Flynn
Gavin Wray
-- ---------
_-
'
-c~~~e_nt_s '
I
--
'
---------'~ .....
'
'
'
'
'
I
I
I
I
I
I
v
,_I
~
1 Designing Preloaders Todd Yard
2 Creating Sites with the Drawing API Paul Prudence 25
3 Real-Feel Sites Todd Yard 45
4 A Flash Family Tree Todd Yard 73
5 Making XML Work for your Interface Jamie Macdonald 103
6 A PHP Powered Site Glen Rhodes 135
7 Promoting Site Stickiness Robbie Shepherd 153
8 A T-Shirt Designer Ken Jokol 175
9 Interactive Video: Karate! Pete Aylward 211
Index 239
Jo'v-..6\ --- ----------------------- ----
\(CX\ -,~
:
_...J.._L:......:=--___:~-----------~ Since the last book (flash math creativity), the\
.IIU:U:XQ:I:IItltJ:J:JtUKJ'.XKXKKXllll11 company I worked for got bought out by a 1
rrrtiXiUXUXXIXlUIUXUXUUUUIU!I!D.IIEOUQIXLII[.!D::DO!X)OGE!DE!!~:Et~i.)tor tlJ. larger corporation and I decided to go freelance I 1
.I D~GUUE oOocU;:.IO!OfO:!:f. Jt ] .] tJ! . UOiOGO®G:D:MOlOs t instead of sitting in a big office block. So if I
1i.lQ.U~cJtOlf!j.:t3CE~OJLtt]t!)~ff!G~It you require any freelance work, contact me at I
t )))t )CL}ttll tl.O::JEDQLJ fL. I
rtj.tj .I 1~Jt)iltttl tl l1l1l 1i t1t1) f!LOOOODJff] 1,l ftL.i, kenj®pinderkaas.com. I
rt11usU"I;al.t]ft.]il.. un .•
•3t B n r U tr d r nttl....t...W. , jt.Lt.LLLI.t.ft. urt.tl•
.rtf!,f,Jt)tIt.1U1itnltt:tuiuU.tn~j.jt]tLfj] t: ,tt.L!, fJtJ.tL.ll..LI.L.OLCLtI.GLGGGCtGoGGU:.. rHtfuU.G.' f I recently tuned my guitar (breaking a string in
. , ;t~.;Ht.ffL]Ljfftf3t~tt1 1ta1i1..)CfL)!tj]tff;:j.t).GtUt.ftt.t1f.LtfjOlUlJtJ)tj!..D!O.OID,O.OlL.O'O]G~DLil'f.ItOfI'JtOLCU:Dl!Lfr the process) , and am now thinking of joining a
l f.Jooooo:xit.!ff tttt j j 1 t 1 t~ttttt: t.t.Oa!X'I) t t ~OJ,.lJ.) fLQJ...:...!.ii;.:.LQGI)II%)00L
OO:OOOJOOOOOOODOOOOOOOOOOOGOO"OO~OOtOO.Ot!t..tL..LL!t~ t.t ttL(. tLft!w.tJtt.... tttl..t..LJUL.tt.f..lGLf.OUUt..C.Ot!iG.CtfCUiI.C.O.I.:C.C.:.ttU! ..ttt l Lfu. C.!.:.C•.LOuDQ.iOCl.CCOO.DDOoODDcODCO%OQliCtE£oDC!D]tOtL ttLit Jt!! JJ).OUU tKU.lUKlltEl.!)Lff.' 1tG Li I n!LLmfOfJ. Gj1 .jG., Gff. Gt fUl Dl. l..OfffOOG)OOOjOGG)OG}OO~tl :C1t:; .), bmaankdin. g Fmauisliicn gv iath aemt, ailI. 'mS taorpte nb yt os enodfifnegr sm e oaf
ll.O.O.OOOOU~O OOO.,lC,..LI.t,!..L .tU.t..t.~t:.WG..0t.0tt0..LCLGOJDt.G.G0JL0.tI.U..Gl..L0tL0.l.ttL.jCL]OLJ:O].O.L:OO.O)r Qft lCt~L11Du1O..oCOcO~:OD~OEDIIELIEOt!.Ot!J.!tO lB!DIJCI:GIi(C! O•JGO(JCJIll(D:iOaJCGQiOCOG;'XG(iIOGWG t music file. M-i-di- f-il-e-s -a-ls-o- a-c-ce-p-te-d-. -------,I1
-- --
I ~ .. .. I
'· ....
' ...
-----
I describe myself as a
disciplinary designer,
basically means I am a jack of
all trades but master of none. My
time is split between teaching
undergraduate design students
and looking after a well known
publishers website. This leaves
little time for actually getting
any content up at hypeteila.com
but I will do, one day.
Peter
j amie lives and works
when he finds time he
site www.nooflat.nu
I'm an artist. I used to paint & draw complex
repetitive organic forms such as radiolarians and
I've always considered these forms to be very
beautiful. Since discovering Flash I've found little
time to paint and now I cultivate simple actionscript
routines to make configurable screen 'paintings•, a
few of these can be found at transphormetic.com. When
not inside Flash I earn a living doing web design and
creative development. Hopefully sometime soon I'll
get around to finishing my online portfolio of this
kind of work at slightspace.com.
--------------------------
--::::::,...
AUTHORS
~o'oD1e S~'herc\---j
.c. .
~e wh~
Shepherd is a self-taught designer/programmer
came into the IT industry at a fairly late age compared
to most, a career choice which resulted in much hair loss
(while learning Flash) and tears (victim of several dot
~ com crashes) but which has ultimately provided the
greatest satisfaction out of all the careers he's had.
Despite Robbie's constant reiteration that he is a "Flash
programmer", his parents insist on telling everyone they
meet that their son is "a Flasher".
I started my mind going early in life
when I was about 4 years old. At that
In his spare time Robbie makes things in Flash that he
age, I began playing the piano, which
likes to call "Flash things". When he's not doing this he
was sitting unused in our house. I've
is either getting tattooed or watching Leeds stomp
been playing ever since then. Later, in
Newcastle in the Premier League, neither of which can
1997, I co-wrote a full-length musical
called Chrystanthia. Somewhere along ~happen often enough.
the way, I picked up game programming as
a hobby, and eventually ended up making
games professionally for home console
systems. Then, in 1998, I discovered how
I could take all my experiences and
combine them when I discovered Flash.
The rest is history. I share my ideas on
my website, www.glenrhodes.com. After studying theatre in London, then
working for several years as an actor in
the US, Todd was introduced to Flash in
2000 and was quickly taken by how it
allowed for both stunning creativity and
programmatic logic application - a truly
left-brain, right brain approach to
production - and has not looked back. He
now works as Creative Director for
Daedalus Media in New York City, which
specializes in the creation of Flash
based corporate presentations primarily
for clients in the investment banking
industry. His more frivolous work and
experimentation can be found at
personal website, www.27Bobs.com.
Layout
The code in this book is written as it appears in the final files, with one exception:
<•>
the Continuation symbol denotes where a line of code is too wide to fit on our
page. If you're typing it in, you should just continue on the same line.
A word about source files and technical support
You can download the source files for this book from:
http://www. friendsofed.com/books/flash _ mx_ titles/inspiri ng_interfaces/i ndex.html
As with all friends of ED titles, this book is backed up with free, fast and friendly
technical support from our editors. If you have a query or problem, mail
[email protected], and we will get back to you as soon as possible.
If you have any comments about this book, good, bad, or ugly, we're keen to hear
from you. Mail [email protected] and have your say!
There's a host of other features at friendsofed.com that may interest you - interviews
with top designers, samples from our other books, and a message board where you
can post your questions, discussions and answers.
Share the wealth!
--------------------------- I
......
\ Flash as the Ideal Medium
The days of Flash as a creative luxury are long gone. After months of
I downsizing. Flash creativity has been on a huge rationalization program. It
is no longer enough to present animation in millions of colors and a
hundred transparencies. It is no longer sufficient to provide interactivity
and dynamism for their own sake.
The purpose of this collection is to show how designers have taken Flash
and made it work for its supper. What we discover is a series of creations
that place Flash at the hub of cutting edge web content.
The end result is a snapshot of Flash as the Ideal Medium.
In these amazing examples we see the software pushed to its limits to
create unbeatable applications - a collapsible family tree. an interactive
video learning system. and a drawing tool, capable of running online!
Beyond this we dip into the back-end capabilities to look at how to
improve Flash still further. Some staple XML and PHP routines are brought
in to add a bit of spice, while Flash's mysterious sharedObject command
is hunted down and tamed to create a hybrid Tamagotchi-style houseplant
- perfectly suited to lure surfers back to your website!
DESIGNING PRELOADERS
Let's begin this chapter with a little honesty - I am an
impatient person. I have never been one to wait patiently,
as I always feel there is something more productive I could
be doing with my time. Traffic jams, delayed flights,
shoppers in front of me digging for change at the check
out counter of a grocery store - all anathema to me. I'd
speak more on this subject, but you probably get the idea
and I'm sorry, I don't really have the time ...
Of course my point is that, for most of us, when we have
places to go, anything that stands in our way can become
an annoyance. With traffic jams, delayed flights and
inconsiderate shoppers, we don't have many options other
than to wait. On the Web, however, if waiting gets irritating
there are an infinite amount of destinations to explore, all
just a click away. So if we want to keep our audience's
attention, we have to make sure that there is no
opportunity for them to get bored. If our site takes too
long to load, the chances are that most users will never see
our painstakingly designed content. So we need to avoid
this risk, by providing a preloader.
This is a 3D preloader used at 27Bobs.com. As the site
loads, the sketchy wireframe is replaced by a solid 3D
block, representing the "chalk" used to draw the main site.
We'll be seeing more from 27Bobs a little bit later.
2
What is a preloader? Let's amend our preloader definition to express these
ideas. We have:
Look up "preloader" in Webster's Dictionary and you'll
find ... nothing. No doubt it will make its way into the
a preloader is a small piece of content a fraction of
reference manuals shortly, but for the time being let's
the size of the main content, which is quickly loaded
form our own definition. Obviously, the word itself implies
before the rest of your movie and offers a
that a preloader appears before whatever main content
combination of feedback, information and
may be loading. Since anything on the Web needs to be
entertainment for the user during the time it takes to
loaded to be seen, including a preloader, I would go
load the main content.
further and say that a preloader would have a significantly
smaller file size than whatever is the main content that is
The preloader at DaedalusMedia.com uses the number of
to be loaded. In order to fulfill its function, it must load
bytes loaded to advance a frame-based animation. This
pretty much instantly.
animation, which consists of cracks slowly covering a
statue, culminates in the statue exploding into fragments
So we have a small piece of content that loads before. and
as the site is fully loaded.
is the fraction of the size of, the main content. What is the
purpose of this smaller content? Well, in its basest form, a
preloader simply gives the user feedback that something is
occurring. Without a preloader, a user seeing a blank
screen with no content might feel that the browser or
computer has frozen. A simple "loading. .. " appearing on
the screen would serve this purpose, although if it just sits
there for too long we are running the same risk again.
Daedalus
;,redil1
Of course, a preloader could, and should, go further and
give the user constant information on what is occurring
and what is actually being loaded. Text information
displaying what data is being transferred or a loading bar
that shows what percentage has been loaded would
accomplish this. By keeping the user in the know about
what is going on, they will be less frustrated at the delay.
A traffic jam would be more bearable with traffic
information that kept you updated as to the reason for the
delay and when the wait might be over.
Finally, to help pass the time while stuck in that car, what
could be better than the radio playing tunes while you
wait? Entertainment during delays can make the time pass
much more quickly. As the cliche goes, time flies when
you're having fun. Why not apply that to your preload
time?
