How to Upload Fla Files Into Illustrator

Become total access to Learning Flash CS4 Professional person and 60K+ other titles, with gratis 10-day trial of O'Reilly.

There'south also live online events, interactive content, certification prep materials, and more.

Chapter 4. IMPORTING GRAPHICS

Introduction

Chapter 2 focused on drawing vector graphics within Flash, a common skill you volition need for many projects. In many cases, you may besides require bitmap graphics, such every bit those created in Adobe Photoshop, or you may need to import vector graphics that originated in Adobe Illustrator or another cartoon application. This affiliate describes how y'all can use these avails, and provides a few related workflow tips. You'll also acquire a few techniques for creating animations from imported assets.

Importing Graphics

As the affiliate progresses, you'll see that Flash supports the importing of a wide variety of graphic file formats. For simplicity, however, the import process is initiated the same fashion for all formats. Regardless of file format, you lot need only invoke a card command and cull one or more files from a standard operating system file browser. Flash then presents the appropriate import dialog based on the chosen file blazon.

You will most likely desire to import the file directly to the Stage (File→Import→Import to Stage). With an unlocked layer selected in the Timeline, importing a standard graphic file places the imported nugget on the Phase, adds information technology to the active layer and frame, and places it in the Library. Flash support for native file formats, such as Adobe Photoshop PSD files, includes additional import options that allow the creation of layers and frames based on the structure of the imported file.

If you lot don't plan to use the nugget immediately, you tin can import information technology to your file's Library (File→Import→Import to Library). This tin can be very helpful if you intend to batch-import several assets at a fourth dimension.

Importing Nonnative Formats

Flash supports most standard graphics file formats, likewise as several formats typically associated with specific operating systems. Table 4-i shows the nigh mutual file formats available for import into Wink on both Mac and Windows operating systems. Table four-two shows additional file formats that are supported when QuickTime 4.0 or afterwards is installed on your Mac or PC.

Tabular array 4-ane. Graphics file formats supported for import into Flash

Format	Extension	Additional notes
JPEG	.jpg, .jpeg
PNG	.png	If the file includes transparent areas, transparency is preserved; see the Importing from Other Native Formats department later in this chapter.
GIF	.gif	If the file includes transparent areas, transparency is preserved; static and animated GIFs are supported; animated GIFs are converted to keyframes.
AutoCAD DXF	.dxf	3D is not supported and fills are not maintained; best for 2d line drawing, such as floorplans.
Bitmap	.bmp
Windows Metafile	.wmf	Grouped when imported to the Stage.
Enhanced Windows Metafile	.emf	Grouped when imported to the Stage.
Flash SWF	.swf	SWF must non exist protected; flattened and grouped when imported to the Stage; supported animation is converted to keyframe sequence. See the Importing from SWF department, later in this affiliate.

Table 4-two. Graphics file formats supported when QuickTime 4.0 or later is installed

Format	Extension	Additional notes
TIFF	.tif, .tif	Flattened when imported.
Targa	.tga	Embedded alpha channels are supported.
PICT	.pct, .movie, .pict	Imports equally a flattened bitmap on Windows.
Silicon Graphics Image	.sgi
QuickTime Epitome	.qti
MacPaint	.pntg

Importing from SWF

The SWF ("swiff") file Flash creates when y'all examination or publish a FLA is in a compiled proprietary format. Nevertheless, you can import graphics—and, to some caste, animations—from a SWF equally if they were self-contained graphics files. When yous import to the Stage, Flash adds graphical assets to the Library and approximates animations in the primary Timeline equally a sequence of keyframes. When you import to the Library, Flash imports graphical assets, but ignores animations and does not add keyframes to the Timeline.

Note

When you import a SWF, Flash does not import the file as a whole. That is, you cannot embed a SWF inside some other SWF. You will learn how to load an external SWF at runtime when reading virtually components in Chapter 9. For now it's enough to know that y'all cannot import a functional SWF during authoring.

Importing from a SWF is possible just if the file was non protected when compiled. Protecting your assets from importing is an optional characteristic that prevents others from appropriating your content. This feature is constitute in the file-specific Publish Settings (File→Publish Settings) in the Flash department under Advanced→Trace and debug (Figure 4-1). You will learn more about publishing your files for distribution in later chapters, but this feature, off by default, can be enabled to prevent an FLA from importing SWF content.

Effigy 4-1. The Protect from import feature is disabled in Publish Settings to let import from a SWF

Note

Yous can experiment with SWF imports by using the companion source lawmaking, which includes example SWFs with and without animation.

Importing from Adobe Photoshop

For Photoshop and Wink users, design productivity dramatically improved with the introduction of Flash'southward PSD importer, which can import multilayered PSD files in seconds. Flash not only understands the PSD file architecture, just can also convert select elements of a PSD to Flash assets (like movie clips) during the import process.

An average awarding or website interface created in Photoshop used to take hours to bring into Flash. Y'all had to save every layer to individual JPEG or PNG files, import them all, reassemble everything on stage, create whatsoever necessary film clips, reapply filter effects, and then on. Using the PSD importer, the same process is virtually automatic and tin be completed in seconds. In addition, a useful preferences setting can preconfigure the importer to use your most usually requested options, speeding up the process fifty-fifty more.

Supported Photoshop features

Wink supports many of Photoshop'south layer features when importing a PSD. Tabular array four-iii shows a concise rundown of supported features, including known limitations.

Table 4-three. PSD features supported during Flash import

Feature	Notes
Color Mode	Merely RGB is supported. CMYK will be converted to RGB.
Prototype Layers	Rasterized (converted to bitmap) to Wink bitmaps, transparency is preserved when converted to Bitmap image with editable layer style ; when imported as a flattened bitmap, underlying layers seen through the transparency will exist merged with the image layer.
Text Layers	Can be rasterized, converted to vector outlines, or left as an editable text element; text on a path must be rasterized to preserve the appearance.
Shape Layers	Tin can be rasterized or left as editable paths.
Merged Layers	Can be separated or converted to movie clips; adjacent layers can as well exist merged during import.
Layer Groups	Converted to Flash layer folders.
Smart Objects	Editability is not supported; the objects will be rasterized.
Layer Styles	Are rasterized.
Blend Modes	Compatible blend modes such every bit Normal, Darken, Multiply, Lighten, Screen, Hard Light, Difference, and Overlay, for example, are converted to Flash alloy modes when Bitmap paradigm with editable layer style is selected; incompatible blend modes are not applied, merely their appearance can exist preserved if rasterizing the layer to bitmap.
Adjustment Layers	Not supported; will exist applied if the PSD is imported as a flattened bitmap.

Using the Import dialog

Initiating the import process for PSD files is no different than when importing a standard JPG. You can import to the Stage (File→Import→Import to Phase) or to the Library (File→Import→Import to Library). When you select a PSD file, yet, Flash displays a special dialog for accessing the PSD layers (Figure 4-two).

Effigy 4-2. The PSD import dialog, setting properties for a layer of button fine art

When configuring the Import dialog, the first thing to decide is how y'all desire the assets to flow into Wink. In the lower-left corner of Effigy 4-2, the Catechumen layers to option specifies that PSD layers are converted to Flash layers or keyframes. Typically, you will convert to layers, simply the keyframe option makes it possible to create an animation sequence in PSD layers and automatically import that sequence to a frame-by-frame blitheness. Identify layers at original position preserves the location of layer elements during the import. Set stage size to same size as Photoshop canvas adjusts the Flash Phase size to match the dimensions of the PSD. This is handy when creating a Flash file from a PSD interface mockup.

Afterwards y'all decide the destination of your avails, information technology'due south time to configure each layer's import settings. You can configure each layer type co-ordinate to the supported features described in Tabular array 4-iii. When either configuring image layers or rasterizing some other layer type (converting to a bitmap image), you tin gear up compression settings on a layer-by-layer basis. Pinch is discussed in greater particular in the Working with Bitmaps section, later in this chapter.

In improver to choosing whether to maintain editability for each layer blazon or to rasterize to a bitmap, you will need to choose whether or non to create a movie clip symbol for the layer during the import procedure. A movie clip is necessary if y'all want to exert ActionScript control, animate the object using tweens (described in the next chapter), utilise color effects, and more. In addition, the Flash importer automatically creates movie clips if you lot cull to preserve layer styles. When in uncertainty, encapsulate the layer in a movie clip, only you need to supply an instance name only if ActionScript control is required. Finally, you tin choose a registration point for each movie clip.

Note

As an added convenience, dragging and dropping a PSD file from your operating system onto the Wink Stage invokes the PSD importer. This is not recommended for other file formats, as it may bear on how transparency is rendered. In these cases, it is wisest to import the asset.

Configuring the PSD Importer preferences

If yous detect yourself configuring PSD layers for import in a similar manner over and over again, you can save yourself a lot of time by setting these values in the PSD Importer Preferences dialog (on a Mac, Flash→Preferences→PSD File Importer, on a PC, Edit→Preferences→PSD File Importer). In fact, even if you stop up having to import an asset more than a time or ii (perchance because yous notice mistakes in your PSD file later on importing it), it volition probably be worthwhile to adjust the preferences for your immediate needs.

Effigy 4-3 shows the Preferences dialog. Equally you can see, the settings mirror those that accept already been described. Changing these settingss will merely take a few seconds to do each fourth dimension. However, doing and then will save you the time of adjusting each layer repeatedly during the import process.

Effigy iv-iii. The PSD File Importer preferences

