Anzeige
Tutorialbeschreibung

Homepage mit Flash - Teil 1

Homepage mit Flash - Teil 1

 

Dieses Tutorial enthält, den grundlegenden aufbau einer Homepage. Mit Absicht werde ich auf Animationen und Grafiken verzichten, damit Ihr das Wesentliche besser versteht. Ein paar Vorkentnisse, wie z.B. Zeichen und Aufbau der Arbeitsfläche, können nicht schaden.
Für dieses Tutorial habe ich Flash 8 Professional benutzt.


Schritt 1:

Wir öffnen ein neues Flash-Dokument und stellen die Eigenschaften (Strg + F3) des Projektes wie unten im Bild ein.

Bilder


Dieses bestätigen wir mit OK und das war es dann auch schon. Wie wir auf unserer Zeitleiste sehen, befinden wir uns auf Ebene 1 im ersten Frame.

Bilder


Diese Ebene wollen wir jetzt in „Hintergrund“ umbenennen. Dazu Doppelklick auf die Ebene und „Hintergrund“ eingeben.

Jetzt habt ihr es schon fast erraten oder? Diese Ebene wird unser Hintergrund. Ich lasse diesen bei mir so aussehen.
Mit dem Ellipsenwerkzeug (O) zeichne ich eine Ellipse auf die linke Seite meines Zeichenfeldes, dazu wähle ich als Rahmenfarbe „schwarz“ und als Füllfarbe „transparent“.

Bilder

Auf die linke Seite meines Zeichenfeldes zeichne ich ein Rechteck mit dem „Rechteckwerkzeug“ ( R ) mit den gleichen Einstellungen wie bei der Ellipse.

Das sieht dann bei mir so aus.

Bilder

Jetzt zurück in unsere Zeitleiste. Dort markieren wir den dritten Frame in unserer „Hintergrund-Ebene“. Mit einem klick auf die rechte Maustaste öffnet sich ein Menü in dem wir „Bild einfügen“ wählen.

Bilder

Schritt 2:

Unsere Page soll drei Seiten beinhalten, dazu brauchen wir insgesamt 5 Ebenen. Eine haben wir im ersten Schritt schon erstellt, jetzt kommen wir zu den nächsten drei.

Um eine neue Ebene in unser Projekt einzufügen, klicken wir in unserer Zeitleiste auf das „Ebene einfügen“ Symbol.

Bilder

Das machen wir genau drei mal, weil wir ja drei Seiten haben wollen. Gleichzeitig benennen wir die neuen Ebenen in „Seite1“ , „Seite2“ u.s.w. um. So sollte das ganze dann aussehen.

Bilder

Jetzt bereiten wir jede Seite für die Page vor. Wir klicken mit der rechten Maustaste auf den ersten Frame der „Seite1 – Ebene“.

Mit dem Textwerkzeug (T) schreiben wir nun einen beliebigen Text in unser großes Rechteck im Zeichenfeld.

Bilder

Nachdem klicken wir mit der rechten Maustaste auf den zweiten Frame der „Seite1“. In dem erscheinendem Menü wählen wir „Bild entfernen“.

Bilder

Jetzt besteht „Seite1“ nur noch aus zwei Frames. Wiederholt diesen Vorgang noch einmal, so dass nur der erste Frame übrig bleibt.


Weiter zum „Seite2 – Frame“, hier klicken wir mit der rechten Maustaste auf den zweiten Frame und wählen „Schlüsselbild einfügen“. Dieser Frame hat sich jetzt in zwei Teile aufgeteilt. In den zweiten Frame von „Seite2“ schreiben wir mit dem Textwerkzeug wieder einen Text in unser Rechteck. Danach, Rechtsklick auf den dritten Frame und wählen „Bild löschen“.
So sollte das nun in eurer Zeitleiste aussehen.


Bilder

Mit der „Seite3“ machen wir jetzt das Gleiche, nur halt im dritten Frame.
Kurz und bündig :
-dritten Frame rechtsklicken und „Schlüsselbild einfügen“
-Text ins Rechteck einfügen
-fertig

Wenn eure Zeitleiste so aussieht, habt ihr alles richtig gemacht. Bitte beachtet, dass jede Seite einen anderen Text hat, sonst wird’s mit der Kontrolle nachher schwer ;)

Bilder


Schritt 3:

