[STUFF] Tsunami Effekt Klasse

[Alpha.ONE]

Hallo,

da mir das erstellen des AS in diesem Thread sehr viel Spaß gemacht hat und ich gerade dabei bin mich in Klassen einzuarbeiten, habe ich die Tsunami Klasse geschrieben.
Damit diese aber nicht bei mir verstaubt, wollte ich sie hier mal reinstellen. Vielleicht kanns ja jemand gebrauchen.

Kritik und Verbesserungsvorschläge sind erwünscht.

Alle Dateien sind im Anhang.



MfG Alpha

[Mr.Twister]

ein sehr schönes teil!
einfach anzuwenden und gut zu gebrauchen!

danke

[Alpha.ONE]

Freut mich das es dir gefällt.

Arbeite gerade an einer neuen Version die Horizontal und Vertikal funktioniert.
Werde das Ergebniss dann hier posten.

MfG Alpha

[Mr.Twister]

ein tsunami-effekt für mehrreihige icons währe auch cool.

[hcid]

nabend allerseits,

frage an @ALPHA.ONE

was muss ich script technisch ändern, wenn ich die

1. 6-kästel in einen firstMC verschiebe
2. onPress drauf setzen will der externe Movies läd

wäre klassen wenn ich ein feebdack bekommen könnte

hcid

[Alpha.ONE]

Hallo,


Frage1:

PHP-Code:

var tsu : Tsunami = new Tsunami ( _root ,120, 25, 0.1, 5); 


in :

PHP-Code:

var tsu : Tsunami = new Tsunami ( _root.deinClip ,120, 25, 0.1, 5); 


ändern.

Frage2: Folgende Script in der Hauptzeitleiste sollte abhilfe schaffen

PHP-Code:

clip2.onPress = function ()
{
    trace(this+" wurde angeklickt")
} 


MfG Alpha


EDIT:

Jetzt muss ich selber mal fragen.
Ich bin derzeit noch auf der Suche nach einem Ansatz wie man der Effekt für mehrreihige Icons realisieren könnte. Mein problem ist die verschiebung der Icons in Abhängigkeit ihrer Skalierung sowie der Skalierung der umliegenden Icons.
Ich finde allein die korrenkte Positionierung von nur einer Reihe wie es hier der Fall ist, ist schon vergleichweise aufwendig da jedes Icon geprüft wird und das auch noch in Kombination mit onEnterFrame. Aber wenn man das gleiche Prinzip auf ein Raster von sagen wir mal 6 x 6 Icons anwendet, wird die sache verdammt unperformant.

Mich würde interessieren ob es nicht eine bessere Herangehensweise gibt. Eine die vielleicht nicht so extrem performancelastig ist.
Über Antworten würde ich mich freuen.

[michey]

Schönes Ding, das!

Danke fürs Teilen.

Bei mir funzt das ändern der Skalierungswerte nicht.
Mit

PHP-Code:

var tsu = new Tsunami(_root, 200, 100, 0.1, 5); 


gerät alles etwas durcheinander.
Ist sowas am Ende gar nicht möglich?
Oder müsste dazu erst die Klasse angepasst werden?

[Alpha.ONE]

Hallo,

du hast folgendes Problem:

PHP-Code:

var tsu = new Tsunami(_root, 200, 100, 0.1, 5); 


kann gar nicht funktionieren da du den Wert von minScale auf 100 stellst (also ist deine kleinstmögliche Skalierung 100%).

Hier nochmal die Erklärung zum initialisieren:

var tsu : Tsunami = new Tsunami ( _root ,120, 25, 0.1, 5);

Erklärung der einzelnen Parameter (von links nach rechts):

_root verweis auf die Bühne
120 /Mindestabstand des Mauszeigers zum Clip
25 Kleinstmögliche Skalierung
0.1 Geschwindigkeit
5 Abstand der Clips zueinander

Ein vergrößern der Clips über 100% ist leider derzeit nicht möglich aber ich werde versuchen die Klasse anzupassen.

MfG Alpha

Edit: Hier das Skript der Tsunami Klasse falls jemand lust hat zu helfen es zu verbessern.

PHP-Code:

class Tsunami extends MovieClip
{
    public var clipArray : Array = new Array()
    
    public var canvas : MovieClip
    
