Flash Essential

Loading External CSS Into Your Site

May 3rd 2008
5 Comments
respond
trackback

In this tutorial I will show you how to use CSS as a sort of text-editor for your flash content. We'll load in our text from our actionscript using a String, so all we'll have on the stage is our background. Take a look at the Finished Example

Download:

Starter File

Finished File

Step 1

Ok the starter file contains a CSS file and a Fla file with a background of a book, badly made in Photoshop by myself I might add. So open up the fla file, go to the Actions layer and Press F9 to open up the Actions Panel. The first thing we are going to do is create a String that will contain the text we want to be displayed on the site.

var pageContent:String = "<H1>Tutorial 3</H1>\n\n<P>Started a big tutorial today but got really really annoyed with it, the navigation part to be exact so decided to start this load CSS tutorial instead.</P>";

Notice the html tags inside the text string? This is picked up by our CSS file allowing us to edit it.

Step 2

Next we'll create a text container to hold our content, we'll do this by creating a Sprite called txtContainer. We position the txtContainer on the stage by giving it X and Y values. Finally we use the addChild method, this adds the txtContainer to the stage

var txtContainer:Sprite = new Sprite();
  • txtContainer.x = 50;
  • txtContainer.y = 100;
  • addChild(txtContainer);
  • Code Explained

    1. Create a new sprite called textContainer, a sprite is basically a container.
    2. The x position of the textContainer on the stage
    3. the y position of the textContainer on the stage
    4. the addChild method adds the text container to the stage

    Step 3

    Now we'll create a TextField to go inside the txtContainer we have just created. So we create a new TextField called myTxt and then add some simple properties.

    1. var myTxt:TextField = new TextField();
    2. myTxt.width = 300;
    3. myTxt.wordWrap = true;
    4. myTxt.autoSize =TextFieldAutoSize.LEFT;
    5. txtContainer.addChild(myTxt);

    Code Explained

    1. New text field named myTxt
    2. Gives it a width of 300px
    3. Sets the wordWrap value to true meaning the text is word wrapped
    4. The text is treated as left-justified text
    5. Adds mytxt to the txtContainer

    Step 4

    Now we need to load our CSS, we do this by using a URLRequest.

    1. var cssLoader:URLLoader = new URLLoader();
    2. var cssRequest:URLRequest = new URLRequest("loadcss.css");
    3. cssLoader.addEventListener(Event.COMPLETE, cssLoaderComplete);
    4. cssLoader.load(cssRequest);

    Code Explained

    1. A new URLLoader called cssLoader
    2. A new URL Request call cssRequest, and inside this request we have the link to our CSS file.
    3. adds an event listener to our cssLoader(line1) that listens for when the event has completed. We'll give this the name cssLoaded.
    4. This loads the the cssRequest file

    Step 5

    Finally we add our event handler for cssLoaderComplete(Step 4 line 3).

    1. function cssLoaderComplete(evt:Event):void{
    2. var css:StyleSheet = new StyleSheet();
    3. css.parseCSS(URLLoader(evt.target).data);
    4. myTxt.styleSheet = css;
    5. myTxt.htmlText = pageContent;
    6. }

    Code Explained

    1. cssLoaded function which is an Event object, we type void because we aren't returning any values
    2. Creates a new stylesheet object.
    3. This css parse method fills our stylesheet object with the css we have loaded.
    4. This basically attaches our myTxt text field to our CSS content that we have loaded in.
    5. Make sure the text doesn't load until our stylesheet has been loaded.

    Conclusion

    So thats it. Pretty simple when you look at it. Obviously you can add more text fields and more html tags inside the page content String so you can format more text, but this is just a basic overview of how it works. I hope it helps.

    Tip: If you aren't sure what a line of code does (my explanations aren't the best) just highlight the word inside your actionscript panel and hit F1, and it will open up the help topic and give you a much better explanation of the code.


    This post is tagged , , ,



    Sponsors

    Explore Recent





    Monthly Archives



    Friends and Affiliates



    5 Comments

    1. Thanks.
      It is soo good.

    2. Brandon

      Thnx, great tutorial. Clear and useful

    3. deepika

      vry nice (:

    4. deepika

      tnx a ton!!!!! (;

    Incoming Links

    Leave a Reply

    auto battery discharge cold
    blake holman sioux falls sd
    ameican pitbull terrier
    character story elements powerpoints
    construct a wheelchair ramp
    paralysis.org
    bangladesh orphanages
    2000 lb bomb
    kristi rowley
    concrete acid etching supplies
    bossier city la real estate
    bedford indiana job openings
    cordura bags 2008 hayabusa
    hana kimi direct downloads
    07 tahoe lug pattern
    stroke-jobs.com
    2008 satilite map
    arctic zone lunch bag
    04 g35 body kit vader 3
    blackpool town fc
    reserved sugar
    animal control in evansville
    1927 roadster
    myspacelayouts.net
    cast costumes for hello dolly
    art for the heart fundraising
    treesforyou.org
    agape gaddis
    1080p 24 lcd monitor
    etymotic.com
    article about dpms lr 308
    27713 nc zip code
    boo creepy foot doctor
    convicted offenders listed in british columbia
    daybed covers toile
    job predict
    butas sa pinto silipan
    0 andreas test residence
    foxpro serial port fll
    dr natura and oldest man
    2000 mercury sable too lean
    frozen liquid longest
    2003 exotic spices calendar
    1 bedroom suite orlando
    1 2 inch vinyl micro blinds
    colleges that teach veterinarian toxicology
    dieter klimm germany
    3 cm dialated
    captain william fowler
    mmahq.com
    1st lady on my
    ancient mayan popol vuh
    pinky and the brain avatar
    claire pruitt doll patterns
    xbux.com
    av 2009 virus blocking malware bytes
    2002 mountain aire 4097 floorplan
    emeritus restraint policy
    arizona diamond backs fan club
    ftd florists oneida ny
    courier service pretoria rundu luanda
    insane clown posse downloads
    bello pr-25 review
    4 bedroom rental in yorba linda
    5 estacion flores de alquiler video
    americus vespucius
    ati modified driver vista 32
    adoption paralegal in toronto
    dish pvr 501 mod
    1800 daniel brothers in tn
    irony.com
    dominant bodybuilding females
    custody911.com
    adm buyout
    alex moulton mark 1
    hughesspeednet.com
    byron hinton
    shoehunting.com
    experiment on rl circuit
    1296 mhz power amplifier circuits
    7th level of hell survey
    constitutional class
    anemia and skin itch
    goofy gold download
    webshapes.org
    car jacks 3.5 ton costco
    neopostinc.com
    brookfield athletic shoe company inc
    cause transaction lagging bank reconciliation
    fire at mann gulch
    ambridge duck hunting
    application coding wikipedia
    12 1 2 womens cowboy boot
    cci cb short
    before the hammer strikes the nail
    interpretation of low oxygen saturation
    autosearch.com
    outrigger condos
    carl erickson pole vault camps
    matchmaker pittsburgh pa
    cheats gba pokemon emerald
    and eminem forgot about dre
    howtomaketime.com
    andorra property
    1939 indian scout timing specs
    diet plans for chronic indigestion
    applied kinesiology for hiatal hernia
    read socrates in love online free
    nutone-home.com
    air europa seating arrangements
    8 configuration sacral fracture
    assfucked to tears
    alto sax 575 allegro
    geological features in the appalachians
    bill clinton comment obama
    addicting games territory war
    irc mythos cx slick 700x42c
    msn messenger signup
    kissed his feet bet
    apache2 debian etch amd64
    bnvillage.co.uk
    do horses have treat preferences
    10mb network
    cantv.net
    noel chance racehorse winners at warrick
    cmu waterproofing techniques
    brenda adams bebo
    1967 ford shelby mustang pics
    charlotte witt
    13th century mens clothing france
    embassyhomepage.com
    blood draining out nasal passages
    sprinklerfitters669.org
    stephan a rhodes
    cemeteries in holyoke ma
    gallstone purge
    emma tryon
    amboy washington mptels
    branson ultra sonic cleaner
    anti-tank obstacle
    chris mcgee
    auto dealers mit
    belle meade united methodist
    hotel regent paris
    smdailyjournal.com
    1995 ford f150 sputters on acceleration
    dan sommer in omaha nebraska
    academy of our lady chicago il
    accrual method 12 month membership
    1941 luger manufacturing plants
    curry mussels
    construction-business-forms.com
    gym clothing catalogues in south africa
    american portrait painter a jacobsen
    hotels in patagonia
    but seriously folks joe walsh
    address of lima polo club
    william butler yeats home address
    another instance of voice platform genesys
    bonney m stille nacht
    former french canadian provinces
    creole echoes excerpt
    seekingxxx.net
    gods goddesses
    100 reason stop smoking
    all-about-style.com
    andre d sparks
    map of the westward expansion
    examples of meta search engines
    aluminum sliding glass door lock
    brattleboro vermont nakedness
    2008 norton update problems
    betty joyce harrison
    panasonic.net
    7th grade science dothan al
    clearwatertribune.com
    age of consent in nc
    nineteenth century cultural stereotypes
    smt contract manufacturing at elgin il
    20mn.com
    avian immune
    arresting or reversing foot neuropathy
    citalopram actavis pirist v l ke
    netinfo.bg
    1929 cadillac imperial
    mikesradioworld.com
    anatomical mold
    12 days of christmas gift ideas
    asx-200bx lan
    gaydadsandyoungersons.com
    isabella fiore let love reign purse
    allow interactive logon to workstations
    computer sent received meter
    amicroe ready boost usb drive
    augustinespiritualgoods.com
    basilica di bologna
    cj fitzgerald
    chicks in sturgis
    buenos aires art supplies
    password protect folder sme server
    australia port fairy accomodation
    chantal hensley
    ariston dishwasher
    2009 liturgical year
    soundproofwindows.com
    absent cells on pap
    gold rush miners in california 1852
    content for newsletters
    academy countdown leader
    craaigslist.com
    air race reno 2007
    pdfsoftwarecenter.com
    desert crepes
    battlefield 1942 home page
    assignments on employee made by organisations
    a taste of thai instant meals
    custom stainless products etobicoke ontario
    a w d hammond ltd website
    frcp exemptions
    albums released in 1989
    2wire router problem wii
    amanda marie gould
    greek writing utensils
    child abuse coppell texas
    snappysoftware.com
    jillian barberi
    keeler hydraulics
    install fedora on mac powerbook g4
    exoticagirls.com
    cakewalk music creator crossfader
    cats beta carotene treat tylenol toxicity
    norterrashopping.com
    american culinary wagner ware wholesale
    belinda jensen autobiography
    ben hogan golf tips
    concave and convex
    antelope complex fires in the west
    alan dresner and natalie
    bluetooth setting cingular t616
    adolf hitlars childhood
    endorsement for your friend
    artificial intelligence checkers
    albright on ot phoenicians
    label stuck in tde laminator
    aimpoint style reflex sight
    brook skye video
    contemporary perspectives in writing
    acmediy.com
    franconia sami fakhouri
    custom shower curtains with longer lengths
    sacramentorealestatevoice.com
    express scribe dss problems
    air travel carry on rules
    abraham lincoln association
    bilingual baptist minister indianapolis in
    atomic absorption spectrometry free book welz
    bacon club t-shirt at journeys
    1700 hemlock oxnard
    a little pain tabs nana
    40th birthday rhymes
    ahadees.com
    brookside equestrian centre kitchener
    adanal roofing langley bc
    h clinton supporters
    burning crusade
    1760 59th avenue sacramento ca 95822
    atkins beach diet south vs
    bible xml
    elder david pennington
    1903 legare circular sock machine
    asparagus baked wine
    1911 22 rimfire conversions
    191 2nd avenue cochrane ontario
    agatha christie novels online
    american pledge
    bellcad.org
    circut city rebates
    crater lake green outcropping
    condos townhouses new bern nc
    download stairway to heaven
    bed robe
    adobe epic app cannot be launched
    11x17 4c process preliminary poster examples
    daytime emmy award talk show
    burley samba
    char-broil rotisserie
    adoro las es liebe sein
    homosexuality umass amherst
    100 cc suzuki sv
    birch carrol cinema townsville
    1973 firebird radiator support
    sandia memory gardens
    probeindustries.com
    fumani dialect
    nacelink.com
    avalon title ltd mclean virginia
    farwestfamilyservices.com
    antwerp cut diamonds
    dino van eeckhaut cairo appointed sofitel
    dosha.org
    2008 sport touring
    bleeding doge truck breaks
    johnnycrosslin.com
    24071 desert drive florence az 85232
    bioclusive overlay
    areas effected in 2007-2012
    geography hottest part of the world
    aikenregional.com
    antarctic centre new zealand shop
    coupons for amazon purchases
    add affiliate link program
    alicia keys samsonite man
    saltlaketribune.com
    accessory lady
    aboutlilacs.com
    banner insurance rockville md
    elvi fashion stockists uk
    federal govt
    nalco.com
    ankle fracture lower extremity
    beloved sisters mc
    alisha lanier
    cindy ziegler re max of wasilla
    32 degrees mesa watch
    beat the clickbank competitors
    audi a4 fuse changing
    adjusting bernina 1001 bobbin tension
    australian olympics bike riders
    cheap las vagas limos
    pulmicortrespules.com
    1611 bosch power tool parts breakdown
    12 ci engine hp
    articles about human resource managment
    cal state university pomona anthropology
    buses into motorhomes
    international tae kwan do karate federation
    ana and muscle antibody
    dav pilkey biogrpahy
    12 week old boxer puppy photos
    5 interesting facts about scallops
    darnell crisconi
    foxfire banjo
    4gazebos.com
    research terrestrial orchids
    cloudster.com
    allergic reaction to dust
    hickoryortho.com
    lexis nexus herb
    milky cat torrent
    comprehensive-kidney-facts.com
    b strep symptoms
    07 ford mustang gt
    waterfrontbluesfest.com
    antique wardrobe trunk pricing
    banana fana fo fana
    856 edi invoice