Importing from Adobe Illustrator

Importing Adobe Illustrator AI files is very similar to importing PSD files. It is, in fact, easier for ii reasons. Get-go, Wink and Illustrator take more than in common from a vector-editing standpoint, so many of the features are more uniform from the outset. Second, Flash-specific features have been added to Illustrator that make it possible to create Flash symbols and text elements in Illustrator documents.

Supported Illustrator features

Translating Illustrator assets to the Flash world is relatively straightforward. Table 4-four lists the near mutual Illustrator features yous may wish to preserve and how Flash handles them.

Table 4-4. AI features supported during Flash import

Characteristic	Notes
Color Style	Only RGB is supported. CMYK will be converted to RGB.
Transparency	Editability is preserved.
Clip Masks	Editability is preserved.
Gradient Fills	Editability is preserved.
Design Strokes and Fills	Editability is preserved.
Effects	Compatible effects such every bit Drop Shadow, Mistiness, Glow, and Bevel, for example, are converted to Flash filter effects; incompatible styles are not applied.
Blend Modes	Compatible blend modes such as Normal, Darken, Multiply, Lighten, Screen, Hard Light, Departure, and Overlay, for example, are converted to Flash alloy modes; incompatible blend modes are not applied.

The existent workflow enhancement, however, comes from the ability of whatever Illustrator user to originate select Flash assets right within Illustrator. Illustrator tin can create Flash movie clip and graphic symbols, likewise as Flash static, dynamic, and input text fields. For more information, see the sidebar Creating Flash Symbols and Text in Adobe Illustrator, next.

Using the Import dialog

Flash's AI Importer dialog (Figure 4-7) is nearly identical to its PSD Importer dialog. The only observable differences are the fact that yous can import unused symbols (symbols in the AI file's symbol library merely non used on the artboard), and the fact that all Flash symbols and text elements created in Illustrator will exist preconfigured when the import procedure begins. In addition, the importer can warning you lot to incompatibility issues, such as when an asset with a print color mode (CMYK) is imported into the web color (RGB) world of Wink. The Incompatibility Report push immediately beneath the list of Illustrator layers volition generate a report describing whatsoever known issues.

Figure 4-7. The AI Import dialog, setting properties for a text chemical element

A nice, loosely related departure in the two workflows is that Wink has an improved copy and paste process for avails originating in Illustrator. Copying and pasting assets from Illustrator triggers a dialog (Effigy 4-8) that prompts you for a method for treatment the clipboard data. You can paste as bitmap or use the AI import preferences, and you tin can allow Wink to resolve conflicts and maintain layers.

Figure 4-8. Adobe Illustrator'southward Paste options dialog

Configuring the AI Importer preferences

As with the PSD Importer, y'all can save a lot of time past configuring the preferences option for the AI Importer (Figure 4-9). Its Preferences dialog is nearly identical to the PSD Importer's, with i notable exception: y'all can exclude whatsoever objects exterior the Illustrator artboard. This is convenient for quickly excluding avails during the import into Flash without deleting them in Illustrator.

Figure 4-ix. The AI file Importer preferences

Importing from Other Native Formats

Flash supports enhanced import options for two more native formats:

Fireworks

Importing Fireworks files preserves relative asset locations, editable paths and text, uniform blend modes and effects, and more. It will even convert multiple Fireworks pages into their ain Flash scenes, if desired. If preferred, you can import a Fireworks asset as a flattened PNG and use Flash'due south circular-trip editing features to edit changes in Fireworks. You can Control+click (Mac) or right-click (Windows) on the nugget in the Library and choose the Edit in Fireworks option to open the file in Fireworks. Later on effecting the changes, the Flash file volition be updated. Note that this just works on files that originated every bit Fireworks native files and were imported. Information technology will not work on a flattened PNGs or files that were pasted into Flash.

Freehand

Although the application isn't still commercially bachelor, legacy Freehand users will appreciate the fact that Freehand import support continues in Flash CS4 Professional. Freehand pages tin be converted to Flash scenes or keyframes, and Freehand layers can exist converted to Flash layers or keyframes, both of which get in possible to create animations from Freehand assets and to simply import artwork.

Annotation

The companion website has additional information and sample files for importing assets from Fireworks and Freehand. Fifty-fifty if y'all don't have Fireworks or Freehand, yous can experiment with these features by importing files provided with the companion source files.

Importing an Paradigm Sequence

Most of the animations you will create in Flash will originate in the Timeline, as discussed in the next chapter. However, it's also possible to create animations only by importing external assets. For example, you lot tin import an paradigm sequence by filling a binder with several sequentially numbered graphics (image_01.jpg, image02.jpg, and and so on). Importing the offset one prompts Flash to inquire if you want to import a sequence; if you consent, Flash automatically imports all the images and creates sequential keyframes for each. Instant animation!

