Flash marquee

_{door vinTage op 23-11-2006}

Flash marquee

Het bovenstaande voorbeeld leest de laatste 8 tutorials uit mijn database, je kan snelspoelen en terugspoelen.




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 ;-)

Al wat je moet doen is

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



Begin met het maken van je flash marquee
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 tekstvak, moet 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 een letter met de instanceNaam "tekst" en het font al dan niet 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 karakters 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".



Action script voor de 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.


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


Laatste puntjes op de i ztten
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.


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, moeten we dus bericht een waarde geven, dus verander je in de embed EN object tags de naam van je swf naar:


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 de tutorial over het communiceren tussen flash en mysql zodat je ook gegevens uit je database kan inladen in je marquee en zo bijvoorbeeld een shoutbox kunnen maken, of een marquee die tutorials uitleest ^^.



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, deze tutorial is dus het resultaat geworden.


Tot zover deze tutorial, hier heb ik het marquee.fla bestandje ter verduidelijking als je ergens vastloopt.
Happy flashing.