ADOBE® FLASH® CS3 CREATE AND DELIVER RICH, INTERACTIVE CONTENT

Reviewer’s Guide ADOBE FLASH CS3 CREATE AND DELIVER RICH, INTERACTIVE CONTENT ® ® With a new streamlined user interface, timesaving design and development tools, and impressive integration with Adobe Photoshop® CS3 and Adobe Illustrator® CS3, Adobe Flash CS3 Professional ensures a fast, fluid, and efficient workflow. All-new Adobe Flash CS3 Professional software is the most advanced authoring environment for rich, interactive content creation. Whether creating interactive websites, rich media advertisements, instructional media, engaging presentations, online games, or content for mobile devices, designers and developers worldwide depend on Flash to ensure that their content reaches the widest audience. Available for Microsoft® Windows® and as a universal-binary application for Mac, Flash CS3 provides the tools you need to be successful. Adobe Flash CS3 Professional is also available as a component of: • Adobe Creative Suite® 3 Web Premium • Adobe Creative Suite 3 Web Standard • Adobe Creative Suite 3 Design Premium • Adobe Creative Suite 3 Production Premium • Adobe Creative Suite 3 Master Collection This Reviewer’s Guide provides a hands-on tour of the most important and powerful new features in Adobe Flash CS3 Professional. Here is an overview: Part 1: Experience a new user interface—Enjoy a new Adobe Creative Suite 3 user interface when working with Flash CS3. Similar tools, familiar icons, and customizable workspaces enable you to move smoothly between Flash and other Adobe design software. (Page 2) Part 2: Import content from Photoshop and Illustrator—Take advantage of impressive integration with Adobe Photoshop CS3 and Adobe Illustrator CS3 software. Copy and paste or import native content into your Flash project while preserving structural information. (Page 3) Part 3: Use new drawing tools—Express your creativity with the new Pen tool (like that found in Illustrator) and new Shape Primitive tools that allow for the creation and editing of dynamic rectangles and ovals. (Page 6) Part 4: Experience the power and usability of ActionScript™ 3.0—Create an animation in ActionScript 3.0 without writing a single line of code. Then explore an advanced debugger and better code-creation and editing tools. (Page 7) Part 5: Create interactive content with Emmy Award-winning Flash video technology— Incorporate video content into your Flash projects with ease using the new sophisticated Flash Video Encoder, and take advantage of an improved QuickTime export feature. (Page 11) Take advantage of Emmy Awardwinning Flash video technology and the ubiquitous Adobe Flash Player software to deliver interactive content. Part 6: Build rich interfaces quickly with UI components—Complete projects more quickly and more efficiently with the use of ActionScript 3.0 user-interface and video components with revolutionary new simplified skinning functionality. (Page 14) Part 7: Author mobile content with Adobe Device Central CS3—Publish your content for use on mobile devices with confidence using Adobe Device Central CS3 software to simulate real-world scenarios on the most current devices. (Page 15) Top ten features • Native Photoshop and Illustrator Import (Page 3) • Convert animation to ActionScript 3.0 (Page 7) • Common Adobe Creative Suite 3 User Interface (Page 2) • ActionScript 3.0 development with advanced debugger (Page 10) • Adobe Device Central (Page 15) • New drawing tools including a Pen tool like in Illustrator (Page 6) • New optimized and easily skinned UI components for ActionScript 3.0 (Page 14) • Advanced QuickTime export (Page 14) • Sophisticated video encoding (Page 13) • Timesaving programming tools (Page 10) Please do the following before starting this tour: • Use the product installation DVDs to perform a Typical Install of either Adobe Creative Suite 3 Web Premium or Adobe Creative Suite 3 Design Premium. This ensures that the software is configured correctly for this tour. If you have previously installed Adobe Flash CS3 Professional as an individual application, be sure to uninstall it before installing Web Premium or Design Premium. • Download Flash_RG_Assets.zip from the Creative Suite 3 Press Resources website at www.adobe.com/aboutadobe/pressroom/cs3. After downloading, extract the contents of the file to your local hard drive. This will give you a folder named Flash_RG_Assets, which in turn will include several subfolders. • If you’ve previously used Flash CS3, open or create a blank document in Flash and choose Window > Workspace > Default to restore the default configuration of panels. Flash CS3 has a new, elegantly redesigned interface featuring workspace panels that dock and group for optimal organization while eliminating overlapping palettes and windows. You can save custom workspaces and leverage your knowledge of the similar tools, panels, and keyboard shortcuts used in other Adobe software. In fact, this unified user interface is now consistent across Flash, Photoshop, Illustrator, Adobe InDesign® CS3, Adobe After Effects® CS3, Adobe Premiere® Pro CS3, and Adobe Soundbooth®CS3 software. Try it: Experience a new user interface The new user interface in Flash CS3 is comprised of dockable panels that can easily be repositioned, resized, and adjusted to your liking and needs. First, you’ll create a new Flash document, and then you’ll customize your workspace. 1. From the Flash CS3 Welcome screen, choose Flash File (ActionScript 3.0) from the Create New section. Before you begin Part 1: Experience a new user interface The Flash Welcome Screen gives you quick access to recent documents and also helps you get started with creating new files—either from scratch or from existing samples or templates. Adobe Flash CS3 Professional Reviewer’s Guide 2 When a dock is viewed in iconic mode, you can adjust its width to show the names of the panels (left) or just the icons (right). 2. Click the double white arrows that appear at the top of the panel dock (in a dark gray area) to reduce the panels to an iconic mode. 3. Click any of the icons to open individual panels temporarily, and click away from the panel to return it to its iconic state. 4. Adjust the width of the dock by clicking and dragging on the far left edge of the dock. Your cursor will change to a double-pointed arrow to indicate the resize behavior. Flash CS3 allows you to create multiple docks which can be attached to the left, right, or bottom of your screen. Let’s create a second dock. 5. Choose Window > Actions to open the Actions panel. It appears as a floating panel. 6. Click and drag the tab of the Actions panel (where the name of the panel appears) towards the right side of the screen. As you approach the dock, a bar animates outward to meet the Actions panel. 7. Release the mouse. You’ve now created a second dock that contains the Actions panel. 8. Change the second dock to also appear in iconic mode (as in step 2 above). Now you can easily access the Actions panel as needed, without it getting in the way. 9. Open additional panels, and position them or add them to docks as you see fit. Once you’ve arranged your panels to your liking, you can save the setup as a custom workspace, which you can then access at any time in the future. 10. Choose Window > Workspace > Save Current, give your workspace a name, and click OK. As an integral part of the Adobe Creative Suite 3 family, Flash CS3 offers impressive integration with Photoshop and Illustrator. Designers and developers are now free to use the applications they feel most comfortable with, yet still be able to work within the powerful design and development environment of Flash—without sacrifice. Try it: Import content from Photoshop Rather than try to create all of the elements of your design from scratch in Flash, it is now easy to use the artwork that you’ve already created in Photoshop. You already have an untitled Flash document open, so for this part of the tour, imagine that you’ve already created some content in Photoshop, and you’d now like to bring that content into your Flash project. 1. Choose File > Import To Stage. 2. Select the fma_import.psd file, and click Import. At this point, Flash presents you with an Import dialog box that details the entire hierarchy of the Photoshop file. Along the left side, you can check or uncheck the layer groups or individual layers that you want to import. 3. Click the Aquo Red layer group’s disclosure triangle to reveal its contents. 4. Select the Get Energy! text layer. On the right side of the Import To Stage dialog box, you’ll notice several options for the selected layer. Since this layer contains text, you may decide that you want to be able to edit that text once inside your Flash document as well. 5. Choose the Editable Text option at the top right of the dialog box. Besides making some text editable, you may decide that you want to animate the logo in Flash. While you can always create Movie Clip symbols within Flash, you can save time by creating them right here, while you’re importing the Photoshop content. 6. Select the Logo And Corner layer group. 7. On the right side of the dialog box, select Create Movie Clip For This Layer. 8. Enter a name for the instance, such as AquoLogo. The dock on the left is set to iconic view, while the dock on the right is set to reveal the full panels. Part 2: Import content from Photoshop and Illustrator Adobe Flash CS3 Professional Reviewer’s Guide 3 When importing native Photoshop content, the new Import dialog box gives you a tremendous amount of control, including how each layer is imported into the Flash document. Whether or not you specify the exact size or dimensions of your Flash file, you might want to use the dimensions of your original Photoshop file. You can easily pick up that setting and apply it to your Flash document as well. 9. At the bottom of the Import To Stage dialog box, choose Set Stage Size To Same Size As Photoshop Canvas (800x320 for this particular file). 10. Click OK to import the Photoshop content into your Flash document. The content now appears on the stage. Notice that all of the layers are intact and appear on the timeline. But just as you’re admiring the beautiful design, you get a message from the client that a text change needs to be made. 11. Switch to the Text tool . 12. Click on the words Get Energy! on the stage. Since you selected the Editable Text option for that layer during the import process, you can now change that text as needed. 13. Click your cursor in the text, and change it to read “Get More Energy!” No more running back to Photoshop to make simple text edits. Because you’ve set text to remain editable during the import process, making text edits within Flash is now simple and painless. 14. Choose File > Save, and name your document AquoSite.fla. You can save it to any location on your hard drive. Don’t close the file, as you’ll come back to it shortly. Adobe Flash CS3 Professional Reviewer’s Guide 4 Let’s get started on another project—an ad banner for an event that Aquo is sponsoring. In the previous project, we took an existing Photoshop document and brought it into Flash. For this example, however, we’re going to start with an Illustrator document. In truth, while both Illustrator and Flash are vector-based graphics applications, their drawing models have displayed their differences in the past, resulting in less than desirable results when moving content between the applications. Flash CS3 contains a revamped drawing engine that maintains a high level of object fidelity, similar to that found in Illustrator. This means that Illustrator objects—even text—brought into Flash now look just like they did in Illustrator. Try it: Import content from Illustrator 1. Choose File > New. 2. In the New Document dialog box, select Flash File (ActionScript 3.0), and click OK. 3. Choose File > Import To Stage. 4. Select banner_ad_import.ai, and click Import. Similar to what you saw with the Photoshop file before, Flash will present you with an Import dialog box that details each and every object and layer within the Illustrator file. You can use the checkboxes on the far left to determine which objects or layers are imported, and you can also specify options for each object, including the ability to assign movie clips and instance names. 5. Select the FIRST ANNUAL text object. You’ll see that the default setting is to import that item as editable text. Just as with Photoshop files, Flash gives you an unprecedented amount of control over the way Illustrator files are imported. In addition to setting options for each object in your Illustrator file, there’s even an option to import symbols that were in the Illustrator file but weren’t used in the document. 6. Select Set Stage Size To Same Size As Illustrator Artboard. 7. Click OK to import the Illustrator file into your Flash document. Again, you’ll notice that the Illustrator layers have been preserved upon import. While importing an entire Illustrator file into a Flash document is extremely powerful, there are also times when you might want to quickly copy and paste only selected content from one application to the other. Thanks to the updated drawing engine in Flash CS3, you can Adobe Flash CS3 Professional Reviewer’s Guide 5 reliably copy and paste text, symbols, and even clipping masks from Illustrator with no loss in object fidelity or editability. In fact, you’ll find that Flash and Illustrator now share a lot more in common with each other, especially in drawing and creating objects. Before you move on to that topic, let’s save this Flash document. 8. Choose File > Save, and name your document AquoBanner.fla. You can save it to any location on your hard drive. Don’t close the file, as you’ll return to it momentarily. Over the years, professional designers have come to appreciate the power and precision of the vector drawing tools found in Adobe Illustrator—the industry standard for vector graphics creation. Now, you can expect that same level of precise control in Flash CS3 when using the new Pen tool, which looks and behaves like the one found in Adobe Illustrator. Manipulate Bézier control points using the familiar Adobe Illustrator keyboard shortcuts and modifiers. You can even copy and paste or drag and drop artwork from Illustrator into Flash, preserving full fidelity. In addition, Flash introduces a new set of Shape Primitives tools that allow you to quickly create dynamic shapes that can be adjusted on the fly. Try it: Use the new Pen tool So that you have some room to play with the new drawing tools, let’s first create a new Flash document. 1. Choose File > New. 2. In the New Document dialog box, select Flash File (ActionScript 3.0), and click OK. 3. Select the Pen tool . As you move the Pen tool over the stage, you’ll notice that the cursor icon now includes a small “x” . Just as in Illustrator, this indicates that the Pen tool is ready to start drawing a new path. 4. Click once on the stage to start drawing a new path. 5. Move the cursor to a different location on the stage, and click again to create a path segment. 6. Move the mouse again, and this time, click and drag to create a curve. Drawing with the Pen tool in Flash now feels just like drawing with the Pen tool in Illustrator. Part 3: Use new drawing tools While you’re drawing with the Pen tool, you’ll find you can use the same modifier keys (Option or Alt for example) in Flash as you can in Illustrator. The Pen tool really feels and responds just as you would expect if you were drawing in Illustrator. 7. Move your cursor over the original point you created, in order to close the path. Notice that the cursor changes to show an “o” 8. Click to close the path. Editing paths with the Pen tool is also much easier now. 9. Move the cursor over the existing path; the cursor automatically changes to the Add Anchor Point tool . 10. Click to add an anchor point to the path. 11. Move your cursor over an existing anchor point; the cursor automatically changes to the Delete Anchor Point tool . 12. Click to remove the anchor point from the path. , which means a click will close the path. Adobe Flash CS3 Professional Reviewer’s Guide 6 Try it: Use the Shape Primitive tools Another new way to draw in Flash is to visually adjust shape properties from the stage using the new Shape Primitive tools. Draw and manipulate rectangles and ovals—easily round rectangle corners, create pie wedges, define an inner circle radius, and more. 1. Select the Rectangle Primitive tool 3. Switch to the Selection tool The Shape Primitive tools are grouped with the other Shape tools. (you’ll find it hidden beneath the Rectangle tool). 2. Click and drag on the stage to draw a rectangle. . 4. Click and drag one of the corners of the rectangle. As you drag a corner, rounded corners appear on the rectangle. As you continue to drag, the corners become more rounded. You can also use specific values to control the attributes of a shape primitive using the Properties panel. 5. With the Selection tool, click on the shape primitive to select it. 6. In the Properties panel, use the slider to adjust the corner values of the shape primitive. 7. Click the lock icon to unlock the corners, and make adjustments to one corner without affecting the other corners. 8. Click the Reset button to revert the shape primitive back to its original shape. Use the Properties panel to quickly make adjustments to Shape Primitive attributes. You’ll also find that Flash has an Oval Primitive tool with which you can dynamically adjust inner radius and start and end angle values. You can ungroup or break apart shape primitives, at which time they will work with regular drawing and modification tools. Once they are ungrouped, the shapes will no longer be editable via the Properties panel. Developing efficient and lightweight Flash content is key in today’s fast-paced “I need it now” web-centric world. For many designs, using ActionScript to define the movement of stage elements allows for smaller files sizes and greater flexibility and control. For example, animation that is described in ActionScript can adjust on the fly based on input from the viewer. While many designers and developers are aware of this capability, the process of writing the necessary code can be complex and time-consuming. Part 4: Experience the power and usability of ActionScript 3.0 ActionScript 3.0 Animation In Flash CS3, timeline tween animations can now be instantly converted to ActionScript 3.0. This allows you to animate visually, and then translate motion into reusable, easily editable code. Even if you’ve never used ActionScript before, the ability to copy motion from the timeline and paste it as code offers the perfect way to learn it. Try it: Convert a timeline animation into ActionScript 3.0 For this part of the tour, you will use the AquoSite.fla file that you first created with content that was imported from Photoshop. You will create an animation on the timeline first, and then you will see how easy it is to convert that animation into Actionscript. 1. Click on the AquoSite.fla tab that appears at the top of your document window in Flash. Tabs make it easy to navigate between open Flash projects. Adobe Flash CS3 Professional Reviewer’s Guide 7 Notice that Flash lists all open documents as tabs at the top of the document window, making it easy to quickly move from one project to the next. An asterisk beside a name indicates there are unsaved changes. When you first imported the file from Photoshop into Flash, you turned the Aquo logo into a movie clip. Let’s create an animation by adding some movement to the logo. 2. With the Selection tool, click the Aquo logo on the stage to select it. In the Properties panel, notice that not only is the logo already set to a movie clip symbol, it also has the instance name that you set earlier. This is important, as we’ll be referencing this instance by its name later when we create the ActionScript. 3. In the timeline, select frame 20 on the Logo And Corner layer. In order to create an animation by using the timeline, you must add a keyframe. Use the Selection tool to click on and select frame 20 on the Logo And Corner layer. 4. Choose Insert > Timeline > Keyframe to add a keyframe to frame 20. 5. On the stage, drag the Aquo logo to the right, so that it sits most of the way across the top of the stage. 6. Back in the timeline, position your cursor anywhere between frame 1 and frame 20, on the Logo And Corner layer. 7. Right-click (or Ctrl-click), and then choose Create Motion Tween. Once you’ve moved the symbol across the stage, you can add a motion tween. You’ve just created an animation! To see it in action, let’s test the movie. 8. Choose Control > Test Movie, or press Command+Return or Ctrl+Enter. As you watch the movie play, you see the obvious problem, where the entire artwork disappears while the logo animates. So you’ll use the animation that you’ve already created visually, but instead apply it using ActionScript. Adobe Flash CS3 Professional Reviewer’s Guide  9. Close the test movie window to return to your Flash project. 10. In the timeline, position your cursor anywhere between frame 1 and frame 20, on the Logo And Corner layer. 11. Right-click (or Ctrl+click), and then choose Copy Motion As ActionScript 3.0. 12. Flash will ask you to specify the instance name to use in the ActionScript. Enter the instance name we gave the movie clip before, AquoLogo, and click OK. By specifying the instance name, you can reference the correct instance in ActionScript. 13. Press Command/Ctrl+Z several times, back to the point before you added the keyframe (which you did in step 4 above). 14. In the timeline, click on frame 1 on the Logo And Corner layer to select the frame. In this example, the action must be applied to a frame. By selecting frame 1 on the Logo And Corner layer, you are specifying that the action should be attributed to that frame. 15. Open the Actions panel. 16. Choose Edit > Paste. Upon pasting the motion into the Actions panel, all the ActionScript necessary to create the animation is done for you. The ActionScript that you copied from the timeline before is now pasted into the Actions panel. Now you’ve used ActionScript without having written a single line of code. All that’s left is to test the movie. 17. Choose Control > Test Movie. This new ability to instantly convert timeline animations into Actionscript make it easier for designers to work hand in hand with developers. The designer can work visually, with no coding knowledge at all, and still easily deliver finished scripts to his or her developer or colleague. Flash CS3 brings a new level of efficiency to development with ActionScript 3.0. A broad language that is accessible to beginners, while offering professionals a powerful programming environment, ActionScript 3.0 scales easily to meet your expectations. In fact, ActionScript 3.0 is easier to use than you would expect. And because ActionScript is based on universal programming concepts, learning to use it will set you up to successfully expand into working with additional programming languages as your skills grow. Adobe Flash CS3 Professional Reviewer’s Guide  ActionScript 3.0 Debugger Test your content using a brand new ActionScript debugger that allows you to step through a wide variety of properties in your code at runtime, with greater flexibility and feedback than ever before. The new debugger is shared with Adobe Flex™ Builder™ 2, so developers can expect consistent feedback and behavior when switching between the two applications. Rather than being confined to a single panel, the new debugger comprises a collection of panels in a Debug Mode workspace, which makes it easier to move through your debug tasks. When you enter Debug Mode, Flash brings up the workspace and loads the SWF file in a standalone player. Try it: Use the new debugger In order to generate an error, let’s purposely edit the ActionScript code that we just used. 1. Close the test movie window. 2. In the Actions panel, go to line 1, and change the word import to export. 3. Choose Control > Test Movie. A window will pop up indicating that an error has occurred. The new debugger in Flash CS3 not only alerts you to a problem, it identifies the problem and points you directly to the line in the code where the problem occurs. 4. Double-click on the error; Flash will take you directly to the line with the error. 5. Fix the error by changing the first word on line 1 back to import. 6. Choose Control > Test Movie. In addition to new functionality present in ActionScript 3.0, Flash CS3 introduces tools to reduce the time needed to write ActionScript—with several code editor enhancements, including Script Assist mode for ActionScript 3.0, and the same compiler as Flex Builder. Let’s take a look at a few other enhancements. Let’s explore some of the new tools found in Flash to help with coding ActionScripts. 7. In the Actions panel, click on line 3 in the gray area to the left of the code, and drag down to line 12. 8. Click the triangle next to line 3 to collapse the selected code. 9. Click the triangle again to reveal the code. This ability to collapse/uncollapse code allows you to manage your project more efficiently and focus on the areas of code that matter most to you at any given time. Click and drag in the gray area (where the line numbers appear) to quickly select portions of code, which you can easily expand or collapse. Adobe Flash CS3 Professional Reviewer’s Guide 10 In addition to the ability to collapse portions of code, Flash CS3 also has some new functions to assist in adding comments to your code. 10. Place your cursor within the script editor at line 13. 11. Click the Apply Line Comment icon that appears across the top of the Actions panel (you may need to widen your Actions panel to see all of the commenting icons). 12. Type This ActionScript was copied and pasted right from the timeline! Quick access to commenting tools makes it easier to add comments to your code. As the type of content that appears on the Internet continues to evolve, and as access to increased bandwidth becomes commonplace, more and more designers and developers are looking to incorporate video into their Flash projects. In fact, Flash video has had such a large impact on how broadcast video content is delivered on the Internet that Adobe recently received an Emmy Award for Flash video technology. In order to incorporate video into your Flash project, it must be encoded into Flash Video format (FLV), and there are two ways to accomplish this. You can choose to encode your video on the fly as you import the content into your project, which is fine for quickly getting a video or two into your project. However, if you’re incorporating a large amount of video into your Flash project, you can use Flash Video Encoder, which is a standalone application geared towards batch processing large amounts of video content. In this tour, you’ll use both of these methods, but let’s begin by encoding some video on the fly. Try it: Incorporate video into your project For this part of the tour, you will work with the Aquo Banner file that we created earlier using content that we imported from a native Illustrator file. The banner contains a static image as the background; you’re going to place a video that will play in the background instead. 1. Click the AquoBanner.fla tab that appears at the top of your document window to switch to the Flash document. 2. Click the Video layer in the timeline to select it. When you import the video, the video content will appear on that layer. 3. Choose File > Import > Import Video. Flash presents you with the Import Video dialog box, which is actually a lot more like a video import wizard, as it will take you through the necessary steps of incorporating video content into your project. First, you will need to choose a video file to import; the type of Part 5: Create interactive content with Emmy Award-winning Flash video technology Adobe Flash CS3 Professional Reviewer’s Guide 11 video format that you choose will determine the steps you will then be led through. For example, if you already have a file that is encoded to the FLV format, you can skip much of the import process. However, in this example, you will incorporate QuickTime video content, and the video import dialog box will take you through the steps to encode the QuickTime file to Flash video. 4. Click the Choose button, navigate to the banner_ad.mov file, and click Open. Then click Continue to advance to the next screen in the Import Video dialog box. 5. In the Deployment screen, choose Progressive Download From A Web Server as your method of deployment. Then click Continue. Since the video isn’t encoded to FLV yet, you are presented with options on how you’d like Flash to encode the video content. Using the slider, you can scrub through the preview to view the content. Below that are five tabs in which you can choose preset encoding profiles, adjust video and audio settings, define or specify cue points, and crop or resize the content. The Import Video dialog box takes you through the necessary steps to encode and prepare the video for use in your Flash project. 6. Click on the Profiles tab, and from the pop-up menu, choose the Flash 8 - Medium Quality (400 kbps) encoding profile. Then click Continue. At this point, you can choose a skin for your video content. The skin is the visual appearance of the user controls, which can appear beneath the video. Not only can you choose from any of the presets listed in this dialog box, you can also customize the skin settings as you see fit for each project. You will actually change those settings later during the tour, but for now, since you’re working with a background, there’s not going to be any user interaction, so you don’t have to select a skin. 7. From the Skin pop-up menu, choose None. Then click Continue. 8. Flash is now ready to encode the video. Click Finish. Adobe Flash CS3 Professional Reviewer’s Guide 12 A dialog box informs you of the progress as Flash encodes the video. A copy of the encoded video is saved to the same location as your Flash document, and the video is placed directly into your file. All you have to do is test your movie. 9. Choose Control > Test Movie. Flash Video Encoder is a separate standalone application that is included free with Flash CS3 Professional. Redesigned for Flash CS3, the new encoder is now more powerful and easier to use than ever before. While you saw how easy it was to encode video content on the fly just by importing content directly into a project, the amount of time it takes to encode large amounts of video content may make it difficult to concentrate on designing and developing your Flash project itself. Now, you’ll see how easy it is to encode your video content using Flash Video Encoder. Try it: Batch process video content efficiently with Flash Video Encoder 1. Launch Flash Video Encoder. On Mac OS, you can find it in the Applications folder. On Windows, you can find it in the Start menu. 2. Click Add, and use the dialog box to add the aquo_newBottle.mov, banner_ad.mov, and fma_actionsports.mov QuickTime movie files. The files will all appear in the queue. Flash Video Encoder is a separate standalone application that can save time by batch processing the encoding of video files for the necessary conversion to FLV format. Because you had selected the background layer when you placed the video content, when you place it into your file the video content appears behind the rest of the artwork. If you were to click the Settings button now, you’d see the same encoding options that you saw when you imported your first QuickTime video earlier. 3. Click Start Queue. 4. Switch back to the Flash application. You can continue on the tour in Flash while the videos are being encoded in the background. Adobe Flash CS3 Professional Reviewer’s Guide 13 Deployed on over 700 million computers and devices worldwide, and on over 96% of all Internetenabled desktops, Adobe Flash Player gives the global reach that creative professionals demand. There are times when you might want to take an animation that you’ve already created in Flash and publish it in a video format, such as QuickTime. Flash CS3 introduces an advanced QuickTime export feature that captures exactly what Adobe Flash Player plays back. That means complex nested symbols and all ActionScript will export exactly as you would have seen and heard them in Flash Player. Exporting a movie to QuickTime is as simple as choosing File > Export > Export Movie. Updated in Flash CS3, the advanced QuickTime export feature ensures QuickTime video output that renders the stage exactly as it displays in the Flash Player, including all ActionScript, filters and nested symbols. With Flash CS3, you can design interactive content using a new lightweight, easy-to-skin set of pre-built components—all written in ActionScript 3.0. The components are so easy to customize, you no longer have to write code to modify the look of interface components. Instead, you can just double-click the component states and draw to redesign the interface components. Flash CS3 contains a collection of user interface components, such as buttons, progress bars, and checkboxes, as well as a comprehensive list of video components. For this part of the tour, you will add one of the videos you encoded with Flash Video Encoder, and customize the appearance of the video using components. Try it: Use and customize ActionScript 3.0 user interface components 1. Choose File > New. 2. In the New Document dialog box, select Flash File (ActionScript 3.0), and click OK. The Components panel contains a wealth of pre-built ActionScript 3.0 user-interface and video components. Part 6: Build rich interfaces quickly with UI components 3. Choose Window > Components to open the Components panel, and click the triangle (on Windows it appears as a plus sign) to reveal all of the user interface components. 4. Drag the Button component onto the stage. 5. Choose Window > Properties > Parameters. The Parameters panel gives you access to all of the settings for a selected component. 6. In the Parameters panel, change the value in the Label field, and notice how the button updates to reflect this change on the stage. 7. Double-click the button to see all of the available states for the Button component. You can also double-click any button state to change the attributes of the symbol itself, as you would any graphic in Flash. 8. Choose Edit > Edit Document. Double-clicking a component reveals all of its different settings—each fully customizable. Adobe Flash CS3 Professional Reviewer’s Guide 14 Closed captioning support A new ActionScript 3.0 closed captioning video component now makes it easy to include closed captioning for your video content. Combined with the new component skins, you have a seamless workflow for displaying closed captions using a standards-based format. Now you’ll add a video playback component. 9. In the Components panel, click the triangle to reveal the video components. 10. Drag the FLVPlayback component onto the stage. What you’ve just created is an empty container, which currently has no video content attributed to it, and which has no skin specified. At this point you can begin to adjust how the video component should look and act. 11. In the Parameters panel, locate the setting called Source. Click the setting to make it active, and click the magnifying glass icon to choose a file. Then locate the video aquo_newBottle.flv, and click Open. Click OK to accept the video. Use the Parameters panel to customize any component to your exact specifications. It’s important to realize that you’ve chosen a Flash Video file (FLV), which is video content that has already been encoded. Using this method, you can only import video content that has already been encoded to FLV. 12. In the Parameters panel, locate the setting called Skin. Click the setting to make it active, and click the magnifying glass icon to choose a skin. Experiment with several until you find one that you like, and click OK to apply it to the component. 13. In the Parameters panel, locate the setting called SkinBackgroundColor. Double-click the color bar and choose a different color. 14. Choose Control > Test Movie. Of course, you always have complete control over the appearance of your components. A quick look at the other items listed in the Components panel will give you an idea of how quickly you can add just the right elements to your project and customize them to your exact needs. Take a moment to drag out additional user interface components and explore their settings using the Parameters panel. Double-click a component and you will even see the symbol properties, including multiple states and additional functionality. Integrated with Flash CS3 as well as throughout the various editions of Creative Suite 3, Adobe Device Central CS3 simplifies the creation of mobile content with built-in mobile device skins and regularly updated device profiles. Now you can easily design, preview, and test engaging mobile content, such as interactive Flash Lite™ applications and rich user interfaces. Before you get started with using Adobe Device Central, you will first install a collection of device profiles that have been prepared specifically for this tour. The shipping version of Adobe Creative Suite 3 will contain these and many other profiles already installed, however at this point during the beta cycle, you will add them manually. Launch Adobe Device Central CS3 (on Mac OS you’ll find it in the Applications folder, and on Windows you’ll find it listed in the Start menu). Choose File > Open, navigate to the file Device_Profiles.adpp, and click Open. When the Install Device Profile Package dialog box pops up, click Install All, and then click Install & Relaunch. Adobe Device Central CS3 will automatically reopen. Quit the application and return to Flash. You are now ready to proceed with the remainder of the tour. Try it: Test your mobile content for a specific device 1. Open aquothon_240x320.fla which is located in the Mobile folder. 2. Choose File > Publish Settings. Part 7: Author mobile content with Adobe Device Central CS3 Adobe Flash CS3 Professional Reviewer’s Guide 15 3. In the Publish Settings dialog box, click the Flash tab, and for the Version setting choose Flash Lite 2.0. Click OK to accept the settings and close the dialog box. By performing this step, Flash will use Adobe Device Central to test the file. 4. Choose Control > Test Movie. One of the profiles that you installed earlier was for the Nokia 5300, which supports Flash Lite 2.0. After Adobe Device Central launches, you will see your Flash content previewed on a Nokia 5300 phone. Adobe Device Central displays realistic skins that show you what devices look like, and how your content will be displayed on those devices. You can interact with the emulated devices in a way that simulates real-world interactions by clicking on the buttons on the phone, and you can control emulation options that let you create a range of testing scenarios. The Emulator in Adobe Device Central gives you a spectacular preview for how your content will appear on a mobile device. Not only can you adjust settings to simulate a variety of real world conditions, you can even press the buttons on the phone skin itself to interact with your content. 5. Along the right side of the window are settings that you can choose from to emulate specific conditions for the device. For the Display settings, experiment with the backlight slider to simulate how the content will appear under different backlight conditions. You can also choose from a variety of reflections settings, again, to simulate a variety of usage conditions for the device. Adobe Device Central provides a library of devices to choose from, each with a profile that contains information about the device and the content types it supports. You can search through available devices, compare multiple devices, and create custom sets of the devices you use most. 6. Across the top of the window are two tabs. By default, your content is shown in Emulator view. Click the Device Profiles tab to view the general settings for the Nokia 5300. 7. Click the Flash, Bitmap, Video, and Web links at the top of the window to view just about every specification that you might need to know about the Nokia 5300. 5. Along the left side of the Adobe Device Central window is a list of device sets and available devices. Click the disclosure triangles to reveal a list of devices by manufacturer. Double-click any device to view its settings, or click on a manufacturer’s name to compare settings across multiple devices. 11. Choose File > Return To Flash. Adobe Flash CS3 Professional Reviewer’s Guide 16 System requirements Macintosh • PowerPC® G4 or G5 or multicore Intel processor • Mac OS X, v.10.4.8 • 512 MB of RAM (1 GB of RAM recommended) • 2.5 GB of available hard-disk space (additional free space required during installation) • DVD-ROM drive • 1024x768 monitor resolution with 16-bit or greater video card Adobe Device Central contains a wealth of information about mainstream mobile devices. Profiles are updated regularly. Windows • Intel® Pentium 4, Intel Centrino®, Intel Xeon®, or Intel Core™ Duo (or compatible) processor • Microsoft® Windows XP with Service Pack 2 or Windows Vista™ Home Premium, Business, Ultimate, or Enterprise (certified for 32-bit editions) • 512 MB of RAM (1 GB of RAM recommended) • 2.5 GB of available hard-disk space (additional free space required during installation) • DVD-ROM drive • 1024x768 monitor resolution with 16-bit or greater video card – QuickTime 7.1.2 software required for multimedia features – Internet or phone connection required for product activation – Broadband Internet connection required for Adobe Stock Photos and other services – Online services, including, but not limited to, Adobe Stock Photos and Acrobat Connect, may not be available in all countries, languages, and currencies. Availability of services is subject to change. Use of online services is governed by terms and conditions of a separate agreement and may be subject to additional fees. For details, visit www.adobe.com. Thanks for taking the time to explore these new features in Adobe Flash CS3 Professional. We hope you’ve experienced how this release enables designers and developers alike to improve their productivity while continuing to open the doors to new creative possibilities. Adobe Flash CS3 Professional continues to enable designers and developers to push the limits of interactive design more productively than ever before. Adobe Flash CS3 Professional is included as a stand alone application or as a part of Adobe Creative Suite 3 Web Premium, Adobe Creative Suite 3 Design Premium, and Adobe Creative Suite 3 Production Premium. For additional information, please refer to Adobe Flash CS3 Professional At A Glance, Adobe Flash CS3 Professional What’s New, Adobe Creative Suite 3 Design Premium Reviewer’s Guide, and Adobe Creative Suite 3 Web Premium Reviewer’s Guide. In the United States and Canada, Adobe Flash CS3 Professional for Mac OS X on Intel-based or PowerPC-based systems and for Windows XP and Windows Vista is expected to ship in the second quarter of 2007. Adobe Flash CS3 Professional will be available in North America starting in Q2 2007 for an estimated street price of US$699, directly from Adobe or through Adobe Authorized Resellers. To order directly from Adobe, visit the Adobe Store at www.adobe.com, or call 1-800-833-6687. Licensed owners of Flash Professional 8, Flash MX 2004, or Flash MX can upgrade to Adobe Flash CS3 Professional for US$199. Licensed owners of Flash Professional 8, Flash MX 2004, or Flash MX are also eligible for special upgrade pricing to certain editions of Adobe Creative Suite 3. A complete description of upgrade eligibility and pricing is available in the Pricing Overview document. Estimated street prices do not include taxes, shipping, handling, or other related expenses. Information on pricing and support policies outside of North America and for Education customers will be available separately. Adobe revolutionizes how the world engages with ideas and information—anytime, anywhere and through any medium. For more information, visit www.adobe.com. Wrapping up Availability and pricing Expected Ship Date Second Quarter 2007 For more information For more details about Adobe Flash CS3 Professional, visit www.adobe.com/go/flash. About Adobe Systems Incorporated Better by Adobe. ™ Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.com Adobe, the Adobe logo, ActionScript, Adobe Premiere, Acrobat, After Effects, Creative Suite, Encore, Flash, Flash Lite, Flex, InDesign, Illustrator, Photoshop, Soundbooth, Version Cue, and “Better by Adobe” are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/ or other countries. Mac, Mac OS, and Macintosh are trademarks of Apple Inc., registered in the United States and other countries. QuickTime is a trademark used under license. Intel and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries. PowerPC is a trademark of International Business Machines Corporation in the United States, other countries, or both. Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their respective owners. © 2007 Adobe Systems Incorporated. All rights reserved. Printed in the USA. 2/8/07