Well, suppose you have created a website, with many different textboxes, on many different frames and/or loaded movies, and then your employer decides that they don't like the font you've used, or that they want it to be a different colour. Previously this would have meant going back through the entire site and manually changing all the text boxes to reflect their wishes. A tedious job indeed. Well, not any more?
For the purpose of this tutorial we can say that Cascading Style Sheets allow you to control the look and layout of elements from within one core file*.
We're going to cover most of what you need to know in order to create an external style sheet and apply it to a Flash movie. If you are unfamiliar with CSS I recommend that you follow some of the great tutorials that are already out there on the web, at places such as http://www.westciv.com/style_master/academy/hands_on_tutorial/However, be aware that only certain style-options are supported in Flash, so if you only plan to use CSS in the context of Flash, then you don't need to delve too deeply into these HTML-based tutorials. You'll also be glad to know that Style sheets are not rocket science, and you'll be able to pick up the gist of what's going on quite easily?
There are three ways to create styles:
- redefining built-in HTML formatting tags supported by flash (such as
and
- )
- create style "classes" that can be applied to specific HTML elements using the
or tag's class attribute
- define new tags
If those bullet points didn't make a whole lot of sense to you, don't worry, we'll be covering how to redefine HTML tags and create style "classes" in just a moment, and as for defining new tags, you'll find that information in the accompanying tutorial I have written: CSS/HTML/XML in Flash.
So let's start by looking at the CSS properties that the flash player does support. You don't need to memorize the information in the following tables, but you can come back to them at a later stage for reference.
The main thing to note, if you later plan to create your CSS file in Flash using ActionScript, is that each ActionScript property name is derived from the corresponding CSS property name, but the hyphen is omitted and the subsequent character is capitalized (often referred to as camel notation), but as we plan to create an external sheet, this is currently of no concern to us.
Let's assume we want to create a style. The style will consist of one or more properties. For instance, we may want our style to have a color property of blue, and a size property of 11 pixels. If so, then our code would look something like this:
font-size: 11px;
color: #0000FF;
Okay, so what we need is a way of telling our textbox to format a portion of our text according to these rules; but how do we tell our textbox what text to select? Well, CSS properties are no good on their own. We need to use them in conjunction with HTML tags, and luckily for us, Flash MX 2004 supports more HTML tags than its predecessor...
Creating Our Own Cascading Style Sheet For Use With Flash
Open up your favourite text editor. Fingers at the ready, but don't start typing just yet. We're going to cover those two ways of defining our styles.
CSS styles can be assigned to every instance of a built-in HTML tag that appears in a text field. So, for example we can define a style for the p (paragraph) tag that will mean all text enclosed within any p tag in your textbox will share the same font, font-size and colour.
Using a color property of blue, and a size property of 11 pixels (as we mentioned above), and an additional "font-family" property, our CSS definition for the p tag would look like this:
p {
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: #0000FF;
}
Notice how the above example looks like a function. In essence that's what it is. Every time a "
" tag is encountered, the code inside the curly brackets would 'run' and be applied to all the text within the opening and closing p tags on the page.
Using our previous example, if I were to write
Hello World
the text inside the p tags would be formatted according to the properties we specified above and the properties native to the p tag itself. Therefore it would appear as a paragraph, but would also be blue, 11px and written using the Arial, Helvetica, sans-serif font-family.We can also create style "classes" that can be applied to specific HTML elements using the
or tag's class attribute (don't get CSS classes confused with classes in actionscript2 - as they're not the same thing).
CSS classes start with a period, followed by a class name. We can choose our own suitable name like so:
.alert {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px; color:
#FF0000;
}
Before I show you an example of how this can be applied, we should quickly cover the purpose of the tag. Simply put, span is a tag that doesn't do anything in itself (unlike the p tag which, on its own, would apply some formatting to the text inside it), but can be used in conjunction with a CSS class to format text, and this will become apparent in the following examples:
To use a span tag we need to learn about the class attribute?
Infact, both p and span tags can accept an attribute called 'class'. First I'll show you how to use it in conjunction with the span tag:
Goodbye cruel world!
Notice that we didn't write (the period is only needed when we first define the class).
As I said, span in itself does nothing, but now we have given it a class-attribute of 'alert' and so any text inside our opening and closing tags will be 14px, red and use the Arial, Helvetica, sans-serif font-family.
Finally, a demonstration of using class attributes with the p tag is needed:
Two pints of lager and a packet of crisps please
What would happen in this scenario is that the text would be formatted as a paragraph, and according to the attributes specified in the CSS paragraph-definition, but then it would inherit the properties of our alert class. Because these are exactly the same properties as defined for p (but with different values) the alert class's properties would over-ride those defined for the p tag. Therefore our text would be 14px, red, use the Arial, Helvetica, sans-serif font-family, and be formatted as a paragraph.
Okay enough of that. Let's create our style sheet
We're going to create an external Cascading Style Sheet for use in Flash. This involves three main stages as listed below:
- Create a style sheet object
- Add styles to the style sheet object
- Assign the style sheet object to a text field that contains XML- or HTML-formatted text
Note: When you assign a style sheet object to a TextField object, the following changes occur to the text field's normal behaviour: The text field becomes read-only and cannot be edited by the user.The setTextFormat() and replaceSel() methods of the TextField class no longer function with the text field. The only way to change the field is by altering the text field's text or htmlText properties, or by changing the text field's associated variable. Creating the stylesheetMost of what follows is now only a slight variation of the example in the actionscript dictionaryFor those of you who are avoiding the dictionary due to past experiences, I would suggest you to take a look. The example for this was quite clear and concise (so, if it ain't broken? as the saying goes):
Copy and paste the styles below in to your text editor and save it as "example.css":
p {
color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px; display: inline;
}
a:link
{ color: #FF00FF;
text-decoration: underline;
}
a:hover{
color: #999999;
text-decoration: none;
}
.headline {
color: #0000FF;
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;
}
That means twoof you should be dead already. Those who werentactually holding their genitals were squeezing thighs together.
BalasHapusfree adult gay stories
stories of first time beastiality
free gang rape stories
sexy girl stories
male submission stories nifty
That means twoof you should be dead already. Those who werentactually holding their genitals were squeezing thighs together.