AS2 Flash / ActionScript Übung 2 Stand: 26/06/06

Transkript

1 Übungen AS2 Prof. Strzebkowski TFH Berlin 1 AS2 Flash / ActionScript Übung 2 Stand: 26/06/06 Teil 1 Arbeiten mit verschachtelten MovieClips - Erzeugen eines verschachtelten MovieClips - Erstellen einer Szene aus mehreren MovieClips - Ausführen von Aktionen mit Pfadangaben auf die MovieClips Teil 2 Laden von externen Bildern und Texten - Eine Bilderbetrachtungsanwendung soll erzeugt werden. Teil 3 Arbeiten mit dynamischen thumbnails - Eine Art Bildergalerie soll erzeugt werden. Erzeugen eines verschachtelten MovieClips Bitte erzeugen Sie zunächst einen neuen MovieClip aus den Clips 'Kuh' und 'Bauer' und benennen Sie es 'kuhundbauer'. Die Clips-Instanzen innerhalb dieses Symbols benennen Sie bitte 'kuh3_mc' und 'bauer_mc'. Durch die Erweiterung '_mc' bei Instanznamen bietet Flash ActionScript-Vorschläge an! Anschließend erzeugen Sie bitte einen weiteren verschachtelten MovieClip bestehend aus einem 'Kuh'-Clip und dem gerade erzeugten 'kuhundbauer'-clip und benennen Sie es 'kuhbauerkuh'. Benennen Sie dabei die Kuh-Clip-Instanz mit 'kuh2_mc' und die 'kuhundbauer'-clip-instanz mit 'kuhbauer_mc'.

2 Übungen AS2 Prof. Strzebkowski TFH Berlin 2 Aufbau der Szene Positionieren Sie die MovieClips in etwa so, wie in der Abbildung unten und am besten alle auf einzelnen Ebenen! Zunächst die Landschaft benennen Sie diese Instanz mit 'land_mc' - und dann die Clips mit den Kühen und dem Bauer. Die einzelne Kuh benennen Sie bitte mit 'kuh_mc' und der verschachtelte MC mit 'kuhbauerkuh_mc'. Dazu kommt noch eine Taste, die wir für einen 'Reset' der Szene nutzen wollen und die Instanz dieser Taste soll 'taste_mc' heißen. kuh3_mc bauer_mc kuh2_mc kuhbauer_mc kuh_mc kuhbauerkuh_mc Land_mc taste_mc Folgende Interaktionen sollen in dieser Szene erfolgen: - mit dem Mausklick auf den 'bauer_mc' wird die 'kuh_mc' immer größer skaliert - mit dem Mausklick auf die 'kuh3_mc' wird die 'kuh2_mc' verkleinert und deren '_alpha'-wert runtergesetzt -!! Die Skalierungen und Änderungen des Alpha-Wertes sollen in 10er Schritten erfolgen!! - Mit dem Klick auf die 'kuh_mc' soll ein Flash-Film 'morph.swf' anstelle der 'kuh3_mc' eingeladen werden, dabei muss das eingeladene Movie nach dem Ladevorgang entsprechend skaliert werden! - Mit dem Klick auf die Reset-Taste werden alle Elemente ihre ursprünglichen Größen und Alpha-Werte bekommen. Und auch der geladene Film morph.swf wieder entfernt, aber wie.? Machen Sie hier eigene Beobachtungen und Vorschläge! Notwendige Befehle: - Skalierung: z.b. _root.kuh_mc._xscale = 50; oder setproperty(_root.quadrat2_mc,_xscale,"50" ); oder _root.kuh_mc._xscale += 10; (in 10er-Schritten Skalierung positiv) - Z.B.: stern._alpha = 30; - Laden eines Filmes in einen MovieClip: loadmovie("externer.swf", _root.ziel_mc); o Probieren Sie bitte hier auch das Laden mit dem Befehl loadmovienum("externer.swf", EbeneNr).

