Adobe Flash Catalyst CS5 Classroom in a Book phần 3 pdf

ptg ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 45 Review answers 1 You can create a new Flash Catalyst project by importing Adobe Photoshop (PSD), Adobe Illustrator (AI), or FXG fi les. 2 You must fi rst export an FXG fi le from Fireworks before the design can be opened in Flash Catalyst.  ere is no direct import option for layered Fireworks PNG documents. However, you can import a Photoshop document (PSD) directly from the Flash Catalyst Welcome screen, or by choosing File > Import > Adobe Photoshop File. 3 Some fi lters and eff ects are not supported in Flash Catalyst. One solution is to fl atten or rasterize these objects before bringing them into Flash Catalyst. 4 If you create vector outlines or rasterize text in the original design document, it will not be editable in Flash Catalyst. You can also choose the Vector Outlines or Flatten fi delity options when importing the document in Flash Catalyst. 5  e Filter: Expand fi delity option converts an object that has a fi lter applied to it into a set of vectors or bitmaps that approximate the original appearance in Illustrator. For example, expanding a drop shadow fi lter on a rectangle might create an image of the drop shadow behind the original rectangle. 6 When you import a range of bitmap images, the images appear in the project library, but are not placed in the artboard. When you import a single image, it’s placed in the library and an instance of that image is added to the target layer in the artboard. 7 Vectors can be sized up or down without losing image quality. From the Library of Joseph Bradley ptg 46 3 MANAGING THE LIBRARY Lesson Overview  e Flash Catalyst project library is a storage area for the reusable con- tent that you add to a Flash Catalyst project.  is content includes the bitmap images and other media (video, sound, Adobe Flash movies, and more) that you import. You can import assets individually, as a group, or as a library package.  e library also stores the components that you create—things like navigation buttons, scrolling panels, and lists of data. In this lesson, you’ll learn how to do the following: • Identify project assets in the Library panel • Preview images, video, and sound • Rename assets • Delete assets from the project • Use and swap assets in the library • Compress all instances of a bitmap image • View the source of library fi les in the Code workspace • Import and export a library package  is lesson will take about 40 minutes to complete. Copy the Lesson03 folder into the lessons folder that you created on your hard drive for these projects (or create it now), if you haven’t already done so. As you work on this lesson, you won’t be preserving the start fi les; if you need to restore the start fi les, copy them from the Adobe Flash Catalyst CS5 Classroom in a Book CD. From the Library of Joseph Bradley ptg 47 You can use the Flash Catalyst Library panel to store, locate, manage, and apply reusable components, images, Flash movies, videos, and sounds. Quickly apply global changes across your entire application. Swap images with a single click. Share your entire col- lection of project assets with other designers and Flex developers by using Flash Catalyst Library Packages. From the Library of Joseph Bradley ptg 48 LESSON 3 Managing the Library Viewing the Library panel  e reusable assets that you add to a project are organized into one of four groups in the Library panel. Images are bitmap (raster) fi les (PNG, GIF, JPG, JPE, JPEG) and SWF content. Media refers to video and sound fi les (FLV/F4V fi les, mp3). Components are the building blocks of your project. Examples of components include buttons, scroll bars, sliders, check boxes, panels, and scrolling lists. Optimized graphics are added to the Library panel when you choose Optimize Vector Graphics in the Heads-Up Display (HUD).  is is true when you optimize an image that you’ve imported and when you optimize an object that you’ve drawn using the Flash Catalyst drawing tools. How do assets get into the Library panel? Assets get into the Library panel in the following ways: • When you import a design document, the bitmap images in the document are grouped together in a folder within the Images category of the Library panel. If the design document includes Illustrator symbols, the symbols are converted to optimized graphics and stored in the Optimized Graphics category. • When you import or copy and paste a single bitmap image, SWF fi le, or video fi le, the fi le is added to the artboard and to the Library panel. • When you import multiple assets at the same time, the assets are added to the Library panel, but not the artboard. • When you import a sound fi le, it’s added to the Library panel. • When you import a Flash Catalyst Library Package (FXPL) that was exported from another project, the entire collection of assets is added to the Library panel. • When you optimize an image in the artboard, an optimized copy of the image is added to the Library panel. • If you compress an image in the Library panel or in the artboard, a compressed copy of the image is added to the Library panel. • When you convert vector drawings into a component, optimized graphic, raster image, or compressed image, an object is added to the Library panel. • If you add a wireframe component to the artboard and then modify it, the modifi ed component is added to the Library panel. From the Library of Joseph Bradley ptg ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 49 Add assets to the Library panel In this exercise, you will add a few more assets to the Library panel. When you import a single bitmap image, it’s added to the artboard and the Library panel. But when you import a series of bitmaps or media fi les (sound and video), they’re added directly to the Library panel, but not the artboard. 1 Start Flash Catalyst. 2 In the Welcome screen, choose Open Project. Browse to the Lesson03 folder on your hard drive, select the Lesson03_Banner.fxp fi le, and click Open.  is is a copy of the fi le you created in Lesson 2, “Preparing, Importing, and Placing Artwork.” It includes the images you imported from Adobe Illustrator and a single bitmap image you imported separately. 3 Select the Library panel to bring it into view. Library assets are divided into categories, such as Components, Images, Media, and Optimized Graphics.  ese categories can be expanded or collapsed by clicking the small triangle to the left of the category name.  e Images category includes bitmap images that were imported to the project.  is includes images that were imported individually or as part of a design document (AI, PSD, FXG).  is also includes Adobe Flash movies (SWF fi les), if there are any. When you import a design document, its images are grouped together in a subfolder.  e folder inherits the name of the original design document, which in this case is the Banner_artwork (Adobe Illustrator) document you imported in Lesson 2. 4 Expand the Banner_artwork folder. 5 Collapse the Banner_artwork folder. 6 Choose File > Import > Video/Sound File. 7 Browse to the Lesson03 folder, Shift-click to select the interlude.mp3 and restaurants.fl v fi les, and click Open.  e sound and video fi les are added to the Media category in the Library panel.  is project now includes three types of assets: Images, Media, and Optimized graphics. b Note: At  rst, the Library panel only displays categories for the types of assets that exist in the project. For example, if your project has no media, the Media category does not exist. After adding media, such as a video  le, the Media category appears. Once added, the category remains in the Library panel, even after deleting all its contents. From the Library of Joseph Bradley ptg 50 LESSON 3 Managing the Library 8 Choose File > Import > Image. 9 Browse to the Lesson03 folder, Shift-click to select the 2wheels.jpg, design.jpg, future.jpg, map.jpg, and restaurants.jpg fi les. Click Open.  e images are added to the Library panel, but not the artboard. 10 Click to select the picture of the man in the lower-right corner of the artboard (you may need to scroll).  is was the single bitmap image that you imported in Lesson 2. In the Common category of the Properties panel, notice that the source of this image is man.jpg.  ere is a direct link between instances in the artboard and the source assets in the library. The Properties panel includes a link to the source asset in the Library panel. 11 In the HUD, open the Optimize Artwork menu, and choose Optimize Vector Graphics.  e source in the Properties panel (below) changes to Graphic2. In the Library panel (shown at right), the new optimized version of this image appears in the Optimized Graphics category. b Note: Vector shapes that you draw in Flash Catalyst or import from Adobe Illustrator are not added to the Library panel until you convert this artwork to an optimized graphic, raster image, compressed  le, or component. From the Library of Joseph Bradley ptg ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 51 Preview  les in the Library panel As your project grows, it can be hard to identify assets by name alone. You’ll want to preview fi les before adding them to your application. An easy way to do this is to view the fi le in the preview area at the top of the Library panel. 1 Select future.jpg in the Images category of the Library panel. A preview of the image appears at the top of the Library panel. 2 In the Media category, select interlude.mp3 (a sound fi le) and click the Play button at the top of the Library panel. Play button Rewind and Pause buttons As the audio fi le plays, the Play button changes to the Rewind and Pause buttons. 3 In the Media category, select restaurants.fl v (a video fi le) and click the small Play button in the lower-right corner of the preview area. Play button Rewind and Pause buttons As the video plays, the Play button changes to the Rewind and Pause buttons. ̈ Tip: When previewing interactive components in the Library panel, you only see a preview of the initial component state. To preview a component’s behavior, you need to add it to the application and then run the project in a browser or publish the application. ̈ Tip: You cannot preview SWF  les in the Library panel. To view a SWF animation, you must add it to the application and run the project in a browser or publish the application. From the Library of Joseph Bradley ptg 52 LESSON 3 Managing the Library 4 Change to the Code workspace. 5 In the Project Navigator panel, expand the main project folder, Lesson03_Banner. Expand the src and assets folders. Expand the graphics, images, and media folders.  ese folders store the fi les represented in the Library panel. For each optimized graphic, all MXML information (vector, stroke, path, fi ll, and so on) is kept separately in an FXG fi le. Project components, if there are any, are stored in an src/components directory. 6 Change back to the Design workspace. Deleting assets from the project Every project entails a little trial and error. As your project evolves, you’ll end up with assets in the library that you no longer need in the fi nished application. Eliminating outdated or unused assets from the library reduces the size of the proj- ect fi le, and makes the entire project more manageable. Removing unwanted assets is easy. Just delete them in the Library panel. 1 In the Images category of the Library panel, select man.jpg. 2 Click the Delete icon ( ) in the bottom-right corner of the Library panel. A message informs you that you can’t delete the image because it’s being used by the optimized graphic called Graphic2. You cannot delete an optimized graphic’s source fi le. However, you can delete the optimized graphic or compressed copy of the image. 3 Click OK to close the message. 4 In the Optimized Graphics category, select Graphic2 and click the Delete icon ( ). A message informs you that removing this asset will remove the asset and all references to it. Deleting an object in the Library panel is a fast way to remove every instance of an object from the application. b Note: When you delete an asset from the Library panel, it removes every instance of that asset from the project. This includes hidden pages and component states. From the Library of Joseph Bradley ptg ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 53 5 Choose OK to delete every instance of the image.  e image vanishes from the Library panel, and from the artboard. Deleting the image left a hole in the artboard, but you’ll fi x that in a minute. Compressing images in the Library panel One of the advantages of a project library is that you can use the same assets throughout your application, and then make global changes to the project by modi- fying the source fi le in the library. For example, you can quickly compress all instances of a bitmap (raster) image to reduce the overall fi le size of your application. 1 In the Images category of the Library panel, right-click man.jpg and choose Compression Options.  e Compress Image dialog box appears. 2 Leave the Quality setting at 70% and click OK. A compressed copy of the image named man1.jpg is added to the Images category. You can tell by the reduced fi le size that the image is compressed. The compressed  le has a smaller  le size. Renaming project assets Just imagine if everyone you worked with were named Bob.  ings could get a little confusing around the offi ce. I suppose you could start calling people Bob1, Bob2, and so on. But that’s not much better. If you’re not careful, your Flash Catalyst project can end up looking like a room full of Bobs. In the world of Flash Catalyst, ̈ Tip: You cannot delete library assets by pressing the Delete key. However, pressing Delete removes objects that are selected in the artboard. If you have an object selected and you accidentally press the Delete key, you will remove the selected object from the current state only. ̈ Tip: Avoid compressing images that have transparency, because your trans- parency will be lost. From the Library of Joseph Bradley ptg 54 LESSON 3 Managing the Library it’s Graphic1, Graphic2, Graphic3, and so on. An easy way to avoid this is to assign descriptive names to project assets in the Library panel. 1 In the Images category of the Library panel, right-click the man1.jpg (the compressed copy of the image) and choose Rename.  e image name is highlighted. 2 Type man_compressed, and press Enter/Return.  e fi le is renamed in the Library panel. When you rename a fi le, any links to the fi le are updated automatically. Using assets in the Library panel After adding assets to the project library, you can use them over and over in diff er- ent parts of your application. You simply drag the item from the Library panel and position it in the artboard. After placing an item in the artboard, the Properties panel shows a link to the source fi le in the project library. You can quickly swap an object in your application with a diff erent asset through the source link in the Properties panel. Let’s give it a try by placing the original man.jpg fi le in the artboard, and then swap- ping it for the compressed version of the same image. 1 In the Images category of the Library panel, drag man.jpg from the Library panel to the artboard. 2 Position the image in the lower-right corner of the artboard. 3 With the image still selected in the artboard, look in the Common category of the Properties panel.  e source of this image is the man.jpg fi le in the Library panel.  e image in the artboard is an instance of this asset and is linked to the source fi le in the Library panel. ̈ Tip: When you drag a library item to the artboard, a new layer is created (in the target layer folder). Best practice is to give a descriptive name to each object in the Layers panel. Renaming an instance of an item in the Layers panel does not a ect the original item de nition name in the Library panel. From the Library of Joseph Bradley [...]... existing library assets, the new assets are added to the existing library No files are deleted ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 57 From the Library of Joseph Bradley Review questions 1 What types of assets appear in the Library panel? 2 How does a vector drawing that you create in Flash Catalyst end up in the Library panel as a reusable asset? 3 What are some different ways that you can add... objects You are creating new states that include the same objects order of layers is constant across all states You can’t have a different stacking order in different states ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 77 From the Library of Joseph Bradley Give page states descriptive names Flash Catalyst names new pages Page1, Page2, Page3, and so on You may find that giving descriptive names to pages will... GOOD text appears over a semi-transparent gray background b Note: The stacking order of layers is constant across all states You can’t have a different stacking order in different states ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 69 From the Library of Joseph Bradley 2 In the Layers panel, inside the page1:Feature layer, drag the Panel Artwork row above the 2 WHEELS GOOD row A gray line indicates the... and release the mouse button The Image row is now inside the Sample Images sublayer folder ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 71 From the Library of Joseph Bradley Review questions 1 What is the target layer, and how is it identified in the Layers panel? 2 What types of items appear in the Layers panel? 3 What does a small blue square in the Layers panel indicate? 4 In a new Flash Catalyst project,... appear in the Library panel ̈ Tip: A Flash Catalyst Library Package (FXPL) can be imported by a developer into Adobe Flash Builder as a Flex library project These objects will maintain any behaviors, transitions, and so on, that you’ve added to them in Flash Catalyst choose File > Import > Library Package to open the Import Library Project dialog box b Note: When you add a library package to a project... application 7 Linked images are stored outside the published SWF file Linking to large image files can reduce the published file size of the application Linking to images allows you to update the images later without republishing the application ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 59 From the Library of Joseph Bradley 4 MANAGING LAYERS Lesson Overview The Flash Catalyst Layers panel is like a. .. Top Graphic) is This is because the Top Btns layer is locked Flash Catalyst selects the top-most unlocked and visible object ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 65 From the Library of Joseph Bradley Grouping objects Groups are created in the Layers panel automatically when you group objects in the original design document This makes their parts more manageable in Flash Catalyst You can also... path for each individual character If you don’t need to manipulate each of these smaller parts, you can turn them into a single graphic object using the Flash Catalyst optimization options Optimizing complex groups of artwork also makes them easier to manage in the Layers panel 1 In the artboard (not in the Layers panel), click the large orange text that reads 2 WHEELS GOOD In the artboard, it appears... in the project library ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 73 From the Library of Joseph Bradley 5 WORKING WITH PAGES AND STATES Lesson Overview Rich Internet applications are engaging, informative, relevant, and fresh They pack lots of dynamic content into very limited screen space A common goal is to keep the interface simple, yet filled with information that’s easy to locate, and even easier... Lesson05_Banner.fxp The artwork for this application was imported from Adobe Illustrator and is stacked together on Page1 Page1 is selected in the Pages/States panel b Note: The stacking 2 Click Duplicate State Flash Catalyst creates an exact duplicate of Page1 The new state is named Page2 3 Click Duplicate State three more times to create a total of five pages duplicate a state, you are not duplicating objects . of assets appear in the Library panel? 2 How does a vector drawing that you create in Flash Catalyst end up in the Library panel as a reusable asset? 3 What are some diff erent ways that you can. the library. From the Library of Joseph Bradley ptg ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 57 Linked vs. embedded images By default, the images you add in Flash Catalyst are embedded in the. ptg ADOBE FLASH CATALYST CS5 CLASSROOM IN A BOOK 45 Review answers 1 You can create a new Flash Catalyst project by importing Adobe Photoshop (PSD), Adobe Illustrator (AI), or FXG fi