You tin fifty-fifty reverse the sequence automatically by selecting all of the frames (select the first frame of the sequence, hold down the Shift key, and select the last frame) and using the Modify→Timeline→Reverse Frames menu control. This is great for creating animation cycles. For instance, you could import an image sequence of a squirrel peeking out of a hollow tree. You could then copy and paste the frames, contrary the sequence, and see the squirrel retreat back into its den.

Another nice feature helps when y'all want to animate more than than 1 discrete element from a single layer. You will learn in the next chapter that timeline animations require that but ane element exist in each layer, so you must distribute each element to a layer of its own. Select the entire frame in which your multiple objects reside, and utilise the Modify→Timeline→Distribute to Layers feature. You tin then apply the animation techniques that you'll learn in the side by side chapter to animate each layer.

Working with Bitmaps

Care for bitmaps doesn't stop at the import stage. Flash includes a few features designed to assist you work with pixel-based artwork in authoring mode. Options like manipulating compression settings, converting an image to vectors, and using a bitmap every bit a make full allow y'all to do more than just display static bitmaps.

Publish Settings

Publish Settings (File→Publish Settings) is a file-broad set of preferences that allows you to command many ways in which your SWF volition conduct. One such characteristic is the JPEG compression quality applied to sure embedded bitmaps (Figure 4-x). You tin fix the quality of the image and enable JPEG deblocking to help smooth out some of the visual artifacts caused by compression. This global setting applies to images pasted into Flash or imported as part of a larger file past style of 1 of the native file-format importers (such every bit the PSD Importer). It doesn't apply to individually imported bitmaps. To specify settings for the latter, use the Bitmap Properties characteristic described in the next section.

Note

To learn more about Publish Settings, see Chapter 14.

Effigy four-10. The Publish Settings JPEG compression selection

Bitmap Properties

You tin can also vary pinch settings on an asset-by-nugget basis. If you select a bitmap in the Library and click the Backdrop push in the lower-left corner of the panel, you will open the Bitmap Properties dialog. Shown in Effigy four-11, the available options follow.

Effigy 4-11. The Bitmap Backdrop dialog

Update and Import

When a bitmap is imported, clicking Update replaces the internal asset with the external source. This is a simple way to update a bitmap with a more current version without having to import a new file and replace all instances derived from it. If the bitmap was pasted into Flash or imported as part of a larger file past one of the native file-format import administration, Update serves the same purpose as Import. Clicking Import opens a file browser dialog and allows you to import a replacement asset. All instances created from the prior bitmap are updated automatically.

Pinch

This setting lets you choose between a lossy compression algorithm, called Photograph (JPEG) , and a lossless option, called Lossless (PNG/GIF) . Yous need not select an algorithm based on the file type. For case, you lot can choose the lossless compression pick for a bitmap imported from a JPEG.

Note

Historically, JPEG compression is best for continuous-tone images (such as photos and gradients), PNG compression is best for transparency, and GIF compression is all-time for large areas of solid colors. However, because Flash allows you to switch algorithms later on an paradigm has been imported, the pick of lossy versus lossless pinch ultimately comes down to a balance of visual quality and file size.

Quality

If the Lossless (PNG/GIF) pinch option is selected, no quality options are available. If the Photo (JPEG) option is selected, you can dictate whether Flash uses a preset quality value or a custom setting. The custom setting allows you to specify any quality value and enable deblocking. In that location are two types of preset settings. If the bitmap was imported straight, you can use the imported JPEG data (non pictured in Figure 4-eleven). That is, if yous customize the compression values in Photoshop, this setting will use that data. If the file was pasted in or imported by a native file importer, you can tell Flash to utilize the file-wide publish settings quality value.

Test

Clicking this button test-compresses the bitmap using the pinch pick y'all specify. Information technology also displays text at the lesser of the dialog showing the earlier and after size of the file and the percent of file size saved. This is handy for experimenting with quality sizes to see how much it volition affect the size of the terminal SWF.

Allow Smoothing

This pick smoothes the edges of images and is helpful when scaling bitmaps, particularly during blitheness.

Notation

The advanced bitmap properties options non pictured in Figure 4-xi are related to ActionScript and will be discussed in Chapter vi.

Tracing a Bitmap

Occasionally, you may have a need or desire to convert a bitmap to a collection of vectors. The most compelling reason to do this is to edit or animate the graphic. Another useful reason to trace a bitmap is to calibration the image to a much larger size. Enlarging a bitmap tin cause blurriness and brand the individual pixels besides pronounced—an effect chosen pixelation . When y'all overstate a vector, yet, it remains crisp at any size because it is composed of lines and points that are redrawn each fourth dimension the vector is scaled.

