Using CSS
Stylesheets are in modular just normal assets. So to load an external css file add a css to the assets like this:
<?xml version="1.0" encoding="UTF-8"?> <ModularApplication> <Page> <Assets> <!-- include our css file. --> <CSS path="css/flash.css" id="myCSS" /> <Library path="swf/ProjectLibrary.swf" /> </Assets> <Modules> <Module class="modules.Image" url="imgs/logo.png" /> </Modules> </Page> </ModularApplication>
To apply stylesheets modular provides some functions that simplify the usage of stylesheets a lot:
Modular.applyStyleSheet
This is the most commonly used method that directly applies a stylesheet on a textfield:
Modular.applyStyleSheet( "myCSS", textField, "h1" );
The first parameter "myCSS" is the id that specifies the css file that should be used.
The second parameter is the textfield itself where the stylesheet should be applied.
The last parameter defines which style should be set as the defaultTextFormat of the textfield. In the example above the textfield will use the "h1" css style definition for any text that has no tags or style informations.
When you dont set a defaultTextFormat style ( third parameter ) modular tries to set the * style as default. This way you can set a global TextFormat that is used for all styled TextFields. Furthermore your style definitions can extend from the * style like:
* {
font-family: Helvetica;
font-size: 12px;
color:#000000;
}
h1 {
font-size: 36px;
}
var textField:TextField = new TextField(); textField.text = "<h1>Title</h1>Normal text"; Modular.applyStyleSheet( "myCSS", textField );
All the text is using the same font-family but the text between the h1 tag has a bigger font-size.
Modular.getStyle
This method simply returns a specific style from a stylesheet:
Modular.getStyle( "myCSS", "h1" );
This returns the "h1" style from the stylesheet asset with id "myCSS" as a TextFormat. The style automatically extends from the * style definition if there is any.
Modular.getStyleSheet
Modular.getStyleSheet( "myCSS" );
This returns the whole stylesheet with the id "myCSS".
When setting the font-family with runtime shared fonts use the font class name displayed in the debugger rather than using the font name like: "Lucida Grande". modular is working with font class names because the font names can change from one Operating System to another when compiling. This ensures that everything works fine even when you compile on a different System.
Comments