*     Kieselsteine Tutorial *


Figuren Tutorial   | Tutorial zu Pfaden   | Tutorial für Masken   | Tween's
Button's   | MovieClip   | Cinema 4d   |

Blender 2.5 VideoTutorials

FlashVideoTutorials

Video Tutorials

HTML, CSS, javaScript

Webseite der Kieselsteine

Kieselsteine Blog

    Seite 1   |    Seite 2   |    Seite 3



Dieses Tutorial ist noch in Bearbeitung...

Die Fla's zum herunterladen
rechts klicken und Ziel speichern unter wählen.


Beispielbutton1.fla
Beispielbutton2.fla
Beispielbutton3.fla
Beispielbutton4.fla
Beispielbutton5.fla

Tutorial zu Buttons

Beispielbutton2.fla:
Beispielbutton1.fla:




An Flash gefällt mir ganz besonders, dass man sich seine eigenen Schalter basteln kann.
Es gibt drei ganz verschiedene Weg einen Schalter zu bauen;

1. Man nimmt ein Objekt "Schaltfläche" englisch "Button"
2. Man arbeitet mit den ActionScriptBefehlen rollOver, press oder release u.s.w
3. Oder etwas komplizierter, man erweitert MovieClipObjekte mit Eventhandler zu Schaltflächen

1. Um ein SchaltflächenObjekt zu haben, gehst Du auf einfügen/neues Symbol (Bild 1 unten) und wählst die Option "Schaltfläche". Gib Deiner neuen Schaltfläche einen Namen und bestätige mit "ok"

Bild 2:
Bild 1:


In der Bibliothek (Fenster/Bibliothek) bekommt dieses Objekt ein eigenes Icon (Bild 2 oben)
Du kannst nun von diesem in der Bibliothek gelagerten SchalterObjekt beliebig viele Instanzen mit Drag and Draw auf die Bühne oder in eine MovieClipInstanz ziehen. Jeder dieser so erzeugten Schalterinstanz kannst Du andere Befehle auftragen.
Doch nun zuerst schnell ein Blick in das Objekt Schalter selber. Doppelklicke dazu auf das Icon Deiner Schaltfläche in der Bibliothek, oder doppelklicke auf eine Instanz von ihr auf der Bühne.

Bild 3:


Achtung! Du bist jetzt in dem Objekt "Schalter1" und nicht mehr auf der Bühne. Das siehst Du auch an der etwas anderen Zeitleiste. Falls Du dahin gelangt bist mit einem DoppelKlick von der Bühne aus, siehst Du zwar noch alle anderen Objekte der Bühne, Du bist aber nicht mehr auf der Bühne. (weisser Pfeil Bild 3 oben) Ich sage es lieber zehnmal zu viel;
Schaue immer wodrin Du gerade am arbeiten bist. Nichts gibt am Anfang mehr Verwirrung, als am falschen Ort etwas geändert zu haben, und sich nachher wundern, wieso es nichts bewirkt hat....

Du siehst nun die drei Zustände "Up", "Darüber", "Gedrückt"
Den vierten Zustand "aktiv" und den Rest der Zeitleiste kannst Du von mir aus getrost vergessen. Ich zumindest brauche sie nie.

Die Namen der ersten drei Felder sagen selbstsprechend, für was man sie brauchen kann. Setze nun auf jeden der Felder einen andersfarbigen Kreis und teste Dein Projekt unter Steuerung/Film testen. Anstelle eines einfachen Bildes kannst Du auf jedes der drei Bilder auch einen MovieClip setzten, um die Angelegenheit etwas spannender zu gestalten wie im folgenden Beispiel unten (auch dieses Fla kannst Du herunterladen(blaue Links jeweils oben und unten von den Seiten));

Beispielbutton3.fla:


