Webmaster & Internet
Eine komplette Homepage in Flash
Viele, die sich eine Homepage machen möchten, möchten eine Flashhomepage. Und das aus vielen verschiedenen Gründen. In diesem Tutorial werden wir zunächst einmal ergründen, was das überhaupt heißt - und dann den Grundstein für die erste eigene Flashhomepage setzen.
Flashhomepage
Flashpages sind cool. Und genau das ist das Problem. Der erste Gedanke bei den meisten, nachdem sie den Entschluss zur eigenen Homepage gemacht haben: die Page soll auch gut sein. Und im Internet gibt es viele gute Flashpages in denen sich alles bewegt, in denen alles schön animiert ist. Sowas will ich auch.
Dabei gibt es allerdings eine Reihe von Problemen: um eine wirklich gute Flashpage zu haben muss man sehr viel Zeit investieren - und es schlicht und einfach können. Der Aufwand ist gegenüber einer "normalen" Seite enorm - das muss sich schon lohnen. Lohnen muss es sich auch, auf einiges zu verzichten. So kann man Flashseiten nicht so gut ausdrucken wie normale, man kann nicht einfach auf Unterseiten verlinken, Menschen mit Sehschwächen können den Text nur dann größer Stellen, wenn der Programmierer der Seite diese Funktion eingebaut hat (normalerweise gibt es spezielle Browser dafür), die meisten Flashpages haben eine feste Größe und sind deswegen auf manchen Bildschirmen überhaupt nicht darstellbar. Außerdem hat nicht jeder User den Flashplayer installiert - und wird dieser User sich nun für meine Page dieses Plugin extra installieren?
Zwar sind alle diese Kritikpunkte so gut wie vermeidbar (z.B. indem man die Flashfilmgröße dynamisch berechnet, eine eigene Druck-Funktion erstellt usw.), dies zu Programmieren ist aber keine leichte Aufgabe, wenn nicht eher nur was für Profis. Man muss also einen riesen Aufwand betreiben, nur um am Ende eine Flashpage zu haben, die eventuell in HTML genau so aussehen würde - nur ohne diese eine coole Animation.
Wozu also der ganze Mist?
Wenn man es richtig macht, dann kann eine Flashpage aber auch eine absolute Perle sein. Gar ein Kunstwerk. Oder auch als einfache Erweiterung zu klassichen Homepages: z.B. als Videoplayer wird Flash oft genutzt und stellt nur einen Teil von einer ganzen Page dar (z.b. der Videoplayer auf Youtube). Man muss es halt nur richtig machen - und dazu muss man ein Profi sein.
Das versetzt den Leser dieses Tutorials in eine missliche Lage. Ja, das versetzt sogar dieses Tutorial selbst in eine missliche Lage. Für Anfänger geschrieben, klagt mich dieses Tutorial an ich wäre kein Profi und deswegen ist das eh alles Mist und deswegen soll ich keine Homepage mit Flash machen. Und sowieso alles doof.
Wozu also dieses Tutorial? Ganz einfach: man muss auch irgendwo anfangen. Und wenn meine Page halt nicht sehbehindertengerecht ist. Und man nur schlecht drucken kann. Und die auf anderen Bildschirmen vielleicht komisch aussieht. Wen kümmert's? Das ist meine erste Homepage, die hab ich gemacht. Ich kann das halt nicht so Profi-Mäßig. Noch nicht. Das ist egal. Es ist noch kein Meister vom Himmel gefallen - meine nächste Page wird viel viel geiler.
Wer so denkt (oder das Internet einfach um eine weitere Crap-Page bereichern möchte) ist in diesem Tutorial goldrichtig!
Design
Zuerst brauchen wir für unsere Page ein schickes Design. Eigentlich ist alles was man für ein Design braucht nur eines: eine Idee. Man kann sich allerdings ein paar Anregungen fürs Design holen, das ein und das andere Nachmachen und dann seine eigene Idee aus all diesen Eindrücken von anderen Pages schaffen. Dann kann man seine Page machen, wenn man eine bildliche Vorstellung seiner zukünftigen Page hat. Ich gebe euch mal ein paar gute Links, wo man sich das Design ruhig abgucken darf:
http://www.andyfoulds.co.uk/flash_design.html
http://worldwidedesigners07.free.fr/
http://www.derbauer.de
http://www.billybussey.com/main.html
http://www.pixelranger.com/
http://www.infonegocio.com/xeron/bru...est/flash1.htm
http://www.tutorials.de/flash-plattf...coolsites.html
Das Grundgerüst
Okay, dann wollen wir mal loslegen. Ich setze mal vorraus, dass du schon ein wenig mit Flash herumgespielt hast - also weißt, wo das Eigenschaftenfenster ist, wie man einen Instanznamen vergibt, wie man Textfelder erstellt usw. Zu allererst werden wir ganz einfach ein Textfeld erstellen und darin auf Knopfdruck einen Text anzeigen - nach dem Prinzip soll dann später auch die Homepage funktionieren.
Also: ziehe einen Kompnenten-Button (siehe Bild roter Kasten) auf die Bühne und erstelle ein dynamisches Textfeld. Der Button bekommt den Instanznamen "but1", das Textfeld "mainText". Es ist wichtig, dass beim Textfeld die Option "Mehrzeilig" gewählt ist (siehe Bild grüner Kasten).
Klicke auf einen leeren Punkt der Bühne, sodass nichts markiert ist, und drücke F9. Das ActionScript-Eingabefenster erscheint. Gibt hier diesen Code ein:
PHP-Code:
on(release) {
_root.mainText.text = "Hallo\nDies ist meine erste Homepage\n";
}
Wenn du willst kannst du die Buttons kopieren und jeweils einen anderen Text angeben. Die Buttonbeschriftung kannst du in den Buttoneigenschaften unter "Label" (Reiter Parameter) ändern. Somit ist ein Prototyp der Homepage fertig, allerdings nur aus Buttons und Text. Das hätten wir auch in HTML hinbekommen.
Ein Design
So, jetzt wollen wir was ordentlicheres machen. Das Textfeld wird vorerst bleiben, aber wir werden die Page etwas Designen. Dafür habe ich ein paar kleine Bilder Vorbereitet:
Diese werden wir für jede Seite extra nehmen. Dazu gehst du auf Datei->Importieren, suchst das "Home"-Bild heraus, markierst es, und klickst auf "ok". Jetzt kannst du oben in der Zeitleiste eine neue Ebene einfügen, diese unter die erste Schieben, dort einen Balken mti dem entsprechenden Werkzeug malen und somit die Pag ein zweit Bereiche teilen. Jetzt noch das Bild in die entsprechende Ecke schieben, drauf rechtsklicken, "In Symbol konvertieren" anklicken, Movieclip auswählen, ok klicken und dem ganzen den Instanznamen "Aufmacher" geben. All dieses Zenober mit konvertieren war nur, damit wir dem Bild einen Instanznamen geben und somit im ActionScript mit einbeziehen können.
Doppelklicke auf den neuen MC. Du siehst jetzt ganz normal das Bild und so ein komisches Kreuz.Verschiebe das Bild so, dass die obere linke Ecke genau an dem Kreuz ist (oder gib im Eigenschaftenfenster die Koordinaten 0,0 ein). Das hat den sinn, dass wir so später Bilder von außen in den MC laden können und diese an genau der gleichen Position sind wie das erste Bild. Kehre zurück zur gesamtansicht des Flashfilmes ( auf die Schrift "Szene1" klciken) und verschiebe das Bild so, dass es richtig platziert ist.
Jetzt ändern wir den Code von dem Button mal so:
PHP-Code:
on(release) {
_root.mainText.text = "Hallo\nDies ist meine erste Homepage\n";
_root.Aufmacher.loadMovie("Projekte_BG.jpg");
}
Cool, jetzt haben wir also schon Text, ein paar Bilder und ein paar Buttons. Es fehlt noch dynamischer Inhalt, also nicht-Text Inhalt (also genau das, was und dazu bringt Flash zu verwenden). Dazu gibt es mehrere Ansätze.
1. können wir die Bilder in Flash einfügen, aber unsichtbar stellen (mit MC._visible = false; und dann sichtbar mit MC._visible = true).
2. können wir einen leeren MC nehmen und, wenn benötigt, ein Bild via loadMovie einladen
3. können wir die Bilder in Flash einfügen, aber außerhalb der Bühne positionieren und dann entsprechend zurückverschieben
Wir werden uns für die zweite Variante entscheiden. Wir wählen also die obere Ebene aus und drücken Strg+F8. Es öffnet sich ein Fenster wo wir einen neuen, leeren MC erstellen können. Kehre wieder zur Bühne zurück, lffne mit F11 die Bibliothek und ziehe den leeren MC auf die Bühne. Den Rest solltest du alleine hinbekommen.
Ein kleiner Tipp noch: wenn du "zu große" Bilder hast, die über den Flashbühnenrand hinaus gehen, markiere den leeren MC auf d. Bühne und gib ihm diesen AS:
Code :
1 2 3 4 | onClipEvent(data) {
this._width = 150; // oder ein anderer Wert
this._heigth = 100; // oder ein anderer Wert
} |
Es ist allerdings immer besser, die Bilder auch nur in der Größe vorliegen zu haben, wie man sie braucht, damit keine 3MB große Bitmap-Datei für ein 150x100 Pixel großes Feld geladen werden muss
Dynamische Inhalte
So. Jetzt haben wir im prinzip eine vollwertige HTML-Homepage nachprogrammiert. Was aber fehlt ist der gewisse "Flash-Touch". Zum einen kann man zum Flash-Touch machen, dass man alles zur Laufzeit bzw. von außen ändern kann, die swf aber gleich bleibt. Das ist eigentlich ganz einfach:
Wir erstellen eine Textdatei und schreiben das rein, was in unserer Flashpage auch stehen soll (mit \n usw...). Dabei müssen wir darauf achten, dass wir in der Textdatei "Variablen vergeben", sprich die Textdatei so aufbauen: "content=Herzlich Willkommen auf eine Homepage\nWer dies liest ist doof." Jetzt schreiben wir in Flash diesen Code:
PHP-Code:
on(release) {
blubb = new LoadVars();
blubb.onLoad = function() {
_root.mainText.text = blubb.content;
}
blubb.load("home_text.txt");
_root.Aufmacher.loadMovie("Projekte_BG.jpg");
}
Einen Übergang
Das ganze ist, trotz dynamischer Inhalte (von denen der Benutzer am Ende schließlich nicht wirklich viel mitbekommt) doch noch recht lahm. Was uns fehlt ist ein Seteübergang. Diesen kann man auf ganz einfache Weise machen, allerdings gibt es hier unendlich viele Mglichkeiten. Kennst du diese Videoschnittprogramme, wo es immer 10000000 Möglichkeiten gibt, die Videos zu überblenden. Alle diese könnte man in Flash auch nachprogrammieren. Ich werde hier bei weitem also nicht alle Vorstellen können, aber ein paar sollte es schon geben.
Der (von mir
) meistgenutzte Übergang ist das einfache Alphablenden. Dabei wird der alte Content ausgefadet und dann der neue eingefadet. Dazu benutzen wir das onClipEvent enterFrame:PHP-Code:
_root.onEnterFrame = function() {
// einfaden oder ausfaden
}
Das klingt kompliziert, ist es aber überhaupt nicht. Aber wir müssen natürlich etwas Code ändern. Zuerst also den Code von dem Button. Hier müssen eben diese Variablen zugewiesen werden, im onEnterFrame werden sie nurnoch ausgewertet.
Code :
1 2 3 4 5 | on(release) {
_root.ladetext = "home_text.txt";
_root.ladebild = "Home_BG.jpg";
_root.ausfaden = true;
} |
Dieser Code sollte kein Problem sein - es werden halt nur die Werte von Variablen geändert. Jetzt kommen wir zum Arbeitstier des Blendings - dem onEnterFrame. Dieses wird, wie eine Schleife, immer wieder ausgeführt - nur nicht so schnell, sondern in der gleichen Geschwindigkeit wie die Framerate des Filmes (egal ob der Film läuft - oder nicht). Dieser Code kommt nicht mit auf den Button, sondern auf den ersten Frame unserer Page:
PHP-Code:
_root.mainText._alpha = 0; // Die beiden Elemente unsichtbar machen, damit sie am Anfang sosofrt einfaden
_root.Aufmacher._alpha = 0;
ausfaden = true; // Den setzen wir von anfang an auf true, damit "home" sofort angezeigt wird
einfaden = false; // Soll eingefadet werden?
txt = new LoadVars(); // Unser LoadVars-Objekt
ladetext = "home_text.txt"; // Dateiname der Textdatei
ladebild = "Home_BG.jpg"; // Dateiname der Bilddatei
_root.onEnterFrame = function() {
if(_root.ausfaden)
{ // Soll ausgefadet werden?
_root.mainText._alpha -= 8;
_root.Aufmacher._alpha -= 8;
if(_root.mainText._alpha < 4) {
ausfaden = false;
txt.onLoad = function() {
_root.mainText.text = txt.content;
_root.einfaden = true; // erst text laden, dann einfaden
}
_root.Aufmacher.loadMovie(ladebild);
txt.load(ladetext); // Text laden
}
} else if(einfaden)
{ // Soll ausgefadet werden?
_root.mainText._alpha += 8;
_root.Aufmacher._alpha += 8;
if(_root.Aufmacher._alpha > 98) {
einfaden = false;
}
}
}
Man kann die Einteilung in die 2 Modi anhand der Einrückungen im Code eigentlich leicht erkennen. Ich werde sie mal einzeln durchgehen:
1. Ausfaden
-> Text und Bild transparenter machen (durch heruntersetzen der Alpha-Eigenschaft)
-> Wenn das ganze zuende gefadet ist (alpha < 4)...
---> "Ausfaden" auf false setzen, denn jetzt soll nichtmehr ausgefadet werden.
---> Bild einladen
---> Den Text einladen. Sobald der Text eingeladen ist wird die Funktion txt.onLoad ausgeführt, in der wir...
------> Text zuweisen und "einfaden" auf true setzen, da jetzt alles Bereit zum Anzeigen ist.
2. Einfaden
-> Text und Bild sichtbarer machen (durch heraufsetzen der Alpha-Eigenschaft)
-> Wenn das ganze gut sichtbar ist (> 98), dann hören wir mit dem Faden auf.
Na, so schwer war das doch garnicht. Eigentlich war es sogar ziemlich leicht. Aber wenn wir das ganze jetzt ausführen, fadet zwar das Bild schön, aber der Text erscheind trotzdem ruckartig. Das liegt daran, dass wir die Schriftart nicht eingebettet haben. Das ist wichtig, damit wir den Text faden können. Das ist ganz einfach und ist mit wenigen Klicks in den Eigenschaften des Textfeldes getan...
Du aktivierst im Fenster "Zeichen" einfach "alle Zeichen", klicks auf "Fertig" und bist fertig. Jetzt haben wir einen coolen einfade-Effekt.
Für den nächsten Effekt werden wir das Grundgerüst des alten behalten, denn egentlich sehen sie ja alle gleich aus: erst verschwindet was, dann kommt was neues wieder. Ein ganz einfacher "aus dem Bild scrollen und dann wiederkommen" - Effekt ist auf Basis unseres alten Effektes schnell gemacht - schließlich ändern wir nur die Koordinaten, nicht en Alpha-Wert:
PHP-Code:
textstart = _root.mainText._y;
bildstart = _root.Aufmacher._y;
_root.mainText
_root.mainText._y = (_root.mainText._height+90); // Die Elemente nach unten positionieren damit direkt am Anfang eingefadet werden kann
_root.Aufmacher._y += (_root.mainText._y - textstart);
ausfaden = true; // Den setzen wir von anfang an auf true, damit "home" sofort angezeigt wird
einfaden = false; // Soll eingefadet werden?
txt = new LoadVars(); // Unser LoadVars-Objekt
ladetext = "home_text.txt"; // Dateiname der Textdatei
ladebild = "Home_BG.jpg"; // Dateiname der Bilddatei
_root.onEnterFrame = function() {
if(_root.ausfaden)
{ // Soll ausgefadet werden?
_root.mainText._y += 30;
_root.Aufmacher._y += 30;
if(_root.mainText._y > (_root.mainText._height+100)) {
ausfaden = false;
txt.onLoad = function() {
_root.mainText.text = txt.content;
_root.einfaden = true; // erst text laden, dann einfaden
}
_root.Aufmacher.loadMovie(ladebild);
txt.load(ladetext); // Text laden
}
} else if(einfaden)
{ // Soll ausgefadet werden?
_root.mainText._y -= 30;
_root.Aufmacher._y -= 30;
if(_root.Aufmacher._y <= bildstart) {
einfaden = false;
}
}
}
Das solls zu den überblend-Effekten gewesen sein, denn wie gesagt: es gibt unendlich viele Möglichkeiten. Du solltest dir, wenn du einen eigenen Überbeöendeffekt machst, das Grundgerüst von oben schnappen und eben ein bisschen anpassen.
Weiterführend
So, das solls gewesen sein. Ich habe mein Ziel für diesen Tutorial erreicht - die absoluten Grundlagen der sauberer Homepageprogrammierung rüberbringen, damit Anfänger endlich mal einen solchen Tutorial haben. Eines der schwersten Dinge war, die Sachen herauszufiltern, die wirklich wichtig sind und den Umfang des Tutorials nicht durch unnötige nebenfunktionen hochzupushen.
Du solltest umbedingt weiterarbeiten. Poste bei Problemen gern ins Forum und schau dir auch andere Tutorials an. Ich bin mir sicher, dass du auf diesem Wege viel Erfolg und Spaß mit Flash haben wirst.
Soweit,
jens
Kommentar schreiben
Login
Bereiche
Kategorien
Forum - Webmaster & Internet
Artikel bewerten