[stuff] tsunami navigation as3

[salazar]

hola,
weil das thema öfters aufkommt hab ich eine tsunami klasse für eine navigation in as3 (actionscript3) gescriptet. die meisten beiträge und codeschnipsel zu dem thema sind noch in as1/as2 gecoded und somit schon etwas in die jahre gekommen.
auslöser waren die beiden posts vom flashforum user "uncle.sam":
Tsunami Menü in AS3
Bild in zwei mcs adden -> Spiegelung

ich hab alle nötigen files dazu gepackt.
auch die pixelfumes klasse für die reflection(http://www.adobe.com/devnet/flash/ar...class_as3.html)
( fla = flash cs3 fla + swf bsp. + tsunami klasse + pixelfumes klasse )

hier der code zum aufruf der "Tsunami" klasse aus einer fla:

PHP-Code:

//---
/**
* ...
* @author Niklas Knaack - nkunited.de - (c)2009
*/
//---

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

//---

import de.nkunited.tsunami.Tsunami;
import com.pixelfumes.reflect.Reflect;

//---

var tsunami:Tsunami = new Tsunami( "horizontal", Clip, "Button", 11, 5, 300, 50, 300, true );
    tsunami.x = 100;
    tsunami.y = 250;
    tsunami.addEventListener( Event.COMPLETE, onInitComplete );
    tsunami.addEventListener( Event.CLOSE, onDieComplete );
    
this.addChild( tsunami );

//---

function onInitComplete( e:Event ):void {
    
    tsunami.removeEventListener( Event.COMPLETE, onInitComplete );
    tsunami.addMouseRollOverOut( "label_over", "label_out" );
    //tsunami.removeMouseRollOverOut();
    tsunami.addMouseClick( clickHolder, { testVar:"Hallo Welt", testVar2:this } );
    //tsunami.removeMouseClick();
    tsunami.addReflection( 45, 255, 1, 0, 1 );
    //tsunami.removeReflection();
    //tsunami.die();

}

function onDieComplete( e:Event ):void {

    tsunami.removeEventListener( Event.CLOSE, onDieComplete );

    this.removeChild( tsunami );

    tsunami = null;
    
}

//---

function clickHolder( tsunamiClip:MovieClip, objectParamter:Object ):void {

    trace( "function clickHolder" );
    trace( "tsunamiClip:" );
    trace( tsunamiClip );
    trace( tsunamiClip.clipHolder.clipText.text );
    trace( "function paramter:" );
    trace( objectParamter.testVar );
    trace( objectParamter.testVar2 );
    
    //tsunamiClip.alpha = .5;

}

//--- 


die parameter für die Tsunami klasse. (erklärungen und alles weitere sind in der klasse. siehe kommentare):

-tsunamiType = "horizontal" oder "vertical";
-clipClass = verknuepfung/bezeichner in der bibliothek
-clipName = name vom tsunami element
-clipTotalNumberOf = anzahl der tsunami elemente insgesamt
-clipDistance = distanz der tsunami elemente zueinander
-clipMaxScale = max breite/width in pixel die ein element der tsunami navi erreichen kann
-clipMinScale = min breite/width in pixel die ein element der tsunami navi erreichen kann
-clipMaxMouseDistance = max distanz zur mouse-pos bis ein element der tsunami navi aktiv wird
-clipButtonMode = aktiviert buttonMode für elemente der tsunami navi

mit der methode "addMouseRollOverOut" kann man den tsunami buttons einen rollOver/rollOut zuweisen. per paramter übergibt man einfach die labels die angezeigt werden sollen.
mit "addMouseClick" kann man den buttons ein click event zuweisen. per paramter übergibt man welche function aufgerufen werden soll und dazu gibts als zweiten paramter ein object mit parametern für die aufzurufende function.
und mit "addReflection" setzt man eine reflection bei den buttons. parameter erklärung in den klassen

viel spaß damit,
cheers, sal


edit:
eine neue version mit optionaler tastatur-steuerung gibts hier (tsunami V2):
[stuff] tsunami navigation as3

edit:
eine neue version mit der man jetzt die button label nach belieben setzen kann (tsunami V3):
[stuff] tsunami navigation as3

edit:
neue version mit der man in jeden button ein bild laden kann (tsunami V4):
[stuff] tsunami navigation as3

edit:
tsunami V5.
es ist möglich filter zu setzen und rollOver/Out effekte mit filtern zu setzen:
[stuff] tsunami navigation as3

edit:
neu, (tsunami V6).
jedem button bei click eine bestimmte function mit beliebig vielen parametern zuweisen:
[stuff] tsunami navigation as3

bitte beachtet, dass ihr die aktuellen files immer bei der neuesten version findet. aktuell V6!
(ab V4 ist die tsunami klasse nicht mehr abwärts kompatibel)
(ab V5 ist die tsunami klasse nicht mehr abwärts kompatibel)
(ab V6 ist die tsunami klasse nicht mehr abwärts kompatibel)

blog:
http://niklasknaack.blogspot.com/200...e-tsunami.html

[salazar]

und hier die tsunami klasse

part1:

PHP-Code:

package de.nkunited.tsunami {
    
    import com.pixelfumes.reflect.Reflect;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.utils.Dictionary;
    
    /**
    * ...
    * @author Niklas Knaack - nkunited.de - (c)2009
    */
    public class Tsunami extends Sprite {
        
        /*
        vars
        */
        private var _tsunamiType:String;
        
        private var _clipClass:Class;
        private var _clipName:String;
        private var _clipTotalNumberOf:int;
        private var _clipDistance:Number;
        private var _clipMaxScale:Number;
        private var _clipMinScale:Number;
        private var _clipMaxMouseDistance:Number;
        private var _clipButtonMode:Boolean;
        
        private var _clipMovie:MovieClip;
        private var _clipHolder:Dictionary;

        private var _rollOverLabel:String;
        private var _rollOutLabel:String;
        
        private var _functionToCall:Function;
        private var _functionParameters:Object;
        
        private var _reflect:Reflect;
        private var _reflectionHolder:Dictionary;
        
        /*
        constructor & set main vars
        parameter:
        -tsunamiType = "horizontal" oder "vertical";
        -clipClass = verknuepfung/bezeichner in der bibliothek
        -clipName = name vom tsunami element
        -clipTotalNumberOf = anzahl der tsunami elemente insgesamt
        -clipDistance = distanz der tsunami elemente zueinander
        -clipMaxScale = max breite/width in pixel die ein element der tsunami navi erreichen kann
        -clipMinScale = min breite/width in pixel die ein element der tsunami navi erreichen kann
        -clipMaxMouseDistance = max distanz zur mouse-pos bis ein element der tsunami navi aktiv wird
        -clipButtonMode = aktiviert buttonMode für elemente der tsunami navi
        */
        public function Tsunami( tsunamiType:String, clipClass:Class, clipName:String, clipTotalNumberOf:int, clipDistance:Number, clipMaxScale:Number, clipMinScale:Number, clipMaxMouseDistance:Number, clipButtonMode:Boolean ):void {
            
            this._tsunamiType = tsunamiType;
            
            this._clipClass            = clipClass;
            this._clipName             = clipName;
            this._clipTotalNumberOf    = clipTotalNumberOf;
            this._clipDistance         = clipDistance;
            this._clipMaxScale         = clipMaxScale;
            this._clipMinScale         = clipMinScale;
            this._clipMaxMouseDistance = clipMaxMouseDistance;
            this._clipButtonMode       = clipButtonMode;

            this.addEventListener( Event.ADDED_TO_STAGE, init );
            
        }
        
        /*
        init
        */
        private function init( e:Event = null ):void {
            
            this.removeEventListener( Event.ADDED_TO_STAGE, init );
            
            this.addClips();

            this.addEventListener( Event.ENTER_FRAME, renderTsunami );
            
            this.dispatchEvent( new Event( Event.COMPLETE ) );
            
        }
        
        /*
        add/remove clips
        */
        private function addClips():void {
            
            this._clipHolder = new Dictionary();
            
            for ( var i:int = 0; i < this._clipTotalNumberOf; i++ ) {
    
                this._clipMovie = new this._clipClass() as MovieClip;
                
                if ( this._tsunamiType == "horizontal" ) {
                    
                    this._clipMovie.x = Math.round( i * ( this._clipMovie.width + this._clipDistance ) ) + ( this._clipMovie.width / 2 );
                    this._clipMovie.y = 0
                    
                } else {
                    
                    this._clipMovie.x = 0;
                    this._clipMovie.y = Math.round( i * ( this._clipMovie.height + this._clipDistance ) ) + ( this._clipMovie.height / 2 );
                    
                }

                this._clipMovie.buttonMode = this._clipButtonMode;
                this._clipMovie.mouseChildren = false;
                this._clipMovie.clipHolder.clipText.text = this._clipName + ( i + 1 ) as String;
                
                if ( this._clipMovie.clipHolder.totalFrames > 1 ) this._clipMovie.clipHolder.gotoAndStop( 1 );

                this.addChild( this._clipMovie );

                this._clipHolder[ "clip" + i ] = this._clipMovie;

            }
            
        }
        
        private function removeClips():void {
            
            if ( this._clipHolder) {
            
                for ( var i:int = 0; i < this._clipTotalNumberOf; i++ ) {
                    
                    this._clipMovie = this._clipHolder[ "clip" + i ];
                    
                    if ( this._clipMovie ) {

                        this._clipMovie.removeEventListener( MouseEvent.ROLL_OVER, rollOverHandler );
                        this._clipMovie.removeEventListener( MouseEvent.ROLL_OUT, rollOutHandler );
                        this.removeChild( this._clipMovie );
                        
                        delete this._clipHolder[ "clip" + i ];
                        
                    }

                }
                
                this._clipHolder = null;
                
            }
            
        }

        /*
        add/remove reflection
        parameter:
        -alpha = aus der pixelfumes class "the alpha level of the reflection clip"
        -ratio = aus der pixelfumes class "the ratio opaque color used in the gradient mask"
        -distance = aus der pixelfumes class "the distance the reflection starts from the bottom of the mc"
        -updateTime = aus der pixelfumes class "update time interval"
        -reflectionDropoff = aus der pixelfumes class "the distance at which the reflection visually drops off at"
        */
        public function addReflection( alpha:Number, ratio:Number, distance:Number, updateTime:Number, reflectionDropoff:Number ):void {
            
            this._reflectionHolder = new Dictionary();
            
            for ( var i:int = 0; i < this._clipTotalNumberOf; i++ ) {
                
                this._clipMovie = this._clipHolder[ "clip" + i ];

                this._reflect = new Reflect( { mc:this._clipMovie.clipHolder, alpha:alpha, ratio:ratio, distance:distance, updateTime:updateTime, reflectionDropoff:reflectionDropoff } );        
    
                this._reflectionHolder[ "reflection" + i ] = this._reflect;
            
            }

        }
        
        public function removeReflection():void {
            
            if ( this._reflectionHolder) {

                for ( var i:int = 0; i < this._clipTotalNumberOf; i++ ) {

                    this._reflect = this._reflectionHolder[ "reflection" + i ];
                    
                    if ( this._reflect ) {
                    
                        this._reflect.destroy();
                        
                        delete this._reflectionHolder[ "reflection" + i ]; 
                    
                    }
                
                }
                
                this._reflectionHolder = null;
                
            }
    
        }
        
        /*
        add/remove rollOver/rollOut
        parameter:
        -rollOverIdentifier = label auf der movieclip zeitleiste fuer rollOver
        -rollOutIdentifier = label auf der movieclip zeitleiste fuer rollOut
        */
        public function addMouseRollOverOut( rollOverIdentifier:String, rollOutIdentifier:String ):void {

            this._rollOverLabel = rollOverIdentifier;
            this._rollOutLabel = rollOutIdentifier;
            
            for ( var i:int = 0; i < this._clipTotalNumberOf; i++ ) {
    
                this._clipMovie = this._clipHolder[ "clip" + i ];
                this._clipMovie.addEventListener( MouseEvent.ROLL_OVER, rollOverHandler );
                this._clipMovie.addEventListener( MouseEvent.ROLL_OUT, rollOutHandler );
                
            }
            
        }
        
        public function removeMouseRollOverOut():void {
            
            for ( var i:int = 0; i < this._clipTotalNumberOf; i++ ) {
    
                this._clipMovie = this._clipHolder[ "clip" + i ];
                
                if ( this._clipMovie.hasEventListener( MouseEvent.ROLL_OVER ) ) this._clipMovie.removeEventListener( MouseEvent.ROLL_OVER, rollOverHandler );
                if ( this._clipMovie.hasEventListener( MouseEvent.ROLL_OUT ) )  this._clipMovie.removeEventListener( MouseEvent.ROLL_OUT, rollOutHandler );
                
            }
            
            this._rollOverLabel = null;
            this._rollOutLabel = null;
            
        }
        
        /*
        rollOver/rollOut handler
        */
        private function rollOverHandler( e:MouseEvent ):void {
            
            if ( e.currentTarget.clipHolder.totalFrames > 1 ) e.currentTarget.clipHolder.gotoAndPlay( this._rollOverLabel );
            
        }
        
        private function rollOutHandler( e:MouseEvent ):void {
            
            if ( e.currentTarget.clipHolder.totalFrames > 1 ) e.currentTarget.clipHolder.gotoAndPlay( this._rollOutLabel );
            
        } 


[salazar]

part2:
(in diesem part ist die methode "renderTsunami" die für die positionierung und skalierung der tsunami elemente verantwortlich ist.)

PHP-Code:


        /*
        add/remove click
        parameter:
        -functionToCall = function/methode die aufgerufen werden soll
        -functionParameters = paramter object fuer die aufzurufende function
        */
        public function addMouseClick( functionToCall:Function = null, functionParameters:Object = null ):void {
            
            this._functionToCall     = functionToCall;
            this._functionParameters = functionParameters;
            
            if ( !this._functionParameters ) this._functionParameters = new Object();

            for ( var i:int = 0; i < this._clipTotalNumberOf; i++ ) {
    
                this._clipMovie = this._clipHolder[ "clip" + i ];
                this._clipMovie.addEventListener( MouseEvent.CLICK, clickHandler );
                
            }
            
        }
        
        public function removeMouseClick():void {
            
            for ( var i:int = 0; i < this._clipTotalNumberOf; i++ ) {
    
                this._clipMovie = this._clipHolder[ "clip" + i ];
                
                if ( this._clipMovie.hasEventListener( MouseEvent.CLICK ) ) this._clipMovie.removeEventListener( MouseEvent.CLICK, clickHandler );

            }
            
            this._functionToCall = null;
            
        }
        
        /*
        click handler
        */
        private function clickHandler( e:MouseEvent ):void {
            
            if ( this._functionToCall != null ) this._functionToCall( e.currentTarget as MovieClip, this._functionParameters );
            
        }

        /*
        render tsunami
        */
        private function renderTsunami( e:Event ):void {
    
            for ( var i:int = 0; i < this._clipTotalNumberOf; i++ ) {

                this._clipMovie = this._clipHolder[ "clip" + i ];

                var dx:Number = this._clipMovie.x - this.mouseX;
                var dy:Number = this._clipMovie.y - this.mouseY;
                
                var distanceMouse:Number = Math.sqrt( dx * dx + dy * dy );
                
                var scaleFactor:Number = ( this._clipMaxScale + this._clipMinScale ) - Math.max( this._clipMinScale, Math.min( this._clipMaxScale, distanceMouse ) );

                if ( distanceMouse <= this._clipMaxMouseDistance ) {
                    
                    this._clipMovie.width  = scaleFactor;
                    this._clipMovie.scaleY = this._clipMovie.scaleX;
                    
                } else {
                    
                    this._clipMovie.width  = this._clipMinScale;
                    this._clipMovie.scaleY = this._clipMovie.scaleX;

                }
                
                var prevArrayPos:Number = i - 1;

                if ( prevArrayPos > -1 ) {
                
                    if ( this._tsunamiType == "horizontal" ) {
                
                        this._clipMovie.x = this._clipHolder[ "clip" + ( prevArrayPos ) ].x + this._clipMovie.width / 2 + this._clipHolder[ "clip" + ( prevArrayPos ) ].width / 2 + this._clipDistance;
            
                    } else {
                        
                        this._clipMovie.y = this._clipHolder[ "clip" + ( prevArrayPos ) ].y + this._clipMovie.height / 2 + this._clipHolder[ "clip" + ( prevArrayPos ) ].height / 2 + this._clipDistance;

                    }
            
                }

            }

        }
        
        /*
        stop/die tsunami
        */
        public function die():void {
            
            if ( this.hasEventListener( Event.ENTER_FRAME ) ) this.removeEventListener( Event.ENTER_FRAME, renderTsunami );
            
            this.removeReflection();
            this.removeMouseRollOverOut();
            this.removeMouseClick();
            this.removeClips();
            
            this.dispatchEvent( new Event( Event.CLOSE ) );
            
        }
        
        /*
        get tsunami
        */
        public function get tsunamiType():String { 
            
            return this._tsunamiType; 
            
        }
        
        /*
        get clipHolder
        */
        public function get clipHolder():Dictionary {
        
            return this._clipHolder; 
        
        }

    }
    
} 


part1 + part2 sind eine klasse. ich mußte das ganze leider aufteilen wegen der zeichenbegrenzung pro post

cheers, sal

[salazar]

hier noch ein kleines update.

man kann jetzt noch eine tastatur steuerung hinzufügen.
wenn man mit:

PHP-Code:

tsunami.addMouseClick( clickHolder, { testVar:"Hallo Welt", testVar2:this } ); 


zuvor festgelegt hat welche function usw aufgerufen werden soll, dann kann man mit:

PHP-Code:

tsunami.addKeyControl( "LEFT", "RIGHT", 3 ); 


die steuerung per tastatur aktivieren. "LEFT" bestimmt mit welcher taste man nach links im menü navigiert und mit "RIGHT" legt man die taste für rechts fest. 3 ist die dauer in sekunden bis das nächste tsunami navi element erreicht wird.

hier nochmal der gesammte code aus der fla zum aufruf der tsunami klasse.
(im folgenden bsp. ist die zeile zum aufruf der tastatursteuerung noch auskommentiert)

PHP-Code:

//---
/**
* ...
* @author Niklas Knaack - nkunited.de - (c)2009
*/
//---

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

//---

import de.nkunited.tsunami.Tsunami;
import com.pixelfumes.reflect.Reflect;

//---

var tsunami:Tsunami = new Tsunami( "horizontal", Clip, "Button", 11, 5, 300, 50, 300, true );
    tsunami.x = 100;
    tsunami.y = 250;
    tsunami.addEventListener( Event.COMPLETE, onInitComplete );
    tsunami.addEventListener( Event.CLOSE, onDieComplete );
    
this.addChild( tsunami );

//---

function onInitComplete( e:Event ):void {
    
    tsunami.removeEventListener( Event.COMPLETE, onInitComplete );
    tsunami.addMouseRollOverOut( "label_over", "label_out" );
    //tsunami.removeMouseRollOverOut();
    tsunami.addMouseClick( clickHolder, { testVar:"Hallo Welt", testVar2:this } );
    //tsunami.removeMouseClick();
    //tsunami.addKeyControl( "LEFT", "RIGHT", 3 );
    //tsunami.removeKeyControl();
    tsunami.addReflection( 45, 255, 1, 0, 1 );
    //tsunami.removeReflection();
    //tsunami.die();

}

function onDieComplete( e:Event ):void {

    tsunami.removeEventListener( Event.CLOSE, onDieComplete );

    this.removeChild( tsunami );

    tsunami = null;
    
}

//---

function clickHolder( tsunamiClip:MovieClip, objectParamter:Object ):void {

    trace( "function clickHolder" );
    trace( "tsunamiClip:" );
    trace( tsunamiClip );
    trace( tsunamiClip.clipHolder.clipText.text );
    trace( "function paramter:" );
    trace( objectParamter.testVar );
    trace( objectParamter.testVar2 );
    
    //tsunamiClip.alpha = .5;

}

//--- 


fürs tweenen hab ich tweener benutzt.
http://code.google.com/p/tweener/

diesmal sind auch wieder alles wichtigen files mit dabei. die tweener klasse, die pixelfumes klasse, die tsunami klasse und die cs3 fla.

viel spaß,
sal

[salazar]

hi,
und noch ein kleines update.

man kann jetzt die button label ( texte auf den buttons ) auf verschiedene arten festlegen. dafür gibts jetzt die methoden "addLabels" und "removeLabels".

hier mal ein paar beispiele zum aufrufen der neuen methode:

PHP-Code:

tsunami.addLabels( [ "Clip" ], true ); 


alle buttons bekommen als label den string "Clip" und zusätzlich werden die nummeriert.
[ Clip 1 ] [ Clip 2 ] [ Clip 3 ] [ Clip 4 ] [ Clip 5 ] usw.

PHP-Code:

tsunami.addLabels( [ "Clip" ], false); 


alle buttons bekommen als label den string "Clip".
[ Clip ] [ Clip ] [ Clip ] [ Clip ] [ Clip ] usw.

PHP-Code:

tsunami.addLabels( [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K" ], false ); 


alle buttons bekommen als label einen string aus dem array zugewiesen
[ A] [ B] [ C] [ D] [ E ] usw.

PHP-Code:

tsunami.addLabels( [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K" ], true); 


alle buttons bekommen als label einen string aus dem array zugewiesen und zusätzlich wird nummeriert.
[ A 1 ] [ B 2 ] [ C 3 ] [ D 4 ] [ E 5 ] usw.

hier nochmal der gesammte code aus der fla zum aufruf der tsunami klasse.

PHP-Code:

//---
/**
* ...
* @author Niklas Knaack - nkunited.de - (c)2009
*/
//---

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

//---

import de.nkunited.tsunami.Tsunami;
import com.pixelfumes.reflect.Reflect;

//---

var tsunami:Tsunami = new Tsunami( "horizontal", Clip, "Button", 11, 5, 300, 50, 300, true );
    tsunami.x = 100;
    tsunami.y = 250;
    tsunami.addEventListener( Event.COMPLETE, onInitComplete );
    tsunami.addEventListener( Event.CLOSE, onDieComplete );
    
this.addChild( tsunami );

//---

function onInitComplete( e:Event ):void {
    
    tsunami.removeEventListener( Event.COMPLETE, onInitComplete );
    //tsunami.addLabels( [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K" ], true );
    //tsunami.addLabels( [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K" ], false );
    tsunami.addLabels( [ "Clip" ], true );
    //tsunami.removeLabels();
    tsunami.addMouseRollOverOut( "label_over", "label_out" );
    //tsunami.removeMouseRollOverOut();
    tsunami.addMouseClick( clickHolder, { testVar:"Hallo Welt", testVar2:this } );
    //tsunami.removeMouseClick();
    //tsunami.addKeyControl( "LEFT", "RIGHT", 3 );
    //tsunami.removeKeyControl();
    tsunami.addReflection( 45, 255, 1, 0, 1 );
    //tsunami.removeReflection();
    //tsunami.die();

}

function onDieComplete( e:Event ):void {

    tsunami.removeEventListener( Event.CLOSE, onDieComplete );

    this.removeChild( tsunami );

    tsunami = null;
    
}

//---

function clickHolder( tsunamiClip:MovieClip, objectParamter:Object ):void {

    trace( "function clickHolder" );
    trace( "tsunamiClip:" );
    trace( tsunamiClip );
    trace( tsunamiClip.clipHolder.clipText.text );
    trace( "function paramter:" );
    trace( objectParamter.testVar );
    trace( objectParamter.testVar2 );
    
    //tsunamiClip.alpha = .5;

}

//--- 


diesmal sind auch wieder alles wichtigen files mit dabei. die tweener klasse, die pixelfumes klasse, die tsunami klasse und die cs3 fla.

viel spaß,
sal

[salazar]

und weils so schön ist noch ein update.

hab noch einen kleinen image loader/unloader integriert
neu hinzugekommen sind die methoden "addImages" und "removeImages".

hier mal ein paar beispiele zum aufrufen der neuen methode:

PHP-Code:

tsunami.addImages( [ "testImage.jpg" ], 1, 2 ); 


lädt für alle buttons das "testImage.jpg" bild mit alpha 1 und einer einblend dauer von 2 sekunden.

PHP-Code:

tsunami.addImages( [ "testImage.jpg" ], 0.5, 0 ); 


lädt für alle buttons das "testImage.jpg" bild mit alpha 0.5. bild ist nach dem laden sofort sichtbar und wird nicht erst eingeblendet.

PHP-Code:

tsunami.addImages( [ "testImage1.jpg","testImage2.jpg","testImage3.jpg","testImage4.jpg","testImage5.jpg","testImage6.jpg","testImage7.jpg","testImage8.jpg","testImage9.jpg","testImage10.jpg","testImage11.jpg" ], 0.5, 5 ); 


lädt für alle buttons ein entsprechendes bild aus dem array. alle bilder haben einen alphawert von 0.5 und brauchen 5 sekunden bis sie eingeblendet sind.

hier nochmal der gesammte code aus der fla zum aufruf der tsunami klasse.

PHP-Code:

//---
/**
* ...
* @author Niklas Knaack - nkunited.de - (c)2009
*/
//---

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

//---

import de.nkunited.tsunami.Tsunami;
import com.pixelfumes.reflect.Reflect;

//---

var tsunami:Tsunami = new Tsunami( "horizontal", Clip, "Button", 11, 5, 300, 50, 300, true );
    tsunami.x = 100;
    tsunami.y = 250;
    tsunami.addEventListener( Event.COMPLETE, onInitComplete );
    tsunami.addEventListener( Event.CLOSE, onDieComplete );
    
this.addChild( tsunami );

//---

function onInitComplete( e:Event ):void {
    
    tsunami.removeEventListener( Event.COMPLETE, onInitComplete );
    //tsunami.addLabels( [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K" ], true );
    //tsunami.addLabels( [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K" ], false );
    tsunami.addLabels( [ "Clip" ], true );
    //tsunami.removeLabels();
    tsunami.addImages( [ "testImage.jpg" ], 1, 2 );
    //tsunami.removeImages();
    tsunami.addMouseRollOverOut( "label_over", "label_out" );
    //tsunami.removeMouseRollOverOut();
    tsunami.addMouseClick( clickHolder, { testVar:"Hallo Welt", testVar2:this } );
    //tsunami.removeMouseClick();
    //tsunami.addKeyControl( "LEFT", "RIGHT", 3 );
    //tsunami.removeKeyControl();
    tsunami.addReflection( 45, 255, 1, 0, 1 );
    //tsunami.removeReflection();
    //tsunami.die();

}

function onDieComplete( e:Event ):void {

    tsunami.removeEventListener( Event.CLOSE, onDieComplete );

    this.removeChild( tsunami );

    tsunami = null;
    
}

//---

function clickHolder( tsunamiClip:MovieClip, objectParamter:Object ):void {

    trace( "function clickHolder" );
    trace( "tsunamiClip:" );
    trace( tsunamiClip );
    trace( tsunamiClip.clipHolder.clipText.text );
    trace( "function paramter:" );
    trace( objectParamter.testVar );
    trace( objectParamter.testVar2 );
    
    //tsunamiClip.alpha = .5;

}

//--- 


diesmal sind auch wieder alles wichtigen files mit dabei. die tweener klasse, die pixelfumes klasse, die tsunami klasse, die cs3 fla, eine bsp. swf und das bsp. bild. man kann also direkt loslegen

viel spaß,
sal

[salazar]

hi,
hier die tsunami navi V5.

es gibt ein paar neue methoden:
-addMouseRollOverOutFilter = rollOver bitmapFilter tween
-removeMouseRollOverOutFilter = rollOut bitmapFilter tween
-addFilters = setzt 1 oder x filter bei jedem tsunami element
-removeFilters = entfernt wieder alle filter

addMouseRollOverOutFrames und removeMouseRollOverOutFrames ersetzen addMouseRollOverOut und removeMouseRollOverOut

mit

PHP-Code:

tsunami.tweenTransition 


kann man jetzt die tweener transition für alle tweens festlegen

und mit

PHP-Code:

tsunami.pause();
tsunami.restart(); 


kann man die tsunami navi pausieren, bzw. wieder neu starten.

beispiele für den aufruf der tsunami klasse und aller methoden aus einer fla datei:

PHP-Code:

//---
/**
* ...
* @author Niklas Knaack - nkunited.de - (c)2009
*/
//---

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

//---

import de.nkunited.tsunami.Tsunami;
import com.pixelfumes.reflect.Reflect;

//---

var tsunami:Tsunami = new Tsunami( "horizontal", Clip, "Button", 11, 3, 300, 50, 300, true );
    tsunami.x = 100;
    tsunami.y = 250;
    //tsunami.tweenTransition = "easeOutBack";//"easeOutElastic";//"easeOutExpo";//"linear";//
    tsunami.addEventListener( Event.COMPLETE, onInitComplete );
    tsunami.addEventListener( Event.CLOSE, onDieComplete );
    
this.addChild( tsunami );

//---

function onInitComplete( e:Event ):void {
    
    tsunami.removeEventListener( Event.COMPLETE, onInitComplete );
    //tsunami.addLabels( [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K" ], true );
    //tsunami.addLabels( [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K" ], false );
    tsunami.addLabels( [ "Clip" ], true );
    //tsunami.removeLabels();
    tsunami.addImages( [ "testImage.jpg" ], 0.2, 2 );
    //tsunami.removeImages();
    tsunami.addMouseRollOverOutFrames( "label_over", "label_out" );
    //tsunami.removeMouseRollOverOutFrames();
    tsunami.addMouseRollOverOutFilter( 1.6, new GlowFilter( 0x6699FF, 0.7, 30, 30, 4, BitmapFilterQuality.HIGH ), new GlowFilter( 0x6699FF, 0, 0, 0, 0, BitmapFilterQuality.HIGH ) );
    //tsunami.addMouseRollOverOutFilter( 1.6, new BlurFilter( 0, 0, BitmapFilterQuality.HIGH ), new BlurFilter( 10, 5, BitmapFilterQuality.HIGH ) );
    //tsunami.removeMouseRollOverOutFilter();
    tsunami.addMouseClick( clickHolder, { testVar:"Hallo Welt", testVar2:this } );
    //tsunami.removeMouseClick();
    //tsunami.addKeyControl( "LEFT", "RIGHT", 3 );
    //tsunami.removeKeyControl();
    tsunami.addReflection( 45, 255, 0, 0, 1 );
    //tsunami.removeReflection();
    //tsunami.addFilters( [ new BlurFilter( 10, 5, BitmapFilterQuality.HIGH ) ] );
    //tsunami.addFilters( [ new DropShadowFilter( 15, 45, 0xFFFFFF, 45, 8, 8, 0.65, BitmapFilterQuality.HIGH ) ] );
    //tsunami.addFilters( [ new BlurFilter( 10, 5, BitmapFilterQuality.HIGH ), new DropShadowFilter( 15, 45, 0xFFFFFF, 45, 8, 8, 0.65, BitmapFilterQuality.HIGH, false, false ) ] );
    //tsunami.addFilters( [ new GlowFilter( 0x33CCFF, 0.8, 35, 35, 2, BitmapFilterQuality.HIGH, false, false ) ] );
    //tsunami.removeFilters();
    //tsunami.die();

}

function onDieComplete( e:Event ):void {

    tsunami.removeEventListener( Event.CLOSE, onDieComplete );

    this.removeChild( tsunami );

    tsunami = null;
    
}

//---

function clickHolder( tsunamiClip:MovieClip, objectParamter:Object ):void {

    trace( "function clickHolder" );
    trace( "tsunamiClip:" );
    trace( tsunamiClip );
    trace( tsunamiClip.clipHolder.clipText.text );
    trace( "function paramter:" );
    trace( objectParamter.testVar );
    trace( objectParamter.testVar2 );
    trace( "tsunami getter:" );
    trace( tsunami.tsunamiType );
    trace( tsunami.clipHolder );
    trace( tsunami.reflectionHolder );
    
    //tsunami.pause();
    //tsunami.restart();
    
    //tsunamiClip.alpha = .5;

}

//--- 


alle nötigen files findet ihr wie gehabt in der zip. die tweener klasse, die pixelfumes klasse, die tsunami klasse, die cs3 fla, eine bsp. swf und das bsp. bild. man kann also direkt loslegen.

viel spaß,
sal

[salazar]

tsunami navi V6.

es gibt hier und da kleine änderungen im code. ist ein klein bissal mehr optmiert.
ausserdem hat sich die methode "addMouseClick" geändert und hat ein update erfahren. man kann jetzt jedem button wie gehabt eine function mit diversen parametern zuweisen, oder jedem button eine eigene function mit x parametern. das war ja eine doch recht wichtige ergänzung

hier ein fla bsp:

PHP-Code:

//---
/**
* ...
* @author  Niklas Knaack - nkunited.de - (c)2009
* @version Tsunami V6
*/
//---

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.showDefaultContextMenu = false;

//---

import de.nkunited.tsunami.Tsunami;
import com.pixelfumes.reflect.Reflect;

//---

var tsunamiClipName:String = "Clip";

//---

var tsunami:Tsunami = new Tsunami( "horizontal", Clip, tsunamiClipName, 11, 3, 300, 50, 300, true );
    tsunami.x = 100;
    tsunami.y = 250;
    //tsunami.tweenTransition = "easeOutBack";//"easeOutElastic";//"easeOutExpo";//"linear";//
    tsunami.addEventListener( Event.COMPLETE, onInitComplete );
    tsunami.addEventListener( Event.CLOSE, onDieComplete );
    
this.addChild( tsunami );

//---

function onInitComplete( e:Event ):void {
    
    tsunami.removeEventListener( Event.COMPLETE, onInitComplete );
    //tsunami.addLabels( [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K" ], true );
    //tsunami.addLabels( [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K" ], false );
    tsunami.addLabels( [ tsunamiClipName ], true );
    //tsunami.addLabels( [ "Clip" ], true );
    //tsunami.removeLabels();
    tsunami.addImages( [ "testImage.jpg" ], 0.22, 2 );
    //tsunami.removeImages();
    tsunami.addMouseRollOverOutFrames( "label_over", "label_out" );
    //tsunami.removeMouseRollOverOutFrames();
    tsunami.addMouseRollOverOutFilter( 1.6, new GlowFilter( 0x6699FF, 0.7, 32, 32, 4, BitmapFilterQuality.HIGH ), new GlowFilter( 0x6699FF, 0, 0, 0, 0, BitmapFilterQuality.HIGH ) );
    //tsunami.addMouseRollOverOutFilter( 1.6, new BlurFilter( 0, 0, BitmapFilterQuality.HIGH ), new BlurFilter( 10, 5, BitmapFilterQuality.HIGH ) );
    //tsunami.removeMouseRollOverOutFilter();
    //fuer alle buttons die gleiche function
    //tsunami.addMouseClick( [ { functionToCall:clickHolder, functionParameters:{ testVar:"Hallo Welt", testVar2:this } } ] );
    //fuer alle buttons eine eigene function
    tsunami.addMouseClick( [ { functionToCall:clickHolder,        functionParameters:{ testVar:"Hallo Welt", testVar2:this } }, 
                             { functionToCall:clickHolder,        functionParameters:{ testVar:"Hallo Welt", testVar2:this } }, 
                             { functionToCall:clickHolder,        functionParameters:{ testVar:"Hallo Welt", testVar2:this } }, 
                             { functionToCall:clickHolder,        functionParameters:{ testVar:"Hallo Welt", testVar2:this } }, 
                             { functionToCall:clickHolder,        functionParameters:{ testVar:"Hallo Welt", testVar2:this } }, 
                             { functionToCall:clickHolder,        functionParameters:{ testVar:"Hallo Welt", testVar2:this } }, 
                             { functionToCall:clickHolder,        functionParameters:{ testVar:"Hallo Welt", testVar2:this } }, 
                             { functionToCall:clickHolderSpecial, functionParameters:{ deinString:"test", param2:this } }, 
                             { functionToCall:clickHolderSpecial, functionParameters:{ deinString:"test", param2:this } }, 
                             { functionToCall:clickHolderSpecial, functionParameters:{ deinString:"test", param2:this } }, 
                             { functionToCall:funcABC123,         functionParameters:{ param1:"param1", param2:"param2", param3:"param3" } }, 
                            ] );
    //tsunami.removeMouseClick();
    //tsunami.addKeyControl( "LEFT", "RIGHT", 3 );
    //tsunami.addKeyControl( "UP", "DOWN", 3 );
    //tsunami.removeKeyControl();
    tsunami.addReflection( 45, 255, 0, 0, 1 );
    //tsunami.removeReflection();
    //tsunami.addFilters( [ new BlurFilter( 10, 5, BitmapFilterQuality.HIGH ) ] );
    //tsunami.addFilters( [ new DropShadowFilter( 15, 45, 0xFFFFFF, 45, 8, 8, 0.65, BitmapFilterQuality.HIGH ) ] );
    //tsunami.addFilters( [ new BlurFilter( 10, 5, BitmapFilterQuality.HIGH ), new DropShadowFilter( 15, 45, 0xFFFFFF, 45, 8, 8, 0.65, BitmapFilterQuality.HIGH, false, false ) ] );
    //tsunami.addFilters( [ new GlowFilter( 0x33CCFF, 0.8, 35, 35, 2, BitmapFilterQuality.HIGH, false, false ) ] );
    //tsunami.removeFilters();
    //tsunami.die();

}

function onDieComplete( e:Event ):void {

    tsunami.removeEventListener( Event.CLOSE, onDieComplete );

    this.removeChild( tsunami );

    tsunami = null;
    
}

//---

function clickHolder( tsunamiClip:MovieClip, objectParamter:Object ):void {

    trace( "function clickHolder: " );
    trace( " -tsunamiClip:...... " + tsunamiClip );
    trace( " -tsunamiClip name:. " + tsunamiClip.name );
    trace( " -tsunamiClip text:. " + tsunamiClip.clipHolder.clipText.text );
    trace( "function paramter: " );
    trace( " -testVar:.......... " + objectParamter.testVar );
    trace( " -testVar2:......... " + objectParamter.testVar2 );
    trace( "tsunami getter: " );
    trace( " -tsunamiType:...... " + tsunami.tsunamiType );
    trace( " -clipHolder:....... " + tsunami.clipHolder );
    trace( " -reflectionHolder:. " + tsunami.reflectionHolder );
    trace( "\n" );
    
    //tsunami.pause();
    //tsunami.restart();
    
    //tsunamiClip.alpha = .5;

}

//---

function clickHolderSpecial( tsunamiClip:MovieClip, objectParamter:Object ):void {

    trace( "function clickHolderSpecial: " );
    trace( " -tsunamiClip:...... " + tsunamiClip );
    trace( " -tsunamiClip name:. " + tsunamiClip.name );
    trace( " -tsunamiClip text:. " + tsunamiClip.clipHolder.clipText.text );
    trace( "function paramter: " );
    trace( " -deinString:....  " + objectParamter.deinString );
    trace( " -param2:......... " + objectParamter.param2 );
    trace( "\n" );
    
    //tsunami.pause();
    //tsunami.restart();

}

//---

function funcABC123( tsunamiClip:MovieClip, objectParamter:Object ):void {

    trace( "function funcABC123: " );
    trace( "function paramter: " );
    trace( " -param1:......... " + objectParamter.param1 );
    trace( " -param2:......... " + objectParamter.param2 );
    trace( " -param3:......... " + objectParamter.param3 );
    trace( "\n" );

}

//--- 


alle nötigen files findet ihr wie gehabt in der zip. die tweener klasse, die pixelfumes klasse, die tsunami klasse, die cs3 fla, eine bsp. swf und das bsp. bild. man kann also direkt loslegen.

viel spaß,
salazar

[Hans meisa]

Erstmal Hallo und vielen Dank Salazar für diese echt mega geniale Klase.
Super einfach zu konfigurieren und sieht echt super aus das Teil.

Jetzt hab ich natürlich ein weiteres Feature welches ich für die Tsunami Klasse benötige:

Meine Tsunami Nav müsste wie folgt aussehen:

3 Buttons nebeneinander, dann ca. 250px Freiraum dann wieder 4 Buttons, dann müsste die TsunamiNav in einer Zeile darunter mit 5 weiteren Buttons weiter gehen und so on....

Wie könnte man so etwas lösen?
Ich hab 2 Ansätze:

1. Mehrere Tsunamiklassen instanziieren, aber da weiß ich nicht, wie ich der klasse 1 sage: Wenn Du beim letzten Button angekommen bist starte den 1. BTn aus der nächsten Tsunamiklasse...

2. Einer Tsunamiklasse positionsangaben für die einzelnen Buttons übergeben.

Könnte mir da jemand helfen wie man das umsetzt?

Vielen Dank schon mal im Vorraus

[salazar]

hallo hans meisa,
schön das dir das teil gefällt.

liest sich etwas merkwürdig was du da vor hast.
die buttons, bzw. tsunami elemente sollen also mit großen und unterschiedlichen abständen versehen auf der stage verteilt werden?

es ist richtig das die tsunami klasse das nicht kann...
aber ist das überhaupt sinnig, denn die buttons verändern ihre größe ja abhängig von der maus pos. wenn da jetzt so eine große lücke zwischen ist wirkt sich das nur auf den/die buttons aus die nah am mauszeiger sind.... die die nach der großen lücke erst kommen würden nicht vergrößert verkleinert werden. aber das wär ja noch okay.
eine andere frage wirft das ganze auch noch auf. du setzt ja auch buttons unterhalb schon bestehender tsunami buttons. soll da also eine verschiebung auf der x und y achse stattfinden oder nur auf der x achse? weil x und y gleichzeitig ist so gar nicht vorgesehen bisher...

wenn dann wäre dieser weg:

2. Einer Tsunamiklasse positionsangaben für die einzelnen Buttons übergeben.

wohl der bessere.
damit allein wär es aber wie gesagt nicht getan... da müßte man hier und da auch noch an anderen stellen im script bestimmte codeschnipsel anpassen.

cheers, sal

[one4win]

kann ich dein tsunami fuer sowas aehnliches benutzen: http://www.actionscript.org/resource...ami/Page1.html

ich will einfach z.b. ein Array of Strings geben und dass er mir das wie oben im Link zeichnet.

Am besten waere es wenn ich dem Tsunami ein paar Bounding Boxes sagen kann und einfach beliebig viele Elemente im Array einfuegen oder loschen kann und dass der Menu sich automatisch adaptiert aber bestimmte bounds nicht ueberschreitete egal wieviele elemente drin sind. Diese sollen auch kleiner oder groesser werden je nachdem wieviel platz noch in der Box ist. Mehrere Elemente sollen dann entsprechend kleiner dargestellt werden.

ich benutze flex und ich habe das Problem dass folgender code nicht funktioniert:

var tsunami:Tsunami = new Tsunami( "horizontal", Clip, tsunamiClipName, 11, 3, 300, 50, 300, true );
stage.addChild(tsunami);

wer ist Clip (kommt bestimmt aus dem Flash Umfeld).

P.S.: Sorry fuer Rechtsschreibfehler

[salazar]

hi,
Clip ist der bezeichner für den MovieClip in der flash lib der als button innerhalb der tsunami navi agiert
kenn mich mit flex nicht wirklich gut aus... aber vielleicht kannste den mc über eine swc in dein flex projekt kriegen.

cheers,
sal

[thekai]

Hallo, nette Klasse hast du da geschrieben.
Ich hab jetzt versucht sie soweit es geht nachzuvollziehen.
Mir ist es denoch nicht gelungen über das Array "imageHolder"
Bilder in das Tsunami zu laden, so dass Sie trotzdem weiterhin richtig skaliert werden.
Gibt es überhaupt eine Möglichkeit Bilder von unterschiedlicher Größe hineinzuladen, so dass das Menu weiterhin funktioniert?

[salazar]

hi,
nee. in der aktuellen version ist das leider nicht möglich
vielleicht schieb ich nochmal ein update hinterher wenn die zeit dafür da ist.

in der tsunami klasse ist noch ein kleiner fehler drinn...

PHP-Code:

this._filterSpeed = null; 


muss so umgeschrieben werden:

PHP-Code:

this._filterSpeed = 0; 


cheers, sal