Nachdem unsere Homepage jetzt einen Hintergrund und drei Seiten besitzt, fehlt uns nun nur noch ein Menü.
Dazu fügen wir nun unsere fünfte und letzte Ebene ein. Diese bennen wir in „Menü“ um und klicken sie mit der linken Maustaste an und ziehen sie zwischen die „Hintergrund“ und die „Seite1“ Ebene.

Bilder

Jetzt wählen wir das Textwerkzeug (T) und schreiben in das Textfeld “Link1”, als Schriftfarbe wählen wir rot. Danach ziehen wir das Textfeld in unser große Ellipse.
Markiert jetzt das Textfeld, so dass es blau umrahmt ist.

Bilder


Nun drücken wir F8 und konvertieren unser Textfeld in ein Symbol.
Als Einstellung wählen wir:

Name: Link1
Typ: Schaltfläche
Registrierung: Mittig

Bilder


Die Auswahl “Schaltfläche” ist wichtig, weil nur da später unser Script funktioniert.
Nach dem bestätigen sollte euch auffallen, dass die Umrahmung des Textfeldes sich verändert hat und wenn ihr die Projekt-Bibliothek öffnet (Strg+L) seht ihr, dass dort unsere “Link1- Schaltfläche” eingetragen ist.

Erstellt nun zwei weitere Schaltflächen auf die gleiche Art und Weise, nennt sie “Link2” und “Link3”.

Bilder

So, nun haben wir unser Menü fertig. Jetzt können wir mit dem Script anfangen.

Schritt 4:

Wenn wir jetzt die Homepage testen (Strg+Enter), sehen wir das der Film ohne zu stoppen durchläuft.
Um das zu verhindern, müssen wir dem Film sagen, dass er an bestimmten Stellen des Filmes stoppen soll. Bei uns soll er ersteinmal auf “Seite1” anhalten.
Dazu klicken wir mit der rechten Maustaste auf den grau markierten, ersten Frame der “Seite1” Ebene und wählen “Aktionen”. Hier öffnet sich ein neues Fenster, in diesem Fenster wird das ActionScript eingetragen. Da wir den Frame für “Seite1” markiert haben, gilt das ActionScript nur für diesen Frame.
Aber nun zum Script.
In der oberen linken Ecke seht ihr ein kleines Plus.

Bilder

Wenn ihr darauf klickt, öffnet sich eine “Bibliothek” mit einigen ActionScript Befehlen, schön in verschiedene Kategorien eingeteilt.

Wir wollen den Film stoppen, Also wählen wir “Globale Funktionen” -> “Zeitleistensteuerung” -> “stop”.

Bilder

 

Im Script-Fenster sollte jetzt “ stop(); ” stehen, zu diesem Befehl brauche ich eigendlich nicht viel sagen. Er lässt den Film an der Stelle, wo er eingefügt wurde, anhalten.
Mit einem Klick auf “Aktionen – Bild” (über dem plus) schließen wir das Script-Fenster.
In unserem Frame sollte jetzt ein kleines “a” stehen, dieses bedeutet, dass sich in diesem Frame ein ActionScript befindet.
Wenn wir jetzt den Film testen (Alt+Enter), fällt uns auf, dass der Film bei “Seite1” anhält.
Genau das wollen wir auch bei “Seite2” und “Seite3”. Wiederholt den Schritt wie oben beschrieben auch für die andern Seiten.

Wenn ihr das Script überall eingefügt habt sollte eure Zeitleiste so aussehen.

Bilder

Jetzt haben wir unseren Film dazu gebracht, dass er auf jeder Seite anhält. Bringt uns aber noch nicht wirklich viel, weil wir noch nicht zu den einzelnen Seiten springen können.

Doch das ändern wir jetzt.
Wählt unsere Schaltfläche “Link1” aus und öffnet das Script-Fenster dafür.
Jetzt wollen wir mal ein wenig selber schreiben. In das Textfeld tragen wir ein:

on (release) {

gotoAndPlay(1);

}


Zur Erklärung (Zeile für Zeile):

on (release) {

Wenn gedrückt wird dann...

gotoAndPlay(1);

gehe zu Frame 1 und spiele ihn ab...

}

beendet den Befehl.

Das war es schon, mehr brauchen wir für die Schaltfläche nicht.
Schließt das Script-Fenster und wendet dies für die anderen beiden Schaltflächen an.
Tragt für jede Schaltfläche den passenden Frame ein.
“Link1” = 1
“Link2” = 2
“Link3” = 3
(Seite2 befindet sich in unserem Projekt im zweiten Frame also die 2 u.s.w.)