To trace a bitmap, select the bitmap and use the Modify→Bitmap→Trace Bitmap menu command. Use the dialog that appears (Effigy iv-12) to set tolerances used when tracing. Color threshold determines when a new colour in the bitmap is identified for tracing. The lower the threshold, the more colors will be seen as unique, and the more vectors will exist created. Minimum area sets a minimum limit for the number of side by side pixels within the same color threshold that must exist found to create a new vector. The Bend fit carte contains six presets that prompt the trace routine to fit curves tighter or looser to the original prototype color areas. Tighter curves are more accurate and looser curves "round out" the colour areas. Finally, the Corner threshold works much the aforementioned way, allowing you to choose more or fewer corners in the terminal trace. More corners make the trace closer to the original.

Effigy four-12. The Trace Bitmap dialog

Notation

Look to the companion website for an interesting example of tracing bitmaps that includes ActionScript animation and a round-trip editing workflow from Wink to Illustrator and back again.

Equally the trace'southward visual fidelity improves, the resulting vectors become more circuitous. Smaller Color Threshold and Minimum Area settings, tighter curves, and more than corners create many more than vectors that must be drawn by the viewer's reckoner at runtime. The respective default values of 100, 8, Normal, and Normal produce a coarser tracing with fewer vectors. Figure 4-13 shows before and after trace images of a crumpled piece of paper, which appears as a groundwork in the portfolio project. To achieve this level of accuracy, the values in Figure four-12 were used, increasing the number of curves used in the trace.

Figure iv-13. Before and after tracing a bitmap

Flash provides an Optimize Curves feature (Modify→Shape→Optimize) for reducing the complexity of a vector shape and, thus, the file size (Figure 4-14). You can vary the optimization strength from 0 to 100, preview the upshot of the setting, and receive an optimization report. The vector paradigm in Effigy four-13 was optimized with a setting of 100 and resulted in a 17% reduction in curves, just still maintained acceptable visual allegiance.

Figure 4-14. Optimizing curves to reduce file size

Warning

Use bitmap tracing but when needed and follow the optimization techniques discussed in this affiliate. It is tempting to include only vector-based avails in Flash, but a vector equivalent of a bitmap tin be bigger and reduce operation at runtime.

Using a Bitmap Every bit a Tile

Another bitmap manipulation technique is to use the bitmap equally a tiled fill up. This is nigh common when using photographic textures as fills or when filling big shapes where an equivalent bitmap would increase file size too significantly. Ofttimes, seamless tiles are used for fills, which are rectangles optimized to hide whatsoever seams when the tiles are joined. Effigy four-15 shows a seamless tile and a bitmap fill created from that tile.

Figure iv-15. A seamless tile bitmap (meridian) and a shape filled with a bitmap fill up (bottom)

To utilize a bitmap fill, open the Color console, select the fill chip, and gear up the Type menu to Bitmap. This will show a series of thumbnails of all the bitmaps in the current file's Library panel. Select the bitmap y'all prefer and so apply the fill with the Paint Bucket simply equally you would apply solid or gradient color fills. Any new shape that you draw while the bitmap fill is active will also utilise that tile, and you can even employ tiles to strokes.

Note

The Gradient Transform tool can multitask when information technology comes to bitmap fills. The tool tin rotate, skew, and scale the fill for interesting effects. The companion website contains more information about this technique.

Projection Progress

So far, you've created component parts of your portfolio. While that will keep, it'due south now time to create the master file into which all other assets will be placed. This file volition contain the user interface elements mutual to all screens, including navigation buttons, logo, and and so on.

Importing the Interface Beat

Earlier you import the native Photoshop document (PSD), it helps to understand how the file is constructed and what the portfolio will await like. In particular, the PSD uses an optimization technique that improves working with large bitmaps, and warrants scrutiny. Figure 4-16 shows the artwork in the PSD, and Figure 4-17 shows its layer configuration.

