Bilderfolge (tumbnails) schwebend (entgegengesetzte Richtung der Maus)

[iCristobal]

Hi

Ich benutze Adobe Flash CS3

ich hab ne kurze bilderfolge (banner) erstellt:

http://mannale.ch/mietobjekte/ambien...entebilder.php

nun möchte ich, wenn man mit der maus über ein bild geht, dass das gleiche bild nur grösser stattdessen erscheint, wenn man weggeht sollte es wieder kleiner sein.

ich hab alle bilder in die Library aufgenommen und hab die kleineren mit tn_ benannt, die grösseren mit mid_

Falls das auch noch geht möchte ich, wenn man drauf klickt, dass man darunter das grosse bild zu sehen kriegt.

ich hab so was mal gesehen, aber ich weiss nicht mehr wo, falls jemand so was schon gesehen hat, hätt ich gern ein beispiel.

Was später noch dazukommen sollte: wenn man die maus nach links bewegt, geht die bildfolge nach rechts und umgekehrt.

mein Beispiel ist noch sehr vage und die bewegung beschränkt sich auf einen motiontween ohne eine silbe actionscript.

Ich wär schon froh, wenn mir jemand aufzeigt, wie ich ein Bild das grösser ist austauschen kann bei mouseover oder so.

[figure8]

oooki, hab gerade bißle zeit, also legen wir mal los ich hoffe, du kennst die grundzüge von flash, falls nicht eigne dir die erst an (was es mit movieclips und so zu tun hat. das kann ich jetzt natürlich nicht alles erklären)

du brauchst nur eine bildgröe, undzwar das große. stell die jpeg-kompression mit rechtsklick "eigenschaften" auf das bild ein und "glätten zulassen" ebenfalls dort. du ziehst dir nun ein bild auf die bühne (ja, es ist zu groß) und machst daraus einen movieclip (f8). sobald das nen movieclip ist skalierst du den so groß, wie dein thumbnail sein soll. alles klar soweit? dann drückst du mal strg+t und kuckst, auf wieviel das ganze nu skaliert ist. am besten nimmst du irgendwelche geraden werte.

das gleiche machst du nun mit den anderen bildern auch (es gibt da die möglichkeit, den movieclip zu duplizieren und auszutauschen. wenn du die möglichkeit nicht kennst mach´s händisch) bis alles so ausschaut, wie es soll. es wird voraussichtlich aus der bühne rauslaufen, macht aber nüscht. wenn du alles schön aneinander gereiht hast kann´s weitergehen. ich hol mir mal fix was zu trinken..

so, alles aneinander gereiht? dann geht´s nun weiter: du markierst ALLE bilder und machst daraus einen movieclip. so dass dann alle movieclips, die du gerade gebastelt hast, nochmal in einem großem movieclip drin sind. das ist der container, den du brauchst, damit die dinger sich alle immer schön gleichmäßig mitbewegen. dem movieclip gibt´s du auch einen namen, am besten irgendwas mit container, damit du bescheid weißt.

so, nun das actionscript. auf deinen ersten frame schreibst du:

var oldScaleX:Array = new Array();
var oldScaleY:Array = new Array();
var oldPosX:Array = new Array();
var oldPosY:Array = new Array();
var picHolder:Array = new Array();
var active:int;
 
for(var i=0; i<container.numChildren; i++) {
    picHolder[i] = container.getChildAt(i);
    picHolder[i].addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
    picHolder[i].addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
 
    oldScaleX[i] = picHolder[i].scaleX;
    oldScaleY[i] = picHolder[i].scaleY;
    oldPosX[i] = picHolder[i].x;
    oldPosY[i] = picHolder[i].y;
}
 
function rollOverHandler(evt:MouseEvent) {
    active = evt.currentTarget.parent.getChildIndex(evt.currentTarget);
    
    picHolder[active].x =  oldPosX[active] - picHolder[active].width / 2;
    picHolder[active].y =  oldPosY[active] - picHolder[active].height / 2
    picHolder[active].scaleX = 1;
    picHolder[active].scaleY = 1;
    
    for(var i=0; i<active; i++) {
        picHolder[i].x =  oldPosX[i] - 50;
    }
    for(var j=active+1; j<container.numChildren; j++) {
        picHolder[j].x =  oldPosX[j] + 50;
    }
}
 
function rollOutHandler(evt:MouseEvent) {
    for(var i=0; i<active; i++) {
        picHolder[i].x =  oldPosX[i];
    }
    for(var j=active+1; j<container.numChildren; j++) {
        picHolder[j].x =  oldPosX[j];
    }
    
    picHolder[active].x = oldPosX[active];
    picHolder[active].y = oldPosY[active];
    picHolder[active].scaleX = oldScaleX[active];
    picHolder[active].scaleY = oldScaleX[active];
} 