Wie ihr vieleicht bemerkt habt, seht ihr nun kein kleines “a” in unserer Zeitleiste, das liegt daran, dass wir das Script für ein Objekt erstellt haben und nicht für einen Frame.

Wenn wir jetzt den Film testen, sollten die Schaltflächen zu der jeweiligen Seite springen.

 

Fertig.
Dies ist nur ein kleiner Einblick und ihr wisst nun wie eine Homepage im Grunde aufgebaut ist.
Ich hoffe, ich konnte euch ein wenig helfen. Probiert es selber am besten lernt man immernoch nach dem Motto “Learning by doing” ;) 

 


Wenn man eine FlashPage erstellt hat, dauert es oft lange bis sie geladen wurde. Das liegt meistens an vielen Bildern, die ja in der .swf Datei gespeichert werden.
Große .swf = lange Ladezeit
Hier werde ich euch erklären wie man Bilder und Text dynamisch laden kann, d.h. Die Bilder und der Text sind nicht direkt in der .swf Datei gespeichert. Somit verringert sich die Ladezeit der Seite um einiges.


Teil 1 – Text dynamisch aus einer .txt Datei laden.

 

Das dynamische einladen von Texten ist wohl eine der wichtigsten funktionen von Flash. Ein Vorteil davon ist es das man nicht immer die komplette Seite ändern muß wenn man nur einen Text ändern möchte. Es gibt viele Arten wie man einen Text dynamisch laden kann, ich beschreibe euch hier den einfachsten.
Also fangen wir mal an.
Als erstes brauchen wir die .txt Datei, dazu öffnen wir den Windows standart Texteditor
(Start-Programme-Zubehör-Editor).
Hier geben wir ein:

&text=Hallo Welt! Ich werde dynamisch geladen!

&text – bestimmt text als Variable
Der Text hinter dem = wird dann später in Flash angezeigt.

Bilder


Nun speichern wir die Datei ab und nennen sie quelle.txt.
Als Codierung stellen wir Unicode ein, damit Umlaute wie ä,ö&ü Angezeigt werden können.

Bilder

Jetzt zu Flash.

Wir klicken mit der rechten Maustaste auf den Frame in der unser Text erscheinen soll.
Dort öffnen wir das Aktions-Fenster und wir geben folgende Zeile ein.

loadVariablesNum("quelle.txt",0);

Weiter Erläutern brauche ich diese Zeile nicht, wer einwenig Englisch kann wird sich selber denken können was sie bewirkt ;) Beachtet bitte das die .swf und die .txt im selben Ordner sind, ansonsten müsste der Pfad “quelle.txt” angepasst werden.

Jetzt brauchen wir nur noch das Textfeld in dem unser Text angezeigt werden soll.
Zieht mit dem Textwerkzeug (T) ein Feld in euer Projekt. Damit das laden funktioniert müssen wir das Textfeld noch einwenig bearbeiten.

Bilder

Zur Erklärung.
Dynamischer Text anstatt Statischer Text, weil wir den Text ja nicht festgelegt ist sondern verändert werden kann.
Wählt Mehrzeilig aus damit das Textfeld mehrere Zeilen ausgibt, ansonsten würden wir am Ende nur eine Zeile sehen auch wenn unser Text länger ist.
Var: beschreibt die Variable die in das Feld geladen werden soll.

Jetzt speichert das Projekt im gleichen Ordner wie eure quelle.txt . Wenn ihr nun eure .swf öffnet sollte der Text angezeigt werden.

Teil 2 – ein Bild dynamisch laden

Ein Ähnliches Problem wie oben, gibt es auch oft mit Bilder die ständig wechseln.
Um auch hier nicht immer das ganze Flash-Projekt ändern zu müssen, können wir Bilder dynamisch laden. Hierzu greift Flash immer auf ein bestimmtes Bild mit einem bestimmten Namen zu.

Das zu realisieren ist einfacher als Gedacht. In wenigen Schritten haben wir unser dynamisch geladenen Bild.

Als erstes öffnet ein neues Flash Projekt.
Drückt Strg+F8 um ein Symbol zu erstellen.
Als Einstellungen wählen wir :
Name : bild
Typ : Movieclip

Bilder

Wenn ihr mit OK bestätigt habt befinden wir uns jetzt in der Bearbeitungsfläche für unseren “bild” Movieclip.

Bilder

Jetzt öffnen wir die Aktionen für den ersten Frame und geben folgendes ein.

var mcl = new MovieClipLoader();

