) or any text node you have started a text block and can not add a structural element into this text block. The text is then under the limitations of what you can render inside of the text field in the flash player. This also means that your structural elements are not under the control of text flow. If you can make this jump and understand what this means to the structure of your page there is nothing you can't make, you just have to understand how to make it. How to write CSS in Wrapper: In Wrapper the structure of CSS is simple. Node Styles: div { background-color: #FF9900; }
would make all div nodes orange. ID Styles: #idStyle { background-color: #0000FF; } would make any node with the id of idStyle blue. Class Styles: .classStyle { background-color: #FF0000; } would make any node with the class of classStyle red. All together: These styles can also combined by making nodes like this. What color would the element become? This would be read like this, overriding similar styles in order: First node styles, then class styles from left to right ( you can have more then one separated by spaces ), then id styles. Also keep in mind you should always have unique id's, dont have two nodes called "box1". You also can't use CSS drilling or commas to denote multiple accessors but this isn't needed if everything else is done like above. Wrapper also has style bubbling so if you do not define a property that is needed Wrapper will look to the nodes parent for the style. Wrapper CSS Properties: Inside of your styles you can use camelCase or the normal css names with dashes ( marginLeft, margin-left )) for all multi word properties. CSS Coordinates, Positioning: position: Position can be set to auto, relative, or absolute defining an elements coordinate systems. position: auto; is Wrapper's default, much like HTML will enable elements to flow relative to there size. position: relative; will switch to top, left/ x, y coordinate systems relative to the parent element. This is the flash player default. position: absolute; will switch to top, left/ x, y coordinate systems relative to the page. This is work in progress. left: Left is the same as "x" in a cartesian coordinate system defining the space from the left coordinates systems 0 point. It's default is 0. Left is also what you would use to center or position something relative to something else horizontally. There is no floats or text-align within Wrappers element positioning that will do the same currently (on a side note you can use text-align inside of a text element). left: 10px; In Wrapper you dont need to define px's but in standard CSS you do, so it's good practice. left: 10%; Percentages define the distance relative to the width of your parent. left: center; Defines the center point relative to the width of your parent. left: right; Right aligns an element to the parent containers width. top: Top is the same as "y" in a cartesian coordinate system defining the space from the top of the coordinates systems 0 point. It's default is 0. Top is also what you would use to center or position something relative to something else vertically. This works much better then in standard HTML/CSS top: 10px; In Wrapper you dont need to define px's but in standard CSS you do, so it's good practice. top: 10%; Percentages define the distance relative to the height of your parent. top: center; Defines the center point relative to the height of your parent. top: bottom; Bottom aligns an element to the parent containers height. width: Define the width of any block. The default is 100% width: 10px; width: 10%; height: Define the height of any block. The default is 100% height: 10px; height: 10%; margins: Margin is the space around or on the outside of an element. You can define each side individually, all at once or shorthand all in one line. Negative number will work but you will run into problems in some cases, try not to use negative numbers if you dont need to. margin: 8px 2px 8px 2px; This is short hand for defining values in this order: top, right, bottom, left. margin: 8px; Is defining all margin values to be the same, 8 pixels all around in this case. margin-top: 8px; Each value can also be defined independently like so. margin-right: 8px; margin-bottom: 8px; margin-left: 8px; padding: Padding is the space inside an element or amount of space padding the content of the element. You can define each side individually, all at once or shorthand all in one line. Negative number will work but you will run into problems in some cases, try not to use negative numbers if you dont need to. padding: 8px 2px 8px 2px; This is short hand for defining values in this order: top, right, bottom, left. padding: 8px; Is defining all padding values to be the same, 8 pixels all around in this case. padding-top: 8px; Each value can also be defined independently like so. padding-right: 8px; padding-bottom: 8px; padding-left: 8px; Display Options: rotation: Rotation isn't something you can normally use in standard CSS but you can in Wrapper. The thing you need to be careful about is when a child elements edge extends outside of that elements parent. Rotation is defined in degrees. rotation: 180; This would be upside-down. opacity: The alpha or opacity can be set on a clip with this property. The value is set with a percentage represented from 0 to 1. So 0.5 would be 50%. The default is 1. hidden: To change the visibility of an element set this to true or false. cache-as-bitmap: To take advantage of the speed of bitMap rendering you can try setting this to true. It will greatly speed things up that are small on your page but not recommended for larger container clips. Default is false. button-mode: To get the hand to show up when you rollover something you can set button-mode to true. The default is false. blend-mode: Like in Photoshop or Flash you can set blend modes, many really cool things can be made with this but it will slow things down considerably if to much of it is used. Here are the blend-mode options; add, alpha, darken, difference, erase, hardlight, invert, layer, lighten, multiply, normal, overlay, screen, subtract. filters: Bitmap Filters can be added to any element with JSON. These are the current options; bevel, blur, colorMatrix, dropShadow, and glow. Here are some examples of using them. filters: json('[{"type":"blur","blurX":8,"blurY":8,"quality":1}]'); filters: json('[{"type":"glow","color":0,"alpha":0.9,"blurX":8,"blurY":8,"strength":1,"quality":1,"inner":true }]'); filters: json('[{"type":"bevel","color":0,"alpha":0.9,"blurX":8,"blurY":8,"strength":1,"quality":1,"inner":true }]'); filters: json('["type":"bevel","distance":3,"angle":0,"highlightColor":16000000,"highlightAlpha":1,"shadowColor":0,"shadowAlpha":1,"blurX":3,"blurY":3,"strength":1,"quality":1,"fillType":"inner"}]'); filters: json('["type":"dropshadow","distance":3,"angle":0,"color":0,"alpha":1,"blurX":3,"blurY":3,"strength":1,"quality":1,"inner":true,"knockout":true}]'); json('{"type":"colormatrix", "matrix":[1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0]}'); Background Fills: Backgrounds or fills can be defined in normal CSS style or with javaScript object notation (JSON). The reason that you might want to write your fill in the more complex syntax is if you wanted to define a more complex fill like a radial gradient but all the other forms of fills can be defined like this as well. For more documentation on gradient fills see here and for basic fills see here. background: #FF3300; background-color: #FF3300; background-image: url("assets/images/cool.jpg"); fill: json('{ "type":"none" }'); fill: json('{ "type":"solid", "color":12345678, "alpha":1 }'); fill: json('{ "type":"gradient", "kind":"linear", "colors":[0,16000000], "alphas":[1,1], "ratios":[0,255], "w":100, "h":100, "r":30, "tx":0, "ty":0, "spread":"pad","interpolation":"RGB","focalpoint":1 }'); fill: json( { "type": "image", "url":"images/img.jpg" }'); Border Line Styles: Border-color will define a one point line around your element in the specified color, if you would like something more complex you can define a line object in JSON syntax. For more documentation on complex line styles see here. border-color: #FF3300; border: json( { "type":"none" } ); border: json( { "type":"solid", "weight":5, "color":16000000, "alpha":1 } ); border: json( { "type":"gradient", "weight":5, "kind":"linear", "colors":[0,16000000], "alphas":[1,1], "ratios":[0,255], "w":100, "h":100, "r":30, "tx":0, "ty":0, "spread":"pad","interpolation":"RGB","focalpoint":1 } ); Shapes: In standard CSS everything is a rectangle, this isn't true in Wrapper, you can have any number of shapes. If you define nothing of course you start with a rectangle but you can also define something as something else. The shapes that are based off of circles have there registration points in the center, because of this you might need to move an object to a different place to get it to work. You might also have positioning problems if your shape extends the outside of it's parent. Move the children in side of there parent and everything should be fine. Both none and box are just rectangles shape: json( { "type":"none" } ); shape: json( { "type":"box" } ); circle or oval shape: json( { "type":"ellipse", "w":20, "h":20 } ); rounded box, h(height) is optional it will take the value from w. This is width and height of the corner. shape: json( { "type":"rounded", "w":20, "h":20 } ); rounded box with all corners different shape: json( { "type":"roundedComplex", "tl":20, "tr":20, "br":20, "bl":20 } ); polygon, octagon, triangle, whatever, you define the points shape: json( { "type":"polygon", "angle":20, "points":20 } ); wedge or pie chart shape: json( { "type":"wedge", "startAngle":120, "arc":310, "radius":100, "yRadius":100 } ); burst shape: json( { "type":"burst", "angle":20, "points":20, "innerRadius":20, "outerRadius":20 } ); star shape: json( { "type":"star", "angle":20, "points":20, "innerRadius":20, "outerRadius":20 } ); Text Styles: color: Only hexadecimal color values are supported. Named colors (such as blue) are not supported. Colors are written in the following format: #FF0000. color: #FF9900; display: Supported values are inline, block, and none. display: block; font-file: Wrapper supports custom font loading, you can define a font to load once and have access to it in any style by defining your font-family. font-file: url("assets/fonts/MyCoolFont.swf"); font-family: A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. font-size: Define the point size of the font. font-style: Recognized values are normal and italic. font-weight: Recognized values are normal and bold. kerning: Recognized values are true and false. Kerning is supported for embedded fonts only. Certain fonts, such as Courier New, do not support kerning. The kerning property is only supported in SWF files created in Windows, not in SWF files created on the Macintosh. However, these SWF files can be played in non-Windows versions of Flash Player and the kerning still applies. letter-spacing: The amount of space that is uniformly distributed between characters. The value specifies the number of pixels that are added after each character. A negative value condenses the space between characters. line-height / leading: The amount of space that is uniformly distributed between lines. The value specifies the number of pixels that are added after each line. A negative value condenses the space between lines. padding-left: Just like the padding of elements. padding-right: Just like the padding of elements. text-align: Recognized values are left, center, right, and justify. text-decoration: Recognized values are none and underline. text-indent: How far the text is indented from the beginning of the line. multiline: Text boxes that should remain a single line should set multiline to false, the default is true. word-wrap: Text boxes that should do not break at the end of the line should set word-wrap to false, the default is true. anti-alias-type: To simplify the anti-alias rendering you can set anti-alias-type to normal, default is advanced. Normal is sometimes better for things that animate. selectable: To prevent the ability to select the text you can set selectable to false, default is true. display-as-password: Password fields normally hide the characters in the fields by obscuring them, use this flag to make this happen. condense-white: Events: In Wrapper's CSS you can also add events. This is a little different then normal and could be missed used but actually works great for things like rollover events, why write something like that over and over. In Wrapper you can put that kind of thing in a style. Events can be added in html or css and are defined inline with json or in an external JSON file. Read the JSON documentation for more information. More Information: For more information about the basics the W3C is a great place to start or reference for what all of this is based on. And a knowledge of how the flash player renders Display Objects and deals with depth is also a big help.