Flash MX Application & Interface Design: Data delivery, navigation, and fun in Flash MX, XML, and PHP PDF
Preview Flash MX Application & Interface Design: Data delivery, navigation, and fun in Flash MX, XML, and PHP
Flash 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?
The list of books you might like
