IT-Academy Logo
Sign Up Login Help
Home - Internet - Webdesign - Flash - Animiertes Flash-Rollover



Animiertes Flash-Rollover

In wenigen Schritten einen ansprechenden Roll-Over erstellen. Mit Möglichkeiten Sound, Videos, Interaktionen einzubinden usw.


Autor: Andreas Sackl (murl)
Datum: 11-03-2003, 22:40:02
Referenzen: Eigene Website
Schwierigkeit: Fortgeschrittene
Ansichten: 10292x
Rating: 10 (5x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einleitung

Mit dieser kleinen Anleitung ist es möglich, relativ unkompliziert ein Flash-Roll-over zu realisieren. Natürlich ist es auch möglich, solche Roll-overs mittels animierter GIFs zu erstellen, nur bietet Flash viel mehr Möglichkeiten. Es ist möglich, in einem Rollover mehrere Links zu den einzelnen Bereichen der eigenen Homepage unterzubringen, Sounds können leicht implementiert werden usw.

Los geht´s

Für meine Zwecke habe ich ein Bild meiner Band genommen, eingescannt und abgespeichert. Dann habe ich das Bild noch mal als schwarz/weiß abgespeichert. Wir haben nun folgende 2 Bilder:


Farbiges Foto



Schwarz-/Weißfoto

Das rechte Bild wird unser Startbild. Scrollt jemand über ein Bandmitglied, so bekommt dieses Bandmitglied plötzlich "Farbe" und tritt somit in den Vordergrund.

Als nächstes müssen wir nun für jedes Bandmitglied ein eigenes Bild abspeichern. So sollten diese Bilder aussehen (danach erkläre ich euch, wie ihr das am einfachsten macht).











Wie erstellt man solche Bilder am einfachsten


Öffnet euer farbiges Bild in MS Paint und wählt folgendes Werkzeug aus:



Öffnet nun das farbige Originalbild und wählt dieses Werkzeug aus. Fahrt nun die Konturen nach (Maustaste gedrückt halten). Irgendwann solltet ihr dann das gewünschte Objekt umfahren haben. Nun lasst die Maustaste los, ein strichlierter Rand sollte nun um das Objekt erscheinen. Drückt nun sofort "Bearbeiten" -> "Kopieren". Öffnet nun das Schwarzweißbild und speichert es unter einen anderen Namen ab. Drückt nun "Bearbeiten" -> "Einfügen". Nun müsst ihr das eingefügte farbige Bild noch an die richtige Stelle verschieben (dorthin, wo das gleich Objekt ist, nur halt in schwarzweiß). Sobald dies geschafft ist, Bild abspeichern. Das eingefügte farbige Bild muss nicht ganz genau über dem Schwarzweißbild sein.
Im Gegenteil: Eine leichte Verschiebung schaut dann am Ende sogar richtig cool aus :-)

Flash

Wir haben nun genug Bilder, um in Flash (na endlich ;-) weiterarbeiten zu können. Folgende Ebenen werden benötigt:



Bilder: Die vorhin erstellten Bilder (in meinem Fall 5) kommen in diesen Layer
Hintergrund: Das Schwarzweißbild
Konturen: siehe unten Sperrt nun den Layer "Bilder". In den Layer "Hintergrund". Importiert euch nun euer Schwarzweißfoto. Nun sperrt den Layer "Hintergrund", danach machen wir im Layer "Konturen" weiter. Wählt ein Malwerkzeug aus, und fahrt im Layer "Konturen" dem gewüschten Objekt nach. Ihr werdet eure Linien nicht sehen (da ja "hintergrund" noch zu sehen, aber gesperrt ist), dennoch werden sie im Layer "konturen" abgespeichert. Nachdem die Linie fertig um euer Objekt geführt wurde, füllt die Linie mit irgendeiner Farbe aus, gruppiert die Umrandung und die Fläche und wandelt sie schließlich in einen Button um.

Bei 5 Objekten müsst ihr natürlich die ganze Prozedur 5-mal machen. Im Endeffekt sollte das ganze so aussehen:



Im Layer "Bilder" müsst ihr nun NACHEINANDER die vorher erstellten Farbbilder einfügen. In diesem Fall sind es 5. Das ganze sollte dann so ausschauen:



Beim Actionscript fügt ihr eine "gotoandplay-Funktion" ein, z.B. bei Frame Nummer 6 folgenden Code:

GotoAndPlay(5);

Also immer zum vorherigen Bild gehen. Dies müsst ihr bei jedem Bild machen. Nun müsst ihr noch jeden Button mit etwas Actionscriptcode ausstatten. Dazu wählt den gewünschten Button aus und gebt z.B. folgenden Code ein:

on (rollOver) {
gotoAndPlay(5);
}
on (rollOut) {
gotoAndPlay(3);
}
on (release) {
getURL("steve\\steve.htm");
}


Fährt der User über den Button, geht Flash zum Frame Nummer 5. Dort befindet sich das farbige Bild. Bewegt sich der User aus dem Bild hinaus, so geht Flash zum "Startbild" (Frame Nummer 3). Klickt der User auf den Button, so öffnet sich z.B. eine neue Internetseite.

Und genau hier liegen die Vorteile eines Flash-Rollovers. Ihr könnt ihr Sounds einfügen, könnt Variabeln an andere Flash-Programme übergeben, animierten Text erzeugen,.......

Im Frame Nummer 4 müsst ihr nun noch folgendes Script einfügen:

GotoAndPlay(3);

Eigentlich war es das schon. Ich wünsche euch viel Spaß beim ausprobieren.

Abschluss

Dies ist mein erstes Tutorial. Ich hoffe, ich habe mich klar und präzise ausgedrückt. Falls nicht, so hoffe ich, dass ihr euch trotzdem auskennt und mir die Fehler verzeiht. Sollte es Fragen geben, so schickt mir bitte eine Mail.

An alle Flasher: Ich weiß, dass meine Lösung für ein Rollover nicht die beste ist, da sie in dieser Version sehr viele Ressourcen benötigt. Ich will mit diesem Tutorial keine perfekte Lösung anbieten, sondern zum Probieren und Verbessern anregen.


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04510
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06247
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1157
Comments: 0