introduction to Adobe® Flash® Professional CS6 Complete Coverage of the Adobe® Certified Associate Exam: Rich Media Communication using Adobe® Flash® Professional CS6 AUTHOR Fred Gerantabee ADDITIONAL WRITING Chad Chelius PROJECT MANAGER Cheri White VIDEO PRODUCTION Chris Leavey VP & EXECUTIVE PUBLISHER Don Fowley EDITOR Bryan Gambrel DIRECTOR OF SALES Mitchell Beaton EXECUTIVE MARKETING MANAGER Chris Ruel ASSISTANT MARKETING MANAGER Debbie Martin EDITORIAL PROGRAM ASSISTANT Jennifer Lartz SENIOR PRODUCTION MANAGER Janis Soo ASSOCIATE PRODUCTION MANAGER Joel Balbin CREATIVE DIRECTOR Harry Nolan COVER DESIGNER Georgina Smith TECHNOLOGY & MEDIA Tom Kulesa, Wendy Ashenberg TECHNICAL EDITORS Haziel Olivera, Sean McKnight ART DIRECTOR Jennifer Smith This book was set in Bembo by Spoke & Wheel with production and development services provided by American Graphics Institute. It was printed and bound by Courier Kendallville. The covers were printed by Lehigh Phoenix. Copyright © 2012 by John Wiley & Sons, Inc. All rights reserved. Cover photo: © Marc Romanelli/Age Fotostock America, Inc. No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, Inc. 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, (201) 748-6011, fax (201) 748-6008. Adobe Acrobat, Adobe Creative Suite, Adobe Dreamweaver, Adobe Flash Professional, Adobe InDesign, Adobe Photoshop, and Adobe Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Adobe product screenshot(s) reprinted with permission from Adobe Systems Incorporated. The Apple Logo is a registered trademark of Apple Inc. registered in the U.S. and other countries. Android is a trademark of Google Inc. The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License. Other product and company names mentioned herein may be the trademarks of their respective owners. The example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious. No association with any real company, organization, product, domain name, e-mail address, logo, person, place, or event is intended or should be inferred. The book expresses the author’s views and opinions. The information contained in this book is provided without any express, statutory, or implied warranties. Neither the authors, John Wiley & Sons, Inc., nor their resellers or distributors will be held liable for any damages caused or alleged to be caused either directly or indirectly by this book. Founded in 1807, John Wiley & Sons, Inc. has been a valued source of knowledge and understanding for more than 200 years, helping people around the world meet their needs and fulfill their aspirations. Our company is built on a foundation of principles that include responsibility to the communities we serve and where we live and work. In 2008, we launched a Corporate Citizenship Initiative, a global effort to address the environmental, social, economic, and ethical challenges we face in our business. Among the issues we are addressing are carbon impact, paper specifications and procurement, ethical conduct within our business and among our vendors, and community and charitable support. For more information, please visit our website: www.wiley.com/go/citizenship. ISBN 978-1-1183-9407-6 Printed in the United States of America 10 9 8 7 6 5 4 3 2 1 Preface Welcome to Introduction to Adobe Flash Professional CS6. Part of Wiley’s Adobe courseware series, this book is designed as a complete introduction to Adobe Flash Professional for Creative Suite 6. With this series, we’ve set out to produce a series of textbooks that deliver compelling and innovative teaching solutions to instructors and superior learning experiences for students. Infused and informed by in-depth knowledge from Adobe Certified Experts and Flash professionals who have created many official training titles for Adobe Systems, and crafted by a publisher known worldwide for the pedagogical quality of its products, these textbooks maximize skills transfer in minimum time. Students are challenged to reach their potential by using their new technical skills as highly productive members of the workforce. This courseware was designed to ensure you receive the topical coverage that is most relevant to your personal and professional success. Wiley’s Adobe courseware Program Wiley’s Adobe courseware series is a complete program for instructors and institutions to prepare and deliver great courses on Adobe software technologies. With this courseware series, we recognize that—because of the rapid pace of change in the technology and curriculum developed by Adobe—there is an ongoing set of needs beyond classroom instruction tools for an instructor to be ready to teach the course. This courseware program endeavors to provide solutions for all these needs in a systematic manner in order to ensure a successful and rewarding course experience for both instructor and student via technical and curriculum training for instructor readiness with new software releases and a great set of tools for delivering instruction in the classroom and lab. All are important to the smooth delivery of a course on Adobe software, and all are provided with Wiley’s Adobe courseware program. We think about this model as a gauge for ensuring that we completely support you in your goal of teaching a great course. VIDEO TUTORIALS Your Introduction to Adobe Flash Professional CS6 textbook comes with access to approximately 2 hours of online video tutorials. The video tutorials are designed to supplement each lesson in the book. These video tutorials are created and presented by the authors and demonstrate topics covered in each lesson or related topics that enhance your understanding of each lesson. iii Illustrated Book Tour Pedagogical Features The Wiley Adobe courseware and textbooks for Adobe Creative Suite 6 are designed as complete introductory textbooks on a particular Adobe software product. The books are also designed to cover all the learning objectives for that product’s related Adobe Certified Associate (ACA) exam. The ACA exam is industry-recognized and identifies skills and topics expected for entry-level positions. Each ACA exam item is referred to as an exam objective, and these objectives are highlighted throughout the textbooks. Many pedagogical features have been developed specifically for this courseware. Unique features of our task-based approach include a Lesson Skill Matrix that correlates skills taught in each lesson to the ACA objectives; Certification Ready sidebars; Step-by-Step exercises; and two levels of increasingly rigorous lesson-ending activities—Competency Assessment and Proficiency Assessment. Presenting the extensive procedural information and technical concepts woven throughout the textbook raises challenges for the student and instructor alike. The Illustrated Book Tour that follows provides a guide to the rich features contributing to Wiley’s Adobe courseware pedagogical plan. Following is a list of key features in each lesson designed to prepare students for success on the certification exams and in the workplace: • Each lesson begins with a Lesson Skill Matrix. More than a standard list of learning objectives, the skill matrix correlates each software skill covered in the lesson to the specific ACA exam objective. • Each lesson features a real-world Business Case scenario that places the software skills and knowledge to be acquired in a real-world setting. • Concise and frequent Step-by-Step instructions teach students new features and provide an opportunity for hands-on practice. Numbered steps give detailed instructions to help students learn software skills. The steps also show results and screen images to match what students should see on their computer screens. • Illustrations provide visual feedback as students work through the exercises. The images reinforce key concepts, provide visual clues about the steps, and allow students to check their progress. • When the text instructs a student to use a particular tool, tool images are shown within the text. • Important technical vocabulary is listed in the Key Terms section at the beginning of the lesson. When these terms are used later in the lesson, they appear in bold italic type and are defined. The Glossary contains all of the key terms and their definitions. • Engaging point-of-use Reader Aids located throughout the lessons tell students why this topic is relevant (The Bottom Line) and provide students with helpful hints (identified with the words Take Note) or ways to expand their skills (identified using the text Learning More). Reader aids also provide additional relevant or background information that adds value to the lesson. • Certification Ready features throughout the text signal students where a specific certification objective is covered. They provide students with a chance to check their understanding of that particular ACA exam objective and, if necessary, review the section v Illustrated Book Tour of the lesson where it is covered. This courseware provides complete preparation for ACA certification. • Each lesson ends with a Skill Summary, recapping the ACA exam skills covered in the lesson. • Accompanying video tutorials for each lesson provide a visual way to see selected content from the each lesson presented by the authors. • The Knowledge Assessment section provides a total of 20 questions from a mix of True/ False and Multiple Choice, testing students on concepts learned in the lesson. • Competency Assessment and Proficiency Assessment sections provide progressively more challenging lesson-ending activities. • Integrated Circling Back projects provide students with an opportunity to renew and practice skills learned in previous lessons. • The student companion website contains the online files needed for each lesson. vi Introduction to Adobe Flash Professional CS6 Illustrated Book Tour Lesson 2 Getting Started with the Drawing Tools Key Terms Key Terms • Anchor Points • Line tool • Combine Objects • Merge Drawing • Drawing Objects • Pen tool • gradient • transform • layers Skill Objective Identify general and Flash-specific techniques to create rich media elements that are 2.3 Lesson Skill Matrix accessible and readable Organize a Flash document 2.5 Use the Timeline 3.3 Use tools on the Tools panel to select, create, and manipulate graphics and text 4.2 Import and modify graphics 4.3 Create text 4.4 Adjust text properties 4.5 Conduct basic technical tests 5.1 Business case Business Case There’s an animated fi sh cartoon series that you need to create for a client’s website. Your artwork is supposed to look more like a cartoon than the real thing. It will be important for you to learn how to draw artwork from scratch in order to create your own characters for the cartoon as well as the underwater environment for the fi sh to live in. Starting up Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting the Flash workspace” in the Starting up section of this book. You will work with several fi les from the fl 02lessons folder in this lesson. Make sure that you have loaded the fl lessons folder onto your hard drive from http://www.wiley.com/college/sc/adobeseries. See “Loading lesson fi les” in the Starting up section of this book. Lesson 2: Getting Started with the Drawing Tools 39 Lesson 1 Practicing with the Flash tools Learning More The Swatches panel Certification Ready CerRtiefaicdayt i2o.n1 iYs ouus’eldl steoe stehte c sowloartsc hfo irc boanc (kgr)o quunidtes, af iflelws, otiumtleins eins, Fanlads ht—ypiet. oApse nshso twhen Siwn aFticghuerse p 1a-n2e3l,, wyohui ccha n webW-shaafet acorelo trhse? chuhsaeos dot hsfeoe rfa robolimdliet yro vmtoeor s n2hi0oto0wr cst.oYhleoo urw pwerbeil-sles altefse aa rcnnod hl osoerw vpe atnno ep alr detdhse aytt o gsuhraro dowiwesn ntth sce, u o2sr1t o6cm rwe acetobel -oysroasfu ear n coodw lognrr.as dFcioleamnshtms atolosno tl hy e Swatches panel in Lesson 2, “Getting Started with the Drawing Tools.” Learning More Figure 1-23: The Flash CS6 Swatches panel. The six-character code at the top of the Swatches panel is hexadecimal code, the standard color-coding system for the Web. As you choose colors from the Swatches panel, you’ll see the hexadecimal value for the selected color displayed at the top. The Color Picker in Adobe CS6 applications such as Illustrator and Photoshop also features hexadecimal values, so you can easily match colors between applications by copying and pasting the code shown. Practicing with the Flash tools Now that you’ve had a tour of the Flash tools and workspace, it’s time to take them for a test drive. In the following exercises, you’ll complete the illustration shown in fl 0102_fi sh.fl a while getting the feel for the selection, drawing, and transformation tools. You’ll also use Flash tweening to create your fi rst animation. The drawing and selection tools in action Your fi rst steps will be to create and modify shapes and freehand artwork with the drawing tools, and then fi ne-tune your work with the selection tools. The selection tools work as a team with the drawing tools to position and modify shapes, illustrations, and type. Step-by-Step Step-by-Step Follow these steps to use the drawing and selection tools 1. Choose File > Open and open the fl 0102.fl a fi le located in the fl 01lessons folder. 2. Choose File > Save As; the Save As dialog box appears. In the Save As text fi eld, type fl 0102_work.fl a, then navigate to the fl 01lessons folder and press Save. 3. Choose the Selection tool () in the Tools panel. This versatile tool can select, move, and manipulate objects directly on the Stage. 24 Introduction to Adobe Flash Professional CS6 vii Illustrated Book Tour Lesson 1 Practicing with the Flash tools 2. To change the body’s color, click on the Fill color swatch at the bottom of the Tools panel. In the resulting Swatches panel, choose the orange/yellow gradient located at the bottom of the panel to apply it to the selected area (Figure 1-29). Deselect the fi sh by choosing Edit > Deselect All or by clicking off stage in the gray work area. View the results of applying a gradient in Figure 1-30. Illustrations Figure 1-29: Give your fi sh more depth by fi lling it Figure 1-30: View the results of applying a gradient. with a gradient from your Swatches panel. Lesson 1 3. The Eyedropper tool () enables you to sample a color from one object and transfer it to The Flash workspace another. You’ll use it to apply the body color to the fi sh’s fi ns. Using the Selection tool (), diffC eererRntWteTi otfhaoioacodltsla s ayp tri anei4n ott.ehhn2lee? TTgthrhheaeep p hFFainllcaaess slho ht noT T otoihcoooel snlS sp-t opaangnaeelny.l e Y(vFloiieugw uc,r aeon r1 ut-os8e )e tixhnpeca lundodd eutsbh lteeh pea artnrooeowl lassn aydto tsuhe een eateolldp t htooef ctthoreeoa lTtse.o, oselsl epcatn, eolr t eod cito llapse 4. httCatohinomh adlsotdea h oa.md posSoeppled wlelEe eat ndchtr htsiett .eht >TPh enea heSD ieEnwh etyiI sfnecBetod klukelr ocecoBkrytpo e Aapattnte nlltdrledo tt oatocoopll o iodp(clell k yfsl)r ee ooiatltnemsn tccdyo te ot shatuoehlel nlee cTi chtesetoeaa molntcehhlgcsse e tfi ope Iannadnnn ktsfi eh o onlBe .bt s ojCh.Setatctlatilt ceg’bsk e to s.oot toIrhnonl c ak (etreh e oe c)sn o eTf llrtooeohcrome.tl esYb dtpooh adauenty’ lme tlohl ,uefe ncs tesluhia c etmhk fi ee s h Property Inspector to set a stroke color and style to apply. Selection Tool (V) 5. In the Property Inspector, click the Stroke color swatch and type #FF6600 (orange) into Subselection Tool (A) the hexadecimal fi eld at the top-left corner of the Swatches panel that appears. Press Enter Free Transform Tool (Q) or Return to set this color. 3D Rotation Tool (W) 6. Click on the Style menu that appears below the color swatches. Choose the ragged style Lasso Tool (L) from the drop-down menu (Figure 1-31). As shown in Figure 1-32, click on the edge of Pen Tool (P) the fi sh body to apply the new stroke color and style. Text Tool (T) Line Tool (N) Rectangle Tool (R) Pencil Tool (Y) Brush Tool (B) Deco Tool (U) Bone Tool (M) Paint Bucket Tool (K) Eyedropper Tool (I) Eraser Tool (E) Hand Tool (H) Zoom Tool (Z) Stroke Color Figure 1-31: Choose a stroke color and style. Figure 1-32: Apply them using the Ink Bottle tool. Fill Color Lesson 1: Flash CS6 Jumpstart 29 Black and White Swap Colors Snap to Objects Smooth Straighten Software Orientations Figure 1-8: The Tools panel. 14 Introduction to Adobe Flash Professional CS6 Lesson 9 Controlling Movie Clip Timelines Controlling Movie Clip Timelines Step-by-Step Follow these steps to control Movie Clip Timelines 1. Open the Actions panel by choosing Window > Actions from the main menu. Click on frame 42 of the Actions layer to make sure you’re adding actions to this frame. The gotoAndStop( ) action you added in the last section should still be hanging around here. You may remember from the fi nished fi le that this animation will feature an intense and sinimdepfil en sitte ospta(n )d oacff t iboent wanede nt hceant amnodv bei rodn. Ltoe ts’os mswea fip noeur tp tohiantt gs ootf othAins danSitmopat(io )n a.ction with a 2. Press the Delete the selected action(s) button twice to clear out the actions panel. Now click the Add a new item to the script button and choose fl ash.display > MovieClip > Methods > stop. Hopefully this enigmatic menu is getting a bit more familiar at this point. You’ll use it pretty frequently. 3. Type this in the Object text fi eld. The Actions panel should look like Figure 9-13 below when complete. Close the Actions panels when you are done. Figure 9-13: Swap out the gotoAndStop( ) action for a stop( ) action. 4. You may not have noticed, but the bird and cat are twitching and blinking respectively throughout the movie. It may be nice to hold off these movements until the bird has alighted atop the cat. You can stop and play the bird and cat Eye timelines the same way you stop and play the main timeline. But fi rst you’ll need a way to refer to each of these objects. 5. Using the Selection tool (), click on the bird Movie Clip on the Stage as shown in Figure 9-14. Click on the Properties tab to make sure the Property Inspector is accessible. Take Note Take Note... The Actions panel often interferes with your access of objects on the Stage. Refer to Lesson 7 for tips on managing your workspace. Most Flash users who rely heavily on scripting create custom workspaces to help manage this sometimes cumbersome panel. 294 Introduction to Adobe Flash Professional CS6 viii Introduction to Adobe Flash Professional CS6