    public var distanceMin : Number
    public var minScale : Number
    public var speed : Number
    public var dis : Number
    public var clipHeight : Number
    
    
    public function Tsunami(st : MovieClip, a : Number, b : Number, c : Number, d : Number)
    {
        canvas = st
        
        distanceMin = a
        minScale = b
        speed = c
        dis = d
    }
    
    
    public function addClip( mc : String )
    {
        clipArray.push( mc )
    }
    
    
    public function startTsunami( mc : MovieClip) : Void
    {
        var ref : Tsunami = this
        
        canvas[mc].onEnterFrame = function()
        {
            var distanceX : Number = Math.abs( this._x - ref.canvas._xmouse )
            
            var activeTopY : Number = this._y - ( (ref.clipHeight * 3 ) / 2 )
            var activeBottomY : Number = this._y + ( (ref.clipHeight * 3 ) / 2 )
            
            if ( ref.canvas._ymouse > activeTopY && ref.canvas._ymouse < activeBottomY )
            {
                if ( distanceX < ref.distanceMin )
                {
                    var mcScale : Number = ( ref.distanceMin * ( 1 + ref.speed )) - distanceX;
                }
                else
                {
                    var mcScale : Number = ref.minScale;
                }
            }
            else
            {
                var mcScale : Number = ref.minScale;
                
                if ( this._yscale <= ref.minScale + 1 )
                {
                    delete this.onEnterFrame;
                    this._yscale = this._xscale = ref.minScale;
                }
            }
            
            var addScale : Number = ( mcScale - this._yscale );
            
            if ( this._yscale + ( addScale * ref.speed ) > ref.minScale )
            {
                if ( this._yscale + ( addScale * ref.speed ) >= 100 )
                {
                    this._yscale = 100;
                }
                else
                {
                this._yscale += addScale * ref.speed;
                }
            }
            else
            {
                this._yscale = ref.minScale;
            }
            
            this._xscale = this._yscale;
            
            ref.clipPosition()
        };
    }
    
    
    public function clipPosition() : Void
    {
        for ( var i : Number = 0; i < clipArray.length; i++ )
        {
            canvas[clipArray[i]]._x = canvas[clipArray[i-1]]._x + ( canvas[clipArray[i-1]]._width / 2 ) + ( canvas[clipArray[i]]._width / 2 ) + dis;
        }
    }
    
    public function createActivArea ()
    {
        clipHeight = canvas[clipArray[0]]._height
        
        canvas.createEmptyMovieClip( "activator", -100000000 )
        
        canvas.activator.beginFill( 0x333333 );
        
        canvas.activator.moveTo( 0, 0 );
        
        canvas.activator.lineTo( 10, 0 );
        canvas.activator.lineTo( 10, 10 );
        canvas.activator.lineTo( 0, 10 );
        canvas.activator.lineTo( 0, 0 );
        
        canvas.activator.endFill();
        
        canvas.activator._alpha = 0;
        
        canvas.activator._height = canvas[clipArray[0]]._height * 3
        canvas.activator._width = canvas[clipArray[0]]._width * 3

        for ( var i : Number = 0; i < clipArray.length; i++ )
        {
            canvas.activator._width += canvas[clipArray[i]]._width
        }
        
        canvas.activator._x = canvas[clipArray[0]]._x - ( ( canvas[clipArray[0]]._width * 3 ) / 2 )
        canvas.activator._y = canvas[clipArray[0]]._y - ( canvas.activator._height / 2)
        
        setClipsToMinScale ()
        activatorRollOver ()
    }
    
    
    private function activatorRollOver ()
    {
        var scope : Tsunami = this;
        
        canvas.activator.useHandCursor = false;
        
        canvas.activator.onRollOver = function ()
        {
            for ( var i : Number = 0; i < scope.clipArray.length; i++ )
            {
                scope.startTsunami (scope.clipArray[i])
            }
        }

    }
    
    
    private function setClipsToMinScale ()
    {
        for ( var i : Number = 0; i < clipArray.length; i++ )
        {
            canvas[clipArray[i]]._xscale = canvas[clipArray[i]]._yscale = minScale
            clipPosition()
        }
    }
} 


[michey]

Danke für die Erlaüterungen.
Hatte den Parameter des Mauszeigers für einen zweiten Skalierungswert gehalten.

[Alpha.ONE]

Hallo,

ich hab wieder mal ein wenig Zeit gefunden um an dieser Klasse weiterzuarbeiten.

Alle Dateien sind im Anhang.

Für den User hat sich nur der Teil der in die Hauptzeitleiste kommt geändert.

Hier das Skript sowie die nötigen Kommentare:

PHP-Code:

var tsu = new Tsunami ()

/*
new Tsunami (parameter)

parameter ->     Pfad zu den Clips z.B. this, _root, this.container, ...
*/

tsu.addClip (["clip1","clip2","clip3"]) 
tsu.addClip ("clip4")
tsu.addClip ("clip5")
tsu.addClip ("clip6")

/*
Methode addClip(parameter)

parameter ->     es können mehrere Clips hinzugefügt werden. 
        Dabei muss man auf die Array schreibweise achten.
        Soll nur ein Clip hinzugefügt werden übergibt man den
        Instanznamen als String.
*/

