[ Pobierz całość w formacie PDF ]
.emphasis {color: #666666;font-style: italic;}Within HTML text you assign to a text field, you can apply these styles to and tags,as shown below.This is really exciting!Styling built-in HTML tagsFlash Player supports a subset of HTML tags.(For more information, see  Using HTML-formatted text on page 147.) You can assign a CSS style to every instance of a built-in HTMLtag that appears in a text field.For example, the following defines a style for the built-inHTML tag.All instances of that tag will be styled in the manner specified by the style rule.p {font-family: Arial,Helvetica,sans-serif;font-size: 12px;display: inline;}The following table shows which built-in HTML tags can be styled and how each style is applied:Style name How the style is appliedpAffects all tags.bodyAffects all tags.The p style, if specified, takes precedence over the bodystyle.liAffects all bullet tags.aAffects all anchor tags.a:linkAffects all anchor tags.This style is applied after any a style.a:hoverApplied to an anchor tag when the mouse is hovering over the link.This style isapplied after any a and a:link style.Once the mouse moves off the link, the a:hover style is removed from the link.a:activeApplied to an anchor tag when the user clicks the link.This style is applied afterany a and a:link style.Once the mouse button is released, the a:active style is removed from the link.Formatting text with Cascading Style Sheets 143An example of using styles with HTMLThis section presents an example of using styles with HTML tags.You ll create a style sheet thatstyles some built-in tags and defines some style classes.You ll then apply that style sheet to aTextField object that contains HTML-formatted text.To format HTML with a style sheet, do the following:1 In your preferred text editor, create a file.2 Add the following style sheet definition to the file:p {color: #000000;font-family: Arial,Helvetica,sans-serif;font-size: 12px;display: inline;}a:link {color: #FF0000;}a:hover{text-decoration: underline;}.headline {color: #000000;font-family: Arial,Helvetica,sans-serif;font-size: 18px;font-weight: bold;display: block;}.byline {color: #666600;font-style: italic;font-weight: bold;display: inline;}This style sheet defines styles for two built-in HTML tags ( and ) that will be applied toall instances of those tags.It also defines two style classes (.headline and.byline) that willbe applied to specific paragraphs and text spans.3 Save the file as html_styles.css.4 In Flash, create a FLA file.5 Using the Text tool, create a text field approximately 400 pixels wide and 300 pixels high.6 Open the Property inspector (Window > Properties) and select the text field.7 In the Property inspector, select Dynamic Text from the Text Type menu, select Multiline fromthe Line Type menu, select the Render Text as HTML option, and type news_txt in theInstance Name text box.8 Select the first frame in Layer 1 in the Timeline (Window > Timeline).144 Chapter 8: Working with Text9 Open the Actions panel (Window > Development Panels > Actions) and add the following codeto the Actions panel:// Create a new style sheet objectvar style_sheet = new TextField.StyleSheet();// Location of CSS file that defines stylesvar css_url = "html_styles.css";// Create some HTML text to displayvar storyText:String = "Flash Player now supportsCascading Style Sheets!San Francisco, CA--Macromedia Inc.announced today a new version of Flash Player thatsupports Cascading Style Sheet (CSS) text styles.For more information,visit the Macromedia Flash web site.";// Load CSS file and define onLoad handler:style_sheet.load(css_url);style_sheet.onLoad = function(ok) {if (ok) {// If the style sheet loaded without error,// then assign it to the text object,// and assign the HTML text to the text field.news_txt.styleSheet = style_sheet;news_txt.text = storyText;}};Note: For simplicity, the HTML text being styled is  hard-coded into the script; in a real-worldapplication you ll probably want to load the text from an external file.For information on loadingexternal data, see Chapter 10,  Working with External Data, on page 177.10 Save the file as news_html.fla to the same directory that contains the CSS file youcreated previously.11 Run the movie (Control > Test Movie) to see the styles applied to the HTMLtext automatically.Using styles to define new tagsIf you define a new style in a style sheet, that style can be used as a tag, just as you would use abuilt-in HTML tag.For example, if a style sheet defines a CSS style named sectionHeading,you can use as an element in any text field associated with the style sheet.This feature lets you assign arbitrary XML-formatted text directly to a text field, so that the textwill be automatically formatted using the rules in the style sheet.For example, the following style sheet creates the new styles sectionHeading, mainBody,and emphasized [ Pobierz całość w formacie PDF ]