|
Einleitung
Was bringt dieses Tutorial?
Das Grundprinzip: 4 Movie Clips zum Glück
Skalierung
Geschwindigkeit
Positionierung
Online Anwendungsbeispiele
Die SWF zum Fla
Das Original (oder wo ich es zum ersten
mal sah)
Anwendungsbeispiel im
Projekt
Was bringt dieses Tutorial?
Vor einiger Zeit gelang
eine CD-Rom in meine Hand,
in der ich eine echt raffinierte
Navigationsmöglichkeit
sah. Es war eine Zeitleiste
(1945-1998) die sich je
nach der Mausposition
bewegte und somit dem
User die Möglichkeit gab,
sich durch die Geschichte
des Unternehmens zu klicken.
Der Vorteil dieser Navigation
war nicht nur ihre interessante
Funktionalität, sondern
auch die Möglichkeit eine
Vielzahl von Menüpunkten
auf kleinstem Raum unterzubringen.
Unter http://www.yugop.com sah ich das erstemal
die Form der Navigation
im Internet verwirklicht.
In diesem Tut möchte ich
versuchen euch die Funktionsweise
der Navigation näher zu
bringen und möchte mich
an dieser Stelle bei folgenden
Flashworkern für die Mithilfe
bedanken: Dominik (der die erste Version
entwickelt hat) und Phaeton (Stephan Fischer) (der mit mir zusammen
das .fla optimiert hat)
Solltet ihr Fragen, Anregungen
oder Kritik zu diesem
Tut haben meldet euch!
Saban Ünlü
Das Grundprinzip: 4 Movie Clips zum Glück
Prinzipiell benötigt man
lediglich vier Movie Clips
(MC), die das Yugop -
Menü benötigt.
In der Hauptszene habe ich in Layer:script den MC m auf Drag gesetzt (Start Drag ("/m", lockcenter))
| Screenshot |
Im Layer:Kontroll_Variablen
werden alle wichtigen
Variablen angezeigt. Ich
gehe in diesem Tut nicht
weiter auf diesen MC ein,
weil dieser zur eigentlichen
Funktion nicht relevant
ist und folglich entfernt
werden könnte.In den übrigen
Layern liegen die eigentlich
wichtigen MC die oben
aufgezählt wurden
Skalierung
Frame 1 von MC skalierung
Hier werden die Variablen definiert die im Verlauf benötigt werden
| Screenshot |
Frame 2 von MC skalierung
Hier wird der Skalierungsfaktor berechnet und dieser Faktor bezieht sich auf die Mausposition (mausy)
If ((mausy>230) and (mausy<250))
Wenn die Maus sich in
der Mitte des Bildschirms
befindet (Toleranz 20
Pixel d.h. da Mitte 240
+/- 10 Pixel).
Set Variable: "s" = 0
Setze den Skalierungsfaktor
auf 0
Else
Ansonsten
Set Variable: "s" = 0
Setze Faktor auf Startwert
0
If ((mausy<=230) and (mausy>0)
and (groesse_x < 175))
Wenn nun die Maus in der
oberen Hälfte des Bildschirms
und die grösse von MC:internet
noch kleiner als Faktor
175
Set Variable: "s" = Int(
(mausy-240)/-40)
Setze den Skalierungsfaktor
auf den Ganzzählligen
Wert der Mausposition
– 240 (Bildschirmhälfte)
/ -40
Dies hat zur Folge, dass
der Skalierungsfaktor
nie höher werden kann
als 8 [(0-240)/-40= 8]
und dies für den Fall,
dass die Maus oben am
Bildschirmanfang steht.
Bei s>o wird MC:internet
vergrössert
Else
If ((mausy>=250) and (mausy<480)
and (groesse_x > 75))
Ansonsten prüfe, ob Die
Maus in der unteren Hälfte
des Bildschirms ist und
MC:internet noch nicht
kleiner ist als Faktor
75
Set Variable: "s" = Int(
(mausy-240)/-40)
Definiere demnach den
Skalierungsfaktor [BSP
Maus ganz unten: (480-240)/-40
= -8 ]
End If
End If
Set Property ("_level0/internet",
X Scale) = groesse_x+s
Verändere jetzt die Weite
des MC:internet um den
Skalierungsfaktor.
Weite = bisherige Weite
+ Skalierungsfaktor
Da Skalierungsfaktor zwischen
[-8, 8] ist sowohl Vergrößerung
als auch Verkleinerung
drin
Set Property ("_level0/internet",
Y Scale) = groesse_x+s
Proportional dazu wird
die Höhe modifiziert (Prinzip
ist das selbe)
| Screenshot |
Geschwindigkeit
Frame 1 von MC:mp
Hier wird die X-Position
der Maus mausx bestimmt
Set Variable: "mausx"
= GetProperty ("_level0/m",_x)
| Screenshot |
Hier wird der Geschwindigkeitsfaktor v berechnet, der später im MC:internet (Bewegung) zum Einsatz kommt
If ((mausx>310) and (mausx<330))
Wenn die Maus in der Mitte
des Bildschirms (Toleranz
20 Pixel da Mitte 320
entspricht das der Position
zwischen 310 und 330)
Set Variable: "_level0/internet"&":v"
= 0
Setze den Geschwindigkeitsfaktor
v auf 0 (die Variable
wir auf _level0 d.h. Der
Grundebene definiert)
Else
If ((mausx<=310) and (mausx>0))
Ansonsten, prüfe ob die
Maus in der linken hälfte
Set Variable: "_level0/internet"&":v"
= Int( (mausx-310)/-8)
Setze den Geschwindigkeitsfaktor
auf den ganzzähligen Wert
von der Mausposition(x)
- 310 dividiert durch
8[BSP: Maus ganz links
(0-310)/-8 = 38]D.h. wenn
die Maus sich in der linken
Hälfte befindet ist v>0
und dies bewirkt die Bewegung
nach rechts (Details in
MC:internet)
Else
If ((mausx>=330) and (mausx<640))
Ansonsten, prüfe ob die
Maus in der rechten hälfte
des Bildschirms ist
Set Variable: "_level0/internet"&":v"
= Int ((mausx-330)/-8)
Genau wie zuvor wird für
diesen Fall die Geschwindigkeit
berechnet! [BSP Maus ganz
rechts (640-330)/-8=-38]
Hier ist v<0 und somit
die Bewegung links laufend.
End If
End If
| Screenshot |
In Frame 1 MC:internet werden den Variablen Startwerte zugeteilt!
Set Variable: "anzahl_mc"
= 8
Anzahl der in MC:internet
befindlichen MovieClips
Set Variable: "mc_links"
= 1
Der Instancname von MC
ganz links wird durch
diese Kontrollvariable
immer gespeichert (nur
der numerische Wert bei
mc1 währe das 1 usw.)
Set Variable: "v" = 0
Die Geschwindigkeit wird
am Anfang auf 0 gesetzt
Set Variable: "vmax" =
158
Vmax ist deshalb 158 da
bei 159 die Bewegung größer
währe als die Breite des
in internet befindlichen
MC's. Somit währe xmax
und xmin nicht mehr zu
gewährleisten. In diesem Beispiel spiel
das keine Rolle, da v
[-38 , 38]
Set Variable: "xmax" =
-320
MC ganz links darf nicht
weiter links liegen als
-320
Set Variable: "xmin" =
-157
MC ganz links darf nicht
weiter rechts liegen als
-157
| Screenshot |
Set Variable: "x_mclinks"
= GetProperty ( "mc"&mc_links,_x)
Hier wird die Position
von dem MC ermittelt der
ganz links steht. Diese
wird dann in die Variable
x_mclinks gespeichert."mc"&mc_links,_x
entspricht in diesem fall
mc1,_x da ja mc_links
im Frame zuvor auf 1 gesetzt
wurde.
If (x_mclinks<xmax)
Wenn nun die Position
des äußeren MC weiter
links steht als das xmax
(-320) zulässt.
Set Property ("mc"&mc_links,
X Position) = x_mclinks+(anzahl_mc*159)
Wird MC ganz links ganz
rechts positioniert. Hierfür
wird die x-Position von
mc_links so definiert
das die bisherige Position
addiert wird mit der Gesamtbreite
aller MC
Set Variable: "mc_links"
= mc_links+1
Nun muss natürlich mc_links
neu definiert werde. Da
ja mc_links (alt) nun
ganz rechts steht. Somit
ist mc_links (neu) nun
der, der rechts neben
mc_links (alt) steht.
(BSP mc_links = 5 bevor
es nach rechts verschoben
wir. Somit ist der neue
mc_links = 6)
If (mc_links>anzahl_mc)
Wenn nun aber mc_links
größer ist als die Gesamtanzahl
der MC's (Darf logischer
weise nicht)
Set Variable: "mc_links"
= 1
Setzte mc_links zurück
auf 1.
End If
End If
Analog wird, sobald mc_links
über die Position xmin
kommt (also zuweit rechts),
der MC rechts außen auf
die linke Seite verschoben.
If (x_mclinks>xmin)
Wenn nun die Position
des äußeren MC weiter
rechts steht als das xmin
(-157) zulässt.
Set Variable: "mc_rechts"
= mc_links-1
Setze mc_rechts (MC der
ganz rechts steht) neu
, so dass es dem Wert
entspricht der links neben
den momentanen mc_rechts
entspricht.
If (mc_rechts<1)
Wenn mc_rechts kleiner
ist als eins (Was natürlich
nicht geht, da es kein
mc0 oder gar mc-1 gibt)
Set Variable: "mc_rechts"
= anzahl_mc
Setze mc_rechts auf den
Startwert 8 (anzahl_mc)
zurück
End If
Set Property ("mc"&mc_rechts,
X Position) = x_mclinks-159
Die Position von mc_rechts
wird nun so gesetzt das
er links neben dem alten
mc_links steht und somit
der neue mc_links wird.
Set Variable: "mc_links"
= mc_rechts
Folglich muss nun auch
mc_links einen neuen wert
erhalten, der logischer
weise der von mc_rechts(alt)
ist. Da dieser ja jetzt
ganz links steht.
End If
Nun da wir mc_links und
dessen X-Position kennen,
können wir bezugnehmend
dazu alle übrigen MC im
Mc:internet neu Positionieren.
Hierfür arbeiten wir einfach
mit einer Schleife, die
alle Positionen setzten
wird.
Set Variable: "i" = 1
i ist die Indexvariable
die uns durch den Loop
begleiten soll und hat
den Startwert 1. Im folgenden
kommt nun auch endlich
v ins Spiel, dass wir
in MC:mp berechnet haben.
V ist natürlich keine
Geschwindigkeit im physikalischen
Sinne (v=m/s) sondern
lediglich der Faktor um
den alle MC in MC:internet
verschoben werden soll.
Durch das Vorzeichen von
v wird auch die Richtung
der Verschiebung definiert.
Loop While (i<=anzahl_mc)
Durchfahre Schleife solange,
der Index kleiner oder
gleich der Anzahl der
MC ist
Set Property ("mc"&i,
X Position) = GetProperty
( "mc"&i,_x)+v
Setze die Position von
mc(i) auf die bisherige
Position in X-Richtung
plus dem Verschiebungsfaktor
(BSP i=1: Set Property
("mc1", X Position) =
Get Proporty ("mc1", _x)
+ v
Set Variable: "i" = i+1
Indexvariable "i" um 1
Vergrößern, damit die
Schleife auch mal ein
Ende hat und vor allem
damit alle MC?s (mc1 à
mc8) Positioniert werden.
End Loop
| Screenshot |
Go to and Play (_currentframe-1)
Somit wird der vorherige
Frame immer wiederholt.
Schließlich wollen wir
ja nicht nur einmal die
Positionen setzten.
| Screenshot |
Online Anwendungsbeispiele
Hier könnt Ihr euch das
SWF zu diesem Tut anschauen!
Die SWF zum Fla
Das Original (oder wo ich es zum ersten
mal sah)
http://www.yugop.com
Im Projekt habe ich das
ganze mit Stephan zusammen
umgesetzt. Ihr Könnt es
euch betrachten unter
http://www.video-interaktiv.de und hier einfach ein Punkt
unter Arbeitsbgereiche anklicken!