flash marquee

Flash marquee

Iedereen kent ze wel van die scrollende teksten die voor de helft van de tijd niet werken met IE of anders niet met FF of Opera.
Dat probleem is op te lossen door er een zelf te maken met flash :)
Dit heeft als extra voordeel nog eens dat je zelf het lettertype kan kiezen wat je mooi vind ;-)

• de swf de juiste afmetingen geven.
• één movieclip aanmaken.
• een mooi lettertype nemen.
• een stukje actionScript plaatsen

En we kunnen dit resultaat behalen.

Ook zouden we nog met flash 8 filters kunnen werken om het allemaal nog wat mooier te maken, maar er zijn nog browsers die hier geen geschikte plugin voor hebben.

Voor degene die wel flash 8 hebben een voorbeeldje

Okay, nu we gezien hebben hoe een marquee eruit kan zien gaan we er zelf een maken.
Allereerst is onze afmeting belangrijk, want we hebben natuurlijk niet de hele html tot onze beschikking.
Als je deze tutorial wilt gebruiken in een complete flashwebsite, dan maken de afmetingen niets uit en zul je zelf wel weten hoe groot je alles moet maken.

Stel je hebt in je html een ruimte van 800*20 pixels ter beschikking voor een marquee, dan maken we ons werkblad ook zo groot.
Om dit in te stellen klik je gewoon een keer op je werkblad (niet op een object) en klik dan ctrl+f3, stel hier de juiste afmetingen in.

Nu ons document de juiste afmeting heeft gaan we een nieuwe movieclip maken, klik ctrl+f8 en selecteer uit het popup menu de optie "movieclip".
Geef de mc een naam, en klik op "OK" nu is er een nieuw werkblad geopend.
Neem nu de texttool en maak een dynamisch tekstvak, kies een mooi lettertype en geef het tekstveldje de instancenaam "tekst".
De afmeting van het tekstveldje maakt niks uit want die krijgt later een stukje actionscript mee waardoor hij de juiste lengte aanneemt, de breedte van een lettertje is dus al voldoende.

De x en y positie van het tekstvakmoet wel precies op 0*0 staan ! Als je een niet standaart font gekozen hebt dan MOET je het font ook embedden. We hebben nu dus een tekstvak ter breedte van één letter met de instanceNaam "tekst" en het font ge-embed.

note: niet alle fonts hebben caps of speciale characters, bekijk dit eerst want embedden van fonts vergroot de filesize aanziendelijk, je kan er dus voor kiezen om alleen de normale en caps en nummers te embedden, als je ook html wilt tonen (ja dat kan ook dadelijk) dan moet je wel zeker weten dat de characters voor html wel ge-embed zijn.

Nu is onze mc klaar, ga weer naar de mainScene, open de library (ctrl+f11) en sleep die mc op de main scene, de positie maakt niets uit, want in mn actionscript positioneer ik dat automatisch.
We geven nu die movieclip op de scene de instanceNaam "marquee".

Hoppa, je designwerk is klaar, tijd voor een beetje actionScript.
Klik op de (enige) keyFrame in de tijdlijn en daarna open je het AS panel (F9).
Copier onderstaande AS en plak het in het AS panel.
De code is i.m.o voldoende becommentariseerd, dus ga ik hier niet verder op in.

//toestaan van html (niet elk lettertype gaat hiermee accoord een beetje testen met je font dus)
marquee.tekst.autoSize = true; //het textvak uitrekken zodat ale tekst erin past
marquee.tekst.html = true; //ons textvak geschikt maken om html te tonen (beperkt)

//positie bepalen van de clip met het tekstvak
marquee._y = 0; //de clip met het textveld bovenin onze swf zetten
marquee._x = Stage.width; //de clip aan het einde van de swf zeten

//tussen de quotes komt onze "boodschap"
marquee.tekst.htmlText = "je text komt hier";

//de breedte van ons tekstveld bekijken
breedte = marquee.tekst.textWidth; //textWidth bepaald de lengte van het tekstveld



//zorgen dat alles "beweegt" en herbegint als de tekst voorbj is.
onEnterFrame = function () {
        marquee._x--; //snelheid van de tekst,
        if (marquee._x+breedte <= 0) {
                marquee._x = Stage.width;
        }
};

Zo we zijn al klaar ... :-)
Publish je movie (ctrl+enter) en bekijk je creatie.

Als je vind dat de tekst te snel of te langzaam beweegt, dan kan je dit op 2 manieren aanpassen.

1: verhoog of verlaag de FPS (frames per second), dit kan je instellen in de document properties.
2: via het script, als je wilt dat het sneller gaat verander je "marquee._x--;" naar "marquee._x-=2;" waarbij je het getal naar keuze kan invullen.

Zo, nu heb je je flash marquee

Je hebt nu nog de mogelijkheid om de tekst van je swf van buitenaf in te stellen, op deze manier hoef je niet telkens de fla te openen als je een andere tekst wilt zetten.
Er zijn verschillende manieren om extern een variabel naar flash te overhevelen, maar omdat deze tutorial daar niet over gaat zal ik dat maar even de meest simpele manier erbij geven.

Verander deze regel actionScript naar: marquee.tekst.htmlText = bericht;
(geen quotes gebruiken dus en "bericht" is onze variable)

In de html waar de sfw moet komen verander je in de embed EN object tags de naam van je swf naar:
<param name="movie" value="marquee.swf?bericht=hier je bericht " />
<embed src="marquee.swf?bericht=hier je bericht" quality=".....etc ></embed>

Je flash zal nu tijdens het previewen "undefined" tonen, maar zodra je hem via de html zelf bekijkt zal het zijn zoals je het had gewilt.
Je zou ook gebruik kunnen maken van deze tutorial.

Deze tutorial kwam tot stand doordat ik voor iemand een mp3 speler moest maken en daar tekst in wilde tonen, toen ik erachter kwam dat ik in de knoop kwam met de lengte van de tekst die "de klant zelf in wilde voeren" moest ik daar iets op verzinnen, dit is dus het resultaat geworden.
Op deze pagina kan je die mp3 speler vinden
(opent in een popup, dus deze keer niet blokkeren (de muziek hebben ze blijkbaar nog niet erbij gedaan))

Tot zover deze tutorial, hier heb ik de .fla bestandjes ter verduidelijking als je ergens vastloopt.
Happy flashing

Mocht deze tutorial nog niet helemaal voldoen aan je verwachting, bezoek dan mijn website voor een eventuele geupdate tutorial. mvg vinTage