navigation

[zeecity136]

hallo leute.

ich möchte eine ähnliche navigation erstellen wie diese hier.
depotVisuals - Grafikdesign 3D Visualisierung Animation Webdesign - Ravensburg

wie kann ich das per AS3 hinkriegen? hat jemand erfahrung mit sowas? edit* ich meine natürlich, die eigenschaft, dass sich die navi je nach mausposition von links nach rechts bewegt. der rest sollte klar sein

liebe grüsse

[Martin Kraft]

Ich würde wie folgt daran gehen:

Du erstellst Dir für das Band eine Klasse mit den wesentlichen Eigenschaften:

PHP-Code:

var x:Number; // Die Position des Clips
var xSpeed:Number = 0; // Die aktuelle Geschwindigkeit
var xEase:Number = .7; // Die Abbremsung
var mouseEase:Number = .2; // Stärke der Koppelung an die Mouse
var lastMouseX:Number = parent.mouseX; // Die letzte MousePosition 


und einem ENTER_FRAME-Listener, der folgendes tut:

PHP-Code:

var mouseSpeed:Number = parent.mouseX - lastMouseX;
xSpeed = mouseSpeed * mouseEase + xSpeed * (1-mouseEase);
lastMouseX = parent.mouseX;

x += xSpeed;
xSpeed *= xEase; 


Jetzt müsstes Du nur noch dafür sorgen, dass Das Band nicht aus dem Bild rutscht...

[figure8]

hey,
du brauchst nicht viel dafür:

- einen enterframe-eventlistener, der ständig deine
- mouseX abfragt und dann den
- containerclip dementsprechend verschiebt.

schau mal nach "inertia", so nennt man das, glaube ich.

edit: hab gerade noch nen snippet gefunden, hepp:

var speed:Number = 0.05;
 
clipContainer.addEventListener(MouseEvent.ROLL_OVER, onClipRoll);
clipContainer.addEventListener(MouseEvent.ROLL_OUT, onClipRoll);
 
function onClipRoll(event:MouseEvent):void {
    if(event.type == "rollOver") clipContainer.addEventListener(Event.ENTER_FRAME, moveContainer);
    else clipContainer.removeEventListener(Event.ENTER_FRAME, moveContainer);
}
 
function moveContainer(event:Event):void {
    var xCenter:int = thumbMask.width/2;
    var acc:Number;
 
    acc = thumbMask.mouseX < xCenter ? xCenter-thumbMask.mouseX : -(thumbMask.mouseX-xCenter);
    
    clipContainer.x += acc * speed;
} 

das ist allerdings für ein endlos-ding, sprich es wird an den rändern nicht langsamer, sondern je weiter du nach rechts/links gehst desto schneller wird es.. ich schau mal, ob ich das noch mit der anderen variante (genau die gleiche wi ebei depotVisuals) finde.. das hab ich nämlich auch schonmal geschrieben.


edit2: hier das snippet für "je näher man dem ende kommt, desto langsamer wird die bewegung":

var leftLimit:int = 0;
var rightLimit:int = -245;
 
var stageSize:Number = stage.stageWidth;
var proportion:Number = thumbMask.width / stageSize;
 
var xRef:Number;
var xConv:Number;
 
clipContainer.addEventListener(MouseEvent.ROLL_OVER, onClipRoll);
clipContainer.addEventListener(MouseEvent.ROLL_OUT, onClipRoll);
 
function onClipRoll(event:MouseEvent):void {
    if(event.type == "rollOver") clipContainer.addEventListener(Event.ENTER_FRAME, moveContainer);
    else clipContainer.removeEventListener(Event.ENTER_FRAME, moveContainer);
}
 
function moveContainer(event:Event):void {
    xRef = -(thumbMask.mouseX * proportion) + stageSize / 2;
    xConv = (xRef - clipContainer.x) * 0.01;
    
    clipContainer.x += xConv;
 
    // cliplimits
    if (clipContainer.x >= leftLimit) clipContainer.x = leftLimit;
    if (clipContainer.x <= rightLimit) clipContainer.x = rightLimit;
} 

ist allerdings noch ein bißchen tune-bar

[zeecity136]

vielen dank für die antworten! ich versuch das sobald ich soweit bin gleich mal aus...

das ganze band ist ein movieclip container mit jeweils einzelnen MC's, die als thumbnails dienen. so muss das funktionieren oder. muss mich erst mal einlesen bei dem thema, bin noch nicht soo der profi

danke!!

[figure8]

yup, ein container-clip, wo alle thumbnails drin sind und eine maske, die diesen clip maskiert.

[zeecity136]

kann mir nochmals jemand helfen? ich krieg das nicht so ganz ein... hat villeicht jemand skype oder msn? dann kann ich das besser erklären, was ich tun will. der code ansich begreiff ich... wo einfügen und wie das mit dem container aussehen muss funktioniert noch nicht wirklich!

danke für die antworten

[Ravelution]

Hallölle

also so wirklich verstehen tue ich dies auch nicht , mir ist klar das es sich um ein snipet handelt und ich habe versucht es nachzubauen , leider erfolglos

ein MC mit 5 bitmaps(thumbnails) als/instanz "clipContainer"
ein MC thumbMask der so breit ist wie stage selber und so hoch wie clipContainer , die den container maskiert

aber auch bei mir funktioniert das ganze nicht wirklich ......könnte jemden evt. eine ausführlichere beschreibung posten

mfg

Ravelution