Überblenden Tutorial

[labrar]

So. Ich wage mich nun an mein erstes Tutorial ran(Also bitte nicht lachen).

Dieses Tutorial ist an alle Flasheinsteiger gerichtet, die schon immer wissen wollten, wie man
Die verschiedenen Inhaltsseiten sauber überblendet wie zB. Bei www.lenssenundpartner.de.

Wir beschäftigen uns mit zwei Varianten.

Ich würde vorschlagen Ihr baut beide nach, damit Ihr auch lernt und versteht wie Flash arbeitet.

Es geht los:

Variante1.


Um es so einfach wie möglich zu halten arbeiten wir nicht mit Textlichen Inhalten, sondern mit verschiedenfarbigen Vierecken die unsere Inhalte symbolisieren. In diesen Beispielen verwenden wir nur 3 verschieden Kategorien, da wenn man mal verstanden hat wie es geht, dies beliebig erweiterbar ist.


So.
Flash ist geöffnet und wir sehen die Flashbühne vor uns. Mit F11 öffnen wir die Bibliothek, die noch leer sein sollte.

Schritt 1

Zunächst fügen wir unserer bisher einzigsten Ebene noch zwei weitere hinzu. Diese Ebenen benennen wir nun mit Doppelklick auf der jeweiligen, von unten nach oben mit den Namen „Inhalte“, „Buttons“ und „Aktionen“.

Mit einem Klick auf die Ebene „Inhalte“ wird diese blau markiert und ist somit aktiv.

Schritt 2

Nun verwenden wir das Rechteckwerkzeug, wählen die Füllfarbe blau(Linienfarbe entweder auch blau oder transparent), und ziehen ein Quadrat auf der Bühne auf. Mit gleichzeitigem drücken von „Shift“ bekommt es automatisch gleichlange Seiten. Was aber nicht wichtig ist da wir unter Eigenschaften sowieso die Größe festlegen. Und zwar 400 mal 400.(Das Schloßsymbol sollte „geöffnet“ zeigen“)

Dieses blaue Quadrat(falls nicht schon markiert) markieren wir nun mit einem Mausklick darauf, drücken die taste F8 und wählen hier nun die Option „In Movieclip umwandeln“ aus.
Der Name „Symbol 1“ weicht dem Namen „Blau“.(Von Hand eingeben)

In unserer Bibliothek ist nun ein blaues Symbol zu sehen mit dem Namen „Blau“.

Unser blaues Quadrat können wir nun mit „Entf“ von der Bühne entfernen. Wir haben es ja in der Bibliothek.

Nun wiederholen wir Schritt 2 noch zwei mal mit den jeweiligen Farben „Rot“ und „Grün“.
(Wie passend bei der politischen Lage grins).

Wir haben jetzt also 3 Symbole in unserer Bibliothek mit den Namen „Blau“, „Grün“ und „Rot“.

Schritt 3

Unsere Quadrate symbolisieren also unsere Inhaltseiten. In unserem Beispiel lassen wir mal das blaue die Seite „ Home“ symbolisieren.
Im Grunde ist es egal wie wir die verschiedenen Seiten animiert anzeigen. Ob diese nun von links , oben unten oder rechts einfliegen, oder ob Sie einfach langsam aus dem Nichts kommen. Wir entscheiden uns in diesem Fall für einen Alphatweeneffekt. D.h die verschiedenen Seiten (Quadrate) werden langsam sichtbar und wieder unsichtbar.

Wir befinden uns immer noch auf der Ebene „Inhalte“(blau markiert) und ziehen nun das blaue Quadrat aus unserer Bibliothek auf unsere Bühne. Schlüsselbild 1(das momentan das einzigste sein sollte) auf der Zeitleiste hat nun einen schwarzen Punkt. D.h. es befindet sich etwas darauf. Dieses Schlüsselbild benennen wir nun unter Eigenschaften, Bild mit „blau“.
Das Schlüsselbild hat nun ein rotes Fähnlein auf der Stirn.

Nun klicken wir auf der selben Ebene auf Bild 10. (Unser Quadrat ist weg) Hier befindet sich noch kein Schlüsselbild.
Darum drücken wir nun auf F6 um unser erstes Schlüsselbild dorthin zu kopieren. Unser Quadrat erscheint wieder auf der Bühne. Dieses Schlüsselbild bekommt den Namen „blauaktiv“.
Bei Bild 20 erstellen wir ebenfalls mit F6 eine Kopie unseres Schlüsselbildes. Dieses Schlüsselbild müssen wir nicht benennen.

Die Animation

Mit einem Klick auf Schlüsselbild „blau“ sind wir wieder auf dem ersten Bild. Nun klicken wir auf unser blaues Quadrat und stellen unter Eigenschaften den Wert „o“ ein. Unser Quadrat ist nun unsichtbar. (Welch Magie).

Bei Bild 20 machen wir das genauso. Jetzt dürfte unser Quadrat nur noch im Bild „blauaktiv“ zu sehen sein.
Nun klicken wir jeweils zwischen die Bilder „blau“ und „blauaktiv“ und Bild 20 und erstellen hier unter Eigenschaften Bewegungstweens. Die Leerräume zwischen unseren Bildern sind nun einem Pfeil gewichen.

Wenn wir nun testen sehen wir wie das blaue Quadrat langsam sichtbar und wieder unsichtbar wird.

