Mit Flash eigene (lokale) Startseite mit Lesezeichen erstellen

Veröffentlicht auf von Julia K.

Es ist Sonntag und ich widme mich wieder meinem Selbststudium als ausgewiesene Autodidaktin und lerne die Programme der Adobe CS3 Design-Reihe. Heute ist Flash an der Reihe, bzw. Arbeiten mit ActionScript 3.0

Programmieren liegt bei uns in der Familie, jedenfalls auf der männlichen Seite. Wir Frauen nutzen lieber, was die Männer uns zaubern, ich hingegen möchte auch selber machen können.

Und so wage ich mich an die Programmiersprache ActionScript 3.0, um in meinem späteren Berufsleben mindestens mitreden zu können, wenn nicht sogar Inhalte selbst erstellen zu können.

Heute sind einfache Befehle dran: functions, Websites öffnen, Schaltflächen. Aus einem Beispiel aus dem Buch heraus habe ich gelernt, wie man Flash befehlen kann, beim Klicken einer dafür vorbereiteten Schaltfläche eine Website zu öffnen oder z. B. einen MovieClip abzuspielen.

Weil das recht cool war, habe ich mir gleich mal meine eigene Startseite mit meinen Lieblinks (süß) gebaut. Dazu gehören

  • google
  • wikipedia
  • bundesliga.de
  • youtube

und viele mehr, die aber etwas zu privat wären ;) muss ja nicht jeder meinen OnlineBanking-Service kennen.

Vorgehen

Um eine Seite zu erstellen, die klickbare Schaltflächen hat, muss man diese in Flash erstmal erstellen. Dazu habe ich die Ebene in buttons umbenannt und eine weitere Ebene hinzugefügt, die ich actions genannt habe. Dann habe ich das Rechteckwerkzeug verwendet, mit Strichfarbe schwarz (#000) und Füllfarbe weiß (#FFF). Bild-6.png
Interessant dabei ist, die Füllfarbe je nach Art der Website (Information, Fun, News etc.) zu ändern. Ich habe mich aber nur auf weiß beschränkt.

Mit dem Rechteckwerkzeug habe ich dann auf der Ebene buttons ein Rechteck aufgezogen. Dieses habe ich per F8 in ein Symbol konvertiert (Button, bzw. Schaltfläche) und es button_btn genannt. Nun habe ich einige Instanzen dieses Symbols auf der Bühne erstellt und per Align links angeordnet und von oben nach unten verteilt (Distribute), sodass die Rechtecke schön sauber neben- und untereinander verteilt dargestellt werden.

Tipp: Wer auf Mindmap steht, kann diese Rechtecke auch so anordnen, dass artgleiche Buttons wie in einer Mindmap in einer Wolke umeinander liegen.

Nun habe ich den einzelnen Instanzen Instanznamen im Eigenschafteninspektor zugewiesen, also z. B. google_btn, wikipedia_btn oder youtube_btn und danach mit dem Textwerkzeug die jeweiligen Namen für die Webseiten auf die Rechtecke geschrieben. Schaltfläche und Text habe ich dann gruppiert, damit sie nicht verrutschen.
Das Ergebnis sah dann so aus:
Bild-7.png
Nun hatte ich Schaltflächen, aber noch keine Funktion dahinter. Also ActionScript her!
Das Fenster Aktionen, in das man die Befehle eingibt, erreicht man über Fenster --> Aktionen. Hier habe ich folgende Zeilen eingegeben:

stop();

 

function gotoGooglePage(event:MouseEvent):void {

var targetURL:URLRequest = new URLRequest("http://www.google.de/");

navigateToURL(targetURL);

}

google_btn.addEventListener(MouseEvent.CLICK, gotoGooglePage);

 

function gotoWikipediaPage(event:MouseEvent):void {

var targetURL:URLRequest = new URLRequest("http://www.wikipedia.org/");

navigateToURL(targetURL);

}

wikipedia_btn.addEventListener(MouseEvent.CLICK, gotoWikipediaPage);

 

function gotoBundesligaPage(event:MouseEvent):void {

var targetURL:URLRequest = new URLRequest("http://www.bundesliga.de/");

navigateToURL(targetURL);

}

bundesliga_btn.addEventListener(MouseEvent.CLICK, gotoBundesligaPage);

 

function gotoYoutubePage(event:MouseEvent):void {

var targetURL:URLRequest = new URLRequest("http://www.youtube.de/");

navigateToURL(targetURL);

}

youtube_btn.addEventListener(MouseEvent.CLICK, gotoYoutubePage);

 

function gotoApplePage(event:MouseEvent):void {

var targetURL:URLRequest = new URLRequest("http://www.apple.de/");

navigateToURL(targetURL);

}

apple_btn.addEventListener(MouseEvent.CLICK, gotoApplePage);

 
wobei stop(); angibt, dass Flash den Film stoppen soll in diesem Bild (bei mir Bild 1). Ein späteres Bild könnte man wählen, wenn man z. B. noch ein kleines Filmchen zeigen möchte, bevor man zu seinen Lesezeichen auf der Startseite kommt. Das spare ich mir.
function bestimmt eine function, die Flash ausführen soll.
Anm.: Ich bin noch kein Profi und hätte mir mit Sicherheit viele Zeilen hier sparen können, aber für den Anfang ist das für mich ok.
gotoGooglePage ist der Funktionsname, der erstellt wird durch die Zeile google_btn.addEventListener(MouseEvent.CLICK, gotoGooglePage);
Der Befehl lautet in etwa: "Öffne Google, wenn auf die Schaltfläche google_btn geklickt wird, wobei Google öffnen bedeutet, dass www.google.de als ZielURL geöffnet werden soll."

Dann habe ich nachgeschaut, ob auch alles funktioniert und den Film getestet. Per Klick auf die einzelnen Schaltflächen müssten sich also die richtigen Websites öffnen. Auch der Klick auf Check syntax hilft hier, Fehler zu finden.
Bild-8.png 
Datei speichern und exportieren als MovieClip mit einem geeigneten Namen in einem Verzeichnis, das man auch gut wiederfindet. Ich habe das Verzeichnis  file:///Users/meinname/Documents/Übungen/ gewählt und die exportierte Datei Lesezeichen genannt.
Im Browser habe ich dann die Startseite geändert in file:///Users/meinname/Documents/Übungen/Lesezeichen.swf und voila! Es funktioniert! Sieht noch recht unschön aus, da ungestylt, aber nun kann ich nach Herzenslust an der .fla-Datei herumexperimentieren und alles verschönern - meine Lieblinks habe ich hier.

Selbstverständlich gibt es schon soooo viele Tools, Seiten, Programme etc. die das alles viel besser handhaben, aber dahinter steckt eben keine Eigenleistung.

So, dann mach ich mal weiter :) Have fun! 

 

Werbung
Um über die neuesten Artikel informiert zu werden, abonnieren:
Kommentiere diesen Post
A
<br /> danke für diese Tipps! sehr nutzbar:D<br /> <br /> <br />
Antworten