container = this.createEmptyMovieClip("container", 1);
mcl.loadClip("bild.jpg", container);

Hier die Erklärung was in dem Script passiert.

var mcl = new MovieClipLoader();
Die Variable mlc wird erstellt und mit der Eigenschaft angegeben ein Objekt zu laden.

container = this.creatEmptyMovieClip(“container”, 1);
Es wird ein neuer MovieClip erstellt mit dem Namen container.

mcl.loadClip(“bild.jpg”; container);
Die Variable mcl wird damit beauftragt die Datei bild.jpg in den container zu laden.

Jetzt schließen wir das Script-Fenster und gehen zurück und klicken oben in der Zeitleiste
auf Szene 1, damit wir uns wieder auf unserer normalen Arbeitsfläche befinden.

Öffnet nun die Projekt-Bibliothek (Strg+L). Dorf sehen wir unseren bild MovieClip.
Zieht diesen in die nähe des oberen linken Randes.

Bilder


Das war es schon. Jetzt könnt ihr das Projekt speichern. Kopiert euch noch ein Bild (.jpg) in den Ordner wo ihr auch das Projekt habt und testet es.

Ich hoffe ich konnte euch wieder einen kleinen Schritt weiter in Richtung Flash Homepage bringen.
In meinem nächsten Tutorial werde ich mit euch einen kleinen Preloader mit Ladebalken und Prozentanzahl basteln.

Ich wünsche euch weithin viel Spaß mit Flash und hoffe wir lesen uns wieder beim nächsten Tut ;)
MfG TheMercenary


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Susan99
  • 22.05.2012 - 20:39

Schön erklärt und gut nachvollziehbar. Vielen Dank!

Portrait von Lupo151080
  • 16.04.2012 - 22:49

danke. sehr gut erklärt!

Portrait von wolfmich
  • 26.02.2012 - 13:52

Gut erklärt hilft mir auf jeden Fall weiter beim erstellen meiner eigenen HP

Portrait von christian1962
  • 06.05.2011 - 01:44

Psd-Bilder mit Flash geht das auch? Vielleicht gibts ja ein Tut.

Portrait von 7himmel
  • 16.04.2011 - 15:25

Nett.... aber wo ist der 2. Teil?

Portrait von toni_87
  • 05.03.2011 - 10:19

Super gute Sache. Dankeschön!

Portrait von kaempferin
  • 01.03.2011 - 19:29

Sehr gut erklärtes Tutorial. Gut zum nacharbeiten, danke.

Portrait von basically
  • 19.02.2011 - 12:03

Mal richtig ausfürhrlich, sodass ich als Anfänger nicht lange suchen muss.
Super!

Portrait von pchilfe4
  • 15.02.2011 - 18:04

super Sache, einfach nachzumachen..

Portrait von nemonic
  • 23.01.2011 - 07:07

selte so gute Tutorials gesehen ! Wirklich gut
Danke .

Portrait von california88w
  • 18.01.2011 - 10:32

danke für dieses super erklärte Tutorial! Alles hat beim ersten Versuch funktioniert.

Portrait von Daimonses
  • 12.12.2010 - 11:47

kann mich nur anschließen.

Portrait von Oberhexerl
  • 24.11.2010 - 11:16

Ich finde es ist supergut beschrieben

Portrait von Docpioneer
  • 30.10.2010 - 11:35

Sehr gutes Tutorial für den Start von Flash sites!

Portrait von Panade
  • 10.09.2010 - 21:07

super tutorial...
aber warscheinlich hat der menschliche dau faktor wieder zugeschlagen da bei mir die schaltflächen ned funktionieren ^^
aber dafür is ja das rumprobieren gut :-)

Portrait von Janosch1408
  • 09.06.2010 - 20:32

genau so ein tutorial habe ich gesucht! Danke

Portrait von aexl
  • 13.05.2010 - 18:17

echt klasse erklärt, versteh sogar ich :D

Portrait von KABLE1992
  • 22.03.2010 - 14:42

Tach auch ich kann leider auf kein Symbol Link1 kein action script anwenden wie muss ich das machen habe adobe cs4 flash

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 21.12.2009 - 00:45

He das ist s das erste mal das die Gestalltung einer Website unter Flash so einfach erklärt wurde. Ganz großes Lob an dich und herzlichen Dank, die Umsetzung hat echt prima geklappt

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 01.12.2009 - 17:17

Super Tutorial, für den Einstieg genau das Richtige.

x
×
×