Ab Bild 21 wiederholen wir den Schritt 3 mit den anderen Quadraten in der Reihenfolge „rot“ und „grün“. D.h. rot verwendet Bild 21,30 und 40 und grün 41,50,60.
Die Bildnamen in diesen Fällen sind logischerweiße „rot“, „rotaktiv“ und „grün“, „grünaktiv“.

Wenn alles erledigt ist und wir nun testen wird zuerst das blaue sichtbar und fadet wieder aus dann das rote und schließlich das grüne.

Schritt 4

So. Bisher ist es ein nettes Farbenspiel, aber der User möchte ja auch Zeit um etwas zu lesen.
(Wir verenden zwar in diesem Beispiel keinerlei Texte, aber ihr werdet das später sicherlich tun)
D.h hier kommen unsere ersten Programmierarbeiten zum tragen.

Der Ordnunghalber werden wir uns darauf einigen, sämtliche Scripte die wir schreiben, nur auf der Ebene „Aktionen“ einzufügen. Da hier nur ein Schlüsselbild zu finden ist, und man nur in Schlüsselbilder schreiben kann, werden wir hier noch ein paar „leere Schlüsselbilder“ hinzufügen.

Wir klicken auf die Ebene“Aktionen“ so das nun diese blau markiert ist.

Mit der rechten Maustaste klicken wir nun jeweils auf Bild 10, 20, 30, 40, 50, und 60 und wählen jeweils die Option „leeres Schlüsselbild einfügen“.

Den vollständigen Inhalt unserer haben wir nun auf „blauaktiv“(Bild 10), „rotaktiv“(Bild 30) und „grünaktiv“(Bild 50), da hier unsere Quadrate in voller Pracht anzusehen sind.
Sprich wir müssen Flash nun sagen das es jeweils an diesen Punkten anhalten soll bis der User durch einen Klick auf einen Button einen neuen Befehl erteilt.

Dieser Befehl ist einfach und bedarf keinerlei erkärung da er sich selbst erklärt.

Wir klicken also nacheinander auf diese 3 Schlüsselbilder und geben unter „Aktionen Bild“ jeweils folgende Programmzeile ein.

stop(); 

Wenn wir nun testen sehen wir wie unser blaues Quadrat langsam sichtbar wird und dann auf Schlüsselbild „blauaktiv“ stehen bleibt.

[labrar]

Schritt 5

Jetzt kommt leben ins Spiel.

Buttons

Wir klicken auf die Ebene „Buttons“ (blau markiert) und ziehen aus unserer Bibliothek alle drei Quadrate auf die Bühne und reihen diese untereinander an. Wir klicken jedes dieser Quadrate nacheinander an und geben ihnen unter Eigenschaften die Große 50 mal 50.

Bitte Ordnet die nun kleinen Quadrate so an das sie sich nicht mit den großen auf der Bühne überschneiden. Wär zwar nicht schlimm sieht aber ziemlich schade aus.

Nun klicken wir jedes dieser kleinen Quadrate nacheinander an und machen mit F8 jeweils eine Schaltfläche daraus. Einen besonderen Namen müsst ihr hier nicht vergeben. Das könnt ihr Flash überlassen.

Wir sollten nun darauf achten das unsere Ebene „Buttons“ genauso viele Bilder hat wie unsere Ebene „Inhalte“. Im Zweifelsfahl einfach das letzte Bild mit rechter Maustaste anklicken und die Option Bild einfügen wähle. !!Wichtig!!Es darf unter der Buttonebene nur das erste Bild ein Schlüsselbild sein. D.h. im Prinzip verlängern wir dieses nur.
Richtig ist es wenn das erste Bild einen schwarzen Punkt und das letzte ein kleines Rechteck hat.

Würdet ihr weitere Schlüsselbilder einbauen so wären unsere Buttons ab diesen Bildern nicht mehr aktiv.

So. Wir haben jetzt 3 Buttons erstellt denen wir jetzt leben einhauchen.

Zunächst klicken wir auf unseren blauen Button und geben unter „Aktionen Schaltfläche“ folgenden Code ein:

on(press){
blau=true;
play();
} 

Mit der Zeile on(press) haben wir Flash gesagt(Beim Mausklick) zwischen unseren {} steht dann die Anweisung die Flash ausführen soll.

Die Zeile blau=true; hat die Variable „blau“ ins Leben gerufen. Somit weiß Flash das „blau“ nun true (wahr) ist.
Die Zeile play(); kennen wir alle von unseren DVD Playern und Videorecordern. Sie sagt nix anderes als play (spiel ab).

Schritt 5 wiederholen wir mit den übrigen Buttons wobei die Variable blau natürlich dementsprechend in rot und grün umgewandelt wird. Also rot=true; und grün=true; .

Wenn wir jetzt testen fadet unser blaues wieder ein und bleibt stehen. Klicken wir nun auf einen der Buttons läuft unser Filmlein weiter bis zum nächsten Stop. Der Reihe nach also rot und schließlich auf Grün.
Ganz egal auf welches wir klicken, die Reihenfolge bleibt die gleiche. Es wäre also Zufall wenn wir auf Grün klicken und dann auch grün kommt. Dies wäre nur der Fall wenn wir vorher auf Rot gewesen wären.
Mit unserer Klickerei haben wir nur Flash erklärt das alle Variablen true sind und das es abspielen soll.

