Curlicious
05.01.2008, 13:48
Hallo liebe Community,
Hier zeige ich euch wie ihr eure eigene Flash Homepage machen könnt.
Schritt 1 Vorbereitung
Als erstes erstellen wir ein neues Dokument (Action Script 2.0!)
Die größe könnt ihr ändern wenn ihr unten auf die Registerkarte "Einstellungen" klickt.
Ich habe die größe nicht verändert und bin bei 550 Px*400 Px geblieben..
Als nächstes erstelle ich 2 neue Ebenen. Die untere nenne ich Film aber ihr könnt sie auch anders benennen.
Schritt 2 Der Preloader
Als "Preloader" bezeichnet man den Ladebalken, der vor der Flashanimation erscheint.
Um den zu erstellen, brauche ich zunächste eine Grafik. Ich wähle dazu das "Rechteckwerkzeug", stelle die Füllfarbe auf "Schwarz" und die Strichfarbe auf "Weiß". Dann ziehe ich einen etwa 200 Pixel breiten Balken auf die Bühne. Wichtig: Achtet darauf, dass dabei das erste Bild der "Film"-Ebene gewählt ist:
Jetzt wähle ich den eben erstellten Balken aus (Doppelklick auf den Balken, bzw. mit der Maus einen Rahmen um den Balken ziehen) und klicke mit der rechten Maustatste darauf. Im erscheinenden Menü wähle "In Symbol konvertieren". Im folgenden Fenster treffe ich die Einstellungen:
Nun sollte auf der Rechten Seite in der Bibliothek ein neuer Eintrag erscheinen: Der Ladebalken!
Ich gebe dem Balken den Instanznamen "mc_ladebalken" (Wenn ihr einen anderen verwendet, bitte darauf achten, diesen auch Später im Actionscript zu verwenden!!!!), indem ich auf den Balken klicke und den Namen bei unter "Einstellungen" unten im Bild verändere:
Der Balken wäre soweit fertig. Fehlt noch die Prozentanzeige. Dazu ziehe ich mit dem Textwerkzeug ein Textfeld an der gewünschten Stelle auf und treffe die Einstellungen. Wichtig: Achtet darauf, dass im Dropdown-Menü "Dynamischer Text" gewählt ist. Als Instanznamen verwende ich "mc_prozent" (Wenn ihr einen anderen verwendet, bitte auch im Actionscript ändern!!! Nichts in das Textfeld schreiben, da das später im Actionscript automatisch passiert!)
Prozentanzeige und Balken sind fertig. Jetzt brauchen wir den dazugehörigen Actionscript. Der sieht wie folgt aus:
1: Stop () ;
2.this.onEnterFrame = function(){
3.geladen = this.getBytesLoaded();
4.gesamt = this.getBytesTotal();
5.prozent = geladen * 100 / gesamt;
6.mc_prozent.text = Math.round(prozent)+" % geladen";
7.mc_ladebalken._width = prozent*2;
8.if(geladen >= gesamt) {
9.this.gotoAndPlay(2);
10.delete this.onEnterFrame;
11.}
12.}
Kurze Erläuterung: mit "stop();" wir der Film zunächst gestoppt. "this.onEnterFrame" bewerikt, dass eine Funktion beim öffnen der Seite gestartet wird. "geladen" ist die Variable, die Angibt, wie viele Bytes bereits geladen sind. "gesamt" ist die Variable, die angibt, wie viele Bytes die Datei insgesamt hat. Bei der Variable "prozent" wird dann der Prozentsatz ausgerechnet. In der nächsten zeile wird dem dynamischen Text mit dem Instanznamen "mc_prozent" der Text zugewisen. In diesem Fall: "Prozensatz+%+geladen". Das "% geladen" kann man natürlich auch durch den eigenen Text ersetzen. In der nächsten Zeile wird dem Ladebalken mit dem Instanznamen "mc_ladebalken" eine Breite zugewiesen. In diesem Fall die Breite "Prozent*2", dass heißt also, 1% entspricht 2 Pixeln. Der Rest gibt lediglich die Anweisung, zum nächsten Bild zu springen, sobald der Film fertig geladen ist.
Dieser Script kommt auf das erste Bild der Ebene "Aktionen":
Schritt 2 Die eigentliche Homepage
Wer jetzt schon keine Lust mehr hat, sollte ernstahaft darüber nachdenken aufzugeben, denn es ist noch ein weiter weg bis zur eigenen Flash-Homepage.
Als erstes klicke mit der Rechten Maustaste auf das zweite Bild der Ebene "Film" und wähle "Leeres Schlüsselbild einfügen":
In diesem Schlüsselbild erstelle ich jetz die erste Seite, den Index also.Zunächst mache ich mir Buttons. Dazu ziehe ich mit dem Ellipsenwerkzeug [O] eine Ellipse auf. Als Füllfarbe wähle ich einen roten Verlauf, Strichfarbe schwarz. (Tipp: Beim Aufziehen die Shift-Taste gedrückt halten, damit der Kreis auch Rund wird!) Mit dem Textwerkzeug schreibe ich nun bwispielsweise "Home" auf den Button.
Ich wähle nun sowohl den Text als auch die Ellipse aus, indem ich mit dem Pfeil einen Rahmen um beide ziehe:
Nun klicke ich mit der rechten Maustaste auf den Button und wähle "In Symbol konvertieren". Im anschließend erscheinden Fenster wähle ich "Schaltfläche". Als Namen verwende ich zum Beispiel "Button Home". Danach klicke ich auf Ok. Ein weiterer Eintrag erscheint in unserer Bibliothek auf der rechten Seite: Der Button.
Das ganze mache ich für jede Seite, die ich erstellen möchte nocheinmal.
Die Schaltflächen sind vorerst fertig. Als nächstes klicke ich mit der rechten Maustaste auf das nächste Bild der Ebene und wähle "Schlüsselbild einfügen". Und das ganze beim nächsten Bild nocheinmal.
In der Ebene "Aktionen" erstelle ich auf die gleiche weise drei Schlüsselbilder. Jedes dieser drei Schlüsselbilder bekommt in das Aktiosfeld den Befehl "stop();"
Diese beiden Schlüsselbilder sind bei mir die restlichen Seiten. Wenn ihr mehr Seiten wollt, erstellt einfach noch weitere Schlüsselbilder.
Ich gehe wieder zurück zum zweiten Schlüsselbild und wähle da meinen Home-Button aus, in dem ich mit dem Pfeil darauf klicke. Dann gebe ich folgenden Script bei "Aktionen" ein:
1:On (release) {
2:gotoAndStop(2);
3:}
Der Code bewirkt, dass der Film beim Loslassen (=release) der Maustaste zum 2. Bild, also zum Index springt.
Dem "Sonstige-Button" weise ich also folgendes zu:
1On (release) {
2:gotoAndStop(3);
3:}
Hier springt der Film zum dritten Schlüsselbild.
Und das ganze auch noch für den "Seiten-Button":
1:On (release) {
2:gotoAndStop(4);
3:}
Dasselbe mache ich auch in den restlichen Schlüsselbildern mit den Buttons.
Die Navigation ist also fertig. Für den Inhalt zeihe ich einfach im ensprechenden Schlüsselbild ein Textfeld auf und schreibe den gewünschten Text rein.
Damit wäre die Seite an sich fertig.
Ich habe dem ganzen noch einen schwarzen Hintergrund gegeben, indem ich eine weitere Ebene erstellt und ganz nach unten geschoben habe. Auf dieser Ebene hab ich über die gesamte Bühne ein schwarzes Rechteck gezogen.
Ich hoffe das Tutorial hatte euch gefallen :D
Bei Fragen bitte per PN!
Hier zeige ich euch wie ihr eure eigene Flash Homepage machen könnt.
Schritt 1 Vorbereitung
Als erstes erstellen wir ein neues Dokument (Action Script 2.0!)
Die größe könnt ihr ändern wenn ihr unten auf die Registerkarte "Einstellungen" klickt.
Ich habe die größe nicht verändert und bin bei 550 Px*400 Px geblieben..
Als nächstes erstelle ich 2 neue Ebenen. Die untere nenne ich Film aber ihr könnt sie auch anders benennen.
Schritt 2 Der Preloader
Als "Preloader" bezeichnet man den Ladebalken, der vor der Flashanimation erscheint.
Um den zu erstellen, brauche ich zunächste eine Grafik. Ich wähle dazu das "Rechteckwerkzeug", stelle die Füllfarbe auf "Schwarz" und die Strichfarbe auf "Weiß". Dann ziehe ich einen etwa 200 Pixel breiten Balken auf die Bühne. Wichtig: Achtet darauf, dass dabei das erste Bild der "Film"-Ebene gewählt ist:
Jetzt wähle ich den eben erstellten Balken aus (Doppelklick auf den Balken, bzw. mit der Maus einen Rahmen um den Balken ziehen) und klicke mit der rechten Maustatste darauf. Im erscheinenden Menü wähle "In Symbol konvertieren". Im folgenden Fenster treffe ich die Einstellungen:
Nun sollte auf der Rechten Seite in der Bibliothek ein neuer Eintrag erscheinen: Der Ladebalken!
Ich gebe dem Balken den Instanznamen "mc_ladebalken" (Wenn ihr einen anderen verwendet, bitte darauf achten, diesen auch Später im Actionscript zu verwenden!!!!), indem ich auf den Balken klicke und den Namen bei unter "Einstellungen" unten im Bild verändere:
Der Balken wäre soweit fertig. Fehlt noch die Prozentanzeige. Dazu ziehe ich mit dem Textwerkzeug ein Textfeld an der gewünschten Stelle auf und treffe die Einstellungen. Wichtig: Achtet darauf, dass im Dropdown-Menü "Dynamischer Text" gewählt ist. Als Instanznamen verwende ich "mc_prozent" (Wenn ihr einen anderen verwendet, bitte auch im Actionscript ändern!!! Nichts in das Textfeld schreiben, da das später im Actionscript automatisch passiert!)
Prozentanzeige und Balken sind fertig. Jetzt brauchen wir den dazugehörigen Actionscript. Der sieht wie folgt aus:
1: Stop () ;
2.this.onEnterFrame = function(){
3.geladen = this.getBytesLoaded();
4.gesamt = this.getBytesTotal();
5.prozent = geladen * 100 / gesamt;
6.mc_prozent.text = Math.round(prozent)+" % geladen";
7.mc_ladebalken._width = prozent*2;
8.if(geladen >= gesamt) {
9.this.gotoAndPlay(2);
10.delete this.onEnterFrame;
11.}
12.}
Kurze Erläuterung: mit "stop();" wir der Film zunächst gestoppt. "this.onEnterFrame" bewerikt, dass eine Funktion beim öffnen der Seite gestartet wird. "geladen" ist die Variable, die Angibt, wie viele Bytes bereits geladen sind. "gesamt" ist die Variable, die angibt, wie viele Bytes die Datei insgesamt hat. Bei der Variable "prozent" wird dann der Prozentsatz ausgerechnet. In der nächsten zeile wird dem dynamischen Text mit dem Instanznamen "mc_prozent" der Text zugewisen. In diesem Fall: "Prozensatz+%+geladen". Das "% geladen" kann man natürlich auch durch den eigenen Text ersetzen. In der nächsten Zeile wird dem Ladebalken mit dem Instanznamen "mc_ladebalken" eine Breite zugewiesen. In diesem Fall die Breite "Prozent*2", dass heißt also, 1% entspricht 2 Pixeln. Der Rest gibt lediglich die Anweisung, zum nächsten Bild zu springen, sobald der Film fertig geladen ist.
Dieser Script kommt auf das erste Bild der Ebene "Aktionen":
Schritt 2 Die eigentliche Homepage
Wer jetzt schon keine Lust mehr hat, sollte ernstahaft darüber nachdenken aufzugeben, denn es ist noch ein weiter weg bis zur eigenen Flash-Homepage.
Als erstes klicke mit der Rechten Maustaste auf das zweite Bild der Ebene "Film" und wähle "Leeres Schlüsselbild einfügen":
In diesem Schlüsselbild erstelle ich jetz die erste Seite, den Index also.Zunächst mache ich mir Buttons. Dazu ziehe ich mit dem Ellipsenwerkzeug [O] eine Ellipse auf. Als Füllfarbe wähle ich einen roten Verlauf, Strichfarbe schwarz. (Tipp: Beim Aufziehen die Shift-Taste gedrückt halten, damit der Kreis auch Rund wird!) Mit dem Textwerkzeug schreibe ich nun bwispielsweise "Home" auf den Button.
Ich wähle nun sowohl den Text als auch die Ellipse aus, indem ich mit dem Pfeil einen Rahmen um beide ziehe:
Nun klicke ich mit der rechten Maustaste auf den Button und wähle "In Symbol konvertieren". Im anschließend erscheinden Fenster wähle ich "Schaltfläche". Als Namen verwende ich zum Beispiel "Button Home". Danach klicke ich auf Ok. Ein weiterer Eintrag erscheint in unserer Bibliothek auf der rechten Seite: Der Button.
Das ganze mache ich für jede Seite, die ich erstellen möchte nocheinmal.
Die Schaltflächen sind vorerst fertig. Als nächstes klicke ich mit der rechten Maustaste auf das nächste Bild der Ebene und wähle "Schlüsselbild einfügen". Und das ganze beim nächsten Bild nocheinmal.
In der Ebene "Aktionen" erstelle ich auf die gleiche weise drei Schlüsselbilder. Jedes dieser drei Schlüsselbilder bekommt in das Aktiosfeld den Befehl "stop();"
Diese beiden Schlüsselbilder sind bei mir die restlichen Seiten. Wenn ihr mehr Seiten wollt, erstellt einfach noch weitere Schlüsselbilder.
Ich gehe wieder zurück zum zweiten Schlüsselbild und wähle da meinen Home-Button aus, in dem ich mit dem Pfeil darauf klicke. Dann gebe ich folgenden Script bei "Aktionen" ein:
1:On (release) {
2:gotoAndStop(2);
3:}
Der Code bewirkt, dass der Film beim Loslassen (=release) der Maustaste zum 2. Bild, also zum Index springt.
Dem "Sonstige-Button" weise ich also folgendes zu:
1On (release) {
2:gotoAndStop(3);
3:}
Hier springt der Film zum dritten Schlüsselbild.
Und das ganze auch noch für den "Seiten-Button":
1:On (release) {
2:gotoAndStop(4);
3:}
Dasselbe mache ich auch in den restlichen Schlüsselbildern mit den Buttons.
Die Navigation ist also fertig. Für den Inhalt zeihe ich einfach im ensprechenden Schlüsselbild ein Textfeld auf und schreibe den gewünschten Text rein.
Damit wäre die Seite an sich fertig.
Ich habe dem ganzen noch einen schwarzen Hintergrund gegeben, indem ich eine weitere Ebene erstellt und ganz nach unten geschoben habe. Auf dieser Ebene hab ich über die gesamte Bühne ein schwarzes Rechteck gezogen.
Ich hoffe das Tutorial hatte euch gefallen :D
Bei Fragen bitte per PN!