Für den Fall, dass Deine Schalterfläche aus einem Wort besteht oder Leerräume hat, wäre dann das vierte Schlüsselbild gedacht mit dem namen "aktiv". Ich nehme da lieber einen auf alpha= 0 gestellten MovieClip wie im Beispielbutton4.fla unten
Unten steht der selbe Clip "guten Morgen" zweimal
Beim linken fehlt der durchsichtige MovieClip "aktiv"
Beim rechten ist er da.
Fahre mit der Maus über die Schrift des linken Beispiels und Du wirst schnell sehen, dass dies noch nicht den neusten Ansprüchen der berühmt beliebten Web- Usybillytie oder wie man das schreibt entspricht!
(Bei Microsoft Internet Explorer musst Du das ganze zuerst einmal anklicken.
Ich habe keine Lust auf jeder Seite immer diesen Törnäraund zu schreiben, damit das auch bei Billi klappt)
Immer wenn Du als User mit der Maus in einen leeren Bereich kommst, schwappt das Teil vom Zustand "UP" zum Zustand "Darüber". Einen ziemlich nervösen Morgen würde da gewünscht werden (-;

Das rechte Beispiel ist da schon wesentlich angenehmer. Es wechselt den Zustand nur beim betretten der Fläche des durchsichten MovieClip "aktiv". Zwischen den Buchstaben bleibt der Schalterzustand stabil.


Beispielbutton4.fla: (auch zum Download ganz unten auf dieser Seite)


--> Füge also im Button eine neue Ebene "aktiv" ein.(Bild 4 unten)
--> ziehe mit der FüllFarbe und dem RechteckTool ein Rechteck über Deine Schrift.
--> klicke das Rechteck an und mache unter modifizieren/In Symbol konvertieren einen MovieClip daraus.
--> Wähle das schwarze Pfeil Tool und klicke den neuen MovieClip "aktiv" an.
--> Gehe unten im Eigenschaftsfenster auf Farbe: und wähle die Option "alpha" (Bild 5 unten)
--> setzte alpha auf 0.
--> achte darauf, dass Dein MovieClip "aktiv" über alle drei ZustandsschlüsselBilder gesetzt ist.
--> Teste Dein Projekt unter Steurung/Film testen.


Bild 5:




Bild 4:




Du kannst den MovieClip "aktiv" auf dem Schlüsselbild "darüber" natürlich auch auf alpha= 9 oder so setzten. So erscheint beim darüberfahren ein leichter Farbschimmer, falls dieser Effekt erwünscht wäre.

Jetzt laufen die Buttons eigentlich schon einmal recht gut.
Ihr eigentlich Zentrales fehlt ihn aber noch.
Sie sind ja eigentlich da, um irgendetwas auszulösen, einen Event in Gang zu setzen
Dazu brauchst Du nun das AktionsScript Fenster.
Falls es nicht schon offen steht, kannst Du es unter Fenster/Entwicklungs-BedienungsFelder/Aktion öffnen. (so zumindest in FlashMX im Flash8 ist es zum Glück wieder direkt unter Fenster/Aktion zu öffnen)


--> klicke nun Dein Button an.
--> Du solltest nun im AktionScript Fenster oben "Action- Schaltfläche" sehen.
--> schreibe in das Fenster folgendes.

on(release){
    getURL("http://www.sbb.ch","target");
}


Fahrplan Link:



Jetzt kannst Du mit Deinem Button bereits alle Züge, die in der Schweiz fahren, herauslesen!

getURL ist eine Methode. Sie erwartet mindestens einen Parameter. Dieser erste Parameter ist die URL- Adresse. Der zweite nicht zwingende Parameter kann angeben werden, um zu bestimmen wie das neue Fenster aufgehen soll.

Wenn Du nun lieber etwas in Deinem Projekt selber bewegen möchtest, musst Du dazu zuerst irgend einer MovieClipinstanz, die auch noch irgendwo in Deinen Projekt herumturnt einen Namen geben.
Wieso einen Namen geben, fragst Du Dich jetzt vielleicht.
Ein Namen haben ja alle MovieClip schon, die ich gebaut habe.
Damit hast Du zwar schon recht.
Doch Du möchtest ja auch nicht die MovieClips selber ansprechen. Das wäre in den meisten Fällen relativ langweilig, da sich Deine MovieClips ja in der Bibliothek aufhalten, in der sie niemand ausser Dir selber sehen kann.
Du musst also einer Instanz von einem Deiner MovieClips einen Namen geben. Diese Instanz befindet sich auf der Bühne. Es kann sogar sehr viele Instanzen von nur einem MovieClip aus Deiner Bibliothek auf Deiner Bühne haben. Dennen kannst Du nun jedem einzelnen einen ganz individuellen Namen geben.
So etwas in der Art zum Beispiel;
Marta1, Marta2, Marta3... u.s.w

Im Beispielbutton5.fla hat es nur eine Instanz und die heisst Apfel.

Beispielbutton5.fla


Dafür hat es zwei Button. Im Button "schuetteln" steht;

on (release) {
     if (_root.zahl==1) {
         _root.Apfel._y += 57;
         _root.Apfel._x += 37;
         _root.Apfel._rotation += 153;
         _root.zahl = 0;
     }
}

Im Button nächstes JahrButton steht;

on (release) {
     if (_root.zahl==0) {
         _root.Apfel._y -= 57;
         _root.Apfel._x -= 37;
         _root.Apfel._rotation -= 153;
          _root.zahl = 1;
     }
}


Das sieht nun vielleicht komplizierter aus als es ist.

on(release){
}

Ist die äussere Klammer. Eine solcher Eventauslöser braucht es damit überhaupt etwas passiert.
Die zweite Klammer hineinverschachtelt ist folgende;
     if (_root.zahl==0) {
    }
Hier wird eine Varibale auf der RootZeitLeiste abgefragt, ob sie eins oder Null ist.
Diese Abfrage braucht es, weil mann sonst den Apfel in den Himmel verlieren würde, wenn mann zwei mal hinter einander auf den Button "nächstes Jahr" klicken würde. (Und natürlich auch im umgekehrten Fall, dann allerdings versänke der Apfel tief in der Erde...)

Die Innerste Klammer beinhaltet nun die eigentliche Aktion;

          _root.Apfel._y += 57;
          _root.Apfel._x += 37;
          _root.Apfel._rotation += 153;
          _root.zahl = 0;


Es wird der MovieClip Eigenschaft _y, _x und _rotation von der Instanz "Apfel" ein bisschen etwas dazugerechnet.
Im Button "nächstes Jahr" wird dann genau die gleichen Werte wieder abgerechnet.
In beiden Buttons wird anschliesend noch die Variable "zahl", die sich auf der RootZeitLeiste befindet, auf die andere zahl umgestellt.
So ist der Apfel wieder genau am selben Ort wie vor dem Schütteln!
Ein weiterers klicken auf den selben Button wird dank der "if- Abfrage" nichts mehr bewirken.
Auch dieses Beispiel kannst Du herunterladen, gleich unten bei den grossen blauen Links.


Die Fla's zum herunterladen
rechts klicken und Ziel speichern unter wählen.


Beispielbutton1.fla
Beispielbutton2.fla
Beispielbutton3.fla
Beispielbutton4.fla
Beispielbutton5.fla



    Seite 1   |    Seite 2   |    Seite 3

Blender 2.5 VideoTutorials

FlashVideoTutorials

Video Tutorials

HTML, CSS, javaScript

Webseite der Kieselsteine

Kieselsteine Blog