Ziel ist aber das bei Klick auf Grün auch Grün kommt. Unabhängig von der derzeitigen Position.

Dies bewerkstelligen wir mit

Schritt 6

Gesetztenfall wir befinden uns auf dem Schlüsselbild „rotaktiv“. So wäre es unsinnig die Variable „rot“ am Leben zu erhalten. Denn wir sind ja schon da wo wir hinwollten.

Also. Wir markieren die Ebene „Aktionen“. Auf Bild 10( also unter „blauaktiv“) sagen wir Flash nun das die Variable „blau“ nicht mehr benötigt wird.

Wir haben in diesem Bild ja schon eine Zeile programmiert. Diese belassen wir auch wie sie ist und schreiben darunter.

stop();
blau=false; 

Die Zeile blau=false; bewirkt das Gegenteil von blau=true;. Somit ist die Variable „blau“ für Flash nicht mehr existent. Zumindest bis zum nächsten Klick auf Blau.

Schritt 6 wiederholen wir unter Bild 30 und 50( also unter“rotaktiv“ und „grünaktiv“) wobei auch hier die Variablen der dementsprechenden Farbe angepasst werden.

Also rot=false; und grün=false;

Soweit so gut. Allerdings sind wir jetzt beim Testen nicht weiter wie nach Schritt 5.

Flash weiß lediglich wann eine Variable Wahr oder Falsch ist. Es weiß aber nicht was es tun soll wenn zB. Grün wahr ist.

Dies machen wir im

Schritt 7

So.
Bild 1 bis Bild 30 ist unser blauer Bereich, Bild 21 bis 40 unser roter und Bild 41 bis Bild
60 unser grüner.

Wir befinden uns noch in der Ebene Aktionen.
Bei den Bildern 20, 40 und 60 haben wir ja bislang leere Schlüsselbilder stehen(Sind durch einen Kreis gekennzeichnet). Diese Bilder sind, wenn ich keine Fehler gemacht habe jeweils 1 vor Bild „blau“, „rot“ und „grün“. Da 60 das letzte Bild ist stimmt es schon das es 1 vor „blau“ist. Denn Flash fängt ab dieser Stelle ohnehin wieder von vorne an.

In diesen Bildern müssen wir Flash nun sagen was denn passieren soll wenn unser Film an der jeweiligen Stelle ist. D.h. wir sagen Flash das wenn zB „grün“ wahr ist, dass er dann auch bitte dorthin springen soll.

Dies geht folgendermaßen.

Wir klicken in der Ebene „Aktionen“ auf Bild 20 und geben unter „Aktionen Bild“ folgendes ein.

if(blau){
gotoAndPlay("blau");
}
if(grün){
gotoAndPlay("grün");
}
if(rot){
gotoAndPlay("rot");
} 

Somit haben wir Flash gesagt wenn rot aktiv(wahr ist) gehe zu Schlüsselbild „rot“ und spiele von da ab.
Wenn „grün“ aktiv(wahr)ist gehe zu Schlüsselbild „grün“ und spiele von da ab.
Bei blau das selbe.



D.h. Bei Bild 40 und 60 wäre es der selbe Code

if(blau){
gotoAndPlay("blau");
}
if(grün){
gotoAndPlay("grün");
}
if(rot){
gotoAndPlay("rot");
}



So. Die erste Variante ist fertig. An die zweite setzte ich mich heute Nacht noch dran.

Ich hoffe es war aufschluss und hilfreich bei euren Gehversuchen mit Flash. Ich hoffe ebenfalls das ihr darauf aufbauen könnt.

Ich habe jetzt dieses Tutorial nicht nach Schreibfehlern gecheckt. Also seit nachsichtig.

Falls ihr Fehler in den Scripten oder im Tut selbst, lasst es mich wissen. Ich habe das Tut aus dem Kopf gebaut, aber nicht getestet. Da kanns schon sein das man mal was durcheinander bringt grins.

Viel Spaß

[labrar]

Ich hab das tut jetzt mal zum testen nachgebaut.
Es funzt hat aber wie ich dachte ein paar Schönheitsfehler. Mit dem aus dem tut erworbenen Wissen könnt ihr diese aber leicht selbst beheben. Einfach mal probieren.

[labrar]

So. Wie versprochen kommt hier das tut zu Variante 2.

Ziel ist es das http://jobparadise.de/farben.swf zu erstellen.

Der Unterschied zwischen 1 und 2:

Bei Variante 1 lagen unsere verschiedenen Farben fadeins und fadeouts auf der Zeitleiste hintereinander.

Sprich wenn man auf eine andere Farbe klickte, fadete die vorherige erst aus, und dann kam unsere Wunschfarbe.

Bei Variante 2 soll es aber so sein das während die vorige Farbe ausblendet, die neue schon einblendet.

Da Flash nicht an zwei Stellen (!!einer!!) Zeitleiste gleichzeitig abspielen kann, müssen wir hier unsere

Farbentweens seperat erstellen. D.h. jetzt bekommt die Bedeutung "mc" endlich einen Sinn.

Im Prinzip habt ihr bei Variante 1 schon mc's gebaut. Wenn ihr etwas mit F8 in ein Symbol(Movieclip) umwandelt, ist