3 Übungen AS2 Prof. Strzebkowski TFH Berlin 3 Teil 2 der Übung 3 Es soll eine Bilder- oder Fotogalerie gestaltet werden, in der zunächst jeweils ein Bild, eine Textbeschreibung und zwei Navigationstasten 'vorwärts' und 'rückwärts' zu sehen sind. Mit den Tasten kann der Benutzer in der Sammlung navigieren. Die Bilder und Texte sollen dazu aus externen Quallen dynamisch bei Laufzeit eingeladen werden. Möglicher Szenenaufbau: Text als Bildbeschreibung Notwendige Befehle und Programmkosntrukte Zunächst müssen die Bestandteile der Szene Aufgebaut werden - Bildbereich: für das Bild sollten Sie einen MovieClip erzeugen und am besten in diesem MC gleich ein Dummy -Bild platzieren. Dieser MC wird später beim Blättern ständig ausgetauscht (wie die Dummy-Sprites bei Director) - Textbereich: mit dem Textwerkzeug erzeugen Sie das Textfeld. - Formatieren Sie gleich das Textfeld entsprechend:

4 Übungen AS2 Prof. Strzebkowski TFH Berlin 4 - das Textfeld muss dynamisch sein und eine Variabelenbezeichnung tragen. In unserem Fall sollten Sie die Variable mit "meintext" bezeichnen. - - Diese Variable wird immer am Anfang eines externen Textes gestellt: "meintext=und hier fängt der Lauftext an...". Erstellen Sie bitte mind. 4 Bildbeschreibungsdateien zu Ihren Bildern. Benennen Sie diese dann mit 'data1.htm', 'data2.htm' usw., um diese nacheinander laden zu können. Wir benutzen hier gleich das HTML-Format, damit Sie in jeder Datei einige HTML-Aiszeuchnungen und vor allem Hyperlink-Integration ausprobieren sollten! (Auf Webseiten, die inhaltlich am besten mit Ihren Bildern zusammenhängen!). - Weil die Dateien als HTML-Daten interpretiert werden können, müssen Sie auch im Eigenschaftsinspektor das Textfeld als HTML-Textfeld definieren, dazu aktivieren Sie bitte die entspreche Textfeldeigenschaft. o!! ACHTUNG: Ein externer Text muss für Flash im sog. Unicode-Format vorliegen. Dieses Format erzeugt man entweder mit speziellen Texteditoren, wie z.b. mit dem 'UniRed'-Editor ( oder man speichert den Text direkt im 'UTF-8' Format, z.b. mit dem Tool "TextPad" ( o - Das Laden des Textes und des nächsten Bildes soll nach den Mausklicks auf die Tasten erfolgen. o An dieser Stelle sollten Sie am besten mit zentralen Funktionen auf der zentralen Zeitachse arbeiten. Hierzu sollten Sie am besten die oberste Ebene als Scriptebene deklarieren und dort gleich im ersten Frame die nötigen Funktionen und Variableninitialisierungen vornehmen (siehe Beispiel in der nächsten Abbildung ) o Der Aufruf der Funktionen sollte jedoch direkt auf den Schaltflächen untergebracht sein, also mit "on (release) {." geschehen. o Damit das laden der Texte und Bilder 'dynamisch' geschieht, müssen die Nummern der externen Dateien zu den Namenstrings per Variable 'hinzuaddiert/hinzugefügt' werden (siehe Beispiel in der nächsten Abbildung )

5 Übungen AS2 Prof. Strzebkowski TFH Berlin 5 o Achtung: beim Aufruf Ihrer Bilder müssen Sie diese immer nachträglich entsprechend skalieren!!! o - - laden eines Bildes: z.b. mit: loadmovie("externes.jpg", _root.ziel_mc); Also mit dem gleichen Befehl, wie die externen SWF-Filme - laden eines Textes: loadvariables("data.txt", ""); (wenn sich die Anweisung auf der gleichen Zeitleiste wie das Textfeld befindet, oder mit der Angabe des Ziels, wenn ein textfeld in einem MovieClip 'verpackt' wurde: loadvariables("externedatei.txt", "- _root.ziel_mc.textfeldname"); - Teil 3 der Übung 2: Noch mehr Dynamik in der gesamten Anwendung In diesem Teil sollen Ihre Bilder zunächst als kleine 'Thumbnails' auf einer Seite dynamisch geladen werden: Nach dem Klick auf ein Thumbnail soll das Bild in einem überlagerten MovieClip vergrößert dargestellt werden, nach einem Klick auf das vergrößerte Bild sollte das Bild verschwinden. In diesem Teil können Sie mit der MovieClipLoader-Klasse, mit einem Listener-Konzept sowie mit den Methoden attachmovieclip () oder createemptymovieclip() arbeiten. Die Benutzung der MovieClipLoader-Klasse, mit einem Listener-Konzept ist wichtig, denn gerade bei der dynamsichen Erstellung/Einbindung von Objekten auf der Bühne per attachmovieclip () oder createemptymovieclip() muss zum einen dafür gesorgt werden, dass die Daten wirklich komplett geladen sind, bevor man auf diese zugreift und die anklickbaren Objekte als Aktionsobjekte per Listener bekannt gemacht werden. Wie geht das im Einzelnen? - der folgende AS-Code sollte in der Hauptzeitleiste im ersten Frame erzeugt werden! - zunächst werden ein Loader-Objekt und ein Listener-Objekt erzeugt:

6 Übungen AS2 Prof. Strzebkowski TFH Berlin 6 var loader:moviecliploader = new MovieClipLoader(); var lauscher:object = new Object(); - dann werden Funktionen definiert, die entweder bei erfolgreichen oder fehlerhaften Ladevorgängen von externen Daten ausgeführt werden: lauscher.onloaderror = function() { // bei Fehlerhaftem Ladevorgang trace("fehler"); ; lauscher.onloadinit = function(ziel_mc) { // bei erfolgreichem Ladevorgang if (ziel_mc._name!= "grossfoto_mc") { ziel_mc._width = 200; // Skalierung der eingeladenen Fotos entweder als ziel_mc._height = 140; // Thumbnails oder als Großfoto, je nach Zustand else { ziel_mc._width = 300; ziel_mc._height = 200; ziel_mc.onpress = function():void { oncardclick(this); // Aufruf der Funktion, die das große Bild aufruft ; ; - zu dem Loader-Objekt der MovieClipLoader-Klasse werden die Listener-Funktionen angemeldet, d.h. sobald die Load-Funktion aufgerufen wird (kommt später im Text), werden die beiden definierten Listener-Funktionen aufgerufen. loader.addlistener(lauscher); - Im Weiteren werden die Funktionen zur Ausführung des gesamten Programms sowie die Funktion zur Anzeige des großen Bildes ausprogrammiert. - Die Programmierung ist so angelegt, dass sich in der Bibliothek ein dummy-movieclip befindet, der den Bezeichner clipdummy hat und beim Laden per attachmovie auf die Bühne gebracht wird! Initialize(); function initialize():void { var depth:number; var clip:movieclip; var x:number = 10; var y:number = 10; for (var i:number = 1; i<=6; ++i) { trace("i: "+i); //nur zur Kontrolle depth = this.getnexthighestdepth(); clip = this.attachmovie("clipdummy", "bild"+depth, depth, {_x:x, _y:y);

7 Übungen AS2 Prof. Strzebkowski TFH Berlin 7 loader.loadclip("bild"+i+".jpg", clip); //Mitaufruf der Loader-Funktionen trace("clip"+i); if ((i+1)%4!= 0) { x += clip._width+5; else { x = 10; y += clip._height+5; function oncardclick(cardclip:movieclip):void {. diese Funktion sollten Sie ergänzen und hier mit der Methode createemptymovieclip arbeiten! Ein absolutes 'i-tüpfelchen' liefern Sie, in dem Sie unter den Thumbnails Bezeichnungen der Bilder in kleinen Textfeldern angeben!! Wünsche Ihnen viel Erfolg bei der Bearbeitung der Übung!