argh, leider bin ich gerade etwas in eile (hatte noch gegessen) sonst würd ich dir den code gern erklären und mit tweens, etc. zuende schreiben, hole ich aber spätestens die tage nach kannste erstmal ausprobieren so. so wird´s beim rollover größer und wieder kleiner beim rollout. natürlich bastelt man sowas eigentlich mit tweens, aber auch dafür fehlte mir gerade die zeit.. wie gesagt, spätestens die tage geht's weiter oder jemand hier kann das weiterführen : )

ps: das "entgegen des mauszeigers scrollen" findest du hier: click! - wobei es da auch weitaus bessere scripts gibt. wenn ich meins von damals wiederfinde poste ich's noch hier.

[iCristobal]

Hi figure8

erst mal herzlichen Dank!

Ich mach das mal die Tage und werde mich bestimmt noch mal melden.

Hoffe, dass ich das hinkrieg...

schönes Wochenende

[figure8]

hey,
hier mal eine (frühe) beta. hat noch einige bugs und so richtig geschmeidig läuft´s auch noch nicht. aber ich werd mal weiter dran arbeiten und dir dann bescheid geben gerade das re-positionieren ist noch nicht wirklich super. aber ich muss leider wieder in studio und komm dann erst abends oder morgen oder so dazu, weiterzumachen.

click!

hier der code bisher:

import gs.TweenLite;
import gs.easing.*;
 
var oldScaleX:Array = new Array();
var oldScaleY:Array = new Array();
var oldPosX:Array = new Array();
var oldPosY:Array = new Array();
var picHolder:Array = new Array();
var active:int;
 
init();
 
function init() {
    // Movement "inverse Mouseposition" 
    container.addEventListener(Event.ENTER_FRAME, movement);
    
    for (var i=0; i<container.numChildren; i++) {
        // Referenzarray basteln
        picHolder[i]=container.getChildAt(i);
        picHolder[i].addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
        picHolder[i].addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
        picHolder[i].buttonMode = true;
 
        // Ausgangsscales speichern
        oldScaleX[i]=picHolder[i].scaleX;
        oldScaleY[i]=picHolder[i].scaleY;
 
        // Ausgangspositionen speichern
        oldPosX[i]=picHolder[i].x;
        oldPosY[i]=picHolder[i].y;
    }
}
 
function movement(evt:Event) {
    // Dimensionen speichern
    var prop:Number = evt.currentTarget.width/stage.stageWidth;
    var arrX:Number = -mouseX*prop + stage.stageWidth/2;
    
    // Proportionen zwischenspeichern
    var dx:Number = arrX - evt.currentTarget.x;
    var ax:Number = dx*.008;
    
    // Do it, baby!
    evt.currentTarget.x += ax;
}
 
 
function rollOverHandler(evt:MouseEvent) {
    // Derzeitig aktives Bild zwischenspeichern
    active=evt.currentTarget.parent.getChildIndex(evt.currentTarget);
 
    // Vergrößern
    TweenLite.to(picHolder[active], 1, {x:oldPosX[active] - picHolder[active].width / 2, y:oldPosY[active] - picHolder[active].height /2 , scaleX: 1, scaleY: 1, ease:Sine.easeOut});
 
    // Alles andere zurücksetzen (unfeine Lösung bisher..)
    for (var i=0; i<active; i++) {
        TweenLite.to(picHolder[i], 1, {x:oldPosX[i] - 50, scaleX: oldScaleX[i], scaleY: oldScaleY[i], y: oldPosX[y]});
    }
    
    for (var j=active+1; j<container.numChildren; j++) {
        TweenLite.to(picHolder[j], 1, {x:oldPosX[j] + 50, scaleX: oldScaleX[j], scaleY: oldScaleY[j], y: oldPosX[y]});
    }
}
 
function rollOutHandler(evt:MouseEvent) {
    // Beim gloablen Rollout alles zurücksetzen (irgendwie auch unfein bisher)
    TweenLite.to(picHolder[active], 1, {x:oldPosX[active], y:oldPosY[active], scaleX: .5, scaleY: .5, ease:Back.easeInOut});
    
    for (var i=0; i<active; i++) {
        TweenLite.to(picHolder[i], 1, {delay:.5, x:oldPosX[i], scaleX: oldScaleX[i], scaleY: oldScaleY[i], y: oldPosX[y], ease:Back.easeInOut});
    }
    
    for (var j=active+1; j<container.numChildren; j++) {
        TweenLite.to(picHolder[j], 1, {delay:.5, x:oldPosX[j], scaleX: oldScaleX[j], scaleY: oldScaleY[j], y: oldPosX[y], ease:Back.easeInOut});
    }
} 

