1 Data uitwisselen met Flash: the easiest way Kris Merckx Macromedia Flash-bestanden kunnen opgenomen worden in HTML. Een Flashfilm (*.swf) kan tekst...
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Data uitwisselen met Flash: the easiest way Kris Merckx – www.ardeco.be
Macromedia Flash-bestanden kunnen opgenomen worden in HTML. Een Flashfilm (*.swf) kan tekst, afbeeldingen, film, geluid en vectorbeelden bevatten. We kunnen het gerust een "container"formaat noemen. Flash kan bovendien informatie ontvangen en uitlezen van databanken, XML-bestanden en pure tekstbestanden. Ook kan Flash dynamisch andere bestanden inladen (jpg, gif, png, flv, mp3, swf) d.w.z. externe bestanden kunnen in de "container" worden ingelezen. Veel van deze functies zijn pas mogelijk door gebruik te maken van de in Flash geïntegreerde scriptingtaal Actionscript. Wie thuis is in Javascript zal Actionscript snel onder de knie krijgen. In deze les bouwen we een quasi lege Flashfilm die dynamisch gevuld wordt met tekst en afbeeldingen. Hiermee bedoelen we dat we het originele Flashbestand niet meer hoeven te openen in Flash om de tekst en afbeelding aan te passen. Een paar aanpassingen in de HTMLcode volstaan om de Flashfilm met andere gegevens te vullen. Stap 1: Maak een nieuw flashbestand. Stap 2: Modify > Document
Pagina 1 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 3: Geef de flashfilm de volgende afmetingen: 760 / 100
Pagina 2 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 4: - Klik op het “A”-symbool in de werkbalk. - Maak met de muis een slepende beweging over het werkvlak (stage) om een tekstveld aan te maken. - Typ de tekst “Welkom”.
Pagina 3 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Onderaan kan je bij “properties” het lettertype, de kleur... enz instellen. Stap 5: Om ervoor te zorgen dat het gekozen lettertype op elke computer correct wordt weergegeven, de tekst wordt immers “variabel” gemaakt (hij kan van buiten de film gewijzigd worden), kan Flash het volledige lettertype mee inpakken (embedden) in de Flashfilm. Tot Flash MX 2004: character > all characters Flash 8: embed > basic latin
Stap 6: - Verander in de propertieswerkbalk “static text” naar “dynamic text”. - In het invoerveld “var” typ je “vartxt”. Pagina 4 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Het tekstveld kan nu dynamisch gevuld worden met gegevens. D.w.z. dat we de standaardtekst “Welkom” kunnen vervangen door een andere tekst, bijvoorbeeld tekst uit een extern bestand.
Stap 7: Insert > New symbol
Pagina 5 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 8: We geven het nieuwe symbool een naam: “frame”. We kiezen voor “Movie Clip”
Stap 9: - Boven de “stage” zie je nu “Scene 1” staan met daarachter “frame”. Dit betekent dat we niet langer in de stage (op het podium) staan. We werken nu aan een voorwerp (we zitten m.a.w. in het atelier voor decorbouw). - In het gereedschapspalet kiezen we nu voor het symbool met het vierkant. Daarmee teken je een willekeurige rechthoek. De kleur speelt geen rol, de grootte evenmin.
Pagina 6 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 10: We selecteren de getekende rechthoek. Hiervoor kies je in het gereedschapspalet de “pijl” en we maken met de muis een sleepbeweging rond de getekende rechthoek.
Pagina 7 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 11:
Pagina 8 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Onderaan stellen we de properties van de rechthoek in op: - W: 760 - H: 100 Hierdoor wordt de rechthoek even groot als de flashfilm. - X: 0 - Y: 0 De Movie Clip heeft een nulpositie. Door de X- en de Y-positie van de rechthoek eveneens op “0” te zetten, krijgt de rechthoek de eigenschappen van de Movie Clip. Stap 12: Boven de “stage” klikken we nu weer op “Scene 1”. Je merkt dat je weer op het “podium” staat. De Movie Clip met de naam frame zit in de bibliotheek. We openen nu de “library”.
Pagina 9 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 13: En inderdaad, in de library zit de Movie Clip met de naam frame.
Pagina 10 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 14: In de tijdlijn veranderen we de naam “layer 1” in “tekst” door op de naam te klikken en hem te wijzigen.
Stap 15: We voegen nog een laag toe en we geven die laag de naam “foto”.
Pagina 11 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 16: - Blokkeer de laag “tekst” door op het zwarte puntje onder het slotje te klikken. - Selecteer vervolgens de laag “foto”.
Stap 17: - Sleep nu uit de library de Movie Clip “frame” naar de stage. - Selecteer het eerste frame in de tijdlijn van de laag “foto”. Het resultaat ziet er dan uit als hieronder. - Selecteer in de “stage” de movieclip.
Pagina 12 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 18: Nu kan je onderaan in het “properties”palet de positie van de movieclip in de flashfilm eveneens op “0” zetten. X: 0 Y: 0
Pagina 13 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 19: Verander de “instance name” door “frame”.
Stap 20: - Selecteer het eerste frame van de laag “foto”. - Klik onderaan het “Actions”-panel open door op het driehoekje te klikken.
Pagina 14 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 21: - Plaats de cursor in het witte werkvlak door erin te klikken. - typ: loadMovie(picture, _root.frame); De afbeelding die we straks de naam “picture” zullen geven, plakken we nu in de tijdlijn (_root) in de Movie Clip met de “instance name” “frame”.
Pagina 15 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 22: Selecteer met 1 sleepbeweging de frames in de tijdlijn op frame 60.
Stap 23: Druk nu op de F6-functietoets van je toetsenbord.
Stap 24: Met de rechtermuisknop klik je nu in de tijdlijn van de laag “foto”. Je kiest voor “Create Motion Tween”.
Pagina 16 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 25: - Selecteer het laatste frame van de tijdlijn van de laag “foto”. - Open het “Actions”panel. - Typ: stop(); Als je geen fouten hebt gemaakt, zie je zowel in het eerste frame als in het laatste frame van de tijdlijn een “a”.
Stap 26: - Selecteer het eerste frame van de tijdlijn in de laag “foto”. - Selecteer in de stage de Movie Clip “frame” (let op: we hebben voor de naam “frame” gekozen in de betekenis van een kader waarin een foto terechtkomt. Verwar het niet met de frames van de tijdlijn.). - Onderaan kan je nu de “properties” (eigenschappen) aanpassen. - Color > Alpha > 0%
Pagina 17 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Pagina 18 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Stap 27: Het is natuurlijk belangrijk om je Flashfilm tijdig te bewaren. - File > save: geef een naam aan het bestand Stap 28: We maken nu de film voor internet. - File > Publish In de map waar je de film bewaard hebt, vind je nu drie bestanden. •
jouwfilm.fla (het originele Flashdocument)
•
jouwfilm.swf (het resultaat voor publicatie op het web)
•
jouwfilm.html (de HTML-pagina waarin de swf wordt opgenomen)
Stap 29: We openen jouwfilm.html in een teksteditor vb. Scite/Scintilla of Kladblok Je zou het volgende moeten te zien krijgen. Plaats hier en daar een return om het geheel leesbaarder te maken. <meta http-equiv=Content-Type content="text/html; charset="> <TITLE>jouwfilm
Stap 30: We gaan nu een paar aanpassingen doen. De “object”-tag in de HTML-pagina is voorzien voor Microsoft Internet Explorer. De “embed”-tag zorgt ervoor dat andere browsers (vb. Geckobrowsers) eveneens de Flashfilm kunnen opnemen. Nu gaan we ervoor zorgen dat we aan de Flashfilm informatie doorgeven. We moeten de film namelijk vertellen welke informatie er in vartxt en in picture zit. Lees de onderstaande code om de aanpassingen te zien. <meta http-equiv=Content-Type content="text/html; charset="> <TITLE>jouwfilm
Stap 31: Als we de HTML-pagina nu opslaan, wordt de standaardtekst “Welkom” vervangen door “HALLO”. In de Flashfilm hadden we immers een dynamisch tekstblok met de variabele waarde “txtvar” aangemaakt. Hier geven we met de parameter flashvars via HTML waarden door aan de Flashfilm. Pagina 20 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
Stap 32: Zoals je merkt, hebben we een tweede variabele waarde doorgegeven aan de flashfilm. We kunnen diverse variabelen doorgeven aan de film door ze te combineren met een &-teken. vartxt=HALLO&picture=test.jpg
In de Flashfilm hadden we immers een Movie Clip aangemaakt en op de stage geplaatst met de “instance name” frame. Via Actionscript hebben we ervoor gezorgd dat de variabele waarde picture in de Movie Clip frame met als instance name frame wordt geladen. loadMovie(picture, _root.frame); We laden in dit geval een bestand in dat in dezelfde map staat als de flashfilm. We laden “test.jpg” in. Naast jpeg-afbeeldingen kan je ook andere bestanden inladen: - een jpg-afbeelding, een andere swf, een flv (flashvideo), een mp3-geluidsbestand - Een door Flash 8 geëxporteerde film kan ook gif- en png-afbeeldingen inladen.
Pagina 21 van 22
Titel: flashvars.html
21-04-06
URL: C:\Documents and Settings\Administrator\Mijn documenten\backupSites06012\cursus_flash\flash\flashvars.html
18:26:26
Opgelet! - Zorg ervoor dat je afbeelding even groot is als de film en de movieclip waarin het bestand geladen wordt, dus in dit geval 760 op 100 pixels. - Hou de tekst die we in de variabele txtvar inladen kort. - Er kunnen ook problemen optreden bij het inladen van de tekst in de variabele txtvar. De tekst moet doorgegeven worden in URLENCODED FORMAT. Dit betekent o.a. dat elke spatie vervangen dient te worden door een +-teken. Dus Hallo Jan wordt Hallo+Jan. Ook andere tekens zoals leestekens dien je te vervangen door speciale codes. Klik hier om je eigen tekst om te zetten in URL-encoded format. Bekijk het eindresultaat.
