Webseite-wie wurde das umgesetzt?

[Girldee]

Huhu, ich bin auf folgende Webseite gestoßen



Das sie mit Flash umgesetzt worden ist, weiß ich bereits. aber was für Tweenings wurden benutzt oder sind da noch andere Effekte eingebaut worden. mich fasziniert vor allem die Umsetzung vom malenden Stift als Auslöser für bestimmte Aktionen. kann mir da jemand weiterhelfen und weitere Informationen zur Umsetzung geben?
Da wäre ich über alles dankbar.

 

[katrinaa]

AW: Webseite-wie wurde das umgesetzt?

Das geht nicht mit Bewegungstweens. Das ist mit Actionscripts erstellt worden, wahrscheinlich was mit mouse follows.

 

[CreepyCriz]

AW: Webseite-wie wurde das umgesetzt?

Hallo Girldee,

der Effekt den so gut findest, findet auf vielen Seiten unterschiedlich umgesetzt.
Zum Beispiel auch hier: http://www.milram.de/ - Dort sind es aber nur 3 Ebenen, während es in Deinem Beispiel für quasi jeden Buchstben eine Ebene (nur gedanklich, nicht programmiertechnisch) zugewiesen wurde.

Bei der Milch-Firma sind nur zwei bewegte Ebenen und eine feste Hintergrundebene die nix tut.

Der code für eine Ebene abhängig von der Lage der Mouse könnte so aussehen:

[COLOR=#000000][COLOR=#0000BB]
stage[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]addEventListener[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000BB]MouseEvent[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]MOUSE_MOVE[/COLOR][COLOR=#007700], [/COLOR][COLOR=#0000BB]onMove[/COLOR][COLOR=#007700]); 
function [/COLOR][COLOR=#0000BB]onMove[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000BB]e[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]MouseEvent[/COLOR][COLOR=#007700]):[/COLOR][COLOR=#0000BB]void 
[/COLOR][COLOR=#007700]{ 
    [/COLOR][COLOR=#0000BB]wiese[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]x [/COLOR][COLOR=#007700]= -([/COLOR][COLOR=#0000BB]stage[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]stageWidth[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]wiese[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]width[/COLOR][COLOR=#007700]) * ([/COLOR][COLOR=#0000BB]stage[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]mouseX [/COLOR][COLOR=#007700]/ [/COLOR][COLOR=#0000BB]stage[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]stageWidth[/COLOR][COLOR=#007700]); 
}[/COLOR][/COLOR]

Durch geschicktes Anlegen der Symbole in Grösse und Transparenz kannst Du dann ein Tiefeneffekt ohne 3D Hilfsmittel zaubern. Die vorderen Buchstben bewegen sich einfach mehr als die hinteren Buchstaben in Abhängigkeit von der Maus.

Creepy Grüsse

 

[Girldee]

AW: Webseite-wie wurde das umgesetzt?

Hui vielen Dank für die Auskunft. da kann ich schon mal Einiges mit anfangen. Danke danke