Welkom!

Deel je kennis met anderen in deze Flashgemeenschap!
Gebruikersnaam:
Wachtwoord:
Wachtwoord opslaan?
Wachtwoord vergeten?

TUTORIALS / XML

Teksten laden uit XML en opmaken met CSS
443 downloads, 45520 keer gelezen
(May 6, 2004)
Waardering: 94 keer gestemd 
 4.4 van de 5
Eigenschappen
Flash Versie  MX04 Pro
Moeilijkheidsgraad  n/a

Formaat:   73 KB

Eindelijk kan het dan (voor zover ik weet ten minste)! In Flash MX 2004 kun je een tekstvlak maken, die de tekst uit een extern .xml-bestand haalt en opmaakt met een .css-bestand . Het is erg eenvoudig om te maken en het neemt weinig tijd in beslag. Dus weinig tijd voor veel resultaat.
  Untitled Document

Teksten opmaken met XML en CSS

Eindelijk kan het dan (voor zover ik weet ten minste). In Flash MX 2004 kun je een tekstvlak maken, die de tekst uit een extern .xml-bestand haalt en met een .css-bestand maak je de tekst op. Het is erg eenvoudig om te maken. Het is in vier stappen gebeurd:

Stap 1

Selecteer in Flash MX 2004 de component “TextArea”. Met de Propertie Inspector kun je zelf bepalen hoe groot je hem maakt. Voor de lol vullen we in 300px bij 300px. Bij “Instance Name” vul je in: myText. Zorg ervoor dat bij de Parameters op de Propertie Inspector alles op “true” staat.

Stap 2

Selecteer in de Timeline het frame, waarin je de TextArea heb geplaatst. Druk op de F9-knop om het Actions-panel te open. Knip en plak de volgende ActionScript:

_global.styles.TextArea.setStyle("backgroundColor", "false");
//init TextArea component
myText.html = true;
myText.wordWrap = true;
myText.multiline = true;
myText.label.condenseWhite=true;
//load css
myTextStyle = new TextField.StyleSheet();
myTextStyle.load("myText.css");
myText.styleSheet = myTextStyle;
//load in XML
myTextContent = new XML();
myTextContent.ignoreWhite = true;
myTextContent.load("myText.xml");
myTextContent.onLoad = function(success)
{
if(success)
{
myText.text = myTextContent;
}
}

Stap 3

In Flash MX 2004 hebben we nu het nodige gedaan. Als we kijken naar de bovenstaande code, dan valt op dat deze drie delen bevat. In het eerste deel geef je met ActionScript instellingen aan het tekstvak. In het tweede deel importeer je het .css-bestand en in het derde deel laad je de tekst uit het .xml-bestand. Nu gaan we eerst een .xml-bestand maken.

Open Kladblok of een ander programma om .html- of .xml-bestanden mee te maken (bijvoorbeeld Dreamweaver) en knip en plak daarin het volgende:

<voorbeeld>
<header>Tekst inladen met XML en opmaken met CSS</header>
<text>Het is erg eenvoudig om teksten in Flash MX 2004 op te maken. Verwerk de teksten in een .xml-bestand en bepaal vaste tags. Deze tags kun je namelijk opmaken met een .css-bestand. Snap je er niets van stuur dan een mailtje naar <a href="mailto:info@esperienza.nl">info@esperienza.nl</a>!</text>
</voorbeeld>

Sla het document op als: myText.xml

Stap 4

Nu gaan we het .css-bestand maken. Open wederom Kladblok (of een ander programma, zie stap 3) en knip en plak de volgende code:

text {
font-family: Trebuchet MS;
font-size: 13px;
color: #000000;
display: block;
}
header {
font-family: Verdana;
font-size: 14px;
font-weight: bold;
color: #666666;
display: block;
}
a {
font-size: 12px;
color: #CC0099;
font-weight: bold;
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: none;
color: #CC0099;
}
a:hover {
text-decoration: underline;
color: #0099FC;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}

Sla het document op als: myText.css

Stap 5

Zorg ervoor dat je alle bestanden in deze map opslaat! Sla nu ook je Flash-document op en test de film. Als je het goed gedaan hebt, zie je het volgende resultaat:

Let er op dat als je met de muisknop over het e-mailadres gaat, dat deze een roll-over effect heeft! Mocht je besluiten een ander lettertype of –kleur te nemen, dan hoef je maar een aanpassing te verrichten in het .css-bestand en klaar. Wil je de tekst aanpassen, dan verander je het .xml-bestand. Als de tekst groter wordt dat eigenlijk in het vakje past, dan komt er automatisch een scrollbar.

Op www.budogym.nl en www.esperienza.nl kun je zien hoe ik gebruik gemaakt hebt van de combinatie Flash/XML/CSS. Graag een rating!

Geef hier je waardering: Matig 1 2 3 4 5 Geweldig!
  Waardering:
meer tekst boxen frans kuylenburg (07 February 2010, 18:53)
nogmaals Frans, ahum, als ik op een frame twee tekst boxen maak dat werken ze niet allebij, mag ik een suggestie vragen hoe ik dan te werk moet gaan?
script programma frans kuylenburg (07 February 2010, 16:18)
Geweldig, het werkt de eerste keer meteen!!! Ik gebruik het voor een script prgramma, nu kan ik veel eenvoudiger teksten onderhouden! Het werkt oom met flash cs4! Vriendelijk dank, Frans
xml flash pagina werkt niet in dreamweaver jeroen kooij (09 April 2008, 12:54)

Hoi,

Ik heb de tutorial gevolgd en deze werkt prima in flash. Echter als ik vervolgens het flashbestand in dreamweaver importeer wordt de xml tekst niet weergegeven.

wat doe ik verkeerd?


borderstyle marja de vlieg (08 September 2007, 04:02)

Beste Jaap van Duyn,

Dit helpt me heel goed, maar ik loop er wel tegenaan dat de tekst component een borderstyle heeft...

tot nu toe lukt het me niet die te verwijderen? weet je misschien hoe dat moet?

 


scrollen leen de smedt (08 December 2006, 21:57)
Hallo, bedankt voor de tutorial! Het werkt schitterend. Kan iemand me uitleggen hoe ik de dynamische text dan kan horizontaal scrollen? Of heb ik hier overgekene..? Bedankt alvast, Leen
1-5 | 6-10 | 11-15 | 16-20 | 21-25 | 26-30 | 31-33