Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now I'll take a look at working with CSS and Flash. If you are not familiar with the term CSS, CSS stands for Cascading StyleSheets. You can use CSS in Flash to control the styling of text in a dynamic text field. Using CSS to style your text fields gives you a lot more power and control than what you get using the text format class. Lets take a look at how it works. If you're following along, I'm in 04_CSS.fla in the Chapter 03 folder in the Exercise Files folder.
This file has an actions layer and a text field layer. This file is the same file we've been working with throughout this chapter. Let's go to the first keyframe in the actions layer and open the Actions panel by pressing Option+F9 on the Mac, or F9 on the PC. And here's the code that loads our external.txt file. And what we're going to do is use the ActionScript version of CSS to style the link inside of our text document. Remember from the last movie we created an html link instead of the external text file. Here we'll use CSS to customize the look of that link.
Below the two variables you created, on line 3 in your code, create a new variable called Style. Set the data type of that variable to SyleSheet, with a capital S for Style, and a capital S for Sheet. Set that equal to a new instance of StyleSheet class. The StyleSheet class is the way that you work with CSS in ActionScript. Now there are two different ways you can work with CSS in ActionScript. One way is to use ActionScript code to write the CSS.
Another way is to load an external CSS file into Flash. For this movie we'll use ActionScript to create our CSS. In the next movie we'll look at loading an external CSS file. Let's go to the next line and type style.setStyle, with a capital S. In the parentheses we're going to pass in two different parameters. The first parameter is the name of the style and in ActionScript in the code hinting you can see that it's a String notice the arrows to the left side of the code hinting area.
If I click the right arrow, I can see that the first parameter that I need to pass and is called styleName and the value for that is a String. This refers to the CSS selector that we want to modify, and so in quotes, I'm going to pass in a. And this is telling Flash that we're going to specify the look of the "a" tag. You may remember from the last movie that we created an "a" tag, to create an html link in our text file. So the Style that we're setting now will control the look of that link.
After the close quote type a comma and the next parameters you can see in the code hinting is styleObject, and the datatype of that is an object. Now if you're unfamiliar with the object data type, or the object class, the object class is what's called a dynamic class. That means that you can create custom properties on any instance of the object class. If the object class is very unfamiliar to you, you may want to watch the ActionScript 3.0 Essential Training or ActionScript 3.0 Beyond the Basics titles.
You also might want to watch the ActionScript 3.0 For Game Development title. Those three titles discuss working with objects in a lot more detail. Here I'm going to create an object shorthand. In the same way that you can create an array shorthand using square brackets, you can create an object shorthand using curly braces. So after the comma I'm going to type a space and open and close curly braces. Inside the curly braces I'm going to make up a property for my object. The property is going to be called color, all lowercase.
To set a value for a property for an object, when you're working with shorthand notation, type a colon after the property name. So I have color: and then I type the value that color. The value of the color is going to be a string, so I'm going to type open and close quotes. And inside the quotes, I'm going to type a # and then a hexadecimal color value. I'm going to type two capital CCs and then four zeros. This will give me a dark red color. After the curly brace, I'm going to type ); So that line of code we just wrote sets a Style specified by the set style method of the StyleSheet class.
The Style is for the a tag, or the anchor tag and the information about the Style is contained in the object which we created using shorthand notation, which is done with curly braces. Inside the curly braces is a dynamic property called color. We used a colon to specify the value and the value of color is a String that's a hexadecimal color starting with a #. Now all we have to do is associate the Style variable, or our StyleSheet, with our text field on the stage. We'll do that once the text is actually in the text field.
At the bottom of the textLoaded function, below where we set the value of external_txt.htmlText, type external_txt.styleSheet = style; So this associates the text field on the stage, which is external_txt with the StyleSheet. That's what the StyleSheet property does. It connect a text field to a CSS style.
The Style that we're connecting to external_txt is our Style variable that we created, which is an instance of the StyleSheet class and holds all the information about the Style we're applying to our text. Now let's test the movie. We should see that the link that we created is red. Command+Return on the Mac. Ctrl+Enter on the PC. And there you can see that the link is red. Let's close the Preview window Now you may have some more questions about what Styles can you set with CSS in Flash. Let's talk about that for a second.
The best way to know every Style that you can set is through Flash Help. What I'm going to do, is I'm going to double-click StyleSheet on line three in my code, and then I'm going to press F1 on my keyboard. This will open up Flash Help and show us information about the StyleSheet class. In Flash Help, scroll down. You'll find a table. The table has CSS properties with their ActionScript property names. Use the ActionScript property names when you create your CSS in Flash, which we did in this movie.
So here are a list of the properties that you can modify. On the right side of the table are Usage and supported values. There Flash will tell you what acceptable values you can pass in. I'm going to close the Help window now. And there's a look at creating and applying CSS with ActionScript.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.