flash effekt wie bei sony.com

[wahed132]

hallo alle zusammen
hab mal ne frage
also
ich würde gerne wissen ob einer weis wie man diesen effekt hinbekommt wie bei http://www.sony.com/index.php diese knöpfe unten
alos nur den effekt das wenn man mit mouse draufgeht, dass der eine Butten gröser wird und die Anderen kleiner werden.
danke schonmal im voraus

 

[Jens B.]

Hallo,
bitte halte dich in Zukunft auch an die Nettiquette - vor allem an die Groß- und Kleinschreibung.

So ein Effekt ist relativ simpel. Wenn du dir das mal genau anschaust bewegen sich immer nur ein paar Elemente, die Buttons selbst werden nicht kleiner. Außer natürlich der, wo die Maus mal drauf war. Ich würde das einfach mit einem onEnterFrame machen. Für jeden Button würde der so aussehen, dass:

1. alle anderen Buttons auf die normale Größe skaliert werden
2. ich größer werde: Bild größer, Rahmen größer, Text etc. evtl verschieben, Farbe ändern
3. der Button links von mir: das Bild rutscht nach links, genauso wie die rechten runden Ecken
4. der Button rechts von mir: der Bild rutscht nach rechts, genauso der Text und die linken runden Ecken

Die Funktion könnte man recht generell definieren und dann für die einzelnen Buttons immer nur den Verweis zu den Buttons neben sich ändern. Durch gute Instanznamen mit Nummern vielleicht noch nicht einmal das.

Reicht dir das als Ansatz oder soll ich genauer werden?

Gruß
jens

 

[wahed132]

ahhhhh okay gut danke schonmal,
den Ansatz hab ich jetzt mehr oder weniger verstanden, aber das in AS zu realisieren ist etwas kompliziert.
Ich bekomns hin das einer von den Buttons funktioniert, aber ich löse das eingentlich mit der Zeitleiste und ein paar Tweens.
Ich schätze mit AS wirds etwas einfacher aber leider bekomms net so hin.
Wäre nett wenn du mir noch ein paar Tipps geben köntest

 

[Awesomo]

okay, als AS einsteiger ist das natürlich recht schwierig. Versuchs doch mal mit TweenLite von Greensock, ist im Prinzip das Tweening der Zeitleiste per skript. Kannste googlen, geht wunderbar. Auf der greensock seite ist sogar ne LiveDemo die dir den benötigten Code generiert.

Dann machst du ne Flash Datei mit den 4 Buttons, machst auf die MC´s in der Bibliothek Rechtsklick->Eigenschaften, den HAken für Export für Actionscript und gibst denen die Basisklasse Button.

In die machst du dann einen MouseOver HAndler, ungefähr so:

this.addEventListener(MouseEvent.MOUSE_OVER, overHandler)

Im overHandler steht dann was passieren soll wenn du mit der Maus über die BUttons fährst:

public function overHandler (evt:MouseEvent) : Void {
TweenLite.to(this, {scaleX:120, scaleY:120}
for (var i:int = 0; i<=this.parent.numChildren; i++) {
if((this.parent.getChildAt(i) as Button).name!=this.name) {
TweenLite.to(parent.getChildAt(i), {scaleX:80, scaleY:80}
}
}
}

Zum obigen Code: Der Button auf dem Die Maus ist wird auf 120 % gezoomt, dann schaut die for Schleife auf alle Buttons die auf der Bühne liegen, wenn diese einen anderen NAmen haben als der Button mit dem MouseOver werden sie auf 80%skaliert.