een extern tekstbestand in Flash importeren

Een extern tekstbestand in Flash importeren biedt de mogelijkheid voor klanten om zonder tussenkomst van de ontwerper en het programma Flash de website inhoudelijk aan te passen. Ook kunnen dynamisch gewijzigde teksten getoond worden.

de tekst maken

  1. Windows-gebruikers kunnen Notepad openen en de tekst gaan maken. Apple-gebruikers kunnen hier klikken om een leeg tekstbestand te downloaden, waarna ze in Dreamwaever daar tekst in kunnen voeren. Deze tekst is gemaakt met de UTF-8 bestandsindeling, zodat ook bijzondere tekens eenvoudig kunnen worden ingevoerd en correct weergegeven gaan worden op elk computer-platvorm.
    We gaan in één tekst-bestand 3 teksten invoeren, die in Flash op en aparte plaats worden ingevoerd. Flash werkt met variabelen, die met een & van elkaar worden gescheiden. De variabelen hebben een naam en worden direct (geen spaties dus) door een = gevolgd.
    Als voorbeeld de volgende tekst:
    titel=Mijn laatste vakantie&auteur=Theo den Blanken&inhoud=Ik ben de laatste vakantie naar 
    <b>Doldersum</b> geweest. Een van de rustigste plaatsen in Nederland. Je bent omgeven door 
    de bossen en heidvelden van het Drents-Friese woud. Er is geen doorgaand verkeer.
    De dichtstbijzijnde winkel vindt je 4 kilometer verderop in Vledder voor de dagelijkse
    levensmiddelen, maar verder kun je in alle rust fietsen en wandelen.
    
    De lokatie is voor echte rustzoekers. Er is géén vakantiepark met attracties voor kinderen
    maar een eenvoudige vakantiebungalow van een particulier biedt je een noodzakelijk eenvoudig
    onderkomen. 
    De wandelingen in het Drents-Friese Wold zijn zo bijzonder omdat je zelfs als je langs een 
    uitgezette wandelroute loopt, je urenlang geen ander wandelaars kunt tegenkomen.
    De fietser is zoals in heel Drenthe verwend met vele fietsroutes, dei vrijliggen van 
    autowegen. Je kunt langs karakteristieke Drentse plaatsen zoals Vledder en Diever,
    maar ook Friese plaatsen zoals Boyl en Oldeberkoop zijn een tochtje waard.
    Daarnaast zijn ook de Boswachterij Smilde en Aekinger Zand goed bereikbaar.
    Eigenlijk ligt Doldersum tussen het Drents-Friese Wold en de Boswachterij Smilde in.
      
  2. Let hierbij op de beide &-tekens en de variabelen-namen title, inhoud en auteur; deze worden straks in Flash gebruikt.
    Sla je tekst op (indeling UTF-8) als bijvoorbeeld mijntekst.txt in dezelfde map waar ook de swf gaat komen.
  3. Start Flash en teken (met het rechthoekgereedschap) 3 kaders, waarin respectievelijk de titel, de naam van de auteur en de tekstinhoud komen.
  4. Zet het tekstgereedschap aan. Zet in de Propertybalk de teksteigenschap van Static Text om naar Dynamic Text. Kies voor de titel de gewenste tekstkleur en lettertype en fontgrootte. Het tekstkader is Single Line zodat er maar een regel tekst komt. Trek het vak voor de titel en vul in de Propertybalk de instance-naam titelvak in.
    Mocht je een font gebruiken, dat niet alkgemeen gangbaar is, kun je onder de knop Character... aangeven dat het ingevoegd moet worden in de Falsh-movie. Dit maakt de Falsh-movie wel echter erg veel groter.
  5. Doe dit ook voor auteur en geef het de instance-naam auteurvak. Je kunt aan beide tekstvakken zien dat ze anders zijn dan we gewend zijn. Ze worden met een stippellijn weergegeven.
  6. Doe dit ook voor de inhoud. Dit tekstvak is echter Multiline en je geeft ook aan dat er tekst met HTML_opmaak in komt doordat je in de Porpertybalk op de knop met de HTML-tags aanklikt. De instance-naam van dit vak is inhoudvak.
    dynamic tekst met HTML-opmaak
  7. Maak een laag acties aan en open het actievenster. In het eerste frame van de laag komen de volgende acties:
    mijnLaadTekst = new LoadVars();
    mijnLaadTekst.load("mijntekst.txt");
    mijnLaadTekst.onLoad = function(ok) {
    	if(ok) {
    		titelvak.text = this.titel;
    		auteurvak.text = this.auteur;
    		inhoudvak.htmlText = this.inhoud;
    	}
    }
    
    Hierbij wordt in de eerste regel een variable aangemaakt;
    in de tweede tegel wordt het tekstbestand geladen;
    en als dat gelukt is...
    wordt de tekst achter titel= in het tekstvak titelvak geladen;
    de tekst achter &auteur= in het tesktvak auteurvak geladen; en de tekst achter &inhoud= in het tekstvak inhoudvak geladen. Merk op dat daar de code iets anders is om aan te geven dat er html-opmaak is.
  8. Sla het Flash-bestand op en test de movie.
  9. Als de titel niet past, kun je de titel omzetten naar Multiline of andere typografische oplossingen bedenken.
  10. een scrollbalk in het tekstvak

    Het is te verwachten dat een tekstvak te klein is als je teksten door de klant laat aanleveren. Om dat op te lossen kun je een scroll-balk maken. Flash heeft er een standaard een als component meegegeven.

  11. Zorg ervoor dat er te veel tekst in het externe bestand staat, zodat het niet past in het inhoudvak.
  12. Maak het tekstvak inhoud een beetje smaller, dat op het kader aan de rechterkant ook nog ruimte is voor een scrollbalk.
  13. Als het venster Components niet zichtbaar is, roep je deze op met Window >> Components. Sleep de scollbar daaruit tegen de rechterkant van het tekstvak inhoud.
  14. Sla de movie op en test hem. De scrollbalk werkt direct naar behoren. Een sterk punt van de Flash-components. Er is geen letter scripting aan te pas gekomen.
  15. de scrollbalk veranderen

    de scrollbalk is dan wel eenvoudig geplaatst, de vormgeving is nogal saai. Die kunen we gelukking aanpassen, al is er per Flash-project maar één vormgeving voor alle voorkomende scrollbalken mogelijk.

  16. Open de bibliotheek. Daar is nu een mapje Flash UI Components te vinden. Klik deze open. Daar zie de scroolbar met daaronder de map Component Skins die je open klikt. Klik ook de map FScrollBar Skins open en daar vindt je vele moviclips. Die kun je naar eigen inzicht aanpassen. Zowel qua vorm als qua grootte en kleur. Er zijn moviclips voor de achtergrond van de schuifbalk: fsb_ScrollTrack en de omhoog-pijl: fsb_UpArrow de omhoogpijl ingedrukt: fsb_UpArrow_press en een weergave van de omhoogpijl als er geen scrolling nodig is fsb_UpArrow_disabled de hele litanie ook voor de benedenpijl en de bovenkant - het midden - en - de onderkant -van het scroll-handvat.
  17. Als voorbeeld de achtergrond van de schuifbalk: ik heb deze groen en smal gemaakt. Klik dubbel op fsb_ScrollTrack. Maak een nieuwe laag aan boven de oude balk. Teken een dunne groene balk over de oude heen wel even hoog. Zorg ervoor dat de middens samenvallen. Verwijder de laag met de oude tekening. Als je terugkeert naar je Flash-movie zie je geen verschil, maar wel als je de movie test.
  18. Verwijder de movieclips fsb_UpArrow_disabled en fsb_DownArrow_disabled zodat je ze niet ziet als er weining tekst is. Je ziet dan overigens nog wel de achtergrond van de schuifbalk, maar aangezien die dun is valt dat nog wel mee.
  19. Pas je schuifbalk zo aan dat hij vergelijkbaar is met die in dit voorbeeld.

terug