das schon ein Mc. MC steht für MovieClip.

Da dieses Tutorial etwas komplexer ist werde ich auf Erklärungen wie ZB."Wie benenne ich Schlüsselbilder"

verzichten. Wer das 1. gemacht hat weiß wies geht.

So.

Wie beim 1. Tut werden wir auch hier wieder unsere 3 Quadrate mit den Farben blau, rot und grün aufziehen und diesen

wieder die Größe 400 auf 400 geben. Diese werden wieder wie oben in mc's umgewandelt und unter den Namen blau, rot

und grün in der Bibliothek abgelegt.

Wir fangen zunächst einmal an unsere Quadrate wieder zu tweenen.

Hierzu ziehen wir irgendeines dieser Quadrate von der Bibliothek auf die Bühne und klicken darauf.

Jetzt machen wir daraus wieder einen Mc. ??????? Aber das ist doch schon ein MC????????? Ja das ist korrekt.
Dieser geht auch nicht verloren. Im Prinzip machen wir hiermit nichts anderes als unseren bisherigen mc in einen

neuen mc zu stecken.

Die Namensvergebung für diesen neuen Mc sollte je nach Quadrat das ihr verwendet habt blaumov, oder rotmov oder

grünmov sein.

Das müsst ihr nicht dreimal machen. Kommt gleich warum nicht.

So ihr seid jetzt im MC blaumov oder rotmove oder grünmov.(Steht über der Zeitleiste)

Unser ürsprünglicher MC ist noch in der Bibliothek und erfreut sich auch auf der jetzt zu sehenden Bühne bester

Gesundheit.

Die Ebene auf der unser mc sitzt bennenen wir ersteinmal um in den Namen" Farbe".
Dieser Ebene fügen wir noch zwei weitere hinzu. Die mittlere der beiden nennen wir"Aktionen" und die oberste

"Bildbezeichner".
Wir markieren die Ebene Farbe und ziehen unser Schlüsselbild(in dem unser Mc sitzt) ein Bild nach rechts.
Das bedeutet wir haben nun auf Bild 1 ein leeres Schlüsselbild, und auf Bild 2 unser mit dem mc gefüllten

Schlüsselbild.

Nochmal zu erinnerung. Leeres Schlüsselbild = ungefüllter Kreis und gefülltes Schlüsselbild=gefüllter Kreis.


So.Nun kopieren wir wieder wie bei tut 1 unser MC Schlüsselbild mit F6 auf Bild 15 und 30.

Unser mc sitzt jetzt also auf 2, 15und 30. Bei Bild 2 und Bild 30 soll unser Mc wieder unsichtbar sein, also stellen

wir hier den Alphawert auf 0 und erstellen jeweils zwischen den Bildern einen Bewegungstween.


Ihr könnt jetzt gern mal die Szene testen. Unser Quadrat sollte jetzt ständig ein und ausfaden.
Aber so solls ja nicht sein.

Wir benötigen für unsere Quadratmcs jeweils 2 Bildbezeichner. Den ersten(logischerweise in der Ebene Bildbezeichner)

auf Bild 2(natürlich erst leeres Schlüsselbild einfügen)welches wir "in" nennen, und auf Bild 16 welches wir "out"

nennen.

Auf Bild zwei "in" da hier unser Mc anfängt einzufaden. Und "out" Bei 16 da er hier anfängt auszufaden. Bild 15 ist

ja im Prinzip unsere Endposition wo unser MC in voller Farbenpracht da steht.

Unsere Ebene Bildbezeichner können wir nun verlassen(hier sind wir fertig) und begeben uns auf die Ebene "Aktionen".

Unser Mc soll ja nur dann einfaden wenn wir es ihm sagen. Also brauchen wir bei Bild 1 erstmal ein leeres

Schlüsselbild in das wir den Befehl

stop(); 

einfügen.
Wenn wir jetzt aber genau dieses MC mit unserem Button aufrufen wollen wir ja nicht nur sehen wie es ein und wieder

ausdfadet. Schließlich wollen wir es ja in seiner vollsten Farbepracht bewundern. Ergo benötigen wir bei Bild 15

nochmals ein leeres Schlüsselbild mit dem Befehl

stop(); 

.

Nehmen wir an dieses MC wäre jetzt unser blaues MC dann wäre ja an dieser Position(Bild 15) unser blauer Inhalt voll

zu sehen. Das teilen wir unserm Flash natürlich gleich mit indem wir unseren Code um eine Zeile erweitern.

stop();
blau=true; 

Wenn wir uns nun via Button für eine andere Farbe entscheiden, sollten wir Flash auch mitteilen, das blau nicht

länger wahr ist. Also setzten wir bei Bild 16 wieder ein leeres Schlüsselbild das wir mit

blau=false; 

programmieren.
Das Bild 16 befindet sich direkt unter unserem Bildbezeichner "out". Das heißt hier fängt unsere Fadeoutsequenz an.

Unser Mc wäre somit fertig gestellt.

Ihr müsst nicht diese ganzen Schritte noch zweimal wiederholen. Es geht folgendermaßen einfacher:

In der Bibliothek auf euren "blaumov" (sofern das euer bearbeiteter war.Ansonsten eben entsprechend)mit Rechtklick

