Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 


Flash Tutorials


Flash MX 2004 - Cascading Style Sheets

508 ActionScript
Flash Compatibility: MX 2004

Written by: Phil

Length: 2700 words

Assumed Knowledge : Some knowledge of HTML



Access: Members Bonus tutorial. For the full version you must: LOG ON To become a Member: Click here


For Free Tutorials: See listings: Free Tutorials




Cascading Style Sheets (CSS) are a welcome new feature in Flash MX 2004. CSS have made designing web sites much easier in standard HTML pages and now we can use all those advantages in Flash.



What are Cascading Style Sheets?


For those of you who may not be familiar with the use of Style Sheets in HTML, they are a powerful way of controlling the look of your text in a document. In HTML you can have one (or several) style sheets that control the look of the text throughout an entire web site. They are cascading because they cascade through-out the site. The way it works is that you store information on how fonts and paragraphs look in a central location. Each different type of text has its own name and identity. For example you would normally have a heading, sub-heading and body text. The sub-headings on this site are all blue. If I wished to change that, I do not need to go to each individual page and laboriously change the colour. Instead I simply change the style sheet and all the headings throughout the site will change.


This makes designing the look of a site so much easier. Updating the design of the site to give it a new - fresher look is also easy. What's more is that the design of different pages is always consistent. It does not matter who creates an individual page the font settings will always be consistent with the site style.


It is now possible to use the same Cascading Style Sheets to control not only the HTML pages but also the Flash movies at the same time. This means that the design of the Flash movie and the web page becomes far more integrated.



How it works in Flash - Hand coding


In web design programs like Dreamweaver there is a CSS panel. This makes creating new styles or changing existing one simply a few clicks of the mouse. In Flash Macromedia have decided not to give us a nice simple CSS panel. They obviously think us Flash Geek's like the nitty gritty of hand coding (If anyone from Macromedia it listening - us Flashy people would also like an easy life too !!).


Luckily hand coding a Style Sheet is not difficult and this tutorial will show you how to do it. There are a couple of different different ways to code Styles in Flash:

  1. Add global styles to HTML tags that are used in Flash such as: <p> or <il>
  2. Create style 'classes' that can be used as attributes in tags such as: <p> or <span>

    I will show you how to use both of these methods.



This is a members only bonus tutorial. For the full text you must: LOG ON

For a full list of Free tutorials click here




Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.