Advanced Flash Interface Design

by Kemper, Michael

• ISBN13: 9781590595558
• ISBN10: 1590595556
• Format: Paperback
• Copyright: 2006-05-08
• Publisher: Textstream

Summary

Flash allows users to create some amazing interactive interfaces to interact with Rich Internet Applications, eLearning systems, and simple web sites. In this book, two of the most talented Flash designers in the world will show you how to use them effectively to create breathtaking visuals for your Flash web sites. You'll also learn how to take advantage of Flash's powerful built-in vector-based drawing tools. The authors discuss general background theory, such as site planning, colour theory, and Information architecture. They reveal techniques using gradients, layers, lighting and shadowing, 3D objects, animation, and photo editing. Techniques are illustrated and the book concludes with a discussion of usability and final tweaks. There is also a tutorial on testing your work, and exporting and finally publishing it.

Table of Contents

About the Authors	xiii
About the Technical Reviewer	xiv
About the Cover Image Designer	xv
Acknowledgments	xvi
Introduction	xvii
Flash Overview	3	(12)
Why Flash?	4	(1)
From the user perspective	4	(1)
From the creator perspective	4	(1)
Ease of use	5	(1)
Animation	6	(2)
Video integration	8	(1)
Browser autonomy	8	(1)
Browser embedding	9	(1)
Benefits of vector graphics over raster graphics	10	(1)
Summary	11	(4)
Creating Usable and Innovative Experiences	15	(18)
Creative direction	15	(5)
Design layers	16	(1)
Purpose	16	(1)
Style	17	(1)
Structure	17	(1)
Craftsmanship	18	(1)
Surface	19	(1)
Critiques	19	(1)
The experience	20	(11)
Metaphors	20	(1)
Tangible metaphors	21	(1)
Conceptual metaphors	22	(1)
Physical metaphors	23	(1)
Narrative in Flash	24	(2)
Interactive animation	26	(1)
Benefits of animation	26	(1)
Components for interaction	26	(1)
Emerging interactions	27	(4)
Summary	31	(2)
Interface Designers' Guide to Color	33	(28)
Basic color theory	34	(5)
Selecting color	35	(2)
Monochromatic	37	(1)
Analogous	37	(1)
Complementary	38	(1)
Split complement	38	(1)
Triadic	38	(1)
Tetrad	39	(1)
Color on the computer	39	(7)
Color modes	40	(1)
Gamma	41	(1)
Nuts and bolts	41	(2)
Color systems	43	(1)
Hexadecimal color	43	(1)
Other web palettes	44	(1)
HSL color	44	(1)
HSB color	45	(1)
LAB color	45	(1)
Communicating with color	46	(4)
Color symbolism	47	(1)
Color psychology	48	(1)
Color strategy	49	(1)
Design tools and techniques	50	(7)
Using Flash color palettes	50	(6)
Applying color using Action Script	56	(1)
Summary	57	(4)
Planning Your Interface Design	61	(10)
Initial information	61	(2)
Structure planning	63	(1)
Wireframing and prototyping	64	(3)
What is prototyping?	66	(1)
Using your space efficiently	67	(2)
Text spacing	67	(1)
Interface padding	68	(1)
Uniformity	69	(1)
Summary	69	(2)
Vector Drawing and Effects in Flash and Illustrator	71	(24)
Pros and cons: Illustrator and Flash	72	(1)
Making it pop	73	(9)
Creating button graphics using Illustrator	73	(5)
Creating inlays using Illustrator	78	(2)
Creating indents using Illustrator	80	(2)
Technical drawing in Illustrator	82	(5)
Photo illustration using Illustrator	82	(5)
Interface layout design in Illustrator	87	(1)
Moving from Illustrator to Flash	88	(5)
Exporting SWF graphics from Illustrator	88	(2)
Importing SWF graphics created in Illustrator	90	(3)
Summary	93	(2)
Understanding the Timeline and Layers	95	(18)
Anatomy of the timeline	96	(4)
A layering example: the gel pill	100	(6)
Creating the layers	100	(1)
Drawing the pill body	101	(1)
Adding the bottom highlight	101	(2)
Adding the top highlight	103	(1)
Creating a translucent shadow	104	(1)
Adding text	104	(2)
Blending modes	106	(2)
Masks	108	(1)
Motion guides	109	(1)
Summary	110	(3)
Working with 3D Vectors	113	(22)
Working with real 3D assets	114	(1)
Working with semirealistic 3D assets	114	(19)
User icon	115	(1)
The base shape	115	(1)
The bottom highlight	116	(1)
Depth with inner glow	117	(1)
Adding gloss	118	(1)
Domain icon	119	(1)
Creating the shadow	119	(1)
Creating the orb	119	(1)
Outer glow	120	(1)
Inner glow	121	(1)
Stars	121	(1)
Adding gloss	122	(1)
Statistics icon	122	(1)
The base shape	122	(2)
The graph	124	(1)
The reflection	124	(1)
3D graphics using Illustrator and Flash	124	(1)
Creating a 3D vector graphic	124	(9)
Summary	133	(2)
Using Video in Flash	135	(40)
Video content for Flash	136	(14)
Shooting video content for the Web: A basic guide	136	(1)
Equipment basics	137	(3)
Shooting and editing basics	140	(2)
Final Cut Pro basics	142	(1)
Batch-capturing video	142	(3)
Editing basics	145	(3)
Exporting your sequence	148	(2)
Bringing video content into Flash	150	(18)
Formats and compression	150	(1)
Encoding the video	151	(6)
Using video in Flash	157	(2)
Bitstreaming video	159	(4)
Embedding video	163	(5)
Summary	168	(1)
Glossary	169	(6)
Photoshop Techniques	175	(60)
Photoshop overview	176	(2)
Setting up your file	178	(3)
Creating the background	181	(11)
Light source	181	(4)
Background depth	185	(1)
Foundation shapes	185	(1)
Foundation base	185	(2)
Foundation borders	187	(1)
Background shadows	188	(4)
Experimenting with colors	192	(1)
Adding the logo	192	(2)
Creating the interface layers	194	(23)
Visor shape	195	(3)
Body highlights	198	(5)
The visor top group	203	(1)
Visor shading	204	(2)
Seam	206	(2)
Adding gloss	208	(3)
The visor inset shape	211	(1)
Creating the secondary navigation area	212	(3)
Adding details to the visor	215	(2)
Creating the primary navigation	217	(7)
Visor Top group and Primary Nav	218	(3)
Adding a highlight	221	(1)
Navigation bar shadow	222	(2)
Adding details to the logo	224	(1)
Cloud pictures	224	(1)
Light rays	225	(1)
Creating the content containers	225	(6)
Main content area	225	(1)
Content background	225	(2)
Content top	227	(2)
Content borders	229	(1)
Left column content area	230	(1)
Content and buttons	231	(1)
Mouseover states	231	(1)
Moving from Photoshop to Flash	232	(1)
Summary	232	(3)
Moving from Photoshop to Flash and Effective PNGs	235	(20)
Preparing the files	236	(6)
The background	237	(1)
The logo	238	(2)
The logo rays	240	(1)
The Flash file	240	(2)
Navigation bar tutorial	242	(7)
Re-creating in vector	242	(4)
Masking the navigation bar	246	(2)
Adding details	248	(1)
Animating the navigation bar	249	(1)
Logo tutorial	249	(2)
Animating the logo	249	(1)
Animating the rays	250	(1)
Exporting vector objects to create raster assets	251	(2)
Summary	253	(2)
Creating Animated Effects	255	(36)
Cause, effect, and timing	256	(2)
Realistic car	257	(1)
Cartoon car	257	(1)
Depth	258	(1)
Implying speed	258	(1)
Motion blur	258	(1)
Faking motion blur	258	(1)
Animation style	259	(8)
Frame rate	259	(1)
Animation effects	260	(1)
Elasticity	260	(3)
Bounce	263	(2)
Overflow	265	(2)
ActionScript animation techniques	267	(2)
Setting up the movie	267	(1)
Scripting animation	267	(2)
Deconstructing interactive animation	269	(19)
Setting up the animation	269	(5)
Animating the menu	274	(10)
Setting up the icon	284	(1)
Animating the icon	285	(2)
Scripting the interaction	287	(1)
Summary	288	(3)
Flash Textures	291	(14)
Creating texture with displacement maps	291	(1)
Still images	292	(5)
Animated images	297	(6)
Summary	303	(2)
Photo Editing in Photoshop and Flash	305	(32)
Working with bitmapped images	306	(18)
Scaling down our image size	307	(1)
Straightening up our lighthouse	307	(3)
Removing our image background	310	(7)
Color-correcting our image	317	(7)
Images in Flash	324	(5)
Exploring blend modes	329	(2)
Filters	331	(4)
Summary	335	(2)
Finishing Off Your Site	337	(8)
Optimization	337	(2)
The Bandwidth Profiler	338	(1)
Compressing assets	338	(1)
Publishing	339	(1)
Embedding in HTML	339	(1)
Detecting Flash	340	(1)
QA testing	340	(1)
Launching and post launch	341	(2)
Maintenance	341	(1)
Source files	342	(1)
Continue analyzing	342	(1)
Usability testing	342	(1)
Summary	343	(2)
Index	345