[rady]

so muss auch mal meinen senf dazu geben...........gutes tut auf jeden fall, kann man auch immer mal wieder was lernen.........da ich mich zur zeit ausgiebig mit galerien beschäftige die auf as3 und xml(dynamisches laden) konzentriere, weiss ich wie schwer es manchmal ist eine vernünftige galerie hinzubekommen......du hast geschrieben, dass du keine silbe as verwendet hast....daraus schliess ich, dass du es gar nicht oder nur teilweise beherrscht....bevor du allerdings den code von figure verwendest, solltest du dir auf jeden fall die grundlagen beibringen, da sonst das nichts bringt.......newbies haben immer irgendwelche bugs und funktioniert nicht so wie es laufen sollte..........aber vielleicht ist ja figure so nett und baut dir ne galerie auf xml auf und du brauchst nur immer deine bilder in einen ordner zu laden und es funkt alles von alleine .......(kleiner spass)

[iCristobal]

Besten Dank nochmachl, auch für die Beta, das beispiel sieht ja schon ganz geil aus!
Hab heut frei, muss mal den köper kühlen, geh kurz mal in den see...

@ rady: ja klar ich könnt ja auch jemanden dafür bezahlen, aber ich dachte eigentlich, dass es auch ohne code geht und ich möchte halt schon gerne ein bisschen dahinter sehen.
AS3 interessiert mich auch, ich nehm mir die tage mal zeit und geh mal die zahlreichen tutorials zu dem thema durch und versuch mich an die syntax zu gewöhnen...

Cheers!

[figure8]

Zitat von rady

aber vielleicht ist ja figure so nett und baut dir ne galerie auf xml auf und du brauchst nur immer deine bilder in einen ordner zu laden und es funkt alles von alleine .......(kleiner spass)

letztendlich hab ich das dann vor ich muss so´n ding für die agentur eh mal bauen (irgend ein kunde kommt sicher bald deswegen mal), da kann ich´s auch gerade in ner 'lite-version hier posten. dauert aber noch a bißle

[iCristobal]

Hi figure8

Hab alles mal mit deiner Anleitung gemacht, hab aber schon gedacht, dass
bei mir noch was fehlt.
Bin mir zwar nicht sicher, ob das mit der jpeg kompression stimmt, das hab ich nicht bei den Bildeingenschaften, sondern bei den Allgemeinen Eigenschaften gefunden.

Ich hab immer errors (1120) wenn der Container angesprochen wird.
Als ich die Movieclips erstellt hab von den einzelnen bildern hab ich einfach
den Vorgeschlagenen Namen wie Symbol 1 usw genommen, sollte ich die anders nennen?

Das Problem liegt irgendwie daran, dass er folgende Eigenschaften des Containers nicht kennt:

numChildren
getChildAt

oder liegt es am Namen?

das was du "container" genannt hast, heisst bei mir jetzt moviecontainer1
aber es ist immer noch dasselbe mit den gleichen Errors.

Kann es sein, dass die Dateien, die Du importiert hast bei mir fehlen?

Besten Dank

Gruss

[figure8]

du kannst ja mal die ganzen tweens (TweenLite.to) auskommentieren und schauen. kann schon gut sein, die gs-tweens gibt´s hier: hepp! wenn du deinen mc anders nennst musst du natürlich auch überall im script den namen ändern..

[iCristobal]

Ich hab immer noch folgende Fehler:



sieht aus als bräuchte ich noch mehr erweiterungen als nur die gs-klassen
oder hab ich beim movieclip was nicht richtig eingestellt?

Bis jetzt zeigt er mir einfach die Bilder an, aber ich hab keine bewegung drin

ich verstehs nicht

[figure8]

ja, du musst deinen movieclip benennen (im eigenschaftsinspektor, nicht nur beim anlegen). schau mal hier: click!

[iCristobal]

aaaah!
dort hat gar nix gestanden!
jetzt siehts echt geil aus!

[figure8]

hihi. im laufe der woche komme ich hoffe dazu, das ding zu entbuggen und auszubauen. solange kannst du dich aber schonmal in flash ein bißchen besser rüsten und versuchen, den code zu verstehen

[iCristobal]

Vielen Dank!

so siehts aus