![[FLASH]Eine Homepage aus Flash!](https://www.elitepvpers.com/forum/iconimages/coding-tutorials/flash-eine-homepage-aus-flash_ltr.gif){kind=small}
Also dann lass ichs mal los gehen
Eine komplette Homepage in Flash
Du kennst das. Dir kommt auf der Straße ein hübsches Mädchen entgegen und sie spricht dich an. Ihr kommt ins Gespräch und sie zeigt dir ihre obercoole Flash-Homepage. Du hast aber nur ne olle HTML-Homepage und sie haut dir eine Ohrfeige und geht.
Doch dieser Tutorial schafft abhilfe! Heute werden wir lernen, wie man eine kompletteHomepage in Flash designt, programmiert unt mit Inhalt füllt. Na, wenn das mal nix ist, dann weiß ich auch nicht.
Flashhomepage
Haha, denkste! Wir fangen jetzt nich direkt mit dem Design an. Zuerst ein paar böse Worte zum Thema selbst.
Flashpages sind cool und das ist auch, warum sie uncool sind. Jedes Kiddie hat eine HTML-Homepage udn will eine Flashhomepage, weil die ja soo cool sind. Außer acht wird dabei gelassen, dass Flash niemals Html ersetzen wird bzw. kann. Es wird immer Benutzer geben die keinen Flashplayer installiert haben und es wird immer Benutzer geben, die von der Aufforderung, diesen zu Installieren, wenn sie deine Homepage besuchen, abgeschreckt werden und sich die Seite doch nicht angucken. Oder es dauert ihnen zu lange, das herunterladen und installieren des Players kann mit einer 56k-Verbindung sehr lange dauern!
Außerdem sind Flashpages z.T. auch lange nicht so benutzerfreundlich wie HTML-Seiten. Sehgeschädigte, welche die Schrift für HTML generell hochstellen können, sodass sie den Text gut lesen können, können dies in Flash nicht. Der Text ist für sie immer so groß wie der Homepageersteller es wollte. Auch diese User werden deine Homepage meiden. Ausdrucken geht auch bei Flashpages nur bedingt möglich. Zwar kann man als Flash-Programmierer eine Funktion dafür einfügen (welche z.T. auch extra fürs Drucken vorgesehene "Designs" drucken kann, was sehr viel Eindruck schindet), das ganze ist aber nicht so komfortabel wie ein Druck auf STRG+P.
Die feste Größe einer Flashpage lässt benutzer mit kleineren Auflösungen schier verzweifeln. Eine Flashpage mit 800x600 Größe sieht auf einem Bildschirm mit 1024x700 Pixeln sehr gut aus (bei Größeren Auflösungen mitunter sogar klein), auf etwas älteren PCs entspricht dies aber der Vollbildgröße und somit muss der Benutzer immer scollen wenn er man die andere Ecke der Homepage sehen will.
Zwar sind alle diese Kritikpunkte so gut wie vermeidbar (z.B. indem man die Flashfilmgröße dynamisch berechnet), dies zu programmieren ist aber eine seeeehr schwere angelegenheit.
Flash sollte also immer nur ein Zusatz sein, nie ein Ersatz. Deswegen möchte ich euch bitten, zu euren Flashpages immer eine HTML-Version anzubieten. Das Design dorthin zu übertragen ist heutzutage mithilfe von sog. HTML-Editoren leichter möglich als durch stures Programmieren. Das ist natürlich der Idealfall, wenn HTML- und Flash-Version fast gleich aussehen, die Flashversion nur eine Spur mehr Interaktivität und schicke Animationen bietet.
Design
Hey, ich habe es also nicht geschafft dich davon Abzubringen, eine Flashhomepage zu erstellen. Auch gut, dann wollen wir mal loslegen. Zuerst brauchen wir für unsere Page ein schickes Design. Also öffnen wir Paint, drücken auf den "Obercooles-Rulor-Flashpage-Design-erstellen"-Button und sind fertig. Oder so.
Eigentlich ist alles was man für ein Design braucht nur eines: eine Idee, viel Zeit, viel können, viel Ausdauer. 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:
(man beachte den Vorbildlich gemachten Preloader)
Hast du ein Bild im Kopf? Dann kann es ja los gehen!
Das Grundgerüst
Öffne Flash, erstelle ein neues Projekt (ich nehme die Maße 950x450, also eine sehr breite Seite. 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 den Button 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:
PHP Code:
onClipEvent(data) {
this._width = 150; // oder ein anderer Wert
this._heigth = 100; // oder ein anderer Wert
}
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 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.
PHP Code:
on(release) {
_root.ladetext = "home_text.txt";
_root.ladebild = "Home_BG.jpg";
_root.ausfaden = true;
}
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ührendes
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.
Credits gehen 100% an Jens !!!!!
MFG Jusikid
