| <?xml version="1.0" encoding="UTF-8"?> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <!DOCTYPE html |
| PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html lang="en-us" xml:lang="en-us"> |
| <head> |
| <meta name="DC.Type" content="topic"/> |
| <meta name="DC.Title" content="FXG and MXML graphics"/> |
| <meta name="DC.Format" content="XHTML"/> |
| <meta name="DC.Identifier" content="WS145DAB0B-A958-423f-8A01-12B679BA0CC7_verapache"/> |
| <title>FXG and MXML graphics</title> |
| </head> |
| <body id="WS145DAB0B-A958-423f-8A01-12B679BA0CC7_verapache"><a name="WS145DAB0B-A958-423f-8A01-12B679BA0CC7_verapache"><!-- --></a> |
| |
| <div> |
| <div class="p">Adding graphics to your applications can make them more |
| attractive and usable. In many cases, you might want to add graphics |
| that are vector-based, and not import images that don't scale well. |
| You can create vector based graphics in Flex by using one of the |
| following APIs: <ul> |
| <li> |
| <p>FXG</p> |
| |
| </li> |
| |
| <li> |
| <p>MXML graphics</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>FXG is a declarative syntax for defining static graphics. You |
| typically use an Adobe<sup>®</sup> graphics tool to export an FXG document, |
| and then use the FXG document as an optimized component in your |
| application. FXG graphics are used by the mobile skin classes because |
| they are so lightweight.</p> |
| |
| <p>MXML graphics, on the other hand, are a collection of classes |
| that you use to define interactive graphics. You can add interactivity |
| to MXML graphics code because they use classes in the Flex SDK that |
| are subclasses of GraphicElement. The result is not as optimized |
| as FXG.</p> |
| |
| <div class="p">FXG and MXML graphics define the following:<ul> |
| <li> |
| <p>Graphics |
| and text primitives</p> |
| |
| </li> |
| |
| <li> |
| <p>Fills, strokes, gradients, and bitmaps</p> |
| |
| </li> |
| |
| <li> |
| <p>Support for effects such as filters, masks, alphas, transforms, |
| and blend modes</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>FXG and MXML graphics share very similar syntax. For example, |
| in FXG, you can define a rectangle with the <samp class="codeph"><Rect></samp> tag. |
| In MXML graphics, you use the <samp class="codeph"><s:Rect></samp> tag. |
| Most FXG elements have MXML graphics equivalents, although the attributes |
| supported on FXG elements are only a subset of those supported on |
| MXML graphics tags.</p> |
| |
| <p>The amount of interactivity when using FXG and MXML graphics |
| is different. If you use MXML graphics, the tags are mapped to their |
| backing ActionScript implementations during compilation. You can |
| reference the MXML graphic elements and have greater control over |
| them in your code. If you use FXG, then you cannot reference instances |
| of objects within the FXG document from the application or other |
| components. In addition, you cannot add MXML code to it, nor can |
| you add ActionScript.</p> |
| |
| <p>FXG and MXML graphics do not share the same namespace. MXML graphics |
| use the MXML namespace of the containing document. In most cases, |
| this is the Spark namespace. An FXG document uses its own namespace.</p> |
| |
| <p>You cannot use fragments of FXG syntax in an MXML file. You must |
| either use the FXG document as a separate component or convert the |
| code to MXML graphics syntax.</p> |
| |
| <p>You can also draw with the ActionScript drawing APIs.</p> |
| |
| </div> |
| |
| <div class="nested1" id="WSda78ed3a750d6b8f-237979311225c0987ce-8000_verapache"><a name="WSda78ed3a750d6b8f-237979311225c0987ce-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">Graphics classes and elements</h2> |
| |
| |
| <div> |
| <p>FXG and MXML graphics share a very similar syntax. The |
| FXG language includes a set of elements that are defined in the <a href="https://sourceforge.net/adobe/flexsdk/wiki/FXG%202.0%20Specification/" target="_blank">FXG 2.0 specification</a>. MXML graphics include |
| tags that are defined in the MXML language. FXG can be thought of |
| as a subset of the MXML graphics tags. </p> |
| |
| <p>MXML graphics tags are converted to their backing ActionScript |
| implementations by the MXML compiler. Most FXG tags, on the other |
| hand, are converted to low-level Flash Player instructions when |
| compiled. It is this difference that make FXG components much more |
| highly optimized than MXML graphics. </p> |
| |
| <div class="p">Most FXG elements are roughly equivalent to an MXML graphics |
| class of the same name. But, they do not support all the properties |
| of the MXML graphics class, nor are they backed by ActionScript |
| classes. The following table shows the FXG 2.0 elements and their |
| supported attributes and children. In addition, it lists the equivalent |
| MXML graphics tag: |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e130"> |
| <p>FXG tag</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e136"> |
| <p>Equivalent MXML tag and ActionScript class</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e142"> |
| <p>FXG-supported attributes</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e148"> |
| <p>FXG children</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><BitmapFill></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:BitmapFill></samp> |
| </p> |
| |
| <p>mx.graphics.BitmapFill</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">fillMode |
| rotation |
| scaleX |
| scaleY |
| source (required) |
| x |
| y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><matrix></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><BitmapImage></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:BitmapImage></samp> |
| </p> |
| |
| <p>spark.primitives.BitmapImage</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">alpha |
| blendMode |
| fillMode |
| height |
| rotation |
| scaleX |
| scaleY |
| source (required) |
| visible |
| width |
| x |
| y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p>None.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><ColorTransform></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:ColorTransform></samp> |
| </p> |
| |
| <p>flash.geom.ColorTransform</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">alphaMultiplier |
| alphaOffset |
| blueMultiplier |
| blueOffset |
| greenMultiplier |
| greenOffset |
| redMultiplier |
| redOffset</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p>None.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><Definition></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><fx:Definition></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">name (required)</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><Group></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><Ellipse></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:Ellipse></samp> |
| </p> |
| |
| <p>spark.primitives.Ellipse</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">blendMode |
| height |
| rotation |
| scaleX |
| scaleY |
| transformX |
| transformY |
| visible |
| width |
| x |
| y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><fill> |
| <filters> |
| <mask> |
| <stroke> |
| <transform></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><GradientEntry></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:GradientEntry></samp> |
| </p> |
| |
| <p>mx.graphics.GradientEntry</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">alpha |
| color |
| ratio</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p>None.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><Graphic></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:Graphic></samp> |
| </p> |
| |
| <p>spark.primitives.Graphic</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">mask |
| scaleGridBottom |
| scaleGridLeft |
| scaleGridRight |
| scaleGridTop |
| version |
| viewHeight |
| viewWidth</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><Group> |
| <Library> |
| <mask></samp> |
| </p> |
| |
| <p>Any subclass of the GraphicElement class</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><Group></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:Group></samp> |
| </p> |
| |
| <p>spark.components.Group</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">alpha |
| blendMode |
| id |
| maskType |
| rotation |
| scaleGridBottom |
| scaleGridLeft |
| scaleGridRight |
| scaleGridTop |
| scaleX |
| scaleY |
| transformX |
| transformY |
| visible |
| x |
| y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><filters> |
| <Group> |
| <transform></samp> |
| </p> |
| |
| <p>Any subclass of the GraphicElement |
| class</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><Library></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><fx:Library></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p>None.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><Definition></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><Line></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:Line></samp> |
| </p> |
| |
| <p>spark.primitives.Line</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">alpha |
| blendMode |
| id |
| maskType |
| rotation |
| scaleX |
| scaleY |
| transformX |
| transformY |
| visible |
| x |
| xFrom |
| xTo |
| y |
| yFrom |
| yTo</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><fill> |
| <filters> |
| <mask> |
| <stroke> |
| <transform></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><LinearGradient></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:LinearGradient></samp> |
| </p> |
| |
| <p>mx.graphics.LinearGradient</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">interpolationMethod |
| rotation |
| scaleX |
| spreadMethod |
| x |
| y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><GradientEntry> |
| <matrix></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><LinearGradientStroke></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:LinearGradientStroke></samp> |
| </p> |
| |
| <p>mx.graphics.LinearGradientStroke</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">caps |
| interpolationMethod |
| joints |
| miterLimit |
| rotation |
| scaleMode |
| scaleX |
| spreadMethod |
| x |
| y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><GradientEntry> |
| <matrix></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><Matrix></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:Matrix></samp> |
| </p> |
| |
| <p>flash.geom.Matrix</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">a |
| b |
| c |
| d |
| tx |
| ty</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p>None.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><Path></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:Path></samp> |
| </p> |
| |
| <p>spark.primitives.Path</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">blendMode |
| data |
| rotation |
| scaleX |
| scaleY |
| transformX |
| transformY |
| visible |
| winding |
| x |
| y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><fill> |
| <filters> |
| <mask> |
| <stroke> |
| <transform></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><RadialGradient></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:RadialGradient></samp> |
| </p> |
| |
| <p>mx.graphics.RadialGradient</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">focalPointRatio |
| interpolationMethod |
| rotation |
| scaleX |
| scaleY |
| spreadMethod |
| x |
| y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><GradientEntry> |
| <matrix></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><RadialGradientStroke></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:RadialGradientStroke></samp> |
| </p> |
| |
| <p>mx.graphics.RadialGradientStroke</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">caps |
| focalPointRatio |
| joints |
| miterLimit |
| scaleMode |
| scaleX |
| scaleY |
| rotation |
| spreadMethod |
| interpolationMethod |
| x |
| y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><GradientEntry> |
| <matrix></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><Rect></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:Rect></samp> |
| </p> |
| |
| <p>spark.primitives.Rect</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">blendMode |
| bottomLeftRadiusX |
| bottomLeftRadiusY |
| bottomRightRadiusX |
| bottomRightRadiusY |
| height |
| radiusX |
| radiusY |
| rotation |
| scaleX |
| scaleY |
| topLeftRadiusX |
| topLeftRadiusY |
| topRightRadiusX |
| topRightRadiusY |
| transformX |
| transformY |
| visible |
| width |
| x |
| y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><fill> |
| <filters> |
| <mask> |
| <stroke> |
| <transform></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><SolidColor></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:SolidColor></samp> |
| </p> |
| |
| <p>mx.graphics.SolidColor</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">alpha |
| color</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p>None.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><SolidColorStroke></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:SolidColorStroke></samp> |
| </p> |
| |
| <p>mx.graphics.SolidColorStroke</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">alpha |
| caps |
| color |
| joints |
| miterLimit |
| pixelHinting |
| scaleMode |
| weight</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p>None.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><RichText></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:RichText></samp> |
| </p> |
| |
| <p>spark.primitives.RichText</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p> |
| <samp class="codeph">alpha |
| blendMode |
| height |
| id |
| maskType |
| paddingLeft |
| paddingRight |
| paddingTop |
| paddingBottom |
| rotation |
| scaleX |
| scaleY |
| transformX |
| transformY |
| visible |
| width |
| x |
| y</samp> |
| </p> |
| |
| <p>Paragraph and character style attributes</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><br> |
| <content> |
| <p> |
| <span> |
| <transform></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e130 "> |
| <p> |
| <samp class="codeph"><Transform></samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e136 "> |
| <p> |
| <samp class="codeph"><s:Transform></samp> |
| </p> |
| |
| <p>mx.geom.Transform</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e142 "> |
| <p>None.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e148 "> |
| <p> |
| <samp class="codeph"><colorTransform> |
| <matrix></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| <p>For complete descriptions of the FXG elements and their supported |
| attributes, see the <a href="https://sourceforge.net/adobe/flexsdk/wiki/FXG%202.0%20Specification/" target="_blank">FXG 2.0 specification</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WSda78ed3a750d6b8f26c150d412357de3591-8000_verapache"><a name="WSda78ed3a750d6b8f26c150d412357de3591-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">FXG</h2> |
| |
| |
| <div> |
| <p>FXG is a declarative XML syntax for defining vector graphics |
| in applications built with Flex. FXG can also be used as an interchange |
| format with other Adobe tools. FXG closely follows the Flash Player |
| 10 rendering model.</p> |
| |
| <p>Designers can create vector images using tools such as Adobe<sup>®</sup> Photoshop<sup>®</sup>, Adobe<sup>®</sup> Illustrator<sup>®</sup> and |
| Adobe<sup>®</sup> Fireworks<sup>®</sup> and |
| export them as an FXG document. You can then use that FXG document |
| as a component in your applications.</p> |
| |
| <div class="p">The following example is an FXG document that draws a filled |
| rectangle:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/GraphicComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Rect id="rect1" width="200" height="200"> |
| <fill> |
| <SolidColor color="#FFFFCC"/> |
| </fill> |
| <stroke> |
| <SolidColorStroke color="#660099" weight="2"/> |
| </stroke> |
| </Rect> |
| </Graphic></pre> |
| |
| </div> |
| |
| <p>When using FXG documents as components, you specify the tag to |
| be the name of the FXG file, just as you would do with an ActionScript |
| or MXML component.</p> |
| |
| <div class="p">The following application uses the GraphicComp.fxg file as a |
| component:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/GraphicCompMain.mxml --> |
| <s:Application backgroundColor="0xFFFFFF" |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <comps:GraphicComp id="graphic1"/> |
| |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">FXG documents encapsulate nearly all of their functionality in |
| a single document. FXG documents cannot reference other FXG documents |
| or MXML documents. However, they can reference the following external |
| resources:<ul> |
| <li> |
| <p>External bitmap files. For an example that |
| embeds an external image, see <a href="flx_fxg_fx.html#WS8114D32C-2892-42ed-B230-59A94C7690E1_verapache">Bitmap |
| graphics</a>.</p> |
| |
| </li> |
| |
| <li> |
| <p>Platform fonts by family name and style name.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>Like MXML graphics, FXG tags have an implicit depth order. The |
| order in which elements are defined defines their depth. Each tag |
| is effectively drawn above its previous sibling. Children are drawn |
| on top of their parents.</p> |
| |
| <p>Adobe creative tools can be used to convert SVG to FXG. |
| To do this, open the SVG file in the tool and export it as an FXG |
| file.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f4c0a1c281225c08354e-8000_verapache"><a name="WSda78ed3a750d6b8f4c0a1c281225c08354e-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">FXG syntax</h3> |
| |
| |
| <div> |
| <p>The root of an FXG document file is a <samp class="codeph"><Graphic></samp> tag. |
| An FXG document can include zero or more containers (such as Group) |
| and graphic elements, as well as a single library that can include |
| any number of definitions. </p> |
| |
| <p>The <samp class="codeph"><Graphic></samp> tag can only appear once |
| in an FXG document. While the document cannot contain other <samp class="codeph"><Graphic></samp> elements, |
| it can contain other elements such as <samp class="codeph"><Rect></samp>, <samp class="codeph"><Ellipse></samp>, <samp class="codeph"><Path></samp>, |
| and <samp class="codeph"><BitmapImage></samp>. The <samp class="codeph"><Graphic></samp> tag |
| can also optionally contain a single child <samp class="codeph"><Library></samp> tag and/or |
| a single <samp class="codeph"><mask></samp> tag. These elements must |
| appear before any other tag. If both are present, then the <samp class="codeph"><Library></samp> tag |
| must come first. </p> |
| |
| <p>You cannot specify an ID for the root <samp class="codeph"><Graphic></samp> tag |
| in an FXG document. </p> |
| |
| <div class="p">FXG documents use the following language namespace:<pre class="codeblock">http://ns.adobe.com/fxg/2008</pre> |
| |
| </div> |
| |
| <div class="p">When you create an FXG document, you must also add the <samp class="codeph">version</samp> attribute |
| to the <samp class="codeph"><Graphic></samp> root tag. The currently |
| supported version is 2. For example:<pre class="codeblock">:Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> </pre> |
| |
| </div> |
| |
| <div class="p">To use an FXG document in an application, you treat is as any |
| other component. In your application, you define a namespace that |
| matches the location of the FXG document. This namespace definition |
| includes a prefix. For example:<pre class="codeblock"><s:Application |
| ... |
| xmlns:comps="comps.*"></pre> |
| |
| </div> |
| |
| <div class="p">You then use that prefix to reference the FXG document as a component; |
| for example:<pre class="codeblock"><comps:MyGraphicComp id="graphic1"/></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f-237979311225c0987ce-7fff_verapache"><a name="WSda78ed3a750d6b8f-237979311225c0987ce-7fff_verapache"><!-- --></a> |
| <h4 class="topictitle4">FXG data types</h4> |
| |
| |
| <div> |
| <div class="p">The following table describes the basic data types that |
| you can use in an FXG document: |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e1234"> |
| <p>Data Type</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e1240"> |
| <p>Description</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1234 "> |
| <p>angle</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1240 "> |
| <p>An arbitrary number specified as degrees. |
| Angles are clockwise.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1234 "> |
| <p>color</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1240 "> |
| <p>A numerical RGB specification in hexadecimal |
| notation. You specify a color by using a pound sign (#) immediately |
| followed by six hexadecimal characters. You cannot use the 0x notation |
| that is supported in MXML graphics.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1234 "> |
| <p>coordinate</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1240 "> |
| <p>Represents a length in the local coordinate |
| system that is the given distance from the origin of the local coordinate |
| system along the relevant axis (the x-axis for x coordinates, the |
| y-axis for y coordinates).</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1234 "> |
| <p>identifier</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1240 "> |
| <p>A text string that matches the regular expression |
| [A-Za-z][A-Za-z0-9_]*.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1234 "> |
| <p>integer</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1240 "> |
| <p>An optional sign character (+ or -) followed |
| by one or more digits 0 through 9. If the sign character is not |
| present, the number is non-negative. Unless stated otherwise for |
| a particular attribute or property, the range for an integer ranges from |
| -2147483648 to 2147483647.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1234 "> |
| <p>length</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1240 "> |
| <p>A distance measurement. The format of a |
| length is a number.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1234 "> |
| <p>number</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1240 "> |
| <p>Specified either in decimal notation, or |
| in scientific notation. Decimal notation consists of either an integer |
| or an optional sign character, followed by zero or more digits, |
| followed by a dot (.), followed by one or more digits. Scientific notation |
| consists of a decimal-number immediately followed by the letter |
| "e" or "E" immediately followed by an integer.</p> |
| |
| <p>Unless stated |
| otherwise for a particular attribute or property, a number has the |
| capacity for at least a single-precision floating point number and |
| has a range of -3.4e+38F to +3.4e+38F.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1234 "> |
| <p>percentage</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e1240 "> |
| <p>A number immediately followed by a percentage |
| sign (%). Percentage values are always relative to another value; |
| for example, a length. Attributes or properties that allow percentage |
| values also define the reference distance measurement to which the |
| percentage refers.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f-237979311225c0987ce-7ffe_verapache"><a name="WSda78ed3a750d6b8f-237979311225c0987ce-7ffe_verapache"><!-- --></a> |
| <h4 class="topictitle4">Tags not supported by FXG</h4> |
| |
| |
| <div> |
| <div class="p">While FXG is syntactically very similar to MXML, FXG does |
| not define equivalents for all the MXML language tags. It does, |
| however, include the <samp class="codeph"><Definition></samp>, <samp class="codeph"><Library></samp> and <samp class="codeph"><Private></samp> elements, |
| which are equivalent to the MXML language tags of the same names. |
| FXG does not define any other MXML language tags. The MXML language |
| tags not defined by FXG include the following tags:<ul> |
| <li> |
| <p> |
| <samp class="codeph"><fx:Binding></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Component></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Declaration></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Metadata></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Model></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Reparent></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Repeater></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Script></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:State></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:states></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Style></samp> |
| </p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>FXG syntax also does not include any ActionScript 3.0 built-in |
| primitive tags. The list of built-in tags that are not defined by |
| FXG includes the following:</p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph"><fx:Array></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Boolean></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Class></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Date></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Function></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:int></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Number></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:Object></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:String></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:uint></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:XML></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><fx:XMLList></samp> |
| </p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>FXG does not support data binding. If you try to use the data |
| binding short-hand syntax in an FXG document, the compiler treats |
| it as a literal String value.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS6A72DBB6-E49E-465f-BAA8-462440405918_verapache"><a name="WS6A72DBB6-E49E-465f-BAA8-462440405918_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using FXG in applications built |
| with Flex</h3> |
| |
| |
| <div> |
| <p>When you use an FXG document as a component in your application, |
| the compiler optimizes the document into a subclass of the spark.core.SpriteVisualElement |
| class. Specifically, the compiler maps the FXG elements to SWF graphics |
| primitive tags and links only a light-weight, Sprite-based class |
| into your application.</p> |
| |
| <p>The SpriteVisualElement class extends the Sprite class. It adds |
| support for sizing, positioning, and alpha when used in an application |
| built with Flex.</p> |
| |
| <p>To use FXG as a component in your applications:</p> |
| |
| <div class="p"> |
| <ol> |
| <li> |
| <p>Store the FXG document in a location where the compiler |
| can find it. This can be in the same directory as the application, |
| or in a separate location. If you store the FXG document in a separate |
| location, you must add the location to the compiler's source path.</p> |
| |
| </li> |
| |
| <li> |
| <p>Declare a namespace for the component. For example, if the |
| FXG file is in the same directory as the main application that uses |
| it, you can declare a namespace of "*". If the FXG file is in a |
| directory called comps, you can declare a namespace of "comps.*".</p> |
| |
| </li> |
| |
| <li> |
| <p>Add a tag in your application that declares the component |
| inside a Spark container. (You cannot use a MX container as a direct |
| parent of an FXG component.) You can set DisplayObject properties |
| on the tag, such as <samp class="codeph">x</samp> and <samp class="codeph">y</samp>, <samp class="codeph">alpha</samp>, <samp class="codeph">height</samp> and <samp class="codeph">width</samp>. |
| You can also add event handlers that are supported by the SpriteVisualElement |
| class on the tag.</p> |
| |
| </li> |
| |
| </ol> |
| |
| </div> |
| |
| <div class="p">The following example creates multiple instances of the star.fxg |
| component, and sets properties on each of those instances:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/OptimizedFXGExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="*" |
| width="500" height="300"> |
| |
| <s:Group> |
| <comps:star height="100" width="100" x="50" y="50"/> |
| <comps:star rotationX="20" height="70" width="70" x="150" y="50" alpha=".75"/> |
| <comps:star rotationX="40" height="50" width="50" x="220" y="50" alpha=".5"/> |
| <comps:star rotationX="60" height="30" width="30" x="270" y="50" alpha=".3"/> |
| <comps:star rotationX="80" height="10" width="10" x="300" y="50" alpha=".1"/> |
| </s:Group> |
| |
| </s:Application> </pre> |
| |
| </div> |
| |
| <div class="p">The following is the FXG component that is used by the previous |
| example:<pre class="noswf"><?xml version='1.0' encoding='UTF-8'?> |
| <!-- fxg/star.fxg --> |
| <fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2"> |
| <fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L 29.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z"> |
| |
| |
| <fxg:fill> |
| |
| |
| |
| <fxg:SolidColor color="#FFFFFF"/> |
| |
| |
| </fxg:fill> |
| |
| |
| <fxg:stroke> |
| |
| |
| |
| <fxg:SolidColorStroke |
| caps="none" |
| color="#4769C4" |
| joints="miter" |
| miterLimit="4" |
| weight="20"/> |
| |
| |
| </fxg:stroke> |
| |
| </fxg:Path> |
| </fxg:Graphic> </pre> |
| |
| </div> |
| |
| <p>FXG documents use only the *.fxg filename suffix. You cannot |
| have another file of the same name with an *.mxml or *.as suffix |
| in the same directory. </p> |
| |
| <div class="p">You can use ActionScript to instantiate an FXG component. When |
| you do this, you declare the FXG tag to be of type SpriteVisualElement. |
| You then add the component to the display list by calling the <samp class="codeph">addElement()</samp> method, |
| as the following example shows:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/OptimizedFXGActionScriptExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| width="500" height="300" |
| creationComplete="drawStar()"> |
| |
| <fx:Script> |
| <![CDATA[ |
| import spark.core.SpriteVisualElement; |
| |
| private var myStar:SpriteVisualElement; |
| |
| private function drawStar():void { |
| // Create new instances of star.fxg as if it were a local component. |
| for (var i:int = 0; i<4; i++) { |
| myStar = new star(); |
| |
| myStar.x = 50 + (i*75); |
| myStar.y = 50; |
| myStar.height = 100 - (i*30); |
| myStar.width = 100 - (i*30); |
| myStar.alpha = 1 - (i*.2); |
| myStar.rotationX = 20 + (i*20); |
| |
| addElement(myStar); |
| } |
| } |
| ]]> |
| </fx:Script> |
| </s:Application> </pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS98F97866-9F8A-4f39-8519-459F584CE9F6_verapache"><a name="WS98F97866-9F8A-4f39-8519-459F584CE9F6_verapache"><!-- --></a> |
| <h4 class="topictitle4">Generating FXG</h4> |
| |
| |
| <div> |
| <p>When you export a graphic file from a tool such as Adobe |
| Illustrator in the FXG format, the tool writes a *.fxg file with |
| a <samp class="codeph"><Graphic></samp> root tag.</p> |
| |
| <p>If you are given the option to select a version of FXG, select |
| version 2.</p> |
| |
| <p>You can ignore the information in the <samp class="codeph"><Private></samp> code |
| block, as long as you also leave the its namespace declaration. |
| The contents of the <samp class="codeph"><Private></samp> block must |
| be well-formed and valid XML but is not rendered.</p> |
| |
| <p>You can optionally remove the <samp class="codeph"><Private></samp> tag |
| and its contents from the FXG document. Some tools export FXG with |
| additional syntax so that the file can be re-edited. An FXG document |
| exported from Illustrator, for example, includes a <samp class="codeph"><Private></samp> block |
| of code that is used by Illustrator if you want to edit the file again. |
| If you do not expect to edit the file in Illustrator again, then |
| you can remove the <samp class="codeph"><Private></samp> block.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSDAD87261-09E9-4091-8169-F2758607F125_verapache"><a name="WSDAD87261-09E9-4091-8169-F2758607F125_verapache"><!-- --></a> |
| <h4 class="topictitle4">Converting FXG elements to MXML |
| graphics</h4> |
| |
| |
| <div> |
| <p>In general, you should use an FXG document as a standalone |
| component in your applications. This gives you the greatest amount |
| of memory optimization, and lets you reuse your FXG files in other |
| parts of the same application, or in other applications. In addition, |
| by keeping the FXG document separate from the application, you can |
| edit and export the FXG again from a graphics tool. </p> |
| |
| <p>One disadvantage to using an FXG file as a standalone component |
| is that you cannot get a reference to individual elements in it. |
| The FXG component itself is a "black box"; you cannot interact with |
| individual elements from your application or other components. You |
| can, however, still apply effects, resize, position, and trigger |
| events from interaction with the FXG component itself.</p> |
| |
| <p>In some cases, you might want to add the FXG output directly |
| into your application. You can do this, but you must convert the |
| FXG syntax to MXML graphics. </p> |
| |
| <p>After converting FXG elements to MXML graphics, you can get a |
| reference to the various graphic elements, just as you can with |
| any other MXML tags. This is useful if you want to apply special |
| effects or events to what were previously FXG elements. After you |
| convert the FXG file to MXML graphics, you cannot re-edit the FXG |
| file in a graphics tool. It is now part of MXML.</p> |
| |
| <div class="p">To convert an FXG document to MXML graphics:<ol> |
| <li> |
| <p>Start |
| by copying and pasting the FXG code into your MXML document.</p> |
| |
| </li> |
| |
| <li> |
| <div class="p">Update the namespaces:<ol type="a"> |
| <li> |
| <p>Change the FXG namespace |
| (http://ns.adobe.com/fxg/2008) to the Spark component namespace |
| (library://ns.adobe.com/flex/spark). There can be only one language |
| namespace per document.</p> |
| |
| </li> |
| |
| <li> |
| <div class="p">If the FXG fragment uses additional tool specific namespaces, |
| you can add these to the root of the MXML file. For example, FXG |
| exported from Adobe Illustrator typically includes the following |
| namespace declarations:<pre class="codeblock">xmlns:ai="http://ns.adobe.com/ai/2008" |
| xmlns:d="http://ns.adobe.com/fxg/2008/dt"</pre> |
| |
| </div> |
| |
| <p>These |
| namespaces do not impact the rendering of the document, but must be |
| retained to keep the XML document valid as tool-specific private |
| attributes will be prefixed in these namespaces.</p> |
| |
| </li> |
| |
| </ol> |
| |
| </div> |
| |
| </li> |
| |
| <li> |
| <p>Change or remove any namespace prefixes on the <samp class="codeph"><Library></samp>, <samp class="codeph"><Definition></samp>, |
| and <samp class="codeph"><Private></samp> elements. They must use the |
| MXML 2009 language namespace (http://ns.adobe.com/mxml/2009). If |
| you remove a namespace prefix on the tag, you can usually just add |
| the "fx:" prefix to each of these elements.</p> |
| |
| </li> |
| |
| <li> |
| <p>Move the <samp class="codeph"><Library></samp> tag and any <samp class="codeph"><Definition></samp> elements |
| it contains to the top of the MXML document. If there is already |
| a <samp class="codeph"><fx:Library></samp> tag in the MXML document, |
| move just the <samp class="codeph"><Definition></samp> elements into |
| it and remove the FXG <samp class="codeph"><Library></samp> tag. </p> |
| |
| </li> |
| |
| <li> |
| <p>For library definitions, add the "fx:" prefix to their tags |
| in the body of the MXML file. In MXML 2009 documents, library definitions |
| are actually in the language namespace. For example, the <samp class="codeph"><fx:Definition name="BlueCircle"></samp> tag |
| references to a definition that must also be in the "fx" namespace; |
| for example, <samp class="codeph"><fx:BlueCircle></samp>.</p> |
| |
| </li> |
| |
| <li> |
| <p>Move the <samp class="codeph"><Private></samp> tag to the end |
| of the MXML document or remove it. You do not need to include the <samp class="codeph"><Private></samp> tag |
| at all, but it can contain useful information about the tool that |
| generated the FXG.</p> |
| |
| </li> |
| |
| <li> |
| <p>Update the namespace prefix of the FXG elements. There is |
| likely to be an "s:" prefix already mapped to the Spark component |
| namespace on the MXML document's root tag (xmlns:s="library://ns.adobe.com/flex/spark"). |
| Add the "s:" prefix to all of the FXG graphical elements. For example, |
| change <samp class="codeph"><Graphic></samp> to <samp class="codeph"><s:Graphic></samp>.</p> |
| |
| </li> |
| |
| <li> |
| <p>For FXG 1.0 documents only:</p> |
| |
| <ol type="a"> |
| <li> |
| <p>Convert <samp class="codeph"><TextGraphic></samp> elements |
| to <samp class="codeph"><s:RichText></samp>. This does not apply to FXG |
| 2.0 documents, which use the <samp class="codeph"><RichText></samp> tag. |
| In that case, you just add the "s:" prefix to the <samp class="codeph"><RichText></samp> tag |
| to make it conform to MXML syntax.</p> |
| |
| </li> |
| |
| <li> |
| <p>Convert <samp class="codeph"><BitmapGraphic></samp> elements to <samp class="codeph"><s:BitmapImage></samp>. |
| This does not apply to FXG 2.0 documents, which use the <samp class="codeph"><BitmapImage></samp> tag. |
| In that case, you just add the "s:" prefix to the <samp class="codeph"><BitmapImage></samp> tag |
| to make it conform to MXML syntax.</p> |
| |
| </li> |
| |
| </ol> |
| |
| </li> |
| |
| </ol> |
| |
| </div> |
| |
| <div class="p">The following file, exported in FXG format from Adobe Illustrator, |
| includes the private information as well as the <samp class="codeph"><Graphic></samp> root |
| tag. The contents of this *.fxg file are being shown so that you |
| can then see in a subsequent example how the contents are converted |
| to MXML graphics.<pre class="codeblock"><?xml version="1.0" encoding="utf-8" ?> |
| <!-- assets/skins/SimpleBox.fxg --> |
| <Graphic version="1.0" |
| viewHeight="30" |
| viewWidth="100" |
| ai:appVersion="14.0.0.367" |
| d:id="1" |
| xmlns="http://ns.adobe.com/fxg/2008" |
| xmlns:ai="http://ns.adobe.com/ai/2008" |
| xmlns:d="http://ns.adobe.com/fxg/2008/dt"> |
| <Library/> |
| <Group |
| x="-0.296875" |
| y="-0.5" d:id="2" |
| d:type="layer" |
| d:userLabel="Layer 1"> |
| <Group d:id="3"> |
| <Rect x="0.5" y="0.5" width="100" height="30" ai:knockout="0"> |
| <fill> |
| <LinearGradient x="0.5" y="15.5" scaleX="100" rotation="-0"> |
| <GradientEntry color="#ffffff" ratio="0"/> |
| <GradientEntry ratio="1"/> |
| </LinearGradient> |
| </fill> |
| <stroke> |
| <SolidColorStroke |
| color="#0000ff" |
| caps="none" |
| weight="1" |
| joints="miter" |
| miterLimit="4"/> |
| </stroke> |
| </Rect> |
| </Group> |
| </Group> |
| <Private> |
| <ai:PrivateElement d:ref="#1"> |
| <ai:SaveOptions> |
| <ai:Dictionary> |
| <ai:DictEntry name="preserveGradientPolicy" value="3" valueType="Integer"/> |
| <ai:DictEntry name="rasterizeResolution" value="72" valueType="Integer"/> |
| <ai:DictEntry name="clipToActiveArtboard" value="1" valueType="Boolean"/> |
| <ai:DictEntry name="downsampleLinkedImages" value="0" valueType="Boolean"/> |
| <ai:DictEntry name="preserveFilterPolicy" value="3" valueType="Integer"/> |
| <ai:DictEntry name="preserveTextPolicy" value="3" valueType="Integer"/> |
| <ai:DictEntry name="writeImages" value="1" valueType="Boolean"/> |
| <ai:DictEntry name="includeXMP" value="0" valueType="Boolean"/> |
| <ai:DictEntry name="aiEditCap" value="1" valueType="Boolean"/> |
| <ai:DictEntry name="versionKey" value="1" valueType="Integer"/> |
| <ai:DictEntry name="includeSymbol" value="0" valueType="Boolean"/> |
| </ai:Dictionary> |
| </ai:SaveOptions> |
| <ai:DocData base="SimpleBox.assets/images"/> |
| <ai:Artboards |
| originOffsetH="0" |
| originOffsetV="30" |
| rulerCanvasDiffH="50.5" |
| rulerCanvasDiffV="-14.5" |
| zoom="17.17"> |
| <ai:Artboard active="1" index="0" right="100" top="30"/> |
| <ai:ArtboardsParam all="0" range="" type="0"/> |
| </ai:Artboards> |
| </ai:PrivateElement> |
| <ai:PrivateElement d:ref="#2"> |
| <ai:LayerOptions colorType="ThreeColor"> |
| <ai:ThreeColor blue="257" green="128.502" red="79.31"/> |
| </ai:LayerOptions> |
| </ai:PrivateElement> |
| <ai:PrivateElement |
| ai:hashcode="769d7bac08ad6bdcf80f40fca11df6c0" |
| d:ref="#3"> |
| <ai:Rect height="30" knockout="0" width="100" x="0.5" y="0.5"> |
| <ai:Stroke colorType="ThreeColor" miterLimit="4" weight="1"> |
| <ai:ThreeColor blue="1"/> |
| </ai:Stroke> |
| <ai:Fill colorType="Gradient"> |
| <ai:Gradient |
| gradientType="linear" |
| length="100" originX="0.5" |
| originY="15.5"> |
| <ai:GradientStops> |
| <ai:GradientStop colorType="GrayColor" rampPoint="0"> |
| <ai:GrayColor/> |
| </ai:GradientStop> |
| <ai:GradientStop colorType="GrayColor" rampPoint="100"> |
| <ai:GrayColor gray="1"/> |
| </ai:GradientStop> |
| </ai:GradientStops> |
| </ai:Gradient> |
| </ai:Fill> |
| <ai:ArtStyle/> |
| </ai:Rect> |
| </ai:PrivateElement> |
| </Private> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">To convert this example to MXML graphics:<ul> |
| <li> |
| <p>Remove the <samp class="codeph"><Library/></samp> tag. |
| This example does not contain any <samp class="codeph"><Definition></samp> elements.</p> |
| |
| </li> |
| |
| <li> |
| <p>Remove the <samp class="codeph"><Private></samp> block.</p> |
| |
| </li> |
| |
| <li> |
| <p>Move the two Illustrator-specific namespaces to the application's |
| root tag:</p> |
| |
| <pre class="codeblock">xmlns:ai="http://ns.adobe.com/ai/2008" |
| xmlns:d="http://ns.adobe.com/fxg/2008/dt"</pre> |
| |
| </li> |
| |
| <li> |
| <p>Remove the FXG-specific namespace:</p> |
| |
| <pre class="codeblock">"http://ns.adobe.com/fxg/2008"</pre> |
| |
| </li> |
| |
| <li> |
| <p>Add the "s:" prefix to all elements.</p> |
| |
| </li> |
| |
| <li> |
| <p>Because the "d" and "ai" namespace definitions are intact, |
| you do not have to remove the attributes specific to these namespaces. |
| The attributes <samp class="codeph">type</samp> and <samp class="codeph">userLabel</samp>, |
| for example, appear on the <samp class="codeph"><Group></samp> tag from |
| the original FXG file. To further simplify this example, though, |
| you could remove them because Flex ignores anything in those namespaces. </p> |
| |
| <p>For |
| example, this:</p> |
| |
| <pre class="codeblock"><s:Group x="-0.296875" y="-0.5" d:id="2" d:type="layer" d:userLabel="Layer 1"></pre> |
| |
| <div class="p">Becomes |
| this:<pre class="codeblock"><s:Group x="-0.296875" y="-0.5"></pre> |
| |
| </div> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <div class="p">The following example application contains the converted FXG |
| from the previous example:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/ResultsMXMLGraphicsApp.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:ai="http://ns.adobe.com/ai/2008" |
| xmlns:d="http://ns.adobe.com/fxg/2008/dt"> |
| |
| <s:Graphic version="1.0" |
| viewHeight="30" |
| viewWidth="100" |
| ai:appVersion="14.0.0.367" |
| d:id="1"> |
| <s:Group x="-0.296875" y="-0.5" d:id="2" d:type="layer" d:userLabel="Layer 1"> |
| <s:Group d:id="3"> |
| <s:Rect x="0.5" y="0.5" width="100" height="30" ai:knockout="0"> |
| <s:fill> |
| <s:LinearGradient x="0.5" y="15.5" scaleX="100" rotation="-0"> |
| <s:GradientEntry color="#ffffff" ratio="0"/> |
| <s:GradientEntry ratio="1"/> |
| </s:LinearGradient> |
| </s:fill> |
| <s:stroke> |
| <s:SolidColorStroke |
| color="#0000ff" |
| caps="none" |
| weight="1" |
| joints="miter" |
| miterLimit="4"/> |
| </s:stroke> |
| </s:Rect> |
| </s:Group> |
| </s:Group> |
| </s:Graphic> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f590b1ed3123769ce990-8000_verapache"><a name="WSda78ed3a750d6b8f590b1ed3123769ce990-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Coordinate systems</h3> |
| |
| |
| <div> |
| <p>FXG defines two coordinate system concepts: the document |
| coordinate system, and the user coordinate system.</p> |
| |
| <p>The <em>document coordinate system</em> refers to the coordinate |
| system of the root tag. By default, its origin sits at the top left |
| of the document, and extends downward along the positive y axis, |
| and to the right along the positive x axis. 1 unit corresponds to |
| 1 pixel on the screen.</p> |
| |
| <p>The <em>user coordinate system</em> refers to the coordinate system |
| defined on any individual tag in the document. In FXG, the user |
| coordinate system at the root <samp class="codeph"><Graphic></samp> tag |
| is identical to the document coordinate system. </p> |
| |
| <p>By default, each grouping instance element and graphic element |
| defines its user coordinate system to be identical to that of its |
| parent. Any geometry transform defined on the tag (through attributes |
| or child transform elements) transforms its parent's user coordinate |
| system into a new system.</p> |
| |
| <p>All attributes of elements are defined in units of the current |
| user coordinate system. As a result, the coordinates of the segments |
| of a path are relative to its coordinate system. To determine the |
| position of the path segments in document coordinates, you would |
| multiply its x and y by the geometry transform of the path and each |
| of its parent elements until you reached the root graphic tag.</p> |
| |
| <p>Some fills and strokes have their own user coordinate system. |
| As with Groups, the default coordinate system is aligned with the |
| coordinate system of their most immediate parent instance. As appropriate, |
| fills and strokes support geometry transforms that can modify their |
| coordinate space.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f-7394ba8c12546433d04-8000_verapache"><a name="WSda78ed3a750d6b8f-7394ba8c12546433d04-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Sizing FXG components</h3> |
| |
| |
| <div> |
| <p>FXG elements use their <samp class="codeph">height</samp> and <samp class="codeph">width</samp> properties |
| to determine the size of the graphic. The graphic tag scales to |
| the values of the <samp class="codeph">height</samp> and <samp class="codeph">width</samp> properties. |
| The <samp class="codeph">viewWidth</samp> and <samp class="codeph">viewHeight</samp> properties |
| define the space that the graphic takes up. When you set these values, |
| the content is not scaled. </p> |
| |
| <p>If you specify a <samp class="codeph">viewWidth</samp> and <samp class="codeph">viewHeight</samp> that |
| is larger than the natural size of the content, the graphic takes |
| up more space than its visual size. The result is a boundary around |
| the graphic.</p> |
| |
| <p>You can also specify a <samp class="codeph">viewWidth</samp> and <samp class="codeph">viewHeight</samp> that |
| is smaller than the natural size of the content. You might do this |
| if your graphic has chrome such as a border that extends past the |
| edges of the graphic. In this case, be sure to turn off clipping |
| in your layout.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS19f279b149e7481c1ce62b4a12b7ceade98-8000_verapache"><a name="WS19f279b149e7481c1ce62b4a12b7ceade98-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Optimizing FXG</h3> |
| |
| |
| <div> |
| <p>Use the techniques described in this section when working |
| with FXG.</p> |
| |
| </div> |
| |
| <div class="nested3" id="WS19f279b149e7481c19e0d29912b7d17c948-8000_verapache"><a name="WS19f279b149e7481c19e0d29912b7d17c948-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">Composite path versus rounded rectangle</h4> |
| |
| |
| <div> |
| <p>Composite paths create a cleaner look because there are |
| no extra pixels inside the corners. Rounded rectangles, on the other |
| hand, have extra pixels due to anti-aliasing. Rounded rectangles |
| convert to a <samp class="codeph"><Rect></samp> element in FXG, which |
| is preferable because a <samp class="codeph"><Rect></samp> element is |
| easier to manipulate than a compex path.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS19f279b149e7481c19e0d29912b7d17c948-7fff_verapache"><a name="WS19f279b149e7481c19e0d29912b7d17c948-7fff_verapache"><!-- --></a> |
| <h4 class="topictitle4">Move alpha values from the element |
| to the fill or stroke</h4> |
| |
| |
| <div> |
| <p>When exporting FXG files from a graphics editor, the <samp class="codeph">alpha</samp> property |
| is sometimes placed on the graphic element tag. If you convert the |
| FXG to MXML, this element uses its own DisplayObject, which can |
| be computationally expensive. To avoid this, move any <samp class="codeph">alpha</samp> properties |
| from the element tag down to the stroke or fill. If both the stroke/fill |
| and the element have <samp class="codeph">alpha</samp> values, multiply the |
| stroke and fill <samp class="codeph">alpha</samp> values by the element's <samp class="codeph">alpha</samp> value. |
| For example, if the stroke and element <samp class="codeph">alpha</samp> values |
| are both .5, then remove the element's <samp class="codeph">alpha</samp> property |
| and set the stroke's <samp class="codeph">alpha</samp> to .25 (.5 x .5).</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS19f279b149e7481c19e0d29912b7d17c948-7ffe_verapache"><a name="WS19f279b149e7481c19e0d29912b7d17c948-7ffe_verapache"><!-- --></a> |
| <h4 class="topictitle4">Round alpha values to 2 decimal |
| places</h4> |
| |
| |
| <div> |
| <p>Exported FXG files sometimes use percentage values for <samp class="codeph">alpha</samp> values. |
| The visual difference between an <samp class="codeph">alpha</samp> value with |
| two decimal places and a rounded <samp class="codeph">alpha</samp> value is |
| negligible. To make your code more readable, round off <samp class="codeph">alpha</samp> values |
| to 2 decimal places. For example, round an <samp class="codeph">alpha</samp> value |
| of 0.05882352941176471 to 0.06.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS19f279b149e7481c19e0d29912b7d17c948-7ffd_verapache"><a name="WS19f279b149e7481c19e0d29912b7d17c948-7ffd_verapache"><!-- --></a> |
| <h4 class="topictitle4">Remove blendMode="normal"</h4> |
| |
| |
| <div> |
| <p>By default on graphic elements, the <samp class="codeph">blendMode</samp> is |
| "auto". When the <samp class="codeph">blendMode</samp> property is "auto", |
| Flash Player correctly determines whether the element needs to use |
| the "layer" <samp class="codeph">blendMode</samp> based on the <samp class="codeph">alpha</samp> value.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS19f279b149e7481c19e0d29912b7d17c948-7ffc_verapache"><a name="WS19f279b149e7481c19e0d29912b7d17c948-7ffc_verapache"><!-- --></a> |
| <h4 class="topictitle4">Identifying elements of an FXG |
| file</h4> |
| |
| |
| <div> |
| <p>Sometimes it can be hard to look at FXG tags and determine |
| what that element looks like. An easy way to do this is to copy |
| your FXG into a <samp class="codeph"><s:Group></samp> tag in an MXML |
| application. Then, change the x values of each element so that they |
| no longer overlap. For example, if your skin is 45 pixels wide and |
| is comprised of three <samp class="codeph"><Rect></samp> elements, increase |
| the <samp class="codeph">x</samp> value of the second <samp class="codeph"><Rect></samp> by |
| 50 and the third <samp class="codeph"><Rect></samp> by 100. When you |
| compile and run the application, you can see each layer spread separately. </p> |
| |
| <p>An alternative is to toggle the <samp class="codeph">visible</samp> property |
| of different elements so that you can isolate a particular element.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS19f279b149e7481c19e0d29912b7d17c948-7ffb_verapache"><a name="WS19f279b149e7481c19e0d29912b7d17c948-7ffb_verapache"><!-- --></a> |
| <h4 class="topictitle4">Placing shapes with odd stroke |
| weights (mobile applications only)</h4> |
| |
| |
| <div> |
| <p>For a given shape, strokes straddle the shape edges as |
| opposed to being on the inside or outside of an edge. For example, |
| take a vertical line starting from 0,0 to 0,100 with a 1-pixel wide |
| stroke. That stroke stretches in the x-axis from -.5 to .5. However, |
| because you cannot draw an element at a fractional pixel, Flash |
| Player draws an anti-aliased line 2 pixels wide to approximate the |
| fractional position. </p> |
| |
| <p>This is true only on mobile applications. For desktop applications, |
| Flash Player pixel-snaps stroke segments.</p> |
| |
| <p>To counteract this anti-aliasing, place your shapes with odd |
| numbered stroke weights on a half pixel boundary. For example, place |
| a <samp class="codeph"><Rect></samp> with a <samp class="codeph"><SolidColorStroke></samp> of |
| weight 1 at 10,10 at 10.5,10.5 instead. </p> |
| |
| <p>An alternative is to leave all of your stroked shapes at integer |
| pixels and shift the entire FXG component by .5 in the x and y positions. |
| If possible, use filled <samp class="codeph"><Rect></samp> elements in |
| place of stroked <samp class="codeph"><Rect></samp> or <samp class="codeph"><Line></samp> elements. |
| If you have a <samp class="codeph"><Rect></samp> element with a fill |
| and a stroke, try to split it into two filled <samp class="codeph"><Rect></samp> elements |
| This technique works only if the fill is completely opaque. If you |
| have a <samp class="codeph"><Line></samp> element, try using a filled <samp class="codeph"><Rect></samp> element |
| instead. For example, if you have a horizontal <samp class="codeph"><Line></samp> element, |
| create a filled <samp class="codeph"><Rect></samp> element with a height equal |
| to the <samp class="codeph"><Line></samp> element's stroke weight.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS19f279b149e7481c888599e12bb0678285-8000_verapache"><a name="WS19f279b149e7481c888599e12bb0678285-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">Reduce anti-aliasing due to stage |
| quality</h4> |
| |
| |
| <div> |
| <p>Mobile applications built in Flex are currently limited |
| to using <samp class="codeph">StageQuality.MEDIUM</samp>. When designing skins |
| using FXG and/or programmatic graphics, watch for anti-aliasing |
| artifacts in rounded corners. The mobile skins mitigate this issue |
| by using FXG Path data with fills instead strokes to draw curves.</p> |
| |
| <div class="p">To create the appearance of a rounded rectangle at a 1px stroke |
| in Fireworks:<ol> |
| <li> |
| <p>Draw a filled rounded rectangle.</p> |
| |
| </li> |
| |
| <li> |
| <p>Copy the rectangle, position it 1px down and to the left |
| of the original rectangle and reduce its width and height by 2px.</p> |
| |
| </li> |
| |
| <li> |
| <p>Select both rectangles, right click and choose Combine Path |
| > Punch.</p> |
| |
| </li> |
| |
| </ol> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS19f279b149e7481c19e0d29912b7d17c948-7ffa_verapache"><a name="WS19f279b149e7481c19e0d29912b7d17c948-7ffa_verapache"><!-- --></a> |
| <h4 class="topictitle4">Use 45 degree angles</h4> |
| |
| |
| <div> |
| <p>Try to keep all angles at 45 degrees. This helps to reduce |
| the visual artifacts from anti-aliasing.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WSda78ed3a750d6b8fee1b36612357de97a3-8000_verapache"><a name="WSda78ed3a750d6b8fee1b36612357de97a3-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">MXML graphics</h2> |
| |
| |
| <div> |
| <p>MXML graphics are a collection of classes that define graphic |
| elements in an application. MXML graphics tags support interactivity. |
| They can be children of any container or group, can be declared |
| as children of the root Application tag, and can be added to the |
| application's display list.</p> |
| |
| <p>Most MXML graphics classes are in the mx.graphics and spark.primitives packages. |
| These classes include shapes, strokes, colors, fills, and gradients. </p> |
| |
| <p>MXML graphics tags have an implicit depth order. The order in |
| which elements are defined defines their depth. Each tag is effectively |
| drawn above its previous sibling. Children are drawn above their |
| parents.</p> |
| |
| <div class="p">The following example uses MXML graphics to draw a filled rectangle:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/GraphicCompMainMXML.mxml --> |
| <s:Application backgroundColor="0xFFFFFF" |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| <s:Graphic> |
| <s:Rect id="rect1" width="200" height="200"> |
| <s:fill> |
| <s:SolidColor color="0xFFFFCC"/> |
| </s:fill> |
| <s:stroke> |
| <s:SolidColorStroke color="0x660099" weight="2"/> |
| </s:stroke> |
| </s:Rect> |
| </s:Graphic> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">Because the classes that make up MXML graphics are part of the |
| Flex SDK, you can reference them from within ActionScript or from |
| other components. The following example changes the rectangle's |
| color when you click the button:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/ReferenceGraphics.mxml --> |
| <s:Application backgroundColor="0xFFFFFF" |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Graphic> |
| <s:Rect id="rect1" width="200" height="200"> |
| <s:fill> |
| <s:SolidColor id="sc1" color="0xFFFFCC"/> |
| </s:fill> |
| <s:stroke> |
| <s:SolidColorStroke color="0x660099" weight="2"/> |
| </s:stroke> |
| </s:Rect> |
| </s:Graphic> |
| |
| <s:Button label="Change Color" click="sc1.color=0xCCFFFF"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>All MXML graphics classes have backing ActionScript implementations. |
| This means that every MXML tag has a corresponding ActionScript |
| class that the compiler maps the tag to during compilation. The |
| table in <a href="flx_fxg_fx.html#WSda78ed3a750d6b8f-237979311225c0987ce-8000_verapache">Graphics |
| classes and elements</a> lists the tags and their backing ActionScript |
| classes. You can use the classes in ActionScript directly in your <samp class="codeph"><fx:Script></samp> blocks |
| to draw vector based graphics instead of the MXML tags. y</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS5B6A8436-0FF5-4029-8524-C7C1106C483D_verapache"><a name="WS5B6A8436-0FF5-4029-8524-C7C1106C483D_verapache"><!-- --></a> |
| <h2 class="topictitle2">Paths in FXG and MXML graphics</h2> |
| |
| |
| <div> |
| <p>Paths define a filled graphic tag that draws a series of |
| path segments. In vector graphics, a path is a series of points |
| connected by straight or curved line segments. Together the lines |
| form an image. </p> |
| |
| <p>In FXG, you use a <samp class="codeph"><Path></samp> tag to define |
| a vector shape constructed from a set of line segments. The MXML |
| graphics equivalent of the FXG <samp class="codeph"><Path></samp> tag |
| is the <a href="https://flex.apache.org/asdoc/spark/primitives/Path.html" target="_blank">Path</a> class. |
| In MXML, you use the <samp class="codeph"><s:Path></samp> tag.</p> |
| |
| <p>There are several different types of path segments you can use: |
| line, cubic bezier, and quadratic bezier. Typically, the first tag |
| of a path definition moves the pen to the starting position of the |
| graphic. You then use the segments to draw the lines of the graphic. </p> |
| |
| <p>To define a series of segments in a path, you use the path's <samp class="codeph">data</samp> property. |
| You pass this property a series of instructions using shorthand |
| syntax. Each value is preceded by a letter that acts as a segment |
| identifier. The segment identifier indicates which type of segment |
| to draw with the numeric values that follow it.</p> |
| |
| <div class="p">The following table describes the shorthand syntax used by the |
| Path tag's <samp class="codeph">data</samp> property: |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e2557"> |
| <p>Segment Type</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e2563"> |
| <p>Segment Identifier</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e2569"> |
| <p>Parameters</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e2575"> |
| <p>Example</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2557 "> |
| <p>Close path</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2563 "> |
| <p> |
| <samp class="codeph">Z/z</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2569 "> |
| <p>n/a</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2575 "> |
| <p> |
| <samp class="codeph">Z</samp> |
| </p> |
| |
| <p>Closes off the |
| path.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2557 "> |
| <p>Cubic Bezier</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2563 "> |
| <p> |
| <samp class="codeph">C/c</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2569 "> |
| <p> |
| <samp class="codeph">c1X c1Y c2X c2Y x y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2575 "> |
| <p> |
| <samp class="codeph">C 45 50 20 30 10 20</samp> |
| </p> |
| |
| <p>Curve |
| to (10, 20), with the first control point at (45, 50) and the second |
| control point at (20, 30).</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2557 "> |
| <p>Cubic Bezier (without control points)</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2563 "> |
| <p> |
| <samp class="codeph">S/s</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2569 "> |
| <p> |
| <samp class="codeph">c2X c2Y x y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2575 "> |
| <p>S 20 30 10 20</p> |
| |
| <p>Curve to (10, 20), with |
| the second control point at (20, 30). The first control point is assumed |
| to be the reflection of the second control point on the previous |
| command relative to the current point.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2557 "> |
| <p>Horizontal line</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2563 "> |
| <p> |
| <samp class="codeph">H/h</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2569 "> |
| <p> |
| <samp class="codeph">x</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2575 "> |
| <p> |
| <samp class="codeph">H 100</samp> |
| </p> |
| |
| <p>Horizontal |
| line to 100.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2557 "> |
| <p>Line</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2563 "> |
| <p> |
| <samp class="codeph">L/l</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2569 "> |
| <p> |
| <samp class="codeph">x y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2575 "> |
| <p> |
| <samp class="codeph">L 50 30</samp> |
| </p> |
| |
| <p>Line to (50, |
| 30).</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2557 "> |
| <p>Move</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2563 "> |
| <p> |
| <samp class="codeph">M/m</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2569 "> |
| <p> |
| <samp class="codeph">x y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2575 "> |
| <p> |
| <samp class="codeph">M 10 20</samp> |
| </p> |
| |
| <p>Move pen |
| position to (10, 20).</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2557 "> |
| <p>Quadratic Bezier</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2563 "> |
| <p> |
| <samp class="codeph">Q/q</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2569 "> |
| <p> |
| <samp class="codeph">cX cY x y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2575 "> |
| <p> |
| <samp class="codeph">Q 110 45 90 30</samp> |
| </p> |
| |
| <p>Curve |
| to (90, 30) with the control point at (110, 45).</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2557 "> |
| <p>Quadratic Bezier (without control points)</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2563 "> |
| <p>T/t</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2569 "> |
| <p>x y</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2575 "> |
| <p>T 90 30</p> |
| |
| <p>Curve to (90, 30). The control |
| point is the reflection of the control point on the previous command |
| relative to the current point.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2557 "> |
| <p>Vertical line</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2563 "> |
| <p> |
| <samp class="codeph">V/v</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2569 "> |
| <p> |
| <samp class="codeph">y</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e2575 "> |
| <p> |
| <samp class="codeph">V 100</samp> |
| </p> |
| |
| <p>Vertical line |
| to 100.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| <p>You can use an uppercase or lowercase letter for the segment |
| identifiers. If you specify a segment identifier using the uppercase |
| letter, then the positioning is absolute. If you specify a segment |
| identifier using the lowercase letter, then the positioning is relative.</p> |
| |
| <p>When using segments, you do not need to specify the starting |
| position of the pen; the x and y coordinate of the starting point |
| is defined by the current pen position.</p> |
| |
| <p>After drawing a line segment, the current pen position becomes |
| the x and y coordinates of the end point of the line. You can use |
| the Move segment type to reposition the pen without drawing a line.</p> |
| |
| <p>The Path syntax is nearly identical to the SVG path syntax. This |
| makes it easy to convert SVG paths to FXG or MXML graphics. There |
| is one exception: FXG and MXML graphics do not support an "A" or |
| Arc segment. To create an arc (elliptical, parabolic, or otherwise), |
| use the the cubic Bezier and quadratic Bezier control points to |
| achieve any sort of arc.</p> |
| |
| <p>Paths can contain effects such as transforms, filters, blend |
| modes, and masks.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f-62cef9891254c0f1978-8000_verapache"><a name="WSda78ed3a750d6b8f-62cef9891254c0f1978-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">FXG examples</h3> |
| |
| |
| <div> |
| <div class="p">The following example uses the <samp class="codeph"><Path></samp> tag |
| to draw a rectangle in FXG:<pre class="codeblock">Ôªø<?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SimplePathShorthandExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <s:Panel title="Rectangle Example" height="75%" width="75%"> |
| <comps:SimplePathComp x="10" y="10"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following is the FXG component that is used by the previous |
| example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/SimplePathComp.fxg --> |
| <fx:Graphic xmlns:fx="http://ns.adobe.com/fxg/2008" version="2"> |
| <!-- Use shorthand syntax to draw the rectangle. --> |
| <fx:Path data="M 0 0 L 0 100 L 100 100 L 100 0 L 0 0"> |
| <!-- Define the border color of the rectangle. --> |
| <fx:stroke> |
| <fx:SolidColorStroke color="#888888"/> |
| </fx:stroke> |
| </fx:Path> |
| </fx:Graphic></pre> |
| |
| </div> |
| |
| <div class="p">The following example draws two arrows in FXG, one in relative |
| coordinates and one in absolute coordinates.<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/ArrowExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Arrow Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:HGroup> |
| <!-- Use the ArrowAbsolute FXG component which uses absolute coordinates. --> |
| <comps:ArrowAbsolute/> |
| |
| <!-- Use the ArrowRelative FXG component which uses relative coordinates. --> |
| <comps:ArrowRelative/> |
| </s:HGroup> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines an arrow graphic as an FXG graphic |
| using absolute coordinates:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/ArrowAbsolute.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <!-- Use Use compact syntax with absolute coordinates. --> |
| <Path data=" |
| M 20 0 |
| C 50 0 50 35 20 35 |
| L 15 35 |
| L 15 45 |
| L 0 32 |
| L 15 19 |
| L 15 29 |
| L 20 29 |
| C 44 29 44 6 20 6"> |
| <!-- Define the border color of the arrow. --> |
| <stroke> |
| <SolidColorStroke color="#888888"/> |
| </stroke> |
| <!-- Define the fill for the arrow. --> |
| <fill> |
| <LinearGradient rotation="90"> |
| <GradientEntry color="#000000" alpha="0.8"/> |
| <GradientEntry color="#FFFFFF" alpha="0.8"/> |
| </LinearGradient> |
| </fill> |
| </Path> |
| </Graphic> </pre> |
| |
| </div> |
| |
| <div class="p">The following file defines an arrow graphic as an FXG graphic |
| using relative coordinates:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/ArrowRelative.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <!-- Use compact syntax with relative coordinates. --> |
| <Path data=" |
| m 20 0 |
| c 30 0 30 35 0 35 |
| l -5 0 |
| l 0 10 |
| l -15 -13 |
| l 15 -13 |
| l 0 10 |
| l 5 0 |
| c 24 0 24 -23 0 -23"> |
| <!-- Define the border color of the arrow. --> |
| <stroke> |
| <SolidColorStroke color="#888888"/> |
| </stroke> |
| <!-- Define the fill for the arrow. --> |
| <fill> |
| <LinearGradient rotation="90"> |
| <GradientEntry color="#000000" alpha="0.8"/> |
| <GradientEntry color="#FFFFFF" alpha="0.8"/> |
| </LinearGradient> |
| </fill> |
| </Path> |
| </Graphic> </pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f-62cef9891254c0f1978-7fff_verapache"><a name="WSda78ed3a750d6b8f-62cef9891254c0f1978-7fff_verapache"><!-- --></a> |
| <h3 class="topictitle3">MXML graphics examples</h3> |
| |
| |
| <div> |
| <div class="p">The following MXML graphics example uses the <samp class="codeph"><s:Path></samp> tag |
| to draw a rectangle:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SimplePathShorthandExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Panel title="Rectangle MXML Graphics Example" height="75%" width="75%"> |
| <s:Path x="10" y="10" data="M 0 0 L 0 100 L 100 100 L 100 0 L 0 0"> |
| <!-- Define the border color of the rectangle. --> |
| <s:stroke> |
| <s:SolidColorStroke color="0x888888"/> |
| </s:stroke> |
| </s:Path> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following MXML graphics example defines two arrows, one with |
| relative and the other with absolute positioning:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/ArrowExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Arrow MXML Graphics Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:HGroup> |
| <!-- Use absolute coordinates. --> |
| <s:Graphic> |
| <!-- Use Use compact syntax with absolute coordinates. --> |
| <s:Path data=" |
| M 20 0 |
| C 50 0 50 35 20 35 |
| L 15 35 |
| L 15 45 |
| L 0 32 |
| L 15 19 |
| L 15 29 |
| L 20 29 |
| C 44 29 44 6 20 6"> |
| <!-- Define the border color of the arrow. --> |
| <s:stroke> |
| <s:SolidColorStroke color="0x888888"/> |
| </s:stroke> |
| <!-- Define the fill for the arrow. --> |
| <s:fill> |
| <s:LinearGradient rotation="90"> |
| <s:GradientEntry color="0x000000" alpha="0.8"/> |
| <s:GradientEntry color="0xFFFFFF" alpha="0.8"/> |
| </s:LinearGradient> |
| </s:fill> |
| </s:Path> |
| </s:Graphic> |
| |
| <!-- Use relative coordinates. --> |
| <s:Graphic> |
| <!-- Use compact syntax with relative coordinates. --> |
| <s:Path data=" |
| m 20 0 |
| c 30 0 30 35 0 35 |
| l -5 0 |
| l 0 10 |
| l -15 -13 |
| l 15 -13 |
| l 0 10 |
| l 5 0 |
| c 24 0 24 -23 0 -23"> |
| <!-- Define the border color of the arrow. --> |
| <s:stroke> |
| <s:SolidColorStroke color="0x888888"/> |
| </s:stroke> |
| <!-- Define the fill for the arrow. --> |
| <s:fill> |
| <s:LinearGradient rotation="90"> |
| <s:GradientEntry color="0x000000" alpha="0.8"/> |
| <s:GradientEntry color="0xFFFFFF" alpha="0.8"/> |
| </s:LinearGradient> |
| </s:fill> |
| </s:Path> |
| </s:Graphic> |
| </s:HGroup> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WSFAFF6E30-F3D8-4e2b-B69D-C258C5F1FB43_verapache"><a name="WSFAFF6E30-F3D8-4e2b-B69D-C258C5F1FB43_verapache"><!-- --></a> |
| <h2 class="topictitle2">Libraries and symbols in FXG and |
| MXML graphics</h2> |
| |
| |
| <div> |
| <p>A symbol is a named grouping tag that can be made up of |
| other symbols and graphic elements. You can define a symbol once |
| and reuse it any number of times in an FXG document by using the<samp class="codeph"> <Library></samp> and <samp class="codeph"><Definition></samp> elements. In |
| MXML graphics, you use the MXML file's <samp class="codeph"><fx:Library></samp> and <samp class="codeph"><fx:Definition></samp> tags. </p> |
| |
| <p>In FXG, the <samp class="codeph"><Library></samp> tag contains <samp class="codeph"><Definition></samp> elements. |
| The <samp class="codeph"><Library></samp> tag can only be placed as a |
| child of the root tag of an FXG document, just as the <samp class="codeph"><fx:Library></samp> tag |
| can only be a child of the root tag in an MXML file. Symbols defined |
| in a library can be referenced by name anywhere in the document. </p> |
| |
| <p>In FXG, the <samp class="codeph"><Library></samp> tag must be the |
| first child of the root tag.</p> |
| |
| <div class="p">The FXG <samp class="codeph"><Definition></samp> tag and the MXML <samp class="codeph"><fx:Definition></samp> tag |
| can contain only a Group or other symbols. You cannot nest definitions, |
| as the following example shows:<pre class="codeblock"><!-- This is illegal. --> |
| <Library> |
| <Definition name="A"> |
| <Definition name="B"/> |
| </Definition> |
| </Library></pre> |
| |
| </div> |
| |
| <div class="p">You can, however, reference symbols inside definitions. Symbols |
| can be used anywhere a Group can be used, as the following example |
| shows:<pre class="codeblock"><!-- This is OK. --> |
| <Library> |
| <Definition name="A/> |
| <Definition name="B"> |
| <A/> |
| </Definition> |
| </Library></pre> |
| |
| </div> |
| |
| <p>All attributes that are legal on an instance group are also legal |
| on a symbol.</p> |
| |
| <p>Libraries can have any number of definitions. Each definition |
| defines a named symbol that you can reuse in that document. For |
| example, you can define a rectangle shape in your library, and then |
| use that rectangle shape any number of times in the document. The |
| named symbol can optionally contain effects such as color transforms, |
| filters, blend modes, or masks. These elements can appear in any |
| order in FXG.</p> |
| |
| <p>For more information about using the <samp class="codeph"><fx:Library></samp> and <samp class="codeph"><fx:Definition></samp> language |
| tags in MXML, see <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f37378e861254c275c73-8000_verapache"><a name="WSda78ed3a750d6b8f37378e861254c275c73-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">FXG examples</h3> |
| |
| |
| <div> |
| <div class="p">The following example uses three FXG components. Each component |
| includes a library definition of an object, and uses that tag multiple |
| times to make up its shape.<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/LibraryExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Library Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| <s:VGroup> |
| <comps:YellowShape/> |
| <comps:BlueShape/> |
| <comps:RedShape/> |
| </s:VGroup> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the YellowShape FXG component used |
| in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/YellowShape.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Library> |
| <Definition name="YellowRect"> |
| <Group> |
| <Rect height="10" width="10"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight=".5"/> |
| </stroke> |
| <fill> |
| <SolidColor color="#FFFF00"/> |
| </fill> |
| </Rect> |
| </Group> |
| </Definition> |
| </Library> |
| <YellowRect x="0" y="0"/> |
| <YellowRect x="0" y="12"/> |
| <YellowRect x="12" y="0"/> |
| <YellowRect x="12" y="12"/> |
| </Graphic> |
| </pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the BlueShape FXG component used in |
| the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/BlueShape.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Library> |
| <Definition name="BlueRect"> |
| <Group> |
| <Rect height="10" width="10"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight=".5"/> |
| </stroke> |
| <fill> |
| <SolidColor color="#66CCFF"/> |
| </fill> |
| </Rect> |
| </Group> |
| </Definition> |
| </Library> |
| <BlueRect x="0" y="0"/> |
| <BlueRect x="12" y="0"/> |
| <BlueRect x="24" y="0"/> |
| <BlueRect x="36" y="0"/> |
| |
| </Graphic> |
| </pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the RedShape FXG component used in |
| the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/RedShape.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Library> |
| <Definition name="RedRect"> |
| <Group> |
| <Rect height="10" width="10"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight=".5"/> |
| </stroke> |
| <fill> |
| <SolidColor color="#FF3333"/> |
| </fill> |
| </Rect> |
| </Group> |
| </Definition> |
| </Library> |
| <RedRect x="0" y="0"/> |
| <RedRect x="12" y="0"/> |
| <RedRect x="12" y="12"/> |
| <RedRect x="24" y="12"/> |
| |
| </Graphic></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f37378e861254c275c73-7fff_verapache"><a name="WSda78ed3a750d6b8f37378e861254c275c73-7fff_verapache"><!-- --></a> |
| <h3 class="topictitle3">MXML graphics examples</h3> |
| |
| |
| <div> |
| <p>The following example draws three groups of shapes using |
| MXML graphics that are defined in the library:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/LibraryExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <fx:Library> |
| <fx:Definition name="YellowRect"> |
| <s:Group> |
| <s:Rect height="10" width="10"> |
| <s:stroke> |
| <s:SolidColorStroke color="#000000" weight=".5"/> |
| </s:stroke> |
| <s:fill> |
| <s:SolidColor color="#FFFF00"/> |
| </s:fill> |
| </s:Rect> |
| </s:Group> |
| </fx:Definition> |
| <fx:Definition name="BlueRect"> |
| <s:Group> |
| <s:Rect height="10" width="10"> |
| <s:stroke> |
| <s:SolidColorStroke color="#000000" weight=".5"/> |
| </s:stroke> |
| <s:fill> |
| <s:SolidColor color="#66CCFF"/> |
| </s:fill> |
| </s:Rect> |
| </s:Group> |
| </fx:Definition> |
| <fx:Definition name="RedRect"> |
| <s:Group> |
| <s:Rect height="10" width="10"> |
| <s:stroke> |
| <s:SolidColorStroke color="#000000" weight=".5"/> |
| </s:stroke> |
| <s:fill> |
| <s:SolidColor color="#FF3333"/> |
| </s:fill> |
| </s:Rect> |
| </s:Group> |
| </fx:Definition> |
| </fx:Library> |
| <mx:Panel title="Library MXML Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| <s:VGroup> |
| <s:Graphic> |
| <fx:YellowRect x="0" y="0"/> |
| <fx:YellowRect x="0" y="12"/> |
| <fx:YellowRect x="12" y="0"/> |
| <fx:YellowRect x="12" y="12"/> |
| </s:Graphic> |
| |
| <s:Graphic> |
| <fx:BlueRect x="0" y="0"/> |
| <fx:BlueRect x="12" y="0"/> |
| <fx:BlueRect x="24" y="0"/> |
| <fx:BlueRect x="36" y="0"/> |
| </s:Graphic> |
| |
| <s:Graphic> |
| <fx:RedRect x="0" y="0"/> |
| <fx:RedRect x="12" y="0"/> |
| <fx:RedRect x="12" y="12"/> |
| <fx:RedRect x="24" y="12"/> |
| </s:Graphic> |
| |
| </s:VGroup> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WSA6ECA359-6528-4f70-A343-B37AF15EF4A9_verapache"><a name="WSA6ECA359-6528-4f70-A343-B37AF15EF4A9_verapache"><!-- --></a> |
| <h2 class="topictitle2">Groups in FXG and MXML graphics</h2> |
| |
| |
| <div> |
| <p>Groups contain content items. In MXML, these items are |
| typically of type IGraphicElement (the base interface class for |
| graphic elements), but can also include effects such as the <samp class="codeph"><transform></samp>, <samp class="codeph"><filters></samp>, <samp class="codeph"><mask></samp> elements, and |
| other <samp class="codeph"><Group></samp> elements. In MXML graphics, |
| items inside a group can be any MXML tags.</p> |
| |
| <p>You define a group in an FXG document by using the <samp class="codeph"><Group></samp> tag. |
| In MXML graphics, you use the <samp class="codeph"><s:Group></samp> tag, |
| which corresponds to the <a href="https://flex.apache.org/asdoc/spark/components/Group.html" target="_blank">Group</a> class. This |
| class implements the IGraphicElementContainer interface.</p> |
| |
| <p>The order of graphical objects inside a group determines their |
| depth order when rendered. The last object defined in a group is |
| the top-most tag of the depth order.</p> |
| |
| <p>A group can be inside a graphic or another group. When a group |
| is inside a graphic or other group, it is considered an instance |
| group. Instance groups can optionally contain features such as transforms, |
| filters, and masks. The order that these children appear does not |
| matter. Graphical effects such as these are rendered based on a |
| predefined order, as described in <a href="flx_fxg_fx.html#WSda78ed3a750d6b8f-73a4773012528309923-8000_verapache">Effects</a>.</p> |
| |
| <p>A Group can also be used inside a definition in the library section. |
| When a group is inside a definition, it is considered a symbol definition. |
| Groups inside libraries (symbol definition groups) cannot contain |
| effects such as masks or transforms.</p> |
| |
| <p>A group defines a new local coordinate space for its immediate |
| child elements.</p> |
| |
| <p>For more information about using the <samp class="codeph"><s:Group></samp> tag |
| in MXML, see the <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f36115fe31254c2c5840-8000_verapache"><a name="WSda78ed3a750d6b8f36115fe31254c2c5840-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">FXG example</h3> |
| |
| |
| <div> |
| <div class="p">The following FXG example uses the YellowShape FXG component:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/GroupCoordinateExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <mx:Panel title="Group Coordinate Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:YellowShape/> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>The following file defines the YellowShape FXG component used |
| in the previous example. The component is defined in a<samp class="codeph"> <Group></samp> tag |
| inside a <samp class="codeph"><Library></samp>, which means it is a symbol |
| definition group:</p> |
| |
| <div class="p"> |
| <pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/YellowShape.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Library> |
| <Definition name="YellowRect"> |
| <Group> |
| <Rect height="10" width="10"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight=".5"/> |
| </stroke> |
| <fill> |
| <SolidColor color="#FFFF00"/> |
| </fill> |
| </Rect> |
| </Group> |
| </Definition> |
| </Library> |
| <YellowRect x="0" y="0"/> |
| <YellowRect x="0" y="12"/> |
| <YellowRect x="12" y="0"/> |
| <YellowRect x="12" y="12"/> |
| </Graphic> |
| </pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f36115fe31254c2c5840-7fff_verapache"><a name="WSda78ed3a750d6b8f36115fe31254c2c5840-7fff_verapache"><!-- --></a> |
| <h3 class="topictitle3">MXML graphics example</h3> |
| |
| |
| <div> |
| <div class="p">The following MXML graphics example uses the <samp class="codeph"><s:Group></samp> tag |
| to define a group of yellow shapes:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/GroupCoordinateExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <fx:Library> |
| <fx:Definition name="YellowRect"> |
| <s:Group> |
| <s:Rect height="10" width="10"> |
| <s:stroke> |
| <s:SolidColorStroke color="#000000" weight=".5"/> |
| </s:stroke> |
| <s:fill> |
| <s:SolidColor color="#FFFF00"/> |
| </s:fill> |
| </s:Rect> |
| </s:Group> |
| </fx:Definition> |
| </fx:Library> |
| <mx:Panel title="Group Coordinate MXML Graphics Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <fx:YellowRect x="0" y="0"/> |
| <fx:YellowRect x="0" y="12"/> |
| <fx:YellowRect x="12" y="0"/> |
| <fx:YellowRect x="12" y="12"/> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS4D7543E0-0BA2-4f5f-92FA-985B6B6315AB_verapache"><a name="WS4D7543E0-0BA2-4f5f-92FA-985B6B6315AB_verapache"><!-- --></a> |
| <h2 class="topictitle2">Shapes in FXG and MXML graphics</h2> |
| |
| |
| <div> |
| <div class="p">FXG and MXML graphics define the following basic shapes:<ul> |
| <li> |
| <p>Rectangles</p> |
| |
| </li> |
| |
| <li> |
| <p>Ellipses</p> |
| |
| </li> |
| |
| <li> |
| <p>Lines</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>The MXML graphics classes for the basic shapes are defined in |
| the spark.primitives package.</p> |
| |
| <p>The default border for any shape is to have a stroke with a line |
| width of 0. Therefore, you must define a stroke when you draw a |
| shape, otherwise the shape will be invisible when rendered. You |
| can optionally fill the shape with a fill.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WSA1DB013B-E2C5-4915-8552-E7E9749C4044_verapache"><a name="WSA1DB013B-E2C5-4915-8552-E7E9749C4044_verapache"><!-- --></a> |
| <h3 class="topictitle3">Rectangles</h3> |
| |
| |
| <div> |
| <p>In FXG, the <samp class="codeph"><Rect></samp> tag draws a rectangular |
| shape; in MXML graphics, use the <samp class="codeph"><s:Rect></samp> tag |
| or the <a href="https://flex.apache.org/asdoc/spark/primitives/Rect.html" target="_blank">spark.primitives.Rect</a> class. |
| You define the height and width of a rectangle. You can also define |
| the stroke, or border, of the rectangle, and a fill. </p> |
| |
| <p>When drawing rectangles, you have a great deal of control over |
| the curvature of the corners of the rectangle. The FXG <samp class="codeph"><Rect></samp> tag |
| and the <samp class="codeph"><s:Rect></samp> MXML tag class include properties |
| such as <samp class="codeph">topLeftRadiusX</samp>, <samp class="codeph">topLeftRadiusY</samp>, <samp class="codeph">bottomRightRadiusX</samp>, |
| and <samp class="codeph">bottomRightRadiusY</samp>. Convenience properties, <samp class="codeph">radiusX</samp> and <samp class="codeph">radiusY</samp>, |
| let you set the radii of all corners.</p> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f-712bd5481254c39b292-8000_verapache"><a name="WSda78ed3a750d6b8f-712bd5481254c39b292-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">FXG examples</h4> |
| |
| |
| <div> |
| <div class="p">The following FXG example draws a simple rectangle with |
| a 1 point black stroke:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SimpleRectExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Rectangle Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:SimpleRectComp /> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the SimpleRectComp FXG component used |
| in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/SimpleRectComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Rect height="100" width="200"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="1"/> |
| </stroke> |
| </Rect> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">The following FXG-based example draws two rectangles with strokes |
| and fills. One rectangle has rounded corners:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/RectExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Rectangle Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:VGroup> |
| <comps:FilledRectComp/> |
| <comps:RoundRectComp/> |
| </s:VGroup> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the FilledRectComp FXG component used |
| in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/FilledRectComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <!-- Draw rectangle with square corners. --> |
| <Rect height="100" width="200"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="2"/> |
| </stroke> |
| <fill> |
| <RadialGradient> |
| <GradientEntry color="#0056FF" ratio="0" alpha=".5"/> |
| <GradientEntry color="#00CC99" ratio=".33" alpha=".5"/> |
| <GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/> |
| </RadialGradient> |
| </fill> |
| </Rect> |
| </Graphic> </pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the RoundRectComp FXG component used |
| in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/RoundRectComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <!-- Draw rectangle with rounded corners. --> |
| <Rect height="100" width="200" radiusX="25" radiusY="25"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="2"/> |
| </stroke> |
| <fill> |
| <RadialGradient> |
| <GradientEntry color="#0056FF" ratio="0" alpha=".5"/> |
| <GradientEntry color="#00CC99" ratio=".33" alpha=".5"/> |
| <GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/> |
| </RadialGradient> |
| </fill> |
| </Rect> |
| </Graphic></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f-712bd5481254c39b292-7fff_verapache"><a name="WSda78ed3a750d6b8f-712bd5481254c39b292-7fff_verapache"><!-- --></a> |
| <h4 class="topictitle4">MXML graphics examples</h4> |
| |
| |
| <div> |
| <div class="p">The following MXML graphics example draws a simple rectangle |
| with a 1 point black stroke:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SimpleRectExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <mx:Panel title="Rectangle MXML Graphics Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <s:Rect height="100" width="200"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="1"/> |
| </s:stroke> |
| </s:Rect> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following MXML graphics example draws two rectangles with |
| strokes and fills. One rectangle has rounded corners:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/RectExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <mx:Panel title="Rectangle MXML Graphics Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:VGroup> |
| <s:Rect height="100" width="200"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="2"/> |
| </s:stroke> |
| <s:fill> |
| <s:RadialGradient> |
| <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/> |
| <s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/> |
| <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/> |
| </s:RadialGradient> |
| </s:fill> |
| </s:Rect> |
| <s:Rect height="100" width="200" radiusX="25" radiusY="25"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="2"/> |
| </s:stroke> |
| <s:fill> |
| <s:RadialGradient> |
| <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/> |
| <s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/> |
| <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/> |
| </s:RadialGradient> |
| </s:fill> |
| </s:Rect> |
| </s:VGroup> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For more information, see the Rect class in the <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS4CBB5B4C-D282-4967-A00B-9C1D3BF99DFC_verapache"><a name="WS4CBB5B4C-D282-4967-A00B-9C1D3BF99DFC_verapache"><!-- --></a> |
| <h3 class="topictitle3">Ellipses</h3> |
| |
| |
| <div> |
| <p>In FXG, use the <samp class="codeph"><Ellipse></samp> tag to |
| draw circles and ellipses; in MXML graphics, use the <samp class="codeph"><s:Ellipse></samp> tag |
| or the <a href="https://flex.apache.org/asdoc/spark/primitives/Ellipse.html" target="_blank">spark.primitives.Ellipse</a> class.</p> |
| |
| <p>To define the dimensions of the ellipse, use the <samp class="codeph">height</samp> and <samp class="codeph">width</samp> attributes. These |
| attributes are relative to the graphic's upper left corner. If you |
| set the <samp class="codeph">height</samp> and <samp class="codeph">width</samp> attributes |
| to the same value, the ellipse is a circle.</p> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f41a80477125508a8131-8000_verapache"><a name="WSda78ed3a750d6b8f41a80477125508a8131-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">FXG examples</h4> |
| |
| |
| <div> |
| <div class="p">The following FXG-based example draws a simple circle:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SimpleEllipseExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Ellipse Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:CircleComp /> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the CircleComp FXG component used |
| in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/CircleComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Ellipse height="200" width="200"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="1"/> |
| </stroke> |
| </Ellipse> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">The following FXG-based example draws an ellipse with a fill:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/EllipseExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Ellipse Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:FilledCircleComp/> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the FilledCircleComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/FilledCircleComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Ellipse height="100" width="250"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="2"/> |
| </stroke> |
| <fill> |
| <RadialGradient> |
| <GradientEntry color="#0056FF" ratio="0" alpha=".5"/> |
| <GradientEntry color="#00CC99" ratio=".33" alpha=".5"/> |
| <GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/> |
| </RadialGradient> |
| </fill> |
| </Ellipse> |
| </Graphic></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f41a80477125508a8131-7fff_verapache"><a name="WSda78ed3a750d6b8f41a80477125508a8131-7fff_verapache"><!-- --></a> |
| <h4 class="topictitle4">MXML graphics examples</h4> |
| |
| |
| <div> |
| <div class="p">The following MXML graphics example draws a simple circle:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SimpleEllipseExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <mx:Panel title="Ellipse MXML Graphics Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <s:Ellipse height="200" width="200"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="1"/> |
| </s:stroke> |
| </s:Ellipse> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following MXML graphics example draws an ellipse with a fill:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/EllipseExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Ellipse MXML Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <s:Ellipse height="100" width="250"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="2"/> |
| </s:stroke> |
| <s:fill> |
| <s:RadialGradient> |
| <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/> |
| <s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/> |
| <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/> |
| </s:RadialGradient> |
| </s:fill> |
| </s:Ellipse> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For more information, see the Ellipse class in the <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>. </p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2B02873B-74C0-440d-BC8A-C4025EE80F60_verapache"><a name="WS2B02873B-74C0-440d-BC8A-C4025EE80F60_verapache"><!-- --></a> |
| <h3 class="topictitle3">Lines</h3> |
| |
| |
| <div> |
| <p>To draw a line from one point to another in FXG, use the <samp class="codeph"><Line></samp> tag; |
| in MXML graphics, use the <samp class="codeph"><s:Line></samp> tag or |
| the <a href="https://flex.apache.org/asdoc/spark/primitives/Line.html" target="_blank">spark.primitives.Line</a> class.</p> |
| |
| <div class="p">The default width of a line is 0; you must define a stroke so |
| that the line is visible. Strokes can be one of the following:<ul> |
| <li> |
| <p>SolidColorStroke</p> |
| |
| </li> |
| |
| <li> |
| <p>LinearGradientStroke</p> |
| |
| </li> |
| |
| <li> |
| <p>RadialGradientStroke</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>You can optionally define the color, joint types, and other properties |
| of the line. </p> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f554a70571254c43ab00-8000_verapache"><a name="WSda78ed3a750d6b8f554a70571254c43ab00-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">FXG examples</h4> |
| |
| |
| <div> |
| <div class="p">The following FXG-based example draws a simple 1 point |
| black line with the SolidColorStroke child:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SimpleLineExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Line Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:LineComp/> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the LineComp FXG component used in |
| the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/LineComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Line xFrom="0" xTo="100" yFrom="0" yTo="100"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="1"/> |
| </stroke> |
| </Line> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">The following FXG-based example draws a series of lines with |
| varying widths:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/LineExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Line Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:MultipleLineComp x="20" y="20"/> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the MultipleLineComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/MultipleLineComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Line xFrom="0" xTo="0" yFrom="0" yTo="100"> |
| <!-- Define the border color of the line. --> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="1" caps="square"/> |
| </stroke> |
| </Line> |
| <Line xFrom="6" xTo="6" yFrom="0" yTo="100"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="1" caps="square"/> |
| </stroke> |
| </Line> |
| <Line xFrom="12" xTo="12" yFrom="0" yTo="100"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="2" caps="square"/> |
| </stroke> |
| </Line> |
| <Line xFrom="20" xTo="20" yFrom="0" yTo="100"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="3" caps="square"/> |
| </stroke> |
| </Line> |
| <Line xFrom="30" xTo="30" yFrom="0" yTo="100"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="5" caps="square"/> |
| </stroke> |
| </Line> |
| <Line xFrom="43" xTo="43" yFrom="0" yTo="100"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="8" caps="square"/> |
| </stroke> |
| </Line> |
| <Line xFrom="58" xTo="58" yFrom="0" yTo="100"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="13" caps="square"/> |
| </stroke> |
| </Line> |
| <Line xFrom="84" xTo="84" yFrom="0" yTo="100"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="21" caps="square"/> |
| </stroke> |
| </Line> |
| <Line xFrom="123" xTo="123" yFrom="0" yTo="100"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="34" caps="square"/> |
| </stroke> |
| </Line> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">To use a LinearGradientStroke or RadialGradientStroke in FXG, |
| you add one or more <samp class="codeph"><GradientEntry></samp> elements |
| as children. These gradients are used to define the fill of the |
| stroke. The following example defines a line whose color shifts |
| from blue to yellow:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/LinearGradientLineExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Linear Gradient Line Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:LinearGradientLineComp x="20" y="20"/> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the LinearGradientLineComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/LinearGradientLineComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Line xFrom="0" xTo="200" yFrom="0" yTo="0"> |
| <stroke> |
| <LinearGradientStroke weight="20" caps="square"> |
| <GradientEntry color="#0056FF" ratio="0" alpha=".5"/> |
| <GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/> |
| </LinearGradientStroke> |
| </stroke> |
| </Line> |
| </Graphic></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f554a70571254c43ab00-7fff_verapache"><a name="WSda78ed3a750d6b8f554a70571254c43ab00-7fff_verapache"><!-- --></a> |
| <h4 class="topictitle4">MXML graphics examples</h4> |
| |
| |
| <div> |
| <div class="p">The following MXML graphics example draws a simple 1 point |
| black line with the SolidColorStroke child:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SimpleLineExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <mx:Panel title="Line MXML Graphics Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <s:Line xFrom="0" xTo="100" yFrom="0" yTo="100"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="1"/> |
| </s:stroke> |
| </s:Line> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following MXML graphics example draws a series of lines with |
| varying widths:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/LineExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Line MXML Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="30" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group x="20" y="20"> |
| <s:Line xFrom="0" xTo="0" yFrom="0" yTo="100"> |
| <!-- Define the border color of the line. --> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="1" caps="square"/> |
| </s:stroke> |
| </s:Line> |
| <s:Line xFrom="6" xTo="6" yFrom="0" yTo="100"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="1" caps="square"/> |
| </s:stroke> |
| </s:Line> |
| <s:Line xFrom="12" xTo="12" yFrom="0" yTo="100"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="2" caps="square"/> |
| </s:stroke> |
| </s:Line> |
| <s:Line xFrom="20" xTo="20" yFrom="0" yTo="100"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="3" caps="square"/> |
| </s:stroke> |
| </s:Line> |
| <s:Line xFrom="30" xTo="30" yFrom="0" yTo="100"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="5" caps="square"/> |
| </s:stroke> |
| </s:Line> |
| <s:Line xFrom="43" xTo="43" yFrom="0" yTo="100"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="8" caps="square"/> |
| </s:stroke> |
| </s:Line> |
| <s:Line xFrom="58" xTo="58" yFrom="0" yTo="100"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="13" caps="square"/> |
| </s:stroke> |
| </s:Line> |
| <s:Line xFrom="84" xTo="84" yFrom="0" yTo="100"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="21" caps="square"/> |
| </s:stroke> |
| </s:Line> |
| <s:Line xFrom="123" xTo="123" yFrom="0" yTo="100"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="34" caps="square"/> |
| </s:stroke> |
| </s:Line> |
| |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">To use a <a href="https://flex.apache.org/asdoc/mx/graphics/LinearGradientStroke.html" target="_blank">LinearGradientStroke</a> or <a href="https://flex.apache.org/asdoc/mx/graphics/RadialGradientStroke.html" target="_blank">RadialGradientStroke</a> in |
| MXML graphics, you add one or more <samp class="codeph"><s:GradientEntry></samp> tags |
| as children. These gradients are used to define the fill of the |
| stroke. The following MXML graphics example defines a line whose |
| color shifts from blue to yellow:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/LinearGradientLineExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Linear Gradient Line MXML Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| <s:Group x="20" y="20"> |
| <s:Line xFrom="0" xTo="200" yFrom="0" yTo="0"> |
| <s:stroke> |
| <s:LinearGradientStroke weight="20" caps="square"> |
| <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/> |
| <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/> |
| </s:LinearGradientStroke> |
| </s:stroke> |
| </s:Line> |
| </s:Group> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For more information, see the Line class in the <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS4C9DCBEF-6671-47e9-BBC1-F2676529A30A_verapache"><a name="WS4C9DCBEF-6671-47e9-BBC1-F2676529A30A_verapache"><!-- --></a> |
| <h2 class="topictitle2">Text in FXG and MXML graphics</h2> |
| |
| |
| <div> |
| <p>Text is rendered as a graphic element similar to paths |
| and shapes, but with a restricted subset of rendering options. Text |
| elements are always rendered using a solid fill color, modified |
| by any opacity, blend mode, and color transformation defined by |
| parent elements, and clipped to any clipping content defined on |
| its parent elements. Text content is only filled, not stroked.</p> |
| |
| <p>To use text in an FXG 2.0 document, use the <samp class="codeph"><RichText></samp> tag. |
| In FXG 1.0, use the <samp class="codeph"><TextGraphic></samp> tag.</p> |
| |
| <p>In MXML, you can use the <a href="https://flex.apache.org/asdoc/spark/components/RichText.html" target="_blank">RichText</a>, <a href="https://flex.apache.org/asdoc/spark/components/RichEditableText.html" target="_blank">RichEditableText</a>, |
| or <a href="https://flex.apache.org/asdoc/spark/components/Label.html" target="_blank">Label</a> classes |
| to render text. For more information on using text controls in MXML, |
| see <a href="flx_textcontrols_tc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7d84_verapache">MX |
| text controls</a>.</p> |
| |
| <div class="p">In FXG, the <samp class="codeph"><RichText></samp> tag supports the |
| following child elements:<ul> |
| <li> |
| <p> |
| <samp class="codeph"><content></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><transform></samp> |
| </p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <div class="p">To specify text in a <samp class="codeph"><RichText></samp> tag, you |
| use a single <samp class="codeph"><content></samp> child tag. The following |
| FXG-based example shows several methods of using text in a <samp class="codeph"><RichText></samp> tag:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/FXGRichTextExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*" height="100%" width="100%"> |
| |
| <mx:Panel title="RichText Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:HGroup> |
| <s:Group> |
| <comps:TextComp/> |
| </s:Group> |
| <s:Group> |
| <comps:JustifiedTextComp/> |
| </s:Group> |
| <s:Group> |
| <comps:FormattedTextComp/> |
| </s:Group> |
| </s:HGroup> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the TextComp FXG component used in |
| the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/TextComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <RichText> |
| <content>Hello World!</content> |
| </RichText> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the JustifiedTextComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/JustifiedTextComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <RichText textAlign="justify" width="100"> |
| <content>This is a block of text that is justified, so you can see formatting applied.</content> |
| </RichText> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the FormattedTextComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/FormattedTextComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <RichText> |
| <content>This text is <span fontWeight="bold">BOLD</span>,<br/> |
| this text is <span textDecoration="underline">UNDERLINED</span>,<br/> |
| and this text is <span fontStyle="italic">ITALIC</span>. |
| <p>This is a new paragraph.</p></content> |
| </RichText> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">The <samp class="codeph"><content></samp> child tag supports the following |
| child elements:<ul> |
| <li> |
| <p> |
| <samp class="codeph"><p></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><span></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><br></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><tcy></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><a></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><img></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><tab></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><linkNormalFormat></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><linkHoverFormat></samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph"><linkActiveFormat></samp> |
| </p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>The <samp class="codeph"><content></samp> child tag can also take |
| raw text.</p> |
| |
| <p>If you do not explicitly use a <samp class="codeph"><p></samp> tag |
| as the first tag in a <samp class="codeph"><content></samp> tag, then |
| it is implied. </p> |
| |
| <div class="p">If you apply style attributes to the <samp class="codeph"><RichText></samp> tag |
| (such as <samp class="codeph">fontFamily="arial"</samp>), then the <samp class="codeph"><span></samp> tag |
| is implied on the content of the <samp class="codeph"><RichText></samp> tag. |
| The following example has multiple text formats, with one implied |
| span and one explicit span:<pre class="codeblock"><RichText fontFamily="Verdana" fontWeight="bold"> |
| <content>Hello, <span fontWeight="normal">World</span></content> |
| </RichText></pre> |
| |
| </div> |
| |
| <p>The contents of the <samp class="codeph"><RichText></samp> tag support |
| a set of style attributes that define formatting. These styles are |
| a subset of the MXML RichText class. Some styles are applied at |
| the character and paragraph level, and some are applied at the container |
| level. Container-level attributes (whose level is listed as including <samp class="codeph"><RichText></samp>), |
| affect the entire text flow when applied to the container. Paragraph-level |
| attributes (whose level is listed as including <samp class="codeph"><p></samp>), |
| affect the paragraph when applied to a <samp class="codeph"><p></samp> tag. |
| And character-level attributes (whose level is listed as including <samp class="codeph"><span></samp>) |
| affect only the current span when applied to a <samp class="codeph"><span></samp> tag.</p> |
| |
| <div class="p">The following table describes the formatting attributes supported |
| by FXG: |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e4036"> |
| <p>Attribute</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e4042"> |
| <p>Description</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e4048"> |
| <p>Level</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">alignmentBaseline</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Specifies which of the baselines of the |
| line containing the element the <samp class="codeph">dominantBaseline</samp> snaps |
| to, thus determining the vertical position of the element in the |
| line. </p> |
| |
| <p>The default value is <samp class="codeph">useDominantBaseline</samp>.</p> |
| |
| <p>Valid |
| values are <samp class="codeph">roman</samp>, <samp class="codeph">ascent</samp>, <samp class="codeph">descent</samp>, <samp class="codeph">ideographicTop</samp>, <samp class="codeph">ideographicCenter</samp>, <samp class="codeph">ideographicBottom</samp>, |
| and <samp class="codeph">useDominantBaseline</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">backgroundAlpha</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Alpha (transparency) value for the background. |
| A value of 0 is fully transparent, and a value of 1 is fully opaque. </p> |
| |
| <p>The |
| default value is 1.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">backgroundColor</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Background color of the text. Can be either <samp class="codeph">transparent</samp>, |
| or an integer containing three 8-bit RGB components. </p> |
| |
| <p>The |
| default value is <samp class="codeph">transparent</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">baselineShift</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Indicates the baseline shift for the element |
| in pixels. The element is shifted perpendicular to the baseline |
| by this amount. In horizontal text, a positive baseline shift moves |
| the element up and a negative baseline shift moves the element down.</p> |
| |
| <p>The |
| default value is 0.0, indicating no shift. </p> |
| |
| <p>A value of <samp class="codeph">superscript</samp> shifts |
| the text up by an amount specified in the font, and applies a transform |
| to the <samp class="codeph">fontSize</samp> also based on preferences in the |
| font. </p> |
| |
| <p>A value of <samp class="codeph">subscript</samp> shifts the text |
| down by an amount specified in the font, and also transforms the <samp class="codeph">fontSize</samp>. </p> |
| |
| <p>A |
| percent value shifts the text by a percentage of the <samp class="codeph">fontSize</samp> attribute. |
| The minimum/maximum percent are -1000%/1000%.</p> |
| |
| <p>A Number shifts |
| the text by that number of pixels. The minimum/maximum Number values |
| are -1000/1000.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">blockProgression</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Controls the direction in which lines are |
| stacked. In Latin text, this is <samp class="codeph">tb</samp>, because lines |
| start at the top and proceed downward. In vertical Chinese or Japanese, |
| this is <samp class="codeph">rl</samp>, because lines should start at the right |
| side of the container and proceed leftward.</p> |
| |
| <p>Valid values are <samp class="codeph">tb</samp> and <samp class="codeph">rl</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">breakOpportunity</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Controls where a line can legally break. |
| Valid values are <samp class="codeph">auto</samp>, <samp class="codeph">any</samp>, <samp class="codeph">none</samp>, or <samp class="codeph">all</samp>.</p> |
| |
| <p>A |
| value of <samp class="codeph">auto</samp> means line breaking opportunities |
| are based on standard Unicode character properties, such as breaking |
| between words and on hyphens. </p> |
| |
| <p>A value of <samp class="codeph">any</samp> indicates |
| that the line may end at any character. This value is typically |
| used when Roman text is embedded in Asian text and it is desirable |
| for breaks to happen in the middle of words. </p> |
| |
| <p>A value of <samp class="codeph">none</samp> means |
| that no characters in the range are treated as line break opportunities. </p> |
| |
| <p>A |
| value of <samp class="codeph">all</samp> means that all characters in the range |
| are treated as mandatory line break opportunities; this results |
| in one character per line. </p> |
| |
| <p>The default value is <samp class="codeph">auto</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">color</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Sets the color of the text. </p> |
| |
| <p>The default |
| value is 0x000000.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">columnCount</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the number of columns in the RichText |
| element. The column number overrides the other column settings. </p> |
| |
| <p>The |
| value can be an Integer, or <samp class="codeph">auto</samp> if unspecified. |
| If it's an integer, the range of legal values is 0 to 50. If <samp class="codeph">columnCount</samp> is |
| not specified, but <samp class="codeph">columnWidth</samp> is, then <samp class="codeph">columnWidth</samp> is |
| used to create as many columns as can fit in the container. </p> |
| |
| <p>The |
| default value is <samp class="codeph">auto</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">columnGap</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines th space between columns in pixels. |
| Does not include space before the first column or after the last |
| column. Use the padding properties to define that. </p> |
| |
| <p>Legal |
| values range from 0 to 1000. </p> |
| |
| <p>The default value is 0. </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">columnWidth</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the width of columns in pixels. |
| If you specify the width of the columns, but not the count, Flex |
| creates as many columns of that width as possible given the the |
| container width and <samp class="codeph">columnGap</samp> settings. Any remainder |
| space is left after the last column. </p> |
| |
| <p>Legal values are 0 to |
| 8000. </p> |
| |
| <p>The default value is <samp class="codeph">auto</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">digitCase</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the case for digits.</p> |
| |
| <p>Valid |
| values are <samp class="codeph">default</samp>, <samp class="codeph">lining</samp>, and <samp class="codeph">oldStyle</samp>.</p> |
| |
| <p>A |
| value of <samp class="codeph">default</samp> uses the normal digit case from |
| the font. </p> |
| |
| <p>A value of <samp class="codeph">lining</samp> uses the lining |
| digit case from the font. </p> |
| |
| <p>A value of <samp class="codeph">oldStyle</samp> uses |
| the old style digit case from the font. </p> |
| |
| <p>The default value |
| is <samp class="codeph">default</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">digitWidth</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Specifies how wide digits will be when the |
| text is set. </p> |
| |
| <p>Valid values are <samp class="codeph">proportional</samp>, <samp class="codeph">tabular</samp>, |
| and <samp class="codeph">default</samp>.</p> |
| |
| <p>A value of <samp class="codeph">proportional</samp> means |
| that the proportional widths from the font are used, and different |
| digits will have different widths. </p> |
| |
| <p>A value of <samp class="codeph">tabular</samp> means |
| that every digits has the same width. </p> |
| |
| <p>A value of <samp class="codeph">default</samp> means |
| that the normal width from the font is used. </p> |
| |
| <p>The default |
| value is <samp class="codeph">default</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">direction</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Controls the dominant writing direction |
| for the paragraphs (left-to-right or right-to-left), and how characters |
| with no implicit writing direction, such as punctuation, are treated. </p> |
| |
| <p>Valid |
| values are <samp class="codeph">ltr</samp> and <samp class="codeph">rtl</samp>.</p> |
| |
| <p>The |
| default value is <samp class="codeph">ltr</samp>. </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">dominantBaseline</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Specifies which of the baselines of the |
| element snaps to the alignmentBaseline to determine the vertical |
| position of the element on the line. </p> |
| |
| <p>Valid values are <samp class="codeph">auto</samp>, <samp class="codeph">roman</samp>, <samp class="codeph">ascent</samp>, <samp class="codeph">descent</samp>, <samp class="codeph">ideographicTop</samp>, <samp class="codeph">ideographicCenter</samp>, |
| and <samp class="codeph">ideographicBottom</samp>.</p> |
| |
| <p>A value of <samp class="codeph">auto</samp> gets |
| resolved based on the <samp class="codeph">textRotation</samp> of the span and |
| the locale of the parent paragraph. A <samp class="codeph">textRotation</samp> of <samp class="codeph">rotate270</samp> resolves |
| to <samp class="codeph">ideographicCenter</samp>. A locale of Japanese ("ja") |
| or Chinese ("zh-XX", "zh_XX", etc), resolves to <samp class="codeph">ideographicCenter</samp>, |
| whereas all others are resolved to <samp class="codeph">roman</samp>. </p> |
| |
| <p>The |
| default value is <samp class="codeph">auto</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">firstBaselineOffset</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Specifies the position of the first line |
| of text in the container (first in each column) relative to the |
| top of the container. The first line may appear at the position |
| of the line's ascent, or below by the <samp class="codeph">lineHeight</samp> of |
| the first line. Or it may be offset by a pixel amount. </p> |
| |
| <p>Valid |
| values are <samp class="codeph">auto</samp>, <samp class="codeph">ascent</samp>, <samp class="codeph">lineHeight</samp>, |
| and a Number.</p> |
| |
| <p>The default value (auto) specifies that the |
| line top be aligned to the container top inset. The baseline that |
| this property refers to is deduced from the container's locale as |
| follows: <samp class="codeph">ideographicBottom</samp> for Chinese and Japanese |
| locales, <samp class="codeph">roman</samp> otherwise. </p> |
| |
| <p>Minumum/maximum |
| values are 0/1000. </p> |
| |
| <p>The default value is <samp class="codeph">auto</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">fontFamily</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the font family name used to render |
| the text. </p> |
| |
| <p>The font depends on the glyphs that are being rendered |
| and the fonts that are available on the client system.</p> |
| |
| <p>For |
| most platforms, the default value is Arial.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">fontSize</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Sets the size of the glyphs that are used |
| to render the text, specified in point sizes. </p> |
| |
| <p>The default |
| value is 12. The minimum value is 1. The maximum value is 500.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">fontStyle</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Italicizes text. Valid values are <samp class="codeph">normal</samp> and <samp class="codeph">italic</samp>. </p> |
| |
| <p>The |
| default value is <samp class="codeph">normal</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">fontWeight</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Bolds text. Valid values are <samp class="codeph">normal</samp> and <samp class="codeph">bold</samp>.</p> |
| |
| <p>The |
| default value is <samp class="codeph">normal</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">justificationRule</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the justifier. </p> |
| |
| <p>A value of <samp class="codeph">eastAsian</samp> enables |
| justification for Japanese. </p> |
| |
| <p>The default value is <samp class="codeph">auto</samp>. |
| A value of <samp class="codeph">auto</samp> is resolved based on the locale of |
| the paragraph. </p> |
| |
| <p>Values for Japanese ("ja") and Chinese ("zh-XX", |
| "zh_XX", etc) resolve to <samp class="codeph">eastAsian</samp>, while all other |
| locales resolve to space.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">justificationStyle</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the justification style.</p> |
| |
| <p>A |
| value of <samp class="codeph">auto</samp> is resolved based on the locale of |
| the paragraph. Currently, all locales resolve to <samp class="codeph">pushInKinsoku</samp>, |
| however, this value is only used in conjunction with a <samp class="codeph">justificationRule</samp> value |
| of <samp class="codeph">eastAsian</samp>, so is only applicable to "ja" and |
| all "zh" locales. </p> |
| |
| <p>A value of <samp class="codeph">prioritizeLeastAdjustment</samp> bases |
| justification on either expanding or compressing the line, whichever |
| gives a result closest to the desired width. </p> |
| |
| <p>A value of <samp class="codeph">pushInKinsoku</samp> bases |
| justification on compressing kinsoku at the end of the line, or |
| expanding it if there is no kinsoku or if that space is insufficient. </p> |
| |
| <p>A |
| value of <samp class="codeph">pushOutOnly</samp> bases justification on expanding |
| the line. </p> |
| |
| <p>Valid values are <samp class="codeph">auto</samp>, <samp class="codeph">prioritizeLeastAdjustment</samp>, <samp class="codeph">pushInKinsoku</samp>, |
| and <samp class="codeph">pushOutOnly</samp>.</p> |
| |
| <p>The default value is <samp class="codeph">auto</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">kerning</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Applies pair kerning to text. </p> |
| |
| <p>Valid |
| values are <samp class="codeph">on</samp>, <samp class="codeph">off</samp>, and <samp class="codeph">auto</samp>.</p> |
| |
| <p>If <samp class="codeph">on</samp>, |
| pair kerns are honored. If <samp class="codeph">off</samp>, there is no font-based |
| kerning applied. If <samp class="codeph">auto</samp>, kerning is applied to |
| all characters except Kanji, Hiragana or Katakana. </p> |
| |
| <p>The default |
| value is <samp class="codeph">auto</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">leadingModel</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Specifies the leading basis (baseline to |
| which the <samp class="codeph">lineHeight</samp> property refers) and the leading |
| direction (which determines whether the <samp class="codeph">lineHeight</samp> property |
| refers to the distance of a line's baseline from that of the line |
| before it or the line after it). </p> |
| |
| <p>The default value is <samp class="codeph">auto</samp> which |
| is resolved based on locale. Locale values of Japanese ("ja") and |
| Chinese ("zh-XX", "zh_XX", etc) resolve auto to ideographicTopDown |
| and other locales resolve to romanUp.</p> |
| |
| <p>Valid values are <samp class="codeph">auto</samp>, <samp class="codeph">romanUp</samp>, <samp class="codeph">ideographicTopUp</samp>, <samp class="codeph">ideographicCenterUp</samp>, <samp class="codeph">ascentDescentUp</samp>, <samp class="codeph">ideographicTopDown</samp>, |
| and <samp class="codeph">ideographicCenterDown</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">ligatureLevel</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Controls which ligatures in the font will |
| be used. </p> |
| |
| <p>Valid values are <samp class="codeph">minimum</samp>, <samp class="codeph">common</samp>, <samp class="codeph">uncommon</samp>, |
| and <samp class="codeph">exotic</samp>.</p> |
| |
| <p>A value of <samp class="codeph">minimum</samp> turns |
| on rlig, <samp class="codeph">common</samp> is rlig + clig + liga; <samp class="codeph">uncommon</samp> is |
| rlig + clig + liga + dlig; <samp class="codeph">exotic</samp> is rlig + clig |
| + liga + dlig + hlig. </p> |
| |
| <p>You cannot turn the various ligature |
| features on independently. </p> |
| |
| <p>The default value is <samp class="codeph">common</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">lineBreak</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Determines whether the text wraps the lines |
| at the edge of the enclosing <samp class="codeph"><RichText></samp> element. |
| Set to <samp class="codeph">toFit</samp> to wrap the lines. Set to <samp class="codeph">explicit</samp> to |
| break the lines only at a Unicode line end character (such as a |
| newline or line separator).</p> |
| |
| <p>Valid values are <samp class="codeph">toFit</samp> and <samp class="codeph">explicit</samp>.</p> |
| |
| <p>The |
| default value is <samp class="codeph">toFit</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">lineHeight</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the leading, or the distance from |
| the previous line's baseline to the current line, in points. This |
| can be specified in absolute pixels, or as a percentage of the point |
| size. </p> |
| |
| <p>The default value is 120%. The minimum value for percent |
| or number is 0.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">lineThrough</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Whether to apply a strike through to the |
| text. Set to <samp class="codeph">true</samp> to apply a line through the text; |
| otherwise set to <samp class="codeph">false</samp>. </p> |
| |
| <p>The default value |
| is <samp class="codeph">false</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">locale</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the locale of the text. This controls |
| case transformations and shaping. Standard locale identifiers as |
| described in Unicode Technical Standard #35 are used. For example |
| en, en_US and en-US are all English, ja is Japanese. </p> |
| |
| <p>Locale |
| applied at the paragraph and higher level impacts resolution of "auto" |
| values for <samp class="codeph">dominantBaseline</samp>, <samp class="codeph">justificationRule</samp>, <samp class="codeph">justificationStyle</samp> and <samp class="codeph">leadingModel</samp>. </p> |
| |
| <p>See |
| individual attributes for resolution values.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">marginBottom</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the space after the paragraph. As |
| in CSS, adjacent vertical space collapses. No margin is necessary |
| if the paragraph falls at the bottom of the <samp class="codeph"><RichText></samp> tag. </p> |
| |
| <p>The |
| default value is 0. The minimum value is 0.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">marginLeft</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the indentation applied to the left |
| edge of the <samp class="codeph"><RichText></samp> tag, measured in pixels.</p> |
| |
| <p>The |
| default value is 0.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">marginRight</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the indentation applied to the right |
| edge of the <samp class="codeph"><RichText></samp> tag, measured in pixels. </p> |
| |
| <p>The |
| default value is 0.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">marginTop</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the space before the paragraph. |
| As in CSS, adjacent vertical space collapses. Given two adjoining |
| paragraphs (A, B), where A has <samp class="codeph">marginBottom</samp> 12 |
| and B has <samp class="codeph">marginBottom</samp> 24, the total space between |
| the paragraphs is 24, the maximum of the two, and not 36, the sum. |
| If the paragraph is at the top of the column, no extra space is |
| left for the margin.</p> |
| |
| <p>The default value is 0. The minimum value |
| is 0.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">paddingBottom</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the inset from bottom edge to content |
| area, in pixels.</p> |
| |
| <p>The default value is 0. The minumum/maximum |
| values are 0/1000.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">paddingLeft</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the inset from left edge to content |
| area, in pixels.</p> |
| |
| <p>The default value is 0. The minumum/maximum |
| values are 0/1000.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">paddingRight</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the inset from right edge to content |
| area, in pixels.</p> |
| |
| <p>The default value is 0. The minumum/maximum |
| values are 0/1000.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">paddingTop</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the inset from top edge to content |
| area, in pixels.</p> |
| |
| <p>The default value is 0. The minumum/maximum |
| values are 0/1000.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">paragraphEndIndent</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the indentation applied to the end |
| edge of a paragraph (right edge if direction is ltr, left edge otherwise). </p> |
| |
| <p>Measured |
| in pixels. Legal values range from 0 to 1000. </p> |
| |
| <p>Default is |
| 0.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">paragraphSpaceAfter</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the amount of whitespace that appears |
| the paragraph. As in CSS, adjacent vertical space collapses (see |
| note for paragraphSpaceBefore ). No "space after" is necessary if |
| the paragraph falls at the bottom of the RichText. </p> |
| |
| <p>Legal |
| values range from 0 to 1000. </p> |
| |
| <p>The default value is 0. The |
| minimum value is 0.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">paragraphSpaceBefore</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Specifies the amount of whitespace that |
| appears above a paragraph. As in CSS, adjacent vertical space collapses. |
| For two adjoining paragraphs (A, B), where A has paragraphSpaceAfter |
| 12 and B has paragraphSpaceBefore 24, the total space between the |
| paragraphs will be 24, the maximum of the two, and not 36, the sum. |
| If the paragraph comes at the top of the column, no extra space |
| is left before it.</p> |
| |
| <p>Legal values range from 0 to 1000. </p> |
| |
| <p>The |
| default value is 0. The minimum value is 0.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">paragraphStartIndent</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines the indentation applied to the start |
| edge of the paragraph (left edge if direction is ltr, right edge |
| otherwise). </p> |
| |
| <p>Measured in pixels. </p> |
| |
| <p>Legal values range |
| from 0 to 1000. </p> |
| |
| <p>The default value is 0.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">tabStops</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Defines an array of tab stops. For more |
| information, see the <a href="https://sourceforge.net/adobe/flexsdk/wiki/FXG%202.0%20Specification/" target="_blank">FXG 2.0 Specification</a>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">textAlpha</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Sets the opacity level of the text, ranging |
| from 0 (completely transparent) to 1 (completely opaque). </p> |
| |
| <p>The |
| default value is 1.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">textAlign</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Aligns text relative to the text box edges. |
| Valid values are <samp class="codeph">left</samp>, <samp class="codeph">right</samp>, <samp class="codeph">center</samp>, |
| and <samp class="codeph">justify</samp>.</p> |
| |
| <p>The default value is <samp class="codeph">left</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">textAlignLast</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Aligns the last line of the paragraph. </p> |
| |
| <p>To |
| make a paragraph set all lines justified, set the <samp class="codeph">textAlign</samp> and <samp class="codeph">textAlignLast</samp> attributes |
| to <samp class="codeph">justify</samp>. </p> |
| |
| <p>Valid values are <samp class="codeph">left</samp>, <samp class="codeph">center</samp>, <samp class="codeph">right</samp>, |
| and <samp class="codeph">justify</samp>.</p> |
| |
| <p>The default value is <samp class="codeph">left</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">textDecoration</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Underlines text. Valid values are <samp class="codeph">none</samp> and <samp class="codeph">underline</samp>.</p> |
| |
| <p>The |
| default value is <samp class="codeph">none</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">textIndent</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Indent the first line of text in a paragraph. |
| The indent is relative to the left margin. Measured in pixels. </p> |
| |
| <p>The |
| default value is 0. This attribute can be negative.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">textJustify</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Applies when <samp class="codeph">justificationRule</samp> is |
| space. A value of <samp class="codeph">interWord</samp> spreads justification |
| space out to spaces in the line. A value of <samp class="codeph">distribute</samp> spreads |
| it out to letters as well as spaces.</p> |
| |
| <p>The default value is <samp class="codeph">interWord</samp>.</p> |
| |
| <p>Valid |
| values are <samp class="codeph">interWord</samp> and <samp class="codeph">distribute</samp>. </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> or <samp class="codeph"><p></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">textRotation</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Controls the rotation of the text, in ninety |
| degree increments. </p> |
| |
| <p>Valid values are <samp class="codeph">auto</samp>, <samp class="codeph">rotate0</samp>, <samp class="codeph">rotate90</samp>, <samp class="codeph">rotate180</samp>, |
| and <samp class="codeph">rotate270</samp>. </p> |
| |
| <p>The default value is <samp class="codeph">auto</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">trackingLeft</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Adds space to the left of each character. |
| Can be a percent value or a Number.</p> |
| |
| <p>A Number tracks by a pixel |
| amount, with the minimum/maximum values -100/1000.</p> |
| |
| <p>A percent |
| value is the percentage of the <samp class="codeph">fontSize</samp> attribute. |
| Legal values for percentages are -100% to 1000%. </p> |
| |
| <p>Negative |
| values bring characters closer together. </p> |
| |
| <p>The default value |
| is 0.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">trackingRight</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Adds space to the right of each character. |
| Can be a percent value or a Number.</p> |
| |
| <p>A Number tracks by a pixel |
| amount, with the minimum/maximum values -100/1000.</p> |
| |
| <p>A percent |
| value is the percentage of the <samp class="codeph">fontSize</samp> attribute. |
| Legal values for percentages are -100% to 1000%. </p> |
| |
| <p>Negative |
| values bring characters closer together. </p> |
| |
| <p>The default value |
| is 0.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">typographicCase</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Controls the case in which the text appears.</p> |
| |
| <p>Valid |
| values are <samp class="codeph">default</samp>, <samp class="codeph">capsToSmallCaps</samp>, <samp class="codeph">uppercase</samp>, <samp class="codeph">lowercase</samp>, |
| and <samp class="codeph">lowercaseToSmallCaps</samp>. </p> |
| |
| <p>A value of <samp class="codeph">default</samp> does |
| not apply any case changes.A value of <samp class="codeph">smallCaps</samp> converts |
| all characters to uppercase and applies c2sc.</p> |
| |
| <p>A value of <samp class="codeph">uppercase</samp> and <samp class="codeph">lowercase</samp> are |
| case conversions.A value of <samp class="codeph">caps</samp> turns on case.A |
| value of <samp class="codeph">lowercaseToSmallCaps</samp> converts all characters |
| to uppercase, and for those characters which have been converted, |
| applies c2sc.</p> |
| |
| <p>The default value is <samp class="codeph">default</samp>.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p></samp>, |
| or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">verticalAlign</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Sets the vertical alignment of the lines |
| within the container. </p> |
| |
| <p>Valid values are <samp class="codeph">top</samp>, <samp class="codeph">middle</samp>, <samp class="codeph">bottom</samp>, <samp class="codeph">justify</samp>, |
| and <samp class="codeph">inherit</samp>.</p> |
| |
| <p>The lines might appear at the |
| top of the container, centered within the container, at the bottom, |
| or evenly spread out across the depth of the container. </p> |
| |
| <p>The |
| default value is <samp class="codeph">top</samp>. </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4036 "> |
| <p> |
| <samp class="codeph">whiteSpaceCollapse</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4042 "> |
| <p>Determines how whitespace such as line feeds, |
| newlines, and tabs are treated.</p> |
| |
| <p>Valid values are <samp class="codeph">collapse</samp> and <samp class="codeph">preserve</samp>.</p> |
| |
| <p>Set |
| to <samp class="codeph">collapse</samp> to convert line feeds, newlines, and |
| tabs to spaces, collapse adjacent spaces to one, and trim leading |
| and trailing whitespace.</p> |
| |
| <p>Set to <samp class="codeph">preserve</samp> to |
| maintain whitespace without changes.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e4048 "> |
| <p> |
| <samp class="codeph"><RichText></samp>, <samp class="codeph"><p>,</samp> or <samp class="codeph"><span></samp> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| <p>Not all of the properties in MXML text-based controls are supported |
| by the <samp class="codeph"><RichText></samp> tag in FXG, and not all |
| properties of FXG are supported by the MXML text-based controls. |
| For example, the RichText class in MXML does not have the margin-related |
| properties that the <samp class="codeph"><RichText></samp> tag in FXG |
| has.</p> |
| |
| <p>The <samp class="codeph"><RichText></samp> tag is not optimized when |
| an FXG document is compiled. It is the only FXG element that is |
| not optimized because there are no low-level Flash Player instructions |
| for RichText.</p> |
| |
| <div class="p">If you do not specify a the <samp class="codeph">width</samp> or <samp class="codeph">height</samp> properties |
| of the <samp class="codeph"><RichText></samp> tag, or if the specified |
| width or height is 0, the width and height are calculated based |
| on the text content. This is done using the following logic for |
| horizontal text:<ul> |
| <li> |
| <p>If the width is specified, but the height |
| is not, the container height is set to the height required to fit |
| the text. Text wraps to the width of the container, and the total |
| height of the text becomes the container height.</p> |
| |
| </li> |
| |
| <li> |
| <p>If the width is not specified, then the text breaks only |
| at line breaks and at the paragraph end. The width of the container |
| is then set to the width of the longest line.</p> |
| |
| </li> |
| |
| <li> |
| <p>If neither width nor height are specified, the width is set |
| as described above, and then the height is set based on the width.</p> |
| |
| </li> |
| |
| <li> |
| <p>If the height is specified, and the text exceeds what will |
| fit, then the remaining text is preserved but does not appear in |
| the container; it is clipped. You can choose to add scroll bars |
| to view the additional text, but scroll bars are not part of FXG.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS044C4E8A-14F5-44d0-AD7F-01D3578B463F_verapache"><a name="WS044C4E8A-14F5-44d0-AD7F-01D3578B463F_verapache"><!-- --></a> |
| <h2 class="topictitle2">Fills in FXG and MXML graphics</h2> |
| |
| |
| <div> |
| <p>Fills and strokes generally define a default bounding area |
| that they fill, clipped by the path they are filling. Fills and |
| strokes can define their own user coordinate space, which defaults |
| to the coordinate space of the object they are filling. A fill or |
| stroke can modify its coordinate space with transform attributes |
| and child elements, similar to a Group, that is concatenated with |
| its parent's transforms to define a fill region in document coordinates.</p> |
| |
| <p>To define a fill in FXG, you use the <samp class="codeph"><fill></samp> tag |
| as the child of a graphic element, such as a Rect. In MXML graphics, |
| you use the <samp class="codeph"><s:fill></samp> tag, or a class that implements |
| the <a href="https://flex.apache.org/asdoc/mx/graphics/IFill.html" target="_blank">mx.graphics.IFill</a> interface. |
| Fill elements and tags can contain a single tag that defines the |
| type of fill.</p> |
| |
| <div class="p">The following types of fills are supported by FXG and MXML graphics:<ul> |
| <li> |
| <p>SolidColor</p> |
| |
| </li> |
| |
| <li> |
| <p>RadialGradient</p> |
| |
| </li> |
| |
| <li> |
| <p>LinearGradient</p> |
| |
| </li> |
| |
| <li> |
| <p>BitmapFill</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS1C293E13-929A-4f0a-B769-BCC4CBA3D9AF_verapache"><a name="WS1C293E13-929A-4f0a-B769-BCC4CBA3D9AF_verapache"><!-- --></a> |
| <h3 class="topictitle3">SolidColor fills</h3> |
| |
| |
| <div> |
| <p>A solid color fill fills a path or shape with a single |
| solid color or solid color with opacity. The value of the <samp class="codeph">color</samp> property |
| is a hexadecimal number, such as #FF00FF. In FXG, you cannot use |
| the 0x notation that is supported in MXML graphics.</p> |
| |
| <p>In FXG, you use the <samp class="codeph"><SolidColor></samp> tag to |
| create a solid color fill. In MXML graphics, you use the <samp class="codeph"><s:SolidColor></samp> tag.</p> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f3d779e1e1252d18046b-7fff_verapache"><a name="WSda78ed3a750d6b8f3d779e1e1252d18046b-7fff_verapache"><!-- --></a> |
| <h4 class="topictitle4">FXG example</h4> |
| |
| |
| <div> |
| <p>The following FXG-based example creates a rectangle with |
| a SolidColor fill at 50% opacity:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SolidColorExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Solid Color Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:SolidColorComp/> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following FXG file defines the SolidColorComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/SolidColorComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <!-- Draw rectangle that is filled with a SolidColor. --> |
| <Rect height="100" width="200"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="2"/> |
| </stroke> |
| <fill> |
| <SolidColor color="#00FF00" alpha=".5"/> |
| </fill> |
| </Rect> |
| </Graphic></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f3d779e1e1252d18046b-8000_verapache"><a name="WSda78ed3a750d6b8f3d779e1e1252d18046b-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">MXML graphics example</h4> |
| |
| |
| <div> |
| <div class="p">The following example draws a rectangle and fills it with |
| a SolidColor fill at 50% opacity:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SolidColorExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <mx:Panel title="Solid Color MXML Graphics Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <!-- Draw rectangle that is filled with a SolidColor. --> |
| <s:Rect height="100" width="200"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="2"/> |
| </s:stroke> |
| <s:fill> |
| <s:SolidColor color="0x00FF00" alpha=".5"/> |
| </s:fill> |
| </s:Rect> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For more information, see the SolidColor class in the <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS0AF4D48D-C131-47fc-8B5B-889148390956_verapache"><a name="WS0AF4D48D-C131-47fc-8B5B-889148390956_verapache"><!-- --></a> |
| <h3 class="topictitle3">LinearGradient fills</h3> |
| |
| |
| <div> |
| <p>A linear gradient fills a path or shape with a continuously |
| smooth color transition between a list of colors along a vector. |
| With gradient fills, you can use the <samp class="codeph">spreadMethod</samp> property |
| to define a repetition of the patterns.</p> |
| |
| <p>In FXG, you use the <samp class="codeph"><LinearGradient></samp> tag |
| to define a linear gradient. In MXML graphics, you use the <samp class="codeph"><s:LinearGradient></samp> tag, |
| or the <a href="https://flex.apache.org/asdoc/mx/graphics/LinearGradient.html" target="_blank">mx.graphics.LinearGradient</a> class.</p> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f14f5bd1d1252d1ecc9c-7fff_verapache"><a name="WSda78ed3a750d6b8f14f5bd1d1252d1ecc9c-7fff_verapache"><!-- --></a> |
| <h4 class="topictitle4">FXG example</h4> |
| |
| |
| <div> |
| <div class="p">The following FXG-based example uses a LinearGradient fill:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/LinearGradientExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Linear Gradient Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:LinearGradientComp/> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following FXG file defines the LinearGradientComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/LinearGradientComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <!-- Draw rectangle that is filled with a LinearGradient. --> |
| <Rect height="100" width="200"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="2"/> |
| </stroke> |
| <fill> |
| <LinearGradient> |
| <GradientEntry color="#0056FF" ratio="0" alpha=".5"/> |
| <GradientEntry color="#00CC99" ratio=".33" alpha=".5"/> |
| <GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/> |
| </LinearGradient> |
| </fill> |
| </Rect> |
| </Graphic></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f14f5bd1d1252d1ecc9c-8000_verapache"><a name="WSda78ed3a750d6b8f14f5bd1d1252d1ecc9c-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">MXML graphics example</h4> |
| |
| |
| <div> |
| <div class="p">The following MXML graphics example draws a rectangle and |
| fills it with a LinearGradient fill:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/LinearGradientExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Linear Gradient MXML Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <!-- Draw rectangle that is filled with a LinearGradient. --> |
| <s:Rect height="100" width="200"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="2"/> |
| </s:stroke> |
| <s:fill> |
| <s:LinearGradient> |
| <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/> |
| <s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/> |
| <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/> |
| </s:LinearGradient> |
| </s:fill> |
| </s:Rect> |
| </s:Group> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS0DDFA75B-0131-4cf2-8A4F-FA9ACFD97CD5_verapache"><a name="WS0DDFA75B-0131-4cf2-8A4F-FA9ACFD97CD5_verapache"><!-- --></a> |
| <h3 class="topictitle3">RadialGradient fills</h3> |
| |
| |
| <div> |
| <p>A radial gradient specifies a gradual color transition |
| in the fill color. A radial gradient defines a fill pattern that |
| radiates out from the center of a graphical element. </p> |
| |
| <p>In FXG, you use the <samp class="codeph"><RadialGradient></samp> tag |
| to define a radial gradient. you add a series of GradientEntry objects |
| to the <samp class="codeph"><RadialGradient></samp> tag's <samp class="codeph">entries</samp> Array |
| to define the colors that make up the gradient fill.</p> |
| |
| <p>In MXML graphics, you use the <samp class="codeph"><s:RadialGradient></samp> tag, |
| or the <a href="https://flex.apache.org/asdoc/mx/graphics/RadialGradient.html" target="_blank">mx.graphics.RadialGradient</a> class. |
| You then define an array of entries, and add to it <a href="https://flex.apache.org/asdoc/mx/graphics/GradientEntry.html" target="_blank">GradientEntry</a> objects.</p> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f-cf1a1961252d1f9894-7fff_verapache"><a name="WSda78ed3a750d6b8f-cf1a1961252d1f9894-7fff_verapache"><!-- --></a> |
| <h4 class="topictitle4">FXG example</h4> |
| |
| |
| <div> |
| <div class="p">The following FXG-based example uses a radial gradient |
| in an FXG component:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/RadialGradientExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Radial Gradient Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:RadialGradientComp/> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following FXG file defines the RadialGradientComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/RadialGradientComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <!-- Draw rectangle that is filled with a RadialGradient. --> |
| <Rect height="100" width="200"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="2"/> |
| </stroke> |
| <fill> |
| <RadialGradient> |
| <GradientEntry color="#0056FF" ratio="0" alpha=".5"/> |
| <GradientEntry color="#00CC99" ratio=".33" alpha=".5"/> |
| <GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/> |
| </RadialGradient> |
| </fill> |
| </Rect> |
| </Graphic></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f-cf1a1961252d1f9894-8000_verapache"><a name="WSda78ed3a750d6b8f-cf1a1961252d1f9894-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">MXML graphics example</h4> |
| |
| |
| <div> |
| <div class="p">The following MXML graphics example draws a rectangle and |
| fills it with a RadialGradient fill:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/RadialGradientExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <mx:Panel title="Radial Gradient MXML Graphics Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <s:Rect height="100" width="200"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="2"/> |
| </s:stroke> |
| <s:fill> |
| <s:RadialGradient> |
| <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/> |
| <s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/> |
| <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/> |
| </s:RadialGradient> |
| </s:fill> |
| </s:Rect> |
| </s:Group> |
| |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS50283D1A-B346-437d-BBBB-93E7F2BEB698_verapache"><a name="WS50283D1A-B346-437d-BBBB-93E7F2BEB698_verapache"><!-- --></a> |
| <h3 class="topictitle3">BitmapFill fills</h3> |
| |
| |
| <div> |
| <p>In FXG, you use the <samp class="codeph"><BitmapFill></samp> tag |
| to fill an area with the specified bitmap data. In MXML graphics, |
| you use the <samp class="codeph"><s:BitmapFill></samp> tag, or the <a href="https://flex.apache.org/asdoc/mx/graphics/BitmapFill.html" target="_blank">mx.graphics.BitmapFill</a> class.</p> |
| |
| <p>A bitmap fill can scale or repeat its contents to fit the area. |
| The default behavior is to scale the bitmap data to fill the available |
| area. To prevent scaling, set the fillMode property to clip. If |
| the fill is larger than the available area, the bitmap data is clipped. |
| To scale the bitmap data to the available area, set the <samp class="codeph">fillMode</samp> property |
| to <samp class="codeph">scale</samp>. To repeat the bitmap data in the available |
| area, set the <samp class="codeph">fillMode</samp> property to <samp class="codeph">repeat</samp>. </p> |
| |
| <p>When you set the value of the <samp class="codeph">fillMode</samp> property |
| in ActionScript (for MXML graphics), use the constants defined on |
| the <a href="https://flex.apache.org/asdoc/mx/graphics/BitmapFillMode.html" target="_blank">BitmapFillMode</a> class.</p> |
| |
| <p>You can offset the position of the bitmap data inside the specified |
| fill area by using the <samp class="codeph">offset</samp> and <samp class="codeph">origin</samp> position |
| properties. You can rotate the bitmap data with the <samp class="codeph">rotation</samp> property. </p> |
| |
| <p>The properties that are supported by the FXG <samp class="codeph"><BitmapFill></samp> tag |
| are listed in <a href="flx_fxg_fx.html#WSda78ed3a750d6b8f-237979311225c0987ce-8000_verapache">Graphics |
| classes and elements</a>. </p> |
| |
| <p>A fill's bitmap data is affected by matrix transformations that |
| you can define on the fill.</p> |
| |
| <p>To specify the source of a bitmap fill, use the <samp class="codeph">@Embed</samp> directive |
| inside the <samp class="codeph">source</samp> property. This embeds the source |
| of the fill into the application at compile time.</p> |
| |
| <p>You cannot specify the source of a bitmap fill at runtime.</p> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f6816d4591252d225b17-7fff_verapache"><a name="WSda78ed3a750d6b8f6816d4591252d225b17-7fff_verapache"><!-- --></a> |
| <h4 class="topictitle4">FXG example</h4> |
| |
| |
| <div> |
| <div class="p">The following FXG-based example defines a BitmapFill for |
| a rectangle:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/FXGBitmapFillExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="BitmapFill Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| <s:Group> |
| <comps:BitmapFillComp/> |
| </s:Group> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the BitmapFillComp FXG component used |
| in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/BitmapFillComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <!-- Draw rectangle that is filled with a repeating bitmap. --> |
| <Rect height="100" width="200"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="2"/> |
| </stroke> |
| <fill> |
| <BitmapFill |
| source="@Embed('../../assets/AirIcon12x12.gif')" |
| fillMode="repeat"/> |
| </fill> |
| </Rect> |
| </Graphic></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f6816d4591252d225b17-8000_verapache"><a name="WSda78ed3a750d6b8f6816d4591252d225b17-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">MXML graphics example</h4> |
| |
| |
| <div> |
| <div class="p">The following MXML graphics example defines a bitmap fill:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/BitmapFillExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="BitmapFill MXML Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| <s:Graphic> |
| <!-- Draw rectangle that is filled with a repeating bitmap. --> |
| <s:Rect height="100" width="200"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="2"/> |
| </s:stroke> |
| <s:fill> |
| <s:BitmapFill |
| source="@Embed('../assets/AirIcon12x12.gif')" |
| fillMode="repeat"/> |
| </s:fill> |
| </s:Rect> |
| </s:Graphic> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For more information, see the BitmapFill class in <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS8114D32C-2892-42ed-B230-59A94C7690E1_verapache"><a name="WS8114D32C-2892-42ed-B230-59A94C7690E1_verapache"><!-- --></a> |
| <h2 class="topictitle2">Bitmap graphics in FXG and MXML graphics</h2> |
| |
| |
| <div> |
| <p>A bitmap graphic defines a rectangular region that is filled |
| with bitmap data from a source file.</p> |
| |
| <p>In FXG, you use the <samp class="codeph"><BitmapImage></samp> tag |
| to draw a bitmap graphic. In MXML graphics, you use the <samp class="codeph"><s:BitmapImage></samp> tag, |
| or the <a href="https://flex.apache.org/asdoc/spark/primitives/BitmapImage.html" target="_blank">spark.primitives.BitmapImage</a> class. </p> |
| |
| <p>A bitmap image can be optionally scaled or repeated to fit the |
| available area. The default behavior is to scale the image to fill |
| the available area. To prevent scaling, set the <samp class="codeph">fillMode</samp> property |
| to <samp class="codeph">clip</samp>. If the image is larger than the available area, |
| the fill is clipped. To scale the image to the available area, set |
| the <samp class="codeph">fillMode</samp> property to <samp class="codeph">scale</samp>. |
| To repeat the image in the available area, set the <samp class="codeph">fillMode</samp> property |
| to <samp class="codeph">repeat</samp>. </p> |
| |
| <p>The properties that are supported by the FXG <samp class="codeph"><BitmapImage></samp> tag |
| are listed in <a href="flx_fxg_fx.html#WSda78ed3a750d6b8f-237979311225c0987ce-8000_verapache">Graphics |
| classes and elements</a>. </p> |
| |
| <div class="p">Bitmap graphics support the following types of images:<ul> |
| <li> |
| <p>PNG</p> |
| |
| </li> |
| |
| <li> |
| <p>GIF</p> |
| |
| </li> |
| |
| <li> |
| <p>JPG</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>When used in a clip mask, bitmap graphics are treated as bitmap-filled rectangles. |
| As a result, the alpha channel of the source bitmap is not relevant when |
| it is part of a mask. The bitmap affects the mask in the same manner |
| as the solid filled rectangle.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f6410a1f61252d25bdd0-7fff_verapache"><a name="WSda78ed3a750d6b8f6410a1f61252d25bdd0-7fff_verapache"><!-- --></a> |
| <h3 class="topictitle3">FXG examples</h3> |
| |
| |
| <div> |
| <div class="p">The following FXG-based example displays bitmap images |
| in FXG:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/BitmapGraphicExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="BitmapGraphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:HGroup> |
| <!-- Single image, not resized, not repeated. --> |
| <comps:BitmapGraphicComp/> |
| |
| <!-- Single image, scaled to fit specified dimensions. --> |
| <comps:ScaledBitmapGraphicComp/> |
| |
| <!-- Repeated image to fit specified dimensions. --> |
| <comps:RepeatedBitmapGraphicComp/> |
| </s:HGroup> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following FXG file defines the BitmapGraphicComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/BitmapGraphicComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <BitmapImage |
| height="120" |
| width="120" |
| fillMode="clip" |
| source="@Embed('../../assets/AirIcon12x12.gif')"/> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">The following FXG file defines the ScaledBitmapGraphicComp FXG |
| component used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/ScaledBitmapGraphicComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <BitmapImage |
| source="@Embed('../../assets/AirIcon12x12.gif')" |
| height="120" |
| width="120" |
| fillMode="scale" |
| /> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">The following FXG file defines the RepeatedBitmapGraphicComp |
| FXG component used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/RepeatedBitmapGraphicComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <BitmapImage |
| source="@Embed('../../assets/AirIcon12x12.gif')" |
| width="120" |
| height="120" |
| fillMode="repeat"/> |
| </Graphic></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f6410a1f61252d25bdd0-8000_verapache"><a name="WSda78ed3a750d6b8f6410a1f61252d25bdd0-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">MXML graphics examples</h3> |
| |
| |
| <div> |
| <div class="p">The following MXML graphics example embeds an image and |
| displays it in three different ways, original size, resized, and |
| tiled:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/BitmapGraphicExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Bitmap MXML Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:HGroup> |
| <!-- Single image, not resized, not repeated. --> |
| <s:Graphic> |
| <s:BitmapImage |
| width="120" |
| height="120" |
| fillMode="clip" |
| source="@Embed('../assets/AirIcon12x12.gif')"/> |
| </s:Graphic> |
| |
| <!-- Single image, scaled to fit specified dimensions. --> |
| <s:Graphic> |
| <s:BitmapImage |
| source="@Embed('../assets/AirIcon12x12.gif')" |
| width="120" |
| height="120" |
| fillMode="scale" |
| /> |
| </s:Graphic> |
| |
| <!-- Repeated image to fit specified dimensions. --> |
| <s:Graphic> |
| <s:BitmapImage |
| source="@Embed('../assets/AirIcon12x12.gif')" |
| width="120" |
| height="120" |
| fillMode="repeat"/> |
| </s:Graphic> |
| </s:HGroup> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following MXML graphics example embeds the image once, and |
| reuses that embedded class for each of the BitmapImage instances. |
| It also uses the BitmapFillMode class's constants to define the |
| fill mode for each image.<pre class="codeblock">Ôªø<?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/BitmapGraphicExampleAS.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="initApp()"> |
| |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.graphics.BitmapFillMode; |
| |
| [Embed(source="../assets/AirIcon12x12.gif")] |
| [Bindable] |
| public var airLogo:Class; |
| |
| private function initApp():void { |
| clippedImage.fillMode = BitmapFillMode.CLIP; |
| repeatedImage.fillMode = BitmapFillMode.REPEAT; |
| scaledImage.fillMode = BitmapFillMode.SCALE; |
| } |
| ]]> |
| </fx:Script> |
| |
| <mx:Panel title="Bitmap MXML Graphic Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:HGroup> |
| <!-- Single image, not resized, not repeated. --> |
| <s:Graphic> |
| <s:BitmapImage id="clippedImage" |
| width="120" height="120" |
| source="{airLogo}"/> |
| </s:Graphic> |
| |
| <!-- Single image, scaled to fit specified dimensions. --> |
| <s:Graphic> |
| <s:BitmapImage id="scaledImage" |
| width="120" height="120" |
| source="{airLogo}"/> |
| </s:Graphic> |
| |
| <!-- Repeated image to fit specified dimensions. --> |
| <s:Graphic> |
| <s:BitmapImage id="repeatedImage" |
| width="120" height="120" |
| source="{airLogo}"/> |
| </s:Graphic> |
| </s:HGroup> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For more information on embedding images in MXML, see <a href="flx_embed_em.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fce_verapache">Embedding |
| assets</a>.</p> |
| |
| <p>For more information on using the BitmapImage class, see the <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WSda78ed3a750d6b8f-73a4773012528309923-8000_verapache"><a name="WSda78ed3a750d6b8f-73a4773012528309923-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">Effects in FXG and MXML graphics</h2> |
| |
| |
| <div> |
| <p>You can add effects such as masks, alpha, and blend modes |
| to graphic elements and groups.</p> |
| |
| <div class="p">Flash Player renders graphic elements and effects on those elements |
| in the following order: <ol> |
| <li> |
| <p>GraphicElement or Group</p> |
| |
| </li> |
| |
| <li> |
| <p>Alpha</p> |
| |
| </li> |
| |
| <li> |
| <p>Masks</p> |
| |
| </li> |
| |
| <li> |
| <p>Filters</p> |
| |
| </li> |
| |
| <li> |
| <p>Blend modes</p> |
| |
| </li> |
| |
| </ol> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS43301C87-6ED5-4c2d-9650-50742FED7CCD_verapache"><a name="WS43301C87-6ED5-4c2d-9650-50742FED7CCD_verapache"><!-- --></a> |
| <h3 class="topictitle3">Masks in FXG and MXML graphics</h3> |
| |
| |
| <div> |
| <p>You can add masks to any instance group element. A mask |
| defines the region in which the group's content is rendered. There |
| are two kinds of masking: clipping and alpha. </p> |
| |
| <p>In <em>clip masking</em>, only the actual path, shapes, and fills |
| defined by the mask are used to determine the effect on the source |
| content. Strokes and bitmap filters on the mask are ignored. Filled |
| regions in the mask are considered filled, and Flash Player renders |
| the source content. The type of fill is not relevant: solid color, gradient |
| fill, or bitmap fills in a mask all render the underlying source |
| content, regardless of the alpha values of the mask fill.</p> |
| |
| <p>In <em>alpha masking</em>, the opacity of each pixel in the source |
| content is multiplied by the opacity of the corresponding region |
| of the mask.</p> |
| |
| <p>To specify a mask, you add a mask as a child of a group or graphic |
| element. A mask must contain a single child tag, either a Group |
| instance or a locally-defined tag from the library. The mask defines |
| its child to be the clipping mask for its parent. </p> |
| |
| <p>You set the type of masking to use with the <samp class="codeph">maskType</samp> property |
| on the mask's parent graphical element. You can set the value of |
| this property to either <samp class="codeph">alpha</samp> or <samp class="codeph">clip</samp>.</p> |
| |
| <p>In FXG, if the <samp class="codeph"><mask></samp> tag is a child of |
| the root tag, then it must be the first tag. If there is a <samp class="codeph"><Library></samp> tag, |
| then it must be the second tag.</p> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f102cbeb51252d2c3476-7fff_verapache"><a name="WSda78ed3a750d6b8f102cbeb51252d2c3476-7fff_verapache"><!-- --></a> |
| <h4 class="topictitle4">FXG example</h4> |
| |
| |
| <div> |
| <div class="p">The following example uses FXG components to define masks:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SimpleMaskExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <s:VGroup gap="10" left="10" top="10"> |
| <s:RichText text="Ellipse.maskType = 'alpha'"/> |
| <comps:AlphaMaskComp/> |
| <s:RichText text="Ellipse.maskType = 'clip'"/> |
| <comps:ClipMaskComp/> |
| </s:VGroup> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following FXG file defines the AlphaMaskComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/AlphaMaskComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Ellipse width="400" height="200" maskType="alpha"> |
| <mask> |
| <Group> |
| <Rect width="100" height="100"> |
| <fill> |
| <SolidColor alpha="0.1"/> |
| </fill> |
| </Rect> |
| </Group> |
| </mask> |
| <fill> |
| <SolidColor color="#FF00FF"/> |
| </fill> |
| </Ellipse> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">The following FXG file defines the ClipMaskComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/ClipMaskComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Ellipse width="400" height="200" maskType="clip"> |
| <mask> |
| <Group> |
| <Rect width="100" height="100"> |
| <fill> |
| <SolidColor/> |
| </fill> |
| </Rect> |
| </Group> |
| </mask> |
| <fill> |
| <SolidColor color="#FF00FF"/> |
| </fill> |
| </Ellipse> |
| </Graphic></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f102cbeb51252d2c3476-8000_verapache"><a name="WSda78ed3a750d6b8f102cbeb51252d2c3476-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">MXML graphics example</h4> |
| |
| |
| <div> |
| <div class="p">The following MXML graphics example shows the two types |
| of masks, and their effect on the underlying graphic:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/SimpleMaskExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:VGroup gap="10" left="10" top="10"> |
| <s:RichText text="Ellipse.maskType = 'alpha'"/> |
| <s:Ellipse width="400" height="200" maskType="alpha"> |
| <s:mask> |
| <s:Group> |
| <s:Rect width="100" height="100"> |
| <s:fill> |
| <s:SolidColor alpha="0.1"/> |
| </s:fill> |
| </s:Rect> |
| </s:Group> |
| </s:mask> |
| <s:fill> |
| <s:SolidColor color="#FF00FF"/> |
| </s:fill> |
| </s:Ellipse> |
| |
| <s:RichText text="Ellipse.maskType = 'clip'"/> |
| <s:Ellipse width="400" height="200" maskType="clip"> |
| <s:mask> |
| <s:Group> |
| <s:Rect width="100" height="100"> |
| <s:fill> |
| <s:SolidColor/> |
| </s:fill> |
| </s:Rect> |
| </s:Group> |
| </s:mask> |
| <s:fill> |
| <s:SolidColor color="#FF00FF"/> |
| </s:fill> |
| </s:Ellipse> |
| |
| </s:VGroup> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f5ef2bd7012256e4b931-8000_verapache"><a name="WSda78ed3a750d6b8f5ef2bd7012256e4b931-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Filters in FXG and MXML graphics</h3> |
| |
| |
| <div> |
| <p>A filter effect consists of a series of graphic operations |
| applied to the rendered graphic of a grouping element and its children |
| before compositing it into the background. </p> |
| |
| <p>Filters can only be defined on shapes and group instances, not |
| group definitions. That means they can be defined on a Group tag |
| placed as an immediate child of a Graphic or other Group tag, or |
| as a child of a library object that references a defined group.</p> |
| |
| <p>To define a filter in FXG, add the <samp class="codeph"><filters></samp> child |
| tag to the Group or shape you want to apply the filter to. To define |
| a filter in MXML graphics, you add a <samp class="codeph"><s:filters></samp> tag |
| to the Group or shape you want to apply the filter to. The filters |
| are defined in the spark.filters package. </p> |
| |
| <p>The FXG <samp class="codeph"><filters></samp> child tag and the <samp class="codeph"><s:filters></samp> MXML |
| tag must contain one or more of the bitmap filter types.</p> |
| |
| <p>Flash Player applies filters to the rendered content of the tag |
| in the order that they appear in the document: the first filter |
| modifies the rendered content, the second filter modifies the output |
| of the first filter, and so on.</p> |
| |
| <div class="p">The following table lists the filters that are supported by FXG |
| and MXML graphics. It also lists the FXG attributes and children. |
| For the supported properties of the MXML graphics equivalents, see |
| the <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>. |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e7559"> |
| <p>FXG tag</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e7565"> |
| <p>Equivalent MXML graphics tag and ActionScript |
| class</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e7571"> |
| <p>FXG tag attributes</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e7577"> |
| <p>Children</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7559 "> |
| <p>BevelFilter</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7565 "> |
| <p><s:BevelFilter></p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/BevelFilter.html" target="_blank">spark.filters.BevelFilter</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7571 "> |
| <p>angle</p> |
| |
| <p>blurX</p> |
| |
| <p>blurY</p> |
| |
| <p>highlightAlpha</p> |
| |
| <p>highlightColor</p> |
| |
| <p>distance</p> |
| |
| <p>knockout</p> |
| |
| <p>quality</p> |
| |
| <p>shadowAlpha</p> |
| |
| <p>shadowColor</p> |
| |
| <p>strength</p> |
| |
| <p>type</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7577 "> |
| <p>None.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7559 "> |
| <p>BlurFilter</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7565 "> |
| <p><s:BlurFilter></p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/BlurFilter.html" target="_blank">spark.filters.BlurFilter</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7571 "> |
| <p>blurX</p> |
| |
| <p>blurY</p> |
| |
| <p>quality</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7577 "> |
| <p>None.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7559 "> |
| <p>ColorMatrixFilter</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7565 "> |
| <p><s:ColorMatrixFilter></p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/ColorMatrixFilter.html" target="_blank">spark.filters.ColorMatrixFilter</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7571 "> |
| <p>matrix</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7577 "> |
| <p>None.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7559 "> |
| <p>DropShadowFilter</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7565 "> |
| <p><s:DropShadowFilter></p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/DropShadowFilter.html" target="_blank">spark.filters.DropShadowFilter</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7571 "> |
| <p>alpha</p> |
| |
| <p>angle</p> |
| |
| <p>blurX</p> |
| |
| <p>blurY</p> |
| |
| <p>color</p> |
| |
| <p>distance</p> |
| |
| <p>inner</p> |
| |
| <p>hideObject</p> |
| |
| <p>knockout</p> |
| |
| <p>quality</p> |
| |
| <p>strength</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7577 "> |
| <p>None.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7559 "> |
| <p>GlowFilter</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7565 "> |
| <p><s:GlowFilter></p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/GlowFilter.html" target="_blank">spark.filters.GlowFilter</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7571 "> |
| <p>alpha</p> |
| |
| <p>blurX</p> |
| |
| <p>blurY</p> |
| |
| <p>color</p> |
| |
| <p>inner</p> |
| |
| <p>knockout</p> |
| |
| <p>quality</p> |
| |
| <p>strength</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7577 "> |
| <p>None.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7559 "> |
| <p>GradientGlowFilter</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7565 "> |
| <p><s:GradientGlowFilter></p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/GradientGlowFilter.html" target="_blank">spark.filters.GradientGlowFilter</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7571 "> |
| <p>angle</p> |
| |
| <p>blurX</p> |
| |
| <p>blurY</p> |
| |
| <p>distance</p> |
| |
| <p>inner</p> |
| |
| <p>knockout</p> |
| |
| <p>quality</p> |
| |
| <p>strength</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7577 "> |
| <p>GradientEntry</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7559 "> |
| <p>GradientBevelFilter</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7565 "> |
| <p><s:GradientBevelFilter></p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/GradientBevelFilter.html" target="_blank">spark.filters.GradientBevelFilter</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7571 "> |
| <p>angle</p> |
| |
| <p>blurX</p> |
| |
| <p>blurY</p> |
| |
| <p>distance</p> |
| |
| <p>knockout</p> |
| |
| <p>quality</p> |
| |
| <p>strength</p> |
| |
| <p>type</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e7577 "> |
| <p>GradientEntry</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| <p>MXML graphics also support an AnimateFilter effect, that lets |
| you animate a filter at runtime. Unlike effects that animate properties |
| of the target, the AnimateFilter effect animates properties of the |
| filter applied to the target. For more information, see <a href="flx_spark_effects_sf.html#WSFA4F2DE3-C45C-4b72-8C80-152849A6B635_verapache">Spark |
| filter effects</a>.</p> |
| |
| <p>In some cases, you can use the <a href="https://flex.apache.org/asdoc/spark/primitives/RectangularDropShadow.html" target="_blank">RectangularDropShadow</a> class |
| to apply a drop shadow to a graphic element, rather than using the |
| DropShadowFilter effect. It is more efficient, but limited in some |
| ways.</p> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f3011bca11255085112a-8000_verapache"><a name="WSda78ed3a750d6b8f3011bca11255085112a-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">FXG examples</h4> |
| |
| |
| <div> |
| <div class="p">The following FXG-based example applies a drop shadow filter |
| to a rectangle:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/FilteredRectExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Rectangle With DropShadowFilter Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:FilteredRectComp/> |
| </s:Group> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the FilteredRectComp FXG component |
| used in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/FilteredRectComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Group> |
| <filters> |
| <DropShadowFilter distance="12" alpha=".5" strength=".33"/> |
| </filters> |
| <Rect height="100" width="200"> |
| <stroke> |
| <SolidColorStroke color="#000000" weight="1"/> |
| </stroke> |
| <fill> |
| <SolidColor color="#FF0000"/> |
| </fill> |
| </Rect> |
| </Group> |
| </Graphic></pre> |
| |
| </div> |
| |
| <div class="p">You can also apply filters to the RichText element, as the following |
| example shows:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/FilteredTextExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="TextGraphic with BlurFilter Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <comps:TextFilterComp/> |
| </s:Group> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following file defines the TextFilterComp FXG component used |
| in the previous example:<pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/comps/TextFilterComp.fxg --> |
| <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> |
| <Group> |
| <filters> |
| <BlurFilter/> |
| </filters> |
| <RichText> |
| <content>Hello World!</content> |
| </RichText> |
| </Group> |
| </Graphic></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSda78ed3a750d6b8f3011bca11255085112a-7fff_verapache"><a name="WSda78ed3a750d6b8f3011bca11255085112a-7fff_verapache"><!-- --></a> |
| <h4 class="topictitle4">MXML graphics examples</h4> |
| |
| |
| <div> |
| <div class="p">The following MXML graphics example applies a drop shadow |
| filter to a rectangle:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- fxg/FilteredRectExampleMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*"> |
| |
| <mx:Panel title="Rectangle With DropShadowFilter MXML Graphics Example" |
| height="75%" width="75%" layout="horizontal" |
| paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> |
| |
| <s:Group> |
| <s:filters> |
| <s:DropShadowFilter distance="12" alpha=".5" strength=".33"/> |
| </s:filters> |
| <s:Rect height="100" width="200"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000" weight="1"/> |
| </s:stroke> |
| <s:fill> |
| <s:SolidColor color="0xFF0000"/> |
| </s:fill> |
| </s:Rect> |
| </s:Group> |
| </mx:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f45b56ddc125283156e2-8000_verapache"><a name="WSda78ed3a750d6b8f45b56ddc125283156e2-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Blend modes in FXG and MXML graphics</h3> |
| |
| |
| <div> |
| <p>Graphical elements can control how their content is composited |
| with the background by specifying a <samp class="codeph">blendMode</samp> attribute. |
| A grouping element with the <samp class="codeph">blendMode</samp> property |
| set to <samp class="codeph">normal</samp> acts only as a transformation on |
| the elements contained within. Its 2D transform, color transform, |
| and opacity are multiplied down into its child elements, where they |
| are combined with any local values to render the child element into |
| the current surface.</p> |
| |
| <p>In FXG, you specify a blend mode by setting the value of the <samp class="codeph">blendMode</samp> attribute |
| on the <samp class="codeph"><Group></samp> or graphic element (like <samp class="codeph"><Rect></samp>).</p> |
| |
| <p>In MXML graphics, you specify a blend mode by setting the value |
| of the <samp class="codeph">blendMode</samp> attribute on the <samp class="codeph"><s:Group></samp> tag |
| or graphic tag (like <samp class="codeph"><s:Rect></samp>). The possible |
| values are defined by the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BlendMode.html" target="_blank">flash.display.BlendMode</a> class.</p> |
| |
| <div class="p">The following table describes the available blend modes in FXG: |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e8110"> |
| <p>Blend mode</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d232334e8116"> |
| <p>Description</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">add</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Adds the values of the constituent colors |
| of the element to the colors of its background, applying a ceiling |
| of 0xFF. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">alpha</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Applies the alpha value of each pixel of |
| the element to the background. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">auto</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>For grouping elements, acts the same as |
| setting the blend mode to <samp class="codeph">normal</samp> when the alpha |
| of the group is 0 or 1, and the blend mode is <samp class="codeph">layer</samp> when |
| the alpha of the group is strictly between 0 and 1. For shape elements, |
| acts the same as setting the blend mode to <samp class="codeph">normal</samp>.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">color</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Creates a resulting color with the luminance |
| of the base color and the hue and saturation of the blend color. |
| This preserves the gray levels in the artwork and is useful for |
| coloring monochrome artwork and for tinting color artwork.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">colordodge</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Brightens the base color to reflect the |
| blend color. Blending with black produces no change.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">colorburn</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Darkens the base color to reflect the blend |
| color. Blending with white produces no change.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">darken</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Selects the darker of the constituent colors |
| of the element and the colors of the background (the colors with |
| the smaller values).</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">difference</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Compares the constituent colors of the element |
| with the colors of its background, and subtracts the darker of the values |
| of the two constituent colors from the lighter value.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">erase</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Erases the background based on the alpha |
| value of the element. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">exclusion</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Creates an effect similar to but lower in |
| contrast than the Difference mode. Blending with white inverts the |
| base-color components. Blending with black produces no change.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">hardlight</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Adjusts the color of each pixel based on |
| the darkness of the element. If the element is lighter than 50% |
| gray, the element and background colors are screened, which results |
| in a lighter color. If the element is darker than 50% gray, the colors |
| are multiplied, which results in a darker color. This setting is |
| commonly used for shading effects.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">hue</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Creates a resulting color with the luminance |
| and saturation of the base color and the hue of the blend color. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">invert</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Inverts the background. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">layer</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>The element content is pre-composed in a |
| temporary buffer before it is processed further. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">lighten</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Selects the lighter of the constituent colors |
| of the element and the color of the background (the colors with |
| the larger values). </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">luminosity</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Creates a resulting color with the hue and |
| saturation of the base color and the luminance of the blend color. |
| This mode creates an inverse effect from that of the Color mode.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">multiply</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Multiplies the values of the element's constituent |
| colors by the colors of the background color, and then normalizes by |
| dividing by 0xFF, resulting in darker colors.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">normal</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>The element content appears in front of |
| the background. Pixel values of the element override those of the |
| background. Where the element is transparent, the background is |
| visible.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">overlay</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Adjusts the color of each pixel based on |
| the darkness of the background. If the background is lighter than |
| 50% gray, the element and background colors are screened, which |
| results in a lighter color. If the background is darker than 50% |
| gray, the colors are multiplied, which results in a darker color. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p>saturation</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Creates a resulting color with the luminance |
| and hue of the base color and the saturation of the blend color. |
| Painting with this mode in an area with no saturation (gray) causes |
| no change. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">screen</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Multiplies the complement (inverse) of the |
| display object color by the complement of the background color, |
| resulting in a bleaching effect. This setting is commonly used for |
| highlights or to remove black areas of the display object.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">softlight</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Darkens or lightens the colors, depending |
| on the blend color. The effect is similar to shining a diffused |
| spotlight on the artwork.If the blend color (light source) is lighter |
| than 50% gray, the artwork is lightened, as if it were dodged. If the |
| blend color is darker than 50% gray, the artwork is darkened, as |
| if it were burned in. Painting with pure black or white produces |
| a distinctly darker or lighter area but does not result in pure |
| black or white. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8110 "> |
| <p> |
| <samp class="codeph">subtract</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d232334e8116 "> |
| <p>Subtracts the values of the constituent |
| colors in the element from the values of the background color, applying |
| a floor of 0. </p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| <p>You can also set the blend mode of a shape. </p> |
| |
| <p>For more information about using blend modes in FXG, see the <a href="https://sourceforge.net/adobe/flexsdk/wiki/FXG%202.0%20Specification/" target="_blank">FXG 2.0 specification</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSda78ed3a750d6b8f-6cd35b9c12528366210-8000_verapache"><a name="WSda78ed3a750d6b8f-6cd35b9c12528366210-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Color transformations in FXG and |
| MXML graphics</h3> |
| |
| |
| <div> |
| <p>Color transformations are a high performance way to modify |
| the color of a group or shape element. A color transform can be |
| used, for example, to tint a group, adjust its brightness, or modify |
| its opacity.</p> |
| |
| <p>Color transforms are applied to the rendering of a group or shape |
| element after any bitmap filters are applied; color transforms affect |
| the <em>output</em> of a filter (such as tinting the drop shadow). |
| They are applied before the group element is composited with its |
| background. Blend modes use the transformed color value when combining |
| the group with the background content.</p> |
| |
| <p>In FXG, you specify a color transformation by adding a <samp class="codeph"><transform></samp> tag |
| as a child tag of a group. The <samp class="codeph"><transform></samp> tag |
| must have a single child tag <samp class="codeph"><Transform></samp>. |
| The <samp class="codeph"><Transform></samp> tag can have a child tag <samp class="codeph"><colorTransform></samp>. |
| The <samp class="codeph"><colorTransform></samp> tag must have a single |
| child tag <samp class="codeph"><ColorTransform></samp>. The supported |
| attributes of the <samp class="codeph"><ColorTransform></samp> tag are |
| shown in <a href="flx_fxg_fx.html#WSda78ed3a750d6b8f-237979311225c0987ce-8000_verapache">Graphics |
| classes and elements</a>.</p> |
| |
| <p>In MXML graphics, you specify a color transformation with the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/ColorTransform.html" target="_blank">flash.geom.ColorTransform</a> class.</p> |
| |
| <p>Transformations are considered instanced group properties, and |
| can only be defined on shape elements and Groups whose parent tag |
| is another grouping element, or on instances of symbols. Specifically, |
| transformations cannot be defined on Groups whose parent tag is |
| a <samp class="codeph"><Definition></samp> tag, or on the topmost <samp class="codeph"><Graphic></samp> tag |
| of an FXG document.</p> |
| |
| <p>Transformations can be defined on an element in one of two ways: |
| through discrete transform attributes, or through a child Transformation |
| and Matrix element. It is illegal to specify both a child element |
| matrix transformation and one or more transform attributes on the |
| same Group instance.</p> |
| |
| <div class="p">Discrete transforms can be specified with the attributes <samp class="codeph">x</samp>,<samp class="codeph">y</samp>, <samp class="codeph">scaleX</samp>, <samp class="codeph">scaleY</samp>, and <samp class="codeph">rotation</samp>. |
| These attributes are combined to create a 2D transform matrix to |
| define the Group's coordinate space as follows:<ul> |
| <li> |
| <p>Scale |
| by <samp class="codeph">scaleX</samp>, <samp class="codeph">scaleY</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p>Rotate by <samp class="codeph">rotation</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p>Translate by <samp class="codeph">x</samp>, <samp class="codeph">y</samp> |
| </p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>For more information about using color transformations in FXG, |
| see the <a href="https://sourceforge.net/adobe/flexsdk/wiki/FXG%202.0%20Specification/" target="_blank">FXG 2.0 specification</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div> |
| <p><strong>Navigation</strong></p> |
| <p><a href="index.html">Using Flex</a> » <a href="flx_p5_enhancing_ui.html">Enhancing the user interface</a></p> |
| </div> |
| |
| <p>Adobe, Adobe Photoshop, Adobe Illustrator, Adobe Fireworks, Adobe Flash Platform and Adobe Flash Player are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.</p> |
| </div> |
| |
| |
| </body> |
| </html> |