klicken und die Option "Duplizieren" verwenden. Flash gibt hier einen Namen vor"Kopie von..." welchen wir natürlich

sofort durch "rotmov" oder "grünmov" oder "blaumov"(eben entsprechend) ersetzen. Jetzt haben wir schon zwei

Farebnmoves in der Bibliothek. Wir brauchen aber 3. Also nocheinmal Duplizieren.

So. Nun haben wir zwar 3 Farbenmoves(rotmov,blaumov und grünmov) die zwar immer anderst heißen aber eigentlich den

gleichen Inhalt haben.
Ganz simpel. Klickt nacheinander doppelt auf die beiden deren Namen nicht mit der Farbe übereinstimmt, geht auf die

ebene Farben und klickt eure Mcs bei Bild 2, 15 und 30 an.(Bei 2 und 30 ist es etwas schwierig da diese ja

unsichtbar sind.Wenn ihr aber auf das entsprechende Schlüsselbild klickt sind diese blau umrahmt) und wählt unter

Eigenschaften austauschen. Hier wählt ihr dann einfach entsprechend der farbe das mc grün, rot oder blau.
Die Befehel "blau=true; und "blau=false;" müsst ihr natürlich entsprechend der Fareb ändern in "rot=true;" und

"rot=false;" und "grün = true;" und "grün=false;".

Richtig ist es dann wenn ihr in eurer Bibliothek rotmov anklickt und im kleinen weißen Fenster auf das play Symbol

klickt und hier dann auch das rote Quadrat ein und ausfadet.

Checkt das bei allen drei.

Funktioniert alles? Nein? Dann geht nochmal eure Mcs durch. Ja? Ok dann weiter.


Bei allgemeinen Dingen über unsere rotmov,grünmov und blaumov mcs kürze ich jetzt einfach mal ab und verwende das

Wort " mov's".

Bei unseren mov's haben wir jetzt also überall in Bild 2 einen Stopbefehl. So soll es ja sein. Nur wenn wir es so

lassen würden, würde unser Film zwar nachdem wir unsere Buttons erstellt und programmiert haben funktionieren, aber

man würde erst ein Quadrat sehen wenn man dementsprechend auf einen Button klickt.

Wenn ein Besucher auf unsere Seite klickt will er aber vorab nicht nur unsere Buttons sehen. Ergo halten wir es wie

beim tut zu Variante 1.
Blau wird wieder unsere Homeseite und somit diese die gleich zu Beginn zu sehen ist.

Also doppelklick auf unseren blaumov. Das stop(); im Schlüsselbild 1 wird wieder entfernt. Dafür erstellen wir auf

Bild 30 ein leeres Schlüsselbild in das wir wieder ein

stop(); 

einfügen.

Somit läuft unser blaues nun schön bis zur Vollständigkeit durch und ist gleich beim laden der Seite zu sehen.
Ich muss nicht erklären warum anstelle Bild1 bei Bild 30 ein stop eingefügt wurde. Die Frage könnt ihr euch selbst

beantworten wenn ihr überlegt was passieren würde wenn hier kein stop wäre.

Endspurt.

