+ Reply to Thread
Results 1 to 6 of 6

Thread: Formatting with CSS in ActionScript

  1. #1
    Code Slinger chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5's Avatar
    Join Date
    Mar 2008
    Posts
    7,023
    Blog Entries
    1

    Formatting with CSS in ActionScript

    CSS and Action Script

    Earlier we looked at the text format object as a way of doing simple formatting. What if you need more control? This is where you can use CSS to get a lot more flexilibity over your formatting.

    This is where it helps to have a basic understanding of HTML as well. You can use html in your flash program by setting the htmlText property instead of the text property.


    For this tutorial, we are going to create a text field in code and add it to the stage. Use this code:

    Code:
    var txtCC:TextField = new TextField();
    txtCC.selectable = false;
    stage.addChild(txtCC);
    This should all make more sense now, and it really isn't complicated. The text field will appear at the top left of the stage.


    htmlText Property

    The generic HTML for a link is:

    Code:
    <a href="path">text</a>
    We would replace path with a URL that we want to link to. If you are familar with HTML you know that there are other properties such as target that you can use. Those you can use in AS as well.

    Code:
    txtCC.htmlText = '<a href="http://www.codecall.net">Code Call</a>';
    When you run it, you will see codecall and if you move the mouse over the control the cursor will change. One thing to note is that there is no default settings in the Flash Player unlike in the web browser.

    CSS for the link

    When the user doesn't have the mouse over the link we want the text to be underlined and red. When the user moves the mouse over the link, we don't want the text to be underlined and the color will become blue.

    Just the CSS for this is:

    Code:
    a {
    	text-decoration: underline;
    	color: red;
    }
    
    a:hover {
    	text-decoration: none;
    	color: blue;
    }
    If I was making an HTML page, that is what I would use. We might have to use hexadecimal in Action Script though. The :hover is a pseudo class which allows you to format things when the mouse moves over the element. In this case when the user hovers over a link.

    Using a style sheet object

    The first thing we have to do is create a new style sheet object.

    Code:
    var styles:StyleSheet = new StyleSheet();
    Now, we can set the styles for the style sheet and then apply them to the label (actually a text field).

    Example:

    Code:
    styles.setStyle("a",{color:"Red"});
    The setStyle takes two parameters the HTML element to add the property to and the property to set. The properties to set should appear in brace brackets. The property is not in quotations and followed by a colon. Then in quotes is the value of the property.

    If you are setting more than one property, they should be seperated by colons like this:

    Code:
    styles.setStyle("a",{color:"Red",backgroundColor: "green"});
    Notice that backgroundColor is in camel case. In the web browser, we would write it like this:

    Code:
    background-color
    However, in flash this doesn't work. You must use camel case.

    The styles that we want to set for the link are:

    Code:
    styles.setStyle("a",{color: "#FF0033",textDecoration: "underline"});
    You have to use hexadecimal for the colors. Applying the styles to the text field is as easy as this:

    Code:
    txtCC.styleSheet = styles;

    Mouse Overs

    Now, we are going to set the styles for a:hover. This isn't anything different.

    The code is:

    Code:
    styles.setStyle("a:hover",{color: "#6666FF", textDecoration: "none"});
    Add thatt line just about the txtCC.styleSheet line. Then run the program again.

    Calling a function on click

    You can also link to a function from a link. To demonstrate this we are going to add a second text field.

    Code:
    var txtLink:TextField = new TextField();
    txtLink.x = 100;
    txtLink.y = 50;
    txtLink.htmlText = '<a href="event:output">Output</a>';
    
    stage.addChild(txtLink);
    We are going to apply the same style sheet above to this text field.

    Code:
    txtLink.styleSheet = styles;
    Now, we can set up an event listener to listen for link clicks and a callback function to respond.

    First the listener:

    Code:
    txtLink.addEventListener(TextEvent.LINK,output);
    When the Link is clicked, we will call the output function which will count how many times you clicked the link. At the top of the file create a variable nCount = 0.

    Code:
    function output(e:TextEvent):void {
    	nCount++;
    	txtLink.htmlText = '<a href="event:output">' + String(nCount) + '</a>';
    }
    Everytime that you click the event, that function will be called and you will get a running total of how many times the link was clicked.

    External Style Sheets

    Later, we will assess if it is possible to use external CSS files to save us time. The beauty of this is, you could change the design without recompiling your flash movie.

    You can view the result here: CSS.swf.

  2. #2
    Administrator Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan's Avatar
    Join Date
    Nov 2005
    Location
    Hendersonville, NC
    Posts
    24,556
    Blog Entries
    97

    Re: Formatting with CSS in ActionScript

    This is starting to get good. Are you building up to the bouncing smilie?
    I like the attachment demo/sample at the end. +rep

  3. #3
    Code Slinger chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5's Avatar
    Join Date
    Mar 2008
    Posts
    7,023
    Blog Entries
    1

    Re: Formatting with CSS in ActionScript

    Yea, I'm getting there.

  4. #4
    Guru MathX has a spectacular aura about MathX has a spectacular aura about MathX's Avatar
    Join Date
    Oct 2008
    Location
    Kosovo
    Age
    19
    Posts
    4,006

    Re: Formatting with CSS in ActionScript

    Cool

  5. #5
    Super Moderator WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther's Avatar
    Join Date
    Jul 2006
    Age
    36
    Posts
    11,680
    Blog Entries
    57

    Re: Formatting with CSS in ActionScript

    If you're not careful, you'll become our flash expert. +rep
    CodeCall Blog | CodeCall Wiki | Shareware
    Programming is a branch of mathematics.
    My CodeCall Blog | My Personal Blog

  6. #6
    Code Slinger chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5's Avatar
    Join Date
    Mar 2008
    Posts
    7,023
    Blog Entries
    1

    Re: Formatting with CSS in ActionScript

    Quote Originally Posted by WingedPanther View Post
    If you're not careful, you'll become our flash expert. +rep
    Not a bad thing.

+ Reply to Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Similar Threads

  1. AS: Formatting Text Fields
    By chili5 in forum Tutorials
    Replies: 3
    Last Post: 08-29-2009, 09:10 AM
  2. Formatting Strings
    By chili5 in forum Java Tutorials
    Replies: 4
    Last Post: 03-24-2009, 05:18 PM
  3. HTML Basic Formatting
    By clookid in forum Tutorials
    Replies: 14
    Last Post: 03-06-2007, 03:10 PM
  4. Creating an analog clock with ActionScript
    By AfTriX in forum Tutorials
    Replies: 2
    Last Post: 01-07-2007, 02:19 AM
  5. Actionscript in web design
    By DevilsCharm in forum Website Design
    Replies: 2
    Last Post: 07-13-2006, 12:12 PM

Bookmarks

Bookmarks

     
        Algorithms and Data Structures

        Java tutorials

        Algorithms Forum

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts