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
Stap 3: Geef de flashfilm de volgende afmetingen: 760 / 100 Pagina 2 van 22
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
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
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
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
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
Stap 11: Pagina 8 van 22
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
Stap 13: En inderdaad, in de library zit de Movie Clip met de naam frame. Pagina 10 van 22
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
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
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
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
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
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
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
Pagina 18 van 22
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. <HTML> <HEAD> <meta http-equiv=content-type content="text/html; charset="> <TITLE>jouwfilm</TITLE> </HEAD> <BODY bgcolor="#ffffff"> <!-- URL's used in the movie--> <!-- text used in the movie--> <!--Welkom--> <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version =6,0,0,0" WIDTH="760" HEIGHT="100" id="untitled-1" ALIGN=""> <PARAM NAME="movie" VALUE="jouwfilm.swf"> <PARAM NAME="quality" VALUE="high"> <PARAM NAME="bgcolor" VALUE="#FFFFFF"> Pagina 19 van 22
<EMBED src="jouwfilm.swf" quality="high" bgcolor="#ffffff" WIDTH="760" HEIGHT="100" NAME="jouwfilm" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT> </BODY> </HTML> 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. <HTML> <HEAD> <meta http-equiv=content-type content="text/html; charset="> <TITLE>jouwfilm</TITLE> </HEAD> <BODY bgcolor="#ffffff"> <!-- URL's used in the movie--> <!-- text used in the movie--> <!--Welkom--> <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version =6,0,0,0" WIDTH="760" HEIGHT="100" id="untitled-1" ALIGN=""> <PARAM NAME="movie" VALUE="jouwfilm.swf"> <PARAM NAME="quality" VALUE="high"> <PARAM NAME="bgcolor" VALUE="#FFFFFF"> <PARAM NAME="flashvars" VALUE="vartxt=HALLO"> <EMBED src="jouwfilm.swf" flashvars= vartxt=hallo quality="high" bgcolor="#ffffff" WIDTH="760" HEIGHT="100" NAME="jouwfilm" ALIGN="" TYPE="application/x-shockwaveflash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT> </BODY> </HTML> 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
<HTML> <HEAD> <meta http-equiv=content-type content="text/html; charset="> <TITLE>jouwfilm</TITLE> </HEAD> <BODY bgcolor="#ffffff"> <!-- URL's used in the movie--> <!-- text used in the movie--> <!--Welkom--> <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version =6,0,0,0" WIDTH="760" HEIGHT="100" id="untitled-1" ALIGN=""> <PARAM NAME="movie" VALUE="jouwfilm.swf"> <PARAM NAME="quality" VALUE="high"> <PARAM NAME="bgcolor" VALUE="#FFFFFF"> <PARAM NAME="flashvars" VALUE="vartxt=HALLO&picture=test.jpg"> <EMBED src="jouwfilm.swf" flashvars= vartxt=hallo&picture=test.jpg quality="high" bgcolor="#ffffff" WIDTH="760" HEIGHT="100" NAME="jouwfilm" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT> </BODY> </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
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. Pagina 22 van 22