The design for the portfolio is based on a large viewing cycle that reveals each screen as it rotates. Figure 4-16 shows the wheel in the centre of the document and the remainder of the interface in the upper-left corner. This arrangement allows you to import the entire interface in one procedure. The PSD is actually 1,675×1,675 pixels. The upper-left corner (outlined by a red reference outline that doesn't appear in the artwork) is 750×500 pixels, the size of the Flash document.

The portfolio's four navigation buttons are in the lower-left corner of the highlighted area. In Chapter 7, you lot will add together filter effects to the Upwardly, Over, and Down states of these buttons to give them their final appearances. The upper-right corner of this area will comprise a logo you volition import from Adobe Illustrator after in this affiliate. The lower-right corner of the region is the eventual location of the sound controller you created in Chapter 3. Finally, the center of the highlighted surface area contains a graphic used to improve the experience of switching screens.

Figure 4-16. The projection user interface PSD; the carmine outline, for reference but, indicates Flash file dimensions

Figure 4-17. The project user interface PSD Layers panel

When navigating to a new screen, the wheel rotates a few times and then slows down and stops at the chosen screen. To make the rotation time fast and consequent, the portfolio uses a motion blur illusion. Motion blur is a directional blur that fools the eye into thinking an object is in move—a trick that has served animators for decades. When the wheel is rotating fast enough, the projection fades in a graphic on top of the wheel. The graphic is a composite of the fine art in the bike and is blurred to simulate circular motion. This reinforces the movement of the wheel in the viewer'due south mind. When the cycle begins to slow downward, the motion blur fades away. This trick lets you move from whatever frame to any other frame in the same amount of time without appearing clunky or reducing the impact of the rotating wheel.

Figure four-17 shows the layers in the PSD. The elevation nine rows of the document comprise the navigation organization. Iv pairs of button art and text sit atop a background, and all of these layers are independent in a layer group called navigation . Each push button text layer is editable text, and a drop shadow layer fashion is applied to the groundwork behind the buttons.

The motion mistiness and bicycle reside in their own layers. Both are reduced to approximately lxx% of their eventual size. This is a pull a fast one on to reduce the file size of the concluding projection SWF. Bitmaps can add a lot to file size, then it'southward sometimes helpful to reduce them prior to importing. However, if you reduce them too much, they volition appear blurry when enlarged to full size. By reducing the images to this caste in the PSD, you lot will merely need to enlarge them 140% in the FLA to reach their desired sizes.

1. Create a new FLA using the File→New menu command. This file will serve as the master projection file into which all other avails will be placed, so you don't demand to use the content template you created in Chapter 1. Save your file equally portfolio.fla.

2. Change the document settings (Modify→Certificate) to apply the correct dimensions and Stage colour. Set the size of the file to 750 × 500 pixels. Uncheck the Arrange 3D Perspective Angle to preserve current stage project checkbox (you'll learn more about this and other 3D backdrop in Chapter 8). Gear up the Phase color to black .

3. Employ the Import to Stage menu item (File→Import→Import to Stage) and, in the file browser dialog, select the provided source file, ui_shell.psd.

4. In the lower-left corner of the dialog that appears, gear up the Convert layers to option to Flash Layers , and enable the Place layers at original position option. Be sure the Prepare phase size to same size equally Photoshop canvas option is non enabled. You desire to preserve your file size, rather than match the much larger size of the interface's wheel asset.

If y'all set up your PSD import preferences as described earlier in the Configuring the PSD Importer preferences section of this chapter, nearly of your piece of work will be done for you. This is because Wink will automatically preconfigure each layer co-ordinate to your preferences, based on the layer type.

1. If all of the layers in the Import dialog are already set to import as movie clips, your preferences match the options discussed herein. Skip to footstep 10. If you've chosen to configure each layer, proceed with step 6.

2. Select all layers (click the navigation layer group at the top of the scrolling listing, hold down the Shift key, curl downwards to the bottom of the listing, and click the wheel image layer). Enable the Create movie clips for these layers option and cull a center registration point.

3. Select each image layer and set up it to Bitmap image with editable layer styles . While doing this, set up the Publish Settings of each image layer to Lossy compression and choose the Apply publish setting quality.

4. Select each text layer and gear up its import selection to Editable text .

5. One by one, select the navigation layer grouping, and the motionBlur and wheel paradigm layers, and give each movie clip an instance name that matches its layer name.

6. All that remains is to give the navigation buttons instance names. Select the homeBtn layer and name its flick clip dwelling . Follow suit so galleryBtn becomes gallery , labBtn becomes lab , and helpBtn becomes help .

7. Click OK to consummate the import process. Save your work. Your file should look like Figure 4-18. Compare it in greater detail to the furnished source file portfolio_01.fla. If your file doesn't closely resemble the furnished source, reconfirm your steps or continue with the provided file.

   Annotation

   As a typical projection progresses, you will unremarkably add several avails to your library. In addition to creating symbols as y'all work, you lot will likely import, re-create and paste, or drag and drop symbols, bitmaps, sounds, and more, from external sources.

   In doing so, your library volition become cluttered, so you may want to organize it now and then by grouping assets into folders. How yous arrange your files is often a thing of preference, but the companion source FLAs will periodically organize the Library to show yous dissimilar means of managing your assets.

   For more information on using the Library, run across the companion website.

   

   Figure 4-18. The user interface assets subsequently importing into Wink from Adobe Photoshop

8. Using the Transform panel (Figure 4-19), lock the link to the right of the scale backdrop and scale the motionBlur picture clip proportionally to 140 %. Wait to scale the wheel until the side by side chapter.

   

   Effigy 4-xix. Transforming the motionBlur movie prune to a scale of 140%

9. Save your piece of work.

Importing the Background

When a page of the portfolio is displayed, its content volition appear in ane of the square holes punched into the viewing wheel. Equally such, you must use a contrasting background image so your assets don't disappear into the blackness Phase color. It would be trivial to modify the Phase colour, merely that choice is unappealing for two reasons. First, a flat-colored stage won't match the portfolio blueprint and, 2nd, the black stage color supports the illusion that the interface elements are free-floating and the wheel is spinning in place.

Another solution is to import a background graphic of crumpled paper to sit behind the wheel. This matches the design of the portfolio and, as the wheel spins, the empty frames reveal the background. When the wheel stops, your screen content animates in front of the texture.

1. In your portfolio.fla file, add a new layer at the pinnacle of the Timeline and name it background .

2. Select the frame in that layer and import (File→Import→Import to Stage) the provided source file paper_background_small.jpg. The smaller dimensions of this graphic will save on SWF file size later on, merely the image must be scaled upwardly to make full the area visible through the bike frames. Select the bitmap and, using the Properties panel, set its width and elevation to 625 and 500 , respectively.

3. Create a motion-picture show clip from the bitmap. With the bitmap even so selected, use Change→Catechumen to Symbol. Name the movie clip paper and choose a center registration point from the nine-bespeak grid.

4. Using the Properties console, prepare the ten and y of the motion picture clip to 395 and 250 , respectively.

5. Click on the layer and elevate it to the bottom of all other layers to make sure the background is beneath the wheel.

   Note

   Optionally, experiment with tracing bitmaps past tracing the crumpled background paper. Use an efficient setting, equally described before in this chapter in the Tracing a Bitmap section, and compare the bitmap and vector versions of the asset. Determine which is more satisfactory: a bitmap scaled to 200% (with possible blurriness) or a traced bitmap (with a possibly coarser blending of colors).

Importing the Logo

Having imported the main interface assets from Adobe Photoshop, you'll now import 2 assets from Adobe Illustrator. The commencement is the portfolio logo, which you'll configure during the import procedure. The second is for the Lab screen yous'll program afterward on, and that asset was preconfigured in Illustrator to smoothen the import process. Earlier you go to that betoken, accept a look at the logo (Figure iv-20) and the Illustrator file's layers (Figure 4-21).

Figure 4-20. The portfolio logo after importing

Figure 4-21. The layer construction of logo.ai

Effigy 4-20 shows a sneak peek at the logo subsequently importing because its background and text appear white in Illustrator and are difficult to see. This is reflected in the layer thumbnails in Figure 4-21, in the white and Page layers. The logo consists of iv discrete elements: the give-and-take "Folio" in white text, a white groundwork, a red eye icon, and black outlines. All four parts are named appropriately and reside in a single layer named logo . The white logo background does not announced white in Figure iv-20 because a blend mode has been applied in Illustrator. You lot'll learn more near blend modes in Chapter seven simply, for now, y'all'll see that the blend way is preserved during the AI import process and remains editable in Wink.

1. In your portfolio.fla file, click the motionBlur layer in the Timeline panel and and so add a new layer. Don't worry about its name, as you'll change it later.

2. Select a frame in the new layer and import (File→Import→Import to Stage) the provided source file logo.ai.

The AI File Importer appears, and the layer structure of the file volition exist reflected in the dialog (Figure 4-22). The icons to the correct of the chemical element names indicate that the black and red elements are fix to import every bit editable shapes, the text is set to import as editable text, and the white groundwork element is set to import as a movie clip. If your icons don't match these options, revisit the Configuring the AI Importer preferences section earlier in the chapter.

Figure four-22. The logo parts in their unedited formats from the AI file

Even though the AI File Importer preferences discussed earlier in the chapter do non automatically create picture show clips, the logo's white background element is gear up to import equally a moving-picture show clip before configuring any further options. This is necessary to preserve the blend mode applied in Illustrator. If you lot change this import choice, the dialog will brandish a warning that an incompatibility exists, and the blend mode volition not be translated into Flash.

1. Concord down your Shift key and click on the logo , black , red , and white elements and check the Create movie clip checkbox. Give the flick clips a center registration bespeak by clicking the center box in the ix-box grid marked Registration . These options are shown in Figure 4-23.

   

   Figure 4-23. The logo parts subsequently turning all into pic clips

2. Individually select the logo , black , red , and white elements and give them movie prune instance names that match their names in the dialog.

3. At the bottom of the dialog, cull to Convert layers to a Single Flash Layer, and to Place objects at original position . The Illustrator document is the aforementioned size as your portfolio FLA's phase, so the logo will announced in the correct position afterward import.

4. Click the OK button to import. You will detect that the layer name has assumed the proper noun of the AI file. Rename it to logo .

5. Double-click on the motion-picture show prune on the stage, and you will see everything in a single layer. In Chapter vii, it will exist easier to piece of work with the logo as separate parts, then y'all a nice productivity tip to move each element to its ain layer. Select everything by clicking in one case in the frame in the Timeline console, and use the Modify→Timeline→Distribute to Layers bill of fare command. A layer for each logo part will exist created, forth with the original, at present empty default layer. Delete the latter, as you will no longer need it.

6. Render to the phase using Edit→Edit Certificate and save your file. Yous are now finished with the logo until you revisit information technology later in Chapter 7 to put blend modes to work.

Importing the Lab Screen

Lab, brusk for laboratory, is a name often given to an experimental section of a project. In the portfolio projection, the Lab screen is a place to show design and coding experiments, and focuses on a text animation tool. In the finished project, the user types into a text field and triggers an animation in the corresponding on-screen letters.

Because the Flash avails for the Lab screen were prepared for you in Adobe Illustrator, the import process is near effortless. There is merely one thing you demand to do to compensate for a feature of the AI importer.

Every bit yous saw when importing the logo, when importing directly to the Stage, two options help control placement of assets. You tin change the size of the Phase to friction match the dimensions of the Illustrator certificate, and y'all can place the imported assets at their original positions in the Illustrator document, relative to the upper-left corner of the Stage.

Notwithstanding, when importing into a picture clip, these options are not available. This behavior mimics the process of importing to the Library instead of the Stage, where position is non relevant. Unfortunately, y'all desire to automatically position the elements in your flick prune, also. You lot're importing into a motion-picture show prune because you've prepared your workflow to ease asset integration in the future. When the time comes, you will transfer the Lab movie prune to the chief project FLA, and your prep work will actually pay off.

There are a few ways to work around the issue. First, you can import directly to the Stage and then create a new picture clip once the import is complete. In this case, you lot will need to manually adjust the location of the assets afterwards the motion-picture show clip is created because the film clip registration bespeak will not be (0, 0). This volition brand transferring the pic clip to your chief file more troublesome afterward on, then it is non ideal.

A better approach is to go along to apply the content movie clip in your template. Import to the Stage, copy the newly imported avails to the clipboard, open the content movie clip, and then Paste in Place (Edit→Paste in Place) to preserve their prior locations. Considering the registration indicate of your content motion picture clip is also (0, 0), the assets volition be right where you want them. This is the approach you lot should use when confronted with a like situation without control over your imported assets.

However, in that location's another trick that continues your workflow optimization by preparing for this issue while however in Illustrator. By only adding a placeholder nugget in the upper-left corner of your matching-size Illustrator document, the placeholder will represent to indicate (0, 0) subsequently import and all the assets will be correctly positioned. This fox has been used in the furnished source files, and all you need to practice is remove the placeholder asset:

1. Create a new file using your Content template and double-click the content moving-picture show clip to prepare for importing.

2. Create a new layer and delete the placeholder layer. Your moving-picture show clip should now take simply one layer with nil in it.

3. Select the frame in that layer and import (File→Import→Import to Stage) the provided source file qwerty.ai.

4. All the piece of work you would have put into the Import dialog has been done for you in Illustrator, and then just click OK to proceed with the import.

   Note

   Think, importing AI files is nearly identical to importing PSD files, so you can easily experiment with the process using your own files. Rather than focusing on that procedure once more, this portion of the exercise focuses on workflow and collaboration between Illustrator and Wink users.

5. Once the import is complete, the avails will be correctly positioned and you lot will come across a minor pink foursquare in the upper-left corner. Wait at the Timeline panel and you lot will come across a layer at the superlative of the Timeline called placeholder . Delete this layer, and you're done.

6. Relieve your file equally lab_page.fla and compare information technology to the provided source file, lab_page_final.fla.

Effigy iv-24 shows the finished film clip after removing the placeholder layer. Poke around and see that the braces, messages, and the tabbed card at the lesser of the screen are all movie clips. Double-click the tabbed card and expect inside to discover a grouping. Grouping elements in Illustrator helps preserve their relative locations during the import process. Break this group apart (Edit→Break Apart), and you'll find that the text field already has an instance proper name. This is fix to program with ActionScript, which you'll do in Chapter half dozen.

Figure 4-24. The Lab movie prune after importing into Flash from Adobe Illustrator

The Project Continues...

In the next chapter, the heavy lifting begins. You lot'll position all the UI elements, use some Timeline animations to innovate the portfolio when information technology loads, and add the content you've created to date.

Get Learning Flash CS4 Professional person now with O'Reilly online learning.

O'Reilly members experience live online grooming, plus books, videos, and digital content from 200+ publishers.

champagnebuth1999.blogspot.com

Source: https://www.oreilly.com/library/view/learning-flash-cs4/9780596803575/ch04.html

Share this post