mouseover

[dieKitty]

Hey!

Weiß vielleicht jemand wie man den coolen Mouseover-Effekt hinbekommt, der auf der page von Blink 182 im Menü zu sehen ist? http://blink182.com/
Wär echt lieb, wenn mir da jemand weiter helfen könnte! Ich weiß nämlich nicht, wo ich da anfangen soll

Mfg Kitty

 

[Tobias Menzel]

Hi,

ich würde es fürs erste mal mit einem Tweening versuchen:

• Texte und Linien im ersten Frame erstellen
  
  
• ab dem zweiten Frame die Buchstaben trennen, und per Bewegungs- bzw. Formtween hin und her wackeln lassen. Am Ende wieder zur Startposition zurück.

Scriptbasierte Ansätze sind ebenfalls möglich, erfordern aber etwas mehr Aufwand (ich weiß noch nicht, wann ich dazu komme, Dir ein Beispiel zu erstellen).

Gruß
.

 

[dieKitty]

Hey!

Danke fürs Erste!
Das mit dem tween hab ich mir auch schon gedacht... Mal schauen ob das so funktioniert wie ich das will...
Aber müsste das mit ActionScript nicht besser gehen? Deswegen meine frage

Mfg

PS: Vielen Dank im Voraus für das Beispiel!

 

[Tobias Menzel]

Hi,

die von Dir verlinkte Navigation ist mit hoher Wahrscheinlichkeit per Tweening erstellt worden (sprich: die gesamte "Wackel"-Animation per Hand gestalten).

Per Script könnte man die Buchstaben zufällig schwingen lassen, und die sich biegenden Linien mit Zeichnungsmethoden erstellen. Du hast dann zwar nicht mehr die volle Kontrolle über die Optik, profitierst aber davon, dass Du nicht für jeden Button umständlich eine neue Animation erstellen musst, sondern ein und den selben MovieClip für alle Buttons verwenden kannst.

Gruß
.

 

[dieKitty]

Wie würde denn das mit dem Script dann funktionieren? Ich habe da noch nicht so die Erfahrung...

 

[Tobias Menzel]

Wie gesagt: das kann ich Dir im Rahmen eines Postings nicht erklären, da hierzu etliche AS-Grundlagen (Intervalle, Zufallsfunktionen, dynamische Positionierung, Zeichnungsmethoden, Trigonometrie) nötig sind.

Auch wenn das hier eigentlich nicht üblich ist, mache ich gerne eine Ausnahme, und fertige Dir ein lauffähiges Beispiel an, das Du zerpflücken kannst - wenn Du ein wenig warten kannst: Im Laufe des Wochenendes sollte ich wohl dazu kommen.

Gruß
.

 

[Tobias Menzel]

Hi,

wie versprochen ein einfaches Beispiel im Anhang.

Den Originaleffekt wirst Du in seiner ganzen Komplexität (die Linien "fransen" ja auch etwas aus) mit Script kaum hinbekommen, dafür bietet Dir dieser Ansatz einige andere Vorteile: Die Animation läuft durch die Zufallssteuerung bei jedem Durchlauf etwas anders ab, und Du kannst durch die Änderung weniger Variablen weitgreifend in den Ablauf eingreifen.

Gruß
.

 

[dieKitty]

Hey!

DANKE Vielen vielen Dank Du hast mich damit echt nen reisen Schritt weitergebracht
Sag mal, noch so als Tipp: Wie hast du ActionScript gelernt?

Ach und noch etwas: Du hast das doch mit ActionScript2.0 geschrieben. Geht das auch mit 3.0? Ist der Code dann ähnlich oder ist das sehr viel schwerer?

mfg

 

[dieKitty]

Also zunächst mal nur so eine Frage: Könnte man dieses Menü auch mit ActionScript3.0 schreiben?

Und wie kann man die Farbe der Buttons ändern?
Und wie kann man die Schriftart der Buchstaben verändern? Ich habe bereits einen neuen letter-movieclip erstellt mit code und allem drum und dran, aber es funktniert nicht..

Ich habe das bis jetzt noch nicht herausgefunden und so langsam verzweifle ich...

MfG

 

[Tobias Menzel]

Hi,

@Farbe:

• Suche in der Bibliothek zunächst den MovieClip "letter", um die Farbe des Textes anzupassen:
  
  
  
  Gib dem Textfeld einfach eine andere Füllfarbe:
  
  
  
  
• Suche dann den MovieClip "line_dot", um die Farbe der Linien-Endpunkte anzupassen:
  
  
  
  Auch diese Fläche lässt sich einfach umfärben:
  
  
  
  
• Öffne nun den MovieClip "line" zum Bearbeiten. Er sollte inzwischen so aussehen:
  
  
  
  
• Um jetzt noch die Farbe der Linie anzupassen, suche in der Ebene "code" folgenden Ausschnitt:

function drawLine() {
	ct.clear();
	ct.lineStyle(1, 0xFFFFFF, 100, false, null);

Ändere hier den Farbwert der LineStyle-Methode:

	ct.lineStyle(1, 0x00FF00, 100, false, null);

• Die Farbe des Schlagschattens kannst Du in den Filtereinstellungen auf der Hauptzeitleiste anpassen (jede Instanz von "button" hat einen eigenen Schatten).

Eine Umsetzung in AS3.0 wäre wohl ebenfalls möglich, aber recht aufwändig, da AS3.0 in vielen Bereichen komplett anders aufgebaut ist, als AS2.0. Da ich mich in die neue Version erst einlese, fehlt mir im Moment die Muße, mich an einer Anpassung zu versuchen.

Gruß
.