tsu.run({minScale:20});

/*
Mathode run({minScale:Number, maxScale:Number, speed:Number, clipDistance:Number, minMouseDistance:Number})

minScale ->         das ist die kleistmögliche Skalierung.

optionale Parameter

maxScale ->         das ist die größtmögliche Skalierung (Standardwert = 100).
speed ->        die geschwindigkeit der Animation (Standardwert = 0.1).
clipDistance ->        der Abstand der Clips zueinander (Standardwert = 5).
minMouseDistance ->    der Mindestabstand des Mauszeigers zum Clip (Standardwert = 120).
*/ 


Viel Spaß damit und Ich bitte um Kommentare.


MfG Alpha

[michey]

Eine unter vielen Möglichkeiten praktischer Anwendung der Tsunami-Klasse...

>guck<

Nochmals vielen Dank an Alpha.One fürs Reinstellen.
Bin gespannt wie es weitergeht.

Habe da mal irgendwo ein etwas älteres Tsunami gefunden, die Bewegungen scheinen mir nicht so schön fliessend zu sein wie bei deinem, aber vielleicht kann es trotzdem als Anregung dienen.
Ein Beispiel dazu >hier<, unter new collection.

Der Code

PHP-Code:

centerx = Stage.width/2;
centery = Stage.height/2;
var menuholder = this.createEmptyMovieClip("menuholder", -1);
menuholder._y = centery;
menucount = 5;
menuitems = [];
miwidth = 50;
miborder = 5;
startx = centerx-((menucount-1)*(miwidth+miborder))/2;
//trace(startx);
for (var i = 0; i<menucount; i++) {
    var menuitem = this.menuholder.attachMovie("menuitem"+i, "menu"+i, i);
    menuitem._x = startx+i*(miwidth+miborder);
    menuitem.id = i;
    menuitem.onRollOver = function() {
        _root.selected = this;
    };
    menuitems.push(menuitem);
}
onEnterFrame = function () {
    var width = 0;
    for (var i = 0; i<menucount; i++) {
        var xxm = menuitems[i]._xmouse;
        var yym = menuitems[i]._ymouse;
        var xm = Math.sqrt(xxm*xxm+yym*yym);
        if (xm<50) {
            menuitems[i]._xscale = menuitems[i]._yscale += ((200-xm)-menuitems[i]._yscale)/3;
        } else {
            menuitems[i]._xscale = menuitems[i]._yscale += (100-menuitems[i]._yscale)/3;
        }
        width += menuitems[i]._width;
    }
    width += (menucount-1)*miborder;
    var xpos = Math.round(centerx-width/2);
    for (var i = 0; i<menucount; i++) {
        if (i == 0) {
            xpos += miborder+menuitems[i]._width/2;
            menuitems[i]._x = xpos;
        } else {
            xpos += menuitems[i-1]._width/2+miborder+menuitems[i]._width/2;
            menuitems[i]._x = xpos;
        }
    }
}; 


Gruss

[Denyo256]

Hallo,

also ich hab das ganze jetzt mal ausprobiert, sieht verdammt gut aus.

Nur bekomme ich es nicht ganz so schön hin, wenn ich es für ein vertikales Menü umbaue. Mit der zweiten, aktuelleren Version klappt irgendwie gar nix

Gibts denn vielleicht auch eine vertikale Version?

Grüße, Denyo

[Alpha.ONE]

Hallo,

um einen vertikalen Tsunami Effekt zu erhalten muss man die ganze Klasse umschreiben. Wollte das eigentlich auch schon machen damit man vertikale und horizontale Effekte erstellen kann aber dann hatte ich keine Zeit mehr weil ich einen Auftrag hatte und mich um meinen Studienplatz kümmern musste. Jetzt wo das alles fast erledigt ist, werde ich mal schauen ob ich es umbauen kann. Wird aber sicher noch zwei bis drei Wochen dauern.


MfG Alpha

[Denyo256]

Danke für die schnelle Antwort.

Da ich wohl relativ schnell eine funktionierende Variante benötige, werde ich mich mal selber dransetzen, vielleicht kommt ja was dabei raus

Und natürlich viel Erfolg beim Studium (ich habs ja schon hinter mir)

[shorty]

Sieht schick aus - sehr schön Alpha, sehr schön!

Tipp: Wenn jetzt noch die Argumentbezeichner im Tsunami-Konstruktor selbsterklärend wären, wärs fast perfekt! Dann sieht man in z.B. Eclipse nämlich sofort beim Instanzieren welche Parameter übergeben werden können, und was sie bewirken/bedeten. Somit spart man sich den Blick in die "Doku".

lg,
shorty