Wir klicken über unserer Zeitleiste auf das Symbol Szene 1 und sind somit wieder im Root.(Auf unserer Hauptbühne und

somit Hauptzeitleiste.

Hier fügen wir der bereits vorhandenen Ebene noch 3 weitere hinzu. Von unten nach oben benennen wir diese Ebenen nun

mit blau, rot , grün und Buttons.
Wir achten darauf das sich nur leere Schlüsselbilder auf der Zeitleiste befinden. Sollte dem nicht so sein dann

klicken wir auf das entsprechende Schlüsselbild, suchen den Übeltäter auf der Bühne und schicken ihn mit Entf ins

Nirvana.

Nun klicken wir auf unser Schlüsselbild auf Ebene blau und ziehen unseren blaumov aus der Bibliothek auf die

Bühne.Somit ist unser Schlüsselbild wieder gefüllt. Natürlich sieht man unser blaues Quadrat nicht da unsere moves

ja da beginnen wo unsere Quadrate noch unsichtbar sind.

Stattdessen sieht man nun einen kleinen Kreis auf der Bühne.

Unter Eigenschaften sieht man aber die Zeile Instanz von: blaumov. Links von dieser Zeile sehen wir ein Optionsmenüe
das uns sagt "Das hier ist ein Movieclip".
Direkt darunter ist ein kleines weißes Feld in das ihr nun "blau" schreibt. Somit habt ihr der Instanz "blaumov" den

Instanznamen "blau" gegeben und sie somit Flash bekannt gemacht. Aber dazu später.

Das wiederholt ihr nun auf den anderen Farbenebenen grün und rot mit den entsprechenden mov's und gebt ihnen

entsprechende Instanznamen. Und zwar "rot" und "grün".

Wenn ihr es jetzt testet passiert ausser das euer blaues Quadrat einfadet gar nichts. So solls im Moment ja auch

sein.

[labrar]

Nun klicken wir auf das leere Schlüsselbild in der Ebene "Buttons" und ziehen hier einen von unseren mcs (rot, grün

oder blau") auf die Bühne. !!!Nicht unsere mov's!!!!

Unser Schlüsselbild unter Buttons ist jetzt gefüllt. Diesen mc wandeln wir jetzt mit F8 zum MovieClip "blaubtn" um.
(wenn es natürlich der rote ist dann logischerweiße rotbtn.und befinden uns sogleich in ihm.Unser Quadrat ist

natürlich viel zu groß für einen Button.Darum geben wir ihm die Große 50 mal 50.

Nun klicken wir auf unser Quadrat und wandeln es mit F8 in eine"Schaltfläche"um.
Wie sehen in unserer Zeitleiste nun ein gefülltes Schlüsselbild welches wir sogleich mit F6 auf Bild 2 kopieren.
Wir haben nun 2 gefüllte Schlüsselbilder nebeneinander. Warum das ganze erfahrt ihr später.
Wir fügen unserer Ebene noch zwei hinzu und benennen nun alle 3 von unten nach oben mit "Button, Aktionen und

Bildbezeichner".
Bei Ebene Bildbezeichner müssen wir noch ein leeres Schlüsselbild einfügen und bei Ebene Aktionen. Somit haben wir

jetzt insgesamt 6 Schlüsselbilder auf Bild1 und Bild 2 verteilt. Das ertse Schlüsselbild auf der Ebene

Bildbezeichner bekommt den Namen "an" und das zweite "aus".

Dies hat folgenden Grund:

Wie werden in den weiteren Schritten nur die Schaltfläche auf Bild 1 programmieren. Nicht die Kopie auf Bild 2.Somit

hat die Schaltfläche auf Bild 2 keinerlei funktionen und verhindert somit das der user nicht unendlich auf diese

Schaltfläche klickt und somit unser z.B. blaues Quadrat ständig zum einfaden animiert obwohl es schon da ist.

Unter der Ebene Aktionen werden wir nun in beiden leeren Schlüsselbildern ein

stop(); 

plazieren.

Nun gehen wir wieder in unsere Bibliothek und duplizieren unser blaubtn(sofern es das blaue ist) zweimal und

vergeben entsprechende Namen. Sodaß nun in unserer Bibliothek ein "blaubtn, rotbtn und ein grünbtn" zu finden ist.

Desweiteren haben wir in unserer Bibliothek ein Schaltflächen Symbol mit dem Namen Symbol 1(sofern wir es nicht

anderst benannt haben). Diese duplizieren wir auch 2 mal mit jeweils den Nämen "Symbol 2 und Symbol 3".

Nun doppelklicken wir in Symbol 2 und tauschen das hier gezeigte Quadrat unter Eigenschaften/Austauschen.Hier

verwenden wir wieder unsere Mc's "rot,blau oder grün". Ziel ist es eben jedem dieser Schaltflächen symbole eine

andere Farbe zu zuweißen.

Nun gehen wir nacheinander in die btn's( so nenne ich jetzt unsere "rotbtn, blaubtn und grünbtn")die wir dupliziert

haben und tauschen unsere Schaltflächen in das Schaltflächensymbol das farblich dazugehört.!!!Jeweils bei Bild 1

und 2!!!!

Jetzt gehen wir wieder auf unsere Hauptbühne(Symbol Szene 1 über der Zeitleiste) und markieren unsere Ebene

"Buttons".Hier haben wir ja schon einen btn drin und müssen nur noch die zwei anderen auf die Bühne ziehen.
Diese ordnen wir nun schön links oben untereinander an.

Jetzt klicken wir jedes unserer btn's einzeln an und vergeben Ihnen entsprechend Instanznamen. Und zwar:
blaubtn, rotbtn und grünbtn.

Somit haben wir nun Flash auch unsere btn's vorgestellt. :-)

Nun klicken wir doppelt auf unseren blaubtn auf der Bühne und befinden uns nun in ihm.(Wir sehen zwar trotzdem die

anderen beiden noch, sind aber im mc "blaubtn".Nun klicken wir einmal auf unser blaues kleines Quadrat und geben bei

Aktionen Schaltfläche folgenden Code ein:

on(press){
this._parent.blau.gotoAndPlay("in");
if(this._parent.grün.grün){
    this._parent.grün.gotoAndPlay("out");
    }
    if(this._parent.rot.rot){
    this._parent.rot.gotoAndPlay("out");
    }
    gotoAndStop("aus");
    this._parent.rotbtn.gotoAndStop("an");
    this._parent.grünbtn.gotoAndStop("an");
    
} 

Jetzt bekommen unsere ganzen Instanznamen und variablen einen Sinn.

Ich erkläre das Script mit den Worten hiter //

on(press){ //beim klick
this._parent.blau.gotoAndPlay("in");// gehe in das mc mit dem Instanznamen blau und spiele von dort ab dem Bild 
 
"in".
if(this._parent.grün.grün){ //Wenn das mc mit dem Instanznamen "grün" wahr(grün) ist...
    this._parent.grün.gotoAndPlay("out");//...gehe in das mc mit dem Instanznamen "grün" und spiele ab Bild 
 
"out"
    }
    if(this._parent.rot.rot){//Wenn das mc mit dem Instanznamen "rot" wahr(rot) ist...
    this._parent.rot.gotoAndPlay("out");//...gehe in das mc mit dem Instanznamen "rot" und spiele ab Bild "out"
    }
    gotoAndStop("aus"); //gehe hier(in diesem mc) auf Bild "aus"
    this._parent.rotbtn.gotoAndStop("an");//gehe in das mc mit dem instanznamen"rotbtn" und halte an bei Bild 
 
"an"
    this._parent.grünbtn.gotoAndStop("an");//gehe in das mc mit dem instanznamen"grünbtn" und halte an bei Bild 
 
"an"
    
} 

ohne _root, _parent, oder this. bezieht sich der Befehl immer auf den Mc in dem der Befehl sitzt.
this._parent und _root sind Pfadangaben zum jeweiligen mc der durch einen Instanznamen gekennzeichnet ist.

Hätten wir jetzt unserem grünmov den Instanznamen" gr" gegeben wäre dir erste if Abfrage so:

if(this._parent.gr.grün)

Das zweite grün bleibt stehen da wir ja im mc grünmov bei Bild 15 gesagt haben grün=true;.Sprich.Das ist unsere

Variable die unser Script nach ja(wahr) oder nein(nicht wahr) abfragt.

So.Jetzt gehen wir wieder auf die Hauptbühne./Szene 1) und wiederholen das mit den beiden anderen btn's wobei hier

natürlich der Code dementsprehcend geändert werden muss.

Also bei rot:

on(press){
this._parent.rot.gotoAndPlay("in");
if(this._parent.grün.grün){
    this._parent.grün.gotoAndPlay("out");
    }
    if(this._parent.blau.blau){
    this._parent.blau.gotoAndPlay("out");
    }
    gotoAndStop("aus");
    this._parent.blaubtn.gotoAndStop("an");
    this._parent.grünbtn.gotoAndStop("an");
} 

und bei grün

on(press){
this._parent.grün.gotoAndPlay("in");
if(this._parent.blau.blau){
    this._parent.blau.gotoAndPlay("out");
    }
    if(this._parent.rot.rot){
    this._parent.rot.gotoAndPlay("out");
    }
    gotoAndStop("aus");
    this._parent.rotbtn.gotoAndStop("an");
    this._parent.blaubtn.gotoAndStop("an");
} 

Ich hoffe Ihr konntet was lernen und möchte mich an dieser Stelle für mögliche(ganz sicher) Schreibfehler

entschuldigen.

Ich habe leider nur nachts Zeit sowas zu machen. Und da kommt dann so ein Kauderwelsch rüber grins.

Wenns unverständlich erklärt ist bitte aufs schärfste Kritisieren. :-)


Das fla hängt als zip an.

[.:morpher:.]

@labrar: wo finde ich bei der lensen... seite die sauberen Überblendungen zwischen den Inhaltsseiten ?

[labrar]

Jo wurde geändert.

Der Thread hat auch schon ein paar Tage aufm Buckel

[pano]

Zitat von labrar

Nun klicken wir auf das leere Schlüsselbild in der Ebene "Buttons" und ziehen hier einen von unseren mcs (rot, grün

oder blau") auf die Bühne. !!!Nicht unsere mov's!!!!

Unser Schlüsselbild unter Buttons ist jetzt gefüllt. Diesen mc wandeln wir jetzt mit F8 zum MovieClip "blaubtn" um.
(wenn es natürlich der rote ist dann logischerweiße rotbtn.und befinden uns sogleich in ihm.Unser Quadrat ist

natürlich viel zu groß für einen Button.Darum geben wir ihm die Große 50 mal 50.

Nun klicken wir auf unser Quadrat und wandeln es mit F8 in eine"Schaltfläche"um.
Wie sehen in unserer Zeitleiste nun ein gefülltes Schlüsselbild welches wir sogleich mit F6 auf Bild 2 kopieren.
Wir haben nun 2 gefüllte Schlüsselbilder nebeneinander. Warum das ganze erfahrt ihr später.
Wir fügen unserer Ebene noch zwei hinzu und benennen nun alle 3 von unten nach oben mit "Button, Aktionen und

Bildbezeichner".
Bei Ebene Bildbezeichner müssen wir noch ein leeres Schlüsselbild einfügen und bei Ebene Aktionen. Somit haben wir

jetzt insgesamt 6 Schlüsselbilder auf Bild1 und Bild 2 verteilt. Das ertse Schlüsselbild auf der Ebene

Bildbezeichner bekommt den Namen "an" und das zweite "aus".

Dies hat folgenden Grund:

Wie werden in den weiteren Schritten nur die Schaltfläche auf Bild 1 programmieren. Nicht die Kopie auf Bild 2.Somit

hat die Schaltfläche auf Bild 2 keinerlei funktionen und verhindert somit das der user nicht unendlich auf diese

Schaltfläche klickt und somit unser z.B. blaues Quadrat ständig zum einfaden animiert obwohl es schon da ist.

Unter der Ebene Aktionen werden wir nun in beiden leeren Schlüsselbildern ein

stop(); 

plazieren.

Nun gehen wir wieder in unsere Bibliothek und duplizieren unser blaubtn(sofern es das blaue ist) zweimal und

vergeben entsprechende Namen. Sodaß nun in unserer Bibliothek ein "blaubtn, rotbtn und ein grünbtn" zu finden ist.

Desweiteren haben wir in unserer Bibliothek ein Schaltflächen Symbol mit dem Namen Symbol 1(sofern wir es nicht

anderst benannt haben). Diese duplizieren wir auch 2 mal mit jeweils den Nämen "Symbol 2 und Symbol 3".

Nun doppelklicken wir in Symbol 2 und tauschen das hier gezeigte Quadrat unter Eigenschaften/Austauschen.Hier

verwenden wir wieder unsere Mc's "rot,blau oder grün". Ziel ist es eben jedem dieser Schaltflächen symbole eine

andere Farbe zu zuweißen.

Nun gehen wir nacheinander in die btn's( so nenne ich jetzt unsere "rotbtn, blaubtn und grünbtn")die wir dupliziert

haben und tauschen unsere Schaltflächen in das Schaltflächensymbol das farblich dazugehört.!!!Jeweils bei Bild 1

und 2!!!!

Jetzt gehen wir wieder auf unsere Hauptbühne(Symbol Szene 1 über der Zeitleiste) und markieren unsere Ebene

"Buttons".Hier haben wir ja schon einen btn drin und müssen nur noch die zwei anderen auf die Bühne ziehen.
Diese ordnen wir nun schön links oben untereinander an.

Jetzt klicken wir jedes unserer btn's einzeln an und vergeben Ihnen entsprechend Instanznamen. Und zwar:
blaubtn, rotbtn und grünbtn.

Somit haben wir nun Flash auch unsere btn's vorgestellt. :-)

Nun klicken wir doppelt auf unseren blaubtn auf der Bühne und befinden uns nun in ihm.(Wir sehen zwar trotzdem die

anderen beiden noch, sind aber im mc "blaubtn".Nun klicken wir einmal auf unser blaues kleines Quadrat und geben bei

Aktionen Schaltfläche folgenden Code ein:

on(press){
this._parent.blau.gotoAndPlay("in");
if(this._parent.grün.grün){
    this._parent.grün.gotoAndPlay("out");
    }
    if(this._parent.rot.rot){
    this._parent.rot.gotoAndPlay("out");
    }
    gotoAndStop("aus");
    this._parent.rotbtn.gotoAndStop("an");
    this._parent.grünbtn.gotoAndStop("an");
    
} 

Jetzt bekommen unsere ganzen Instanznamen und variablen einen Sinn.

Ich erkläre das Script mit den Worten hiter //

on(press){ //beim klick
this._parent.blau.gotoAndPlay("in");// gehe in das mc mit dem Instanznamen blau und spiele von dort ab dem Bild 
 
"in".
if(this._parent.grün.grün){ //Wenn das mc mit dem Instanznamen "grün" wahr(grün) ist...
    this._parent.grün.gotoAndPlay("out");//...gehe in das mc mit dem Instanznamen "grün" und spiele ab Bild 
 
"out"
    }
    if(this._parent.rot.rot){//Wenn das mc mit dem Instanznamen "rot" wahr(rot) ist...
    this._parent.rot.gotoAndPlay("out");//...gehe in das mc mit dem Instanznamen "rot" und spiele ab Bild "out"
    }
    gotoAndStop("aus"); //gehe hier(in diesem mc) auf Bild "aus"
    this._parent.rotbtn.gotoAndStop("an");//gehe in das mc mit dem instanznamen"rotbtn" und halte an bei Bild 
 
"an"
    this._parent.grünbtn.gotoAndStop("an");//gehe in das mc mit dem instanznamen"grünbtn" und halte an bei Bild 
 
"an"
    
} 

ohne _root, _parent, oder this. bezieht sich der Befehl immer auf den Mc in dem der Befehl sitzt.
this._parent und _root sind Pfadangaben zum jeweiligen mc der durch einen Instanznamen gekennzeichnet ist.

Hätten wir jetzt unserem grünmov den Instanznamen" gr" gegeben wäre dir erste if Abfrage so:

if(this._parent.gr.grün)

Das zweite grün bleibt stehen da wir ja im mc grünmov bei Bild 15 gesagt haben grün=true;.Sprich.Das ist unsere

Variable die unser Script nach ja(wahr) oder nein(nicht wahr) abfragt.

So.Jetzt gehen wir wieder auf die Hauptbühne./Szene 1) und wiederholen das mit den beiden anderen btn's wobei hier

natürlich der Code dementsprehcend geändert werden muss.

Also bei rot:

on(press){
this._parent.rot.gotoAndPlay("in");
if(this._parent.grün.grün){
    this._parent.grün.gotoAndPlay("out");
    }
    if(this._parent.blau.blau){
    this._parent.blau.gotoAndPlay("out");
    }
    gotoAndStop("aus");
    this._parent.blaubtn.gotoAndStop("an");
    this._parent.grünbtn.gotoAndStop("an");
} 

und bei grün

on(press){
this._parent.grün.gotoAndPlay("in");
if(this._parent.blau.blau){
    this._parent.blau.gotoAndPlay("out");
    }
    if(this._parent.rot.rot){
    this._parent.rot.gotoAndPlay("out");
    }
    gotoAndStop("aus");
    this._parent.rotbtn.gotoAndStop("an");
    this._parent.blaubtn.gotoAndStop("an");
} 

Ich hoffe Ihr konntet was lernen und möchte mich an dieser Stelle für mögliche(ganz sicher) Schreibfehler

entschuldigen.

Ich habe leider nur nachts Zeit sowas zu machen. Und da kommt dann so ein Kauderwelsch rüber grins.

Wenns unverständlich erklärt ist bitte aufs schärfste Kritisieren. :-)


Das fla hängt als zip an.