Flash Builder 4 and Flex 4 Bible- P10

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

99
lượt xem 19
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Flash Builder 4 and Flex 4 Bible- P10: When Macromedia first released Flash MX in 2002, the product was branded as the new way to build Rich Internet Applications (known by the acronym RIA). The term was invented at Macromedia to describe a new class of applications that would offer the benefits of being connected to the Internet, including access to various types of Web-based services, but would solve many of the nagging issues that had been inherent in browser-based applications since the mid-1990s....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Flash Builder 4 and Flex 4 Bible- P10

Chapter 14: Declaring Graphics with MXML and FXG l Ellipse. Draws an elliptical shape. If its height and width are identical, it draws a circle. l Line. Draws a straight line from one set of coordinates to another. l Path. Draws a shape based on a set of drawing commands, creating multiple shape segments. l Rect. Draws a rectangular shape. If its height and width are identical, it draws a square. The spark.primitives package also includes the following classes that are used to group graphics together and embed graphical files in conventional formats such as PNG, GIF, and JPG: l BitmapImage. A class that embeds bitmap data defined in a graphical file. The file can be in any one of the conventional bitmap file formats: PNG, JPG, or GIF. l Graphic. A nonvisual class that can be used to group multiple FXG graphics together. When you place multiple FXG graphics within an instance of the Graphic class, they overlap each other using a layout architecture similar to a Group with a layout of BasicLayout. Drawing lines The Line class draws a line on the screen. As with all such primitives, it must be placed within a Spark application or component. Its width and height properties determine its horizontal and vertical length, while the stroke property determines its color and style. The stroke property must be set to an instance of a class that implements the IStroke inter- face. Examples of such classes in the Flex 4 SDK include GradientStroke and SolidColorStroke. Caution The Line class’s stroke property defaults to null. If you don’t set the stroke to an instance of a class that implements the IStroke interface, the line is invisible. n The following code draws a simple horizontal line. The stroke property is set to an instance of SolidColorStroke with a color of black (#000000) and a weight of 2 pixels: Using gradient strokes As with the fill property used with shapes that are drawn with the Rect, Ellipse, and Path classes (described in the following sections), the stroke property can be set to a gradient of two or more colors with the GradientStroke class or with one of its subclasses, LinearGradientStroke and RadialGradientStroke. 421
Part II: Designing Flex Applications The gradient stroke classes support a property named entries that’s set to an array of two or more instances of the GradientEntry class. The following code draws a horizontal line that’s 10 pixels wide and has five entries: Figure 14.1 shows the resulting line, with alternating black and white colors. FIGURE 14.1 A horizontal line with a gradient stroke Drawing rectangular and elliptical shapes The two most commonly used primitive vector graphic classes are Rect and Ellipse. Respectively, they render rectangular and elliptical shapes on the screen. Both support fill and stroke prop- erties, which enable you to define the outer border and inner fill of the shape you’re drawing. Each shape’s fill property can be set to an instance of a class that implements the IFill inter- face. Examples of such classes in the Flex 4 SDK include: l BitmapFill l LinearGradient l RadialGradient l SolidColor And, as described in the previous section on the Line class, each shape’s stroke property is set to an instance of a class that implements the IStroke interface. 422
Chapter 14: Declaring Graphics with MXML and FXG Note All shape classes support the x, y, top, bottom, left, right, horizontalCenter, and verticalCenter properties to control a shape’s position within its container, and the height and width properties to control its dimensions. As with all Flex visual components, the height and width can be set either to a numeric value representing a certain number of pixels or to a percentage value. n The following MXML code defines a rectangle with dimensions of 400 pixels width by 300 pixels height. The rectangle’s outer border is a solid black line with a weight of 2 pixels, and the fill is a solid light gray: Figure 14.2 shows the resulting shape, a simple rectangle with a light gray fill and a black stroke. FIGURE 14.2 This simple shape is defined as an instance of the Rect class. Drawing arbitrary shapes with the Path class The Path class enables you to declare any shape based on a set of commands that replicate the features of the Flash drawing API. Its data property is a string that executes cursor placement and drawing operations. The data string alternates commands and sets of numeric values. Each com- mand is notated with a single alphabetical character, as follows: 423
Part II: Designing Flex Applications l C. Draw a cubic Bezier curve. The first two values are the first set of control coordinates, the second two values are the second set of control coordinates, and the last two values are the drawing destination. l H. Draw a horizontal line from the current cursor coordinate to a new X coordinate. l L. Draw a line from the current cursor position to a set of coordinates. For example, the command L 100 100 causes a line to be drawn from the current cursor position to X and Y coordinates of 100 and 100. l M. Move the cursor to a set of coordinates. For example, the command M 50 100 causes the cursor to be placed at an X coordinate of 50 and a Y coordinate of 100. l Q. Draw a quadratic Bezier curve. The first two values are the control coordinates, and the last two are the drawing destination. l V. Draw a vertical line from the current cursor coordinate to a new Y coordinate. l Z. Close the path. The following simple Path object draws a horizontal line starting at X and Y positions of 100, and then draws a horizontal line to an X position of 500. The color and weight of the path are deter- mined by its stroke property: Note If you change any command to a lowercase character, it’s evaluated as a coordinate relative to the current cur- sor position instead of an absolute coordinate within the vector graphic’s container. For example, a data property of M 100 100 h 500 Z creates a horizontal line that’s 500 pixels wide, starting at an X position of 100, whereas if you use the uppercase H, the line is 400 pixels wide (drawn from 100 to 500 pixels). n Caution Errors in the data property’s commands don’t cause compilation or runtime errors; instead, the shape proba- bly won’t be drawn. n More complex Path objects can be drawn with more commands, and multiple shapes and lines can be drawn in the same Path object by moving the cursor and initiating new draw commands. The following object draws a curved arrow using a series of lines and cubic Bezier curves: 424
Chapter 14: Declaring Graphics with MXML and FXG Figure 14.3 shows the resulting vector graphic: a curved arrow with a linear gradient. FIGURE 14.3 A curved arrow drawn with the Path class Note White space, such as extra space, tab, or line feed characters, is ignored in the data property’s value. In the preceding code, I’ve added space characters and line feeds to make the data property more readable. This doesn’t affect the application’s performance or functionality. n Adding visual effects The primitive vector graphic classes support many properties that enable you to modify their appearance. Examples include gradient fills and strokes, drop shadows and other filters, and scal- ing, or resizing, of vector graphics. In this section I describe some of the most commonly used effects from which you can choose. Using gradient fills The fill property that’s supported by the Rect, Ellipse, and Path classes can be set to a solid color with the SolidColor class or to a gradient with either RadialGradient or LinearGradient. Each does exactly what its name implies: 425
Part II: Designing Flex Applications l LinearGradient. Defines a change in colors in a linear using calculation from one coor- dinate to another. By default the gradient is calculated from left to right, but it can be adjusted by changing the gradient class’s direction property; for example, to change the gra- dient to go from top to bottom, change the LinearGradient object’s direction to 90. l RadialGradient. Defines a change in colors starting from the certain point in an object (by default its center) and radiating outward to its borders. You can set the focalPoint Ratio and rotation properties to change the point from which the gradient radiates. The application in Listing 14.1 defines two Ellipse shapes. The first uses a radial gradient, and the seconds uses a linear gradient. Each is modified by the focalPointRatio and rotation properties to create a particular visual appearance. LISTING 14.1 Two shapes with gradient fills @namespace s “library://ns.adobe.com/flex/spark”; s|Label { font-size:14; font-weight:bold; } 426
Chapter 14: Declaring Graphics with MXML and FXG On the Web The code in Listing 14.1 is available in the Web site files in the chapter14 project as GradientDemos.mxml. n Figure 14.4 shows visual result: two Ellipse objects with different types of gradient fills. FIGURE 14.4 These ellipse objects use, respectively, a linear and a radial gradient fill. Radial Gradient Linear Gradient The fill property contains an array of GradientEntry objects. Each can be assigned a ratio value from 0 to 1 that determines where in the graphical element the color change occurs. The fol- lowing Path object uses a RadialGradient with many instances of the GradientEntry class. They alternate colors and determine where the colors change in the graphical element with their ratio values: 427
Part II: Designing Flex Applications Figure 14.5 shows the result: a symmetrical polygon with a series of concentric radial gradients. FIGURE 14.5 A symmetrical polygon with a radial gradient fill defined with primitive vector graphic classes declared in MXML Reusing graphic elements with and The Flex 4 SDK adds a new MXML element named that you use to define graphic elements that can then be reused anywhere in the same MXML document. Within the element, you define one or more element. Each describes a graphic element. Caution The tag must be placed as the first child element within the MXML document’s root element. If you place any other tags before it, a compiler error is generated. n The application in Listing 14.2 defines a single vector graphic as a library definition. Its name is set as CurvedArrow. In the body of the application, there are three instances of the graphic. Each sets its scaleX and scaleY properties to a different value. The resulting application displays three instances of the arrow. Even though they’re different sizes, they all show clean curves and smooth gradient fills. 428
Chapter 14: Declaring Graphics with MXML and FXG LISTING 14.2 A library definition shape used multiple times On the Web The code in Listing 14.2 is available in the Web site files in the chapter14 project as ScalingGraphics.mxml. n New Feature The MXML tag is new in Flex 4.You use it to define reusable graphic elements. Each reusable graphical element is defined in an class with a name property. The definition becomes an ActionScript class at compilation time. You can then declare instances of the reusable graphic element by referring to its name as an MXML tag with the fx prefix. For example, in Listing 14.2, the tag is a direct child of . It contains this definition: 429
Part II: Designing Flex Applications The resulting CurvedArrow graphical element can then be used anywhere in the visual content of the docu- ment in which the tag is declared. n Scaling graphic elements An MXML graphic is rendered as a vector graphic; this means that its rendering is calculated math- ematically rather than as a set of pixels (as is the case with bitmap graphics). As a result, you can increase or decrease the size of the graphic (a process known as scaling) without disturbing the graphic’s resolution. When you do the same thing with a bitmap graphic, it’s often pixilated, show- ing jagged edges. With vector graphics, the rendering stays clean and attractive. In Listing 14.2, the graphic that’s defined in the section is rendered three times, each time with a different value for the object’s scaleY and scaleY properties: Figure 14.6 shows the result, with the three versions of the arrow graphic displayed side by side. Notice that the graphic’s curves are smooth regardless of the scale. This is a benefit of vector graph- ics: because their presentation is calculated mathematically, they can adjust to whatever scale your application needs. FIGURE 14.6 A graphic element displayed in three scales 430
Chapter 14: Declaring Graphics with MXML and FXG Applying filters Each of the primitive vector graphic classes supports the filters property, an array of objects derived from one of the classes in the spark.filters package. The following filter classes are included in the Flex 4 SDK: l BevelFilter l BlurFilter l ColorMatrixFilter l ConvolutionFilter l DisplacementMapFilter l DropShadowFilter l GlowFilter l GradientBevelFilter l GradientFilter l GradientGlowFilter l ShaderFilter Each filter class supports a set of properties that modify its effect on the graphical element. For example, the following Path object adds two filters, a drop shadow, and a blur: Figure 14.7 shows two versions of the resulting graphical element side by side. The first is the graphical element without the filters; the second shows the changes implemented by the filters. 431
Part II: Designing Flex Applications FIGURE 14.7 A graphical element before and after adding filters Using FXG Files An FXG file is a text file written in the FXG format. You can create FXG files with Adobe’s graphi- cal editing products and use the files as embedded graphics in Flex 4 applications. In this section I first describe how to create and export graphics in Photoshop, Illustrator, and Fireworks. I then show how to use the resulting files as ActionScript classes in your Flex applications. Creating FXG graphics with Creative Suite software Starting with Creative Suite 4, Adobe added features to Photoshop, Illustrator, and Fireworks that enable you to create and export graphics in FXG format. The resulting files can be used in your Flex applications as embedded graphics. Creating FXG graphics with Photoshop Adobe Photoshop is primarily used to create and manipulate bitmap graphics, so it might seem at first like FXG wouldn’t be useful to Photoshop developers. However, wrapping bitmap files in FXG gives you a very easy and convenient way of exporting a graphic in a format that can be used as an ActionScript class in your Flex applications. Follow these steps to export a Photoshop file as FXG: 1. Open the file in Photoshop. 2. Choose File ➪ Save As. 3. Set the Format to FXG (*.fxg). 4. Select the folder in which you want to create the file. 5. Set the filename using the .fxg file extension and click Save. A sample FXG file built in Photoshop might look like this: 432
Chapter 14: Declaring Graphics with MXML and FXG The root element is always , and each bitmap graphic in the file is referenced by an instance of the element. The binary graphic files themselves are created in PNG format and saved in an assets/images subfolder in the same folder as the FXG file. To use this file in your Flex application, create the FXG file and its associated assets folder any- where in your Flex project’s source-code root folder. Creating FXG graphics with Illustrator Adobe Illustrator is primarily designed to enable the creation of vector-based graphic art. While designers can work with bitmap formats in Illustrator to some extent, they typically move to Adobe Photoshop when building graphics that are primarily bitmap-based. Starting with Illustrator CS4, users can save their vector graphic files in FXG format. In Illustrator CS4, the resulting files are in FXG 1.0, while in Illustrator CS5, the format is updated to FXG 2.0. Regardless of the version, you can use the resulting FXG files in Flex 4 applications in a number of ways. Figure 14.8 shows a vector graphic in Illustrator CS4. The graphic was created with a variety of Illustrator tools, including a simple rectangular shape. To create an FXG file in Illustrator that describes this shape and can be used in Flex 4, follow these steps: 1. Create or open a file in Illustrator. 2. Choose File ➪ Save As. 3. In the Save As dialog box, set the Save as type option to FXG (*.fxg) and assign a file name with an extension of .fxg. 4. Click Save. 5. In the FXG Options dialog box, shown in Figure 14.9, set any desired options. 6. Click OK to save the file. 433
Part II: Designing Flex Applications FIGURE 14.8 A vector graphic created in Illustrator CS4 FIGURE 14.9 The FXG Options dialog box for FXG exporting 434
Chapter 14: Declaring Graphics with MXML and FXG Listing 14.3 shows the contents of the resulting FXG file. The XML markup in the file describes the vector graphic in mathematical terms and includes metadata that’s used by Illustrator to parse and enable later modification of the file. LISTING 14.3 An FXG file created by Illustrator CS4 that describes a shape with a gradient fill continued 435
Part II: Designing Flex Applications LISTING 14.3 (continued) 436
Chapter 14: Declaring Graphics with MXML and FXG Tip Illustrator sometimes generates bitmap files that render various visual effects and are used in addition to the XML-based description of a graphic’s primary vector art. All of the Creative Suite products create a special folder, known as the assets folder, that’s associated with the FXG file and is used to store such dependent files. For example, an FXG file named BigX.fxg has an associated assets folder named BigX.assets. As with FXG files created in Photoshop, these bitmap files are referred to in the FXG file with the tag. This folder must be copied along with the FXG file into your Flex project in order for the graphical element to be rendered correctly. n Creating FXG graphics with Fireworks Adobe Fireworks CS4 is a hybrid graphics editing product that deals well with both bitmap and vector graphics. When you create a graphic from scratch with Fireworks, and primarily use its vec- tor graphic tools, the resulting artwork can be exported as a pure FXG file that can then be used in a Flex 4 application. Figure 14.10 shows a vector graphic created in Fireworks CS4. This is the same graphic element that was originally created in Illustrator; I show it here to make the point that you can create simi- lar vector art in both products. To save the vector graphic in FXG format, follow these steps: 1. Choose Commands ➪ Export to FXG from the Fireworks menu. 2. In the Select Folder dialog box, select the folder in which you want to save the FXG file. 3. Enter the filename of the FXG file you want to create and click OK. 437
Part II: Designing Flex Applications FIGURE 14.10 A vector graphic in Fireworks CS4 Listing 14.4 shows the contents of the resulting FXG file created by Fireworks CS4. LISTING 14.4 An FXG file created by Fireworks CS4 that describes a shape with a gradient fill 438
Chapter 14: Declaring Graphics with MXML and FXG Note Notice that the FXG markup generated by Fireworks is considerably more concise than the version created by Illustrator. In general, you can create more reusable FXG markup code in Fireworks. If you have existing art- work that was created as a native Illustrator file (with a file extension of .ai), you can open that file in Fireworks and then export it as FXG to create the most concise possible FXG file. n Using FXG files in Flex applications Once you’ve created your FXG files with Photoshop, Illustrator, or Fireworks, you can embed them in a Flex application in a couple of ways: l Use the tag to embed an FXG graphic with the @Embed() compiler directive. l Treat FXG files as ActionScript classes and instantiate them with both MXML and ActionScript code. 439
Part II: Designing Flex Applications Note Unlike the FXG ActionScript classes that I described earlier in this chapter, graphics that are drawn with FXG files cannot be modified at runtime by changes to its properties. If you need your FXG graphic to be modifiable at runtime, consider copying and pasting the FXG code from the file into an MXML document. n Embedding FXG graphics with The tag is used in Flex 4 MXML files to embed graphical elements as bit- maps. To use this strategy, set the tag’s source attribute to the name and location of the FXG file, wrapped in the @Embed() compiler directive: Caution When you embed an FXG graphic in this fashion, the vector graphic is transcoded at compile time into a bit- map graphic. As a result, if you then try to scale the graphic, you might see pixilation and other artifacts nor- mally associated with bitmap graphics. n Using FXG files as ActionScript classes You can also use FXG files as ActionScript classes, instantiating and placing them in your applica- tions using either MXML or ActionScript code. To add an FXG file as a graphical element with MXML, first declare a custom namespace in the MXML document that associates an XML prefix with the folder (package) in which the FXG file is stored: Then place the graphic element in the application or within a Spark component by referring to the file name (without the .fxg extension) as an MXML tag name: Tip The resulting ActionScript class is extended from the SpriteVisualElement class and can use any of that class’s properties, methods, and events. For example, to enable a click behavior you can listen for the graphic element’s click event and respond by executing your own ActionScript code. You can even make the cursor change to a hand shape when it hovers over the graphic by setting the graphic element’s buttonMode prop- erty to true: n 440