[stuff] Slider (endless items)

[shorty]

Einen wunderschönen guten Morgen ...

So kurz & knapp wie der code gehalten ist, hier nun die beschreibung. Im folgenden anwendungsbeispiel seht ihr einen, auf klassen basierten horizontalen slider. Anfangs stand die performance im vordergrund, welche jedoch im zuge der verwendung von klassen leicht in den hintergrund geraten ist. Aktuell schaft der slider ohne probleme (performanceeinbruch) 300 items, flüssig in beide richtungen zu bewegen. Falls ihr also mal ein horizontales laufband zur z.B. präsentation von bildern o.ä. benötigt, seid ihr hier, "hoffentlich" richtig.

Die Slider klasse ist ohne probleme um eine methode zu erweitern, welche das sliden in vertikaler richtung erlaubt. Beide Klassen, Slider & LinkedList sind vollständig auskommentiert, so dass individuelle eingriffe recht flink von der hand gehen sollten.
An der LinkedList Klasse braucht man sich, so denke ich, nicht zu vergreifen, da sie sich im prinzip nur um die logik, ablage & rückgabe der movieclipreferenzen, kümmert.

Slider (endless items)
FileSize: 2x ca 1.7Kb* | Version: ab Flash MX 2004 | AS: klassenbasiert
*ohne kommentare

• mouse-positionsabhängiger slide (links/rechts)
• flüssiger* slide, bei vollem speed bis ca. 300 items
  *kommt auf euren rechenknecht an, meiner ist, nun ja: very slow
• geschwindigkeit, abstand der items, linke- und rechte begrenzung frei einstellbar
• leicht erweiterbar durch Klassenaufbau

Ansehen: postID#14

Saugen: postID#14

Ein Blick unter die Haube:

Timeline(Anwendungsbeispiel)

PHP-Code:

//  # Slider - Klasse importieren ...
import com.shortybmc.gui.Slider;

//  # Ein neues, von der Klasse Slider 
//  abgeleitetes Object initialisieren ...
var sl:Slider = new Slider ();

//  # deine, meine individuelle function ...
function build (target:MovieClip, template:String):Void {
    //  ein temporaeres array erstellen. hier
    //  werden die referenzen zu den in der schleife
    //  erstellten movieclips hinterlegt ...
    var a:Array = new Array ();
    
    //  item start positionierung auf der x-achse ...
    var posX:Number = 0;
    
    //  item start positionierung auf der y-achse ...
    var posY:Number = 100;
    
    //  container im per argument (target) übergebenen ...
    //  movieclip erzeugen
    var container:MovieClip = target.createEmptyMovieClip ('___slider', 0);
    
    for (var i:Number = 0; i < 201; i++) {
        //  eine instanzen, des im argument (template) übergebenen
        //  symbols (bibliotheks-verknuepfung) aus der lib holen,
        //  per item referenzieren und positionieren (posX & posY) ...
        var item:MovieClip = container.attachMovie (template, 'item' + i, i, {_x:posX, _y:posY});
        
        //  individuelle eigenschaften setzen
        item.txtID.text = i;
        
        //  positionierung um die breite der instanz + 1 erhoehen ...
        posX += item._width + 1;
        
        //  die referenz zum erstellten movieclip im array ablegen ...
        a.push (item);
        
        //  und so weiter, bis alle 201 movieclips auf der bühne sind
    }
    
    //  # wenn alle clips am start sind, temporaeres
    //  object erstellen, in dem die eigenschaften
    //  fuer unseren slider hinterlegt werden
    var settings:Object = new Object();
    
    //   # target = angabe des ziel-movieclips, 
    //   welcher ge-slided werden soll
    settings.target = container;
    
    //  # fps = angabe der FramesPerSecond 
    //  ! genau wie die zum veroeffentlichen !
    settings.fps = 24;
    
    //  # items = angabe des arrays, in welchem die referenzen
    //  auf die einzelnen movieclips hinterlegt worden sind
    settings.items = a;
    
    //  # speed = je höher der wert, umso schneller
    settings.speed = 50;
    
    //  # left = angabe des linken randes. wenn der x wert des
    //  containers diesen wert ueberschreitet, wird das letzte,
    //  per referenz im array gespeicherte, element an die 0
    //  position des sliders bewegt
    settings.left = -100;
    
    //  # right = wie left, nur anders rum ;)
    settings.right = 1048;
    
    //  # position = angabe der positionierung, wenn ein movieclip
    //  vom ende/anfang des arrays an seine richtige position verschoben
    //  wird (i.d.R. breite des movieclips + leerraum)
    settings.position = 91;
    
    //  # die init methode des von der slider klasse abgeleiteten
    //  objects aufrufen, ihr als argument das settings object uebergeben.
    //  fertig ...
    sl.init (settings);
    
    //  # probieren geht ueber studieren, basteln & gluecklich werden ;)
}
// action ...
build (this, 'mcTmpl'); 


Slider - Klasse

PHP-Code:

//  # import von gebrauchsguetern ...
import mx.utils.Delegate;
import com.shortybmc.utils.datastructure.LinkedList; 

class com.shortybmc.gui.Slider  {
    

    /* propertys
    
       im kontext der "init" methode wird klar, was
       wofuer bestimmt ist
    
    */
    private var a:LinkedList;
    private var v:Number
    private var t:MovieClip;
    private var mL:Number;
    private var mR:Number;
    private var nI:Number;
    private var iV:Number;
    
    /* constructor : Slider 
    */
    function Slider () {}
    
    /* public : void : start
    
       initialisierung / wertzuweisung der klasseneigenschaften,
       durch das im argument uebergebene settings object
    
    */
    public function init (settings:Object) : Void 
    {
        // auffuellen unseres stapels mit dem items array
        // enthaelt die referenzen auf jeden einzelnen movieclip
        // im slider
        a  = new LinkedList (settings.items);
        
        // die referenz auf den zu slidenden movieclip
        t  = settings.target;    
        
        // slide geschwindigkeit
        v  = settings.speed;
        
        // minimale linke positionierung
        mL = settings.left;
        
        // minimale rechte psitionierun
        mR = settings.right;
        
        // position des zu bewegenden items, wenn einer
        // der minimalen positionierungswerte erreicht wird
        nI = settings.position;
        
        // interval starten
        iV = setInterval(Delegate.create(this, slide), settings.fps);
    }

    /* private : void : slide
    
       wertet die positionsangaben der einzelen, im stapel referenzierten
       movieclips aus (nur element 0 und das letzte). sollte eines der beiden
       elemente einen der minimalen positionswerte (mL/mR) erreichen, wird das
       erste/letzte element im array an die erste/letzte stelle verschoben, und
       im slider vorne/hinten angefügt (loop)
       
       die berechnung der positionswerte geschieht anhand von localToGlobal (siehe
       FlashHilfe), somit kann der slider in "unendlicher" tiefe verschachtelt
       werden (die positionsangaben bleiben absolut (x:0 & y:0))
    
    */
    private function slide () : Void 
    {
        var l:Object = {x:0, y:0};
        var r:Object = {x:0, y:0};            
        a.first.localToGlobal(l);
        a.last.localToGlobal(r);
        l.x > mL ? (a.last._x = a.first._x - nI, a.lastToFirst()) : null;
        r.x < mR ? (a.first._x = a.last._x + nI, a.firstToLast()) : null;
        t._x += -Math.round(v * ((2 * _xmouse) - mR) / mR);
        updateAfterEvent();
    }
    
} 


LinkedList - Klasse (Funktionsprinzip)

	┌----------------------------------------┐
	| LinkedList				 |
	|					 |
	|	    ←  ←  ←  ←  ←  ←  ←  ←  ←  ← | ◄ lastToFirst()
	|	   .				 |
	|	├--↓-------------┤ →  →  →  →  → | ► last() 
	|  e2 →	|  Ø  element ○  | ←		 |
	|	├--↓----------↑--┤    \		 |  
	|  e1 → |  ↓  element ↑  | ←   . ←  ←  ← | ◄ LinkedList()
	|	├--↓----------↑--┤    /		 |
	|  e0 → |  ○  element Ø  | ← 		 |
	|  -----┴-------------↑--┴--- →  →  →  → | ► first()
	|		      .			 |
	|			←  ←  ←  ←  ←  ← | ◄ firstToLast()
	| © shorty				 |
	| ♂ http://www.shorty-bmc.com		 |
	└----------------------------------------┘

LinkedList - Klasse (Script)

PHP-Code:

class com.shortybmc.utils.datastructure.LinkedList  {
    
    /* propertys
    */
    private var _list:Array;
    private var _pointer:Number;
    
    /* constructor : LinkedList
    */
    function LinkedList (a:Array) {
        a.length > 2 ? (_list = a, _pointer = a.length) : Error();
    }
    
    /* public : getter : object : first
    
       gibt das unterste(e0) element zurueck
    
    */
    public function get first () : Object {
        return _list[0];
    }
    
    /* public : getter : object : last
    
       gibt das oberste(eN) element zurueck
    
    */
    public function get last () : Object {
        return _list[_pointer - 1];
    }

    /* public : manipulator : void : firstToLast
    
       entfernt das unterste element(e0),
       und fuegt es als oberstes element(eN) ein
    
    */
    public function firstToLast () : Void {
        _list.push(_list.shift());
    }
    
    /* public : manipulator : void : lastToFirst
    
       entfernt das oberste element(eN),
       und fuegt es als unterstes element(e0) ein
    
    */
    public function lastToFirst () : Void {
        _list.unshift(_list.pop());
    }
    
    private function Error () : Void {
        trace('Error in Class: LinkedList (list is to short to loop)');
    }
    
} 


Wer auf noch mehr Performance aus ist, sollte die Klassen vollständig auflösen, und alles direkt in die Timeline schreiben (macht nochmal n paar prozent weniger belastung...)

Sport frei!
lg³,
shorty

[elysian]

Zitat von shorty

Ok, der Name "LoopStack" ist etwas unglücklich gewählt, i know, was besseres fiel mir gerade nicht ein...

da hast du eine "LinkedList" gebaut...

[shorty]

wohl an, dem der informatik "kann"

Hmmm, und wie soll ich die klasse nun nennen?
Vote for:
1. LinkedListLoop
2. LoopedLinkedList
3. ListLoop
4. LoopedList
5. oder einfach nur LinkedList (obwohl dann ja kein bezug zu den Methoden zu erkennen ist. stichwort interface vieleicht?)

... weil soll ja dann auch richtig sein

[ripcurl]

Very Nice, shorty, thx a lot.

Sehr nettes AS, da kann ich ne Menge lernen...

VG, Ripcurl

[shorty]

°gg - danke & no problem, zum lernen sind wir ja hier!
mal gucken was elysian zur namensgebung sagt

gruß,
shorty
... steht auf informatik!

[elysian]

Zitat von shorty

wohl an, dem der informatik "kann"

also loopen tut die klasse ja nicht von selber, das erledigst du anders. der bezug der elemente wird durch eine LinkedList ausgedrückt und nicht durch einen loop. würd also vorschlagen, das einfach nur LinkedList zu nennen.

[shorty]

done & thx

[ripcurl]

Hallo Shorty,

eine kurze Frage zum Code-Schnipsel:

// # fps = angabe der FramesPerSecond
// ! genau wie die zum veroeffentlichen !
settings.fps = 24;

Okay, ich sehe das die FLA auf 24 fps eingestellt ist, und das du im AS ebenfalls mit 24 Frames/Second rechnest. Warum aber diese doppelte Zuweisung, hätte es nicht einmal (in der FLA || in dem AS) gereicht? Ich verstehe es nicht ganz, kannst du mich kurz aufschlauen...

Und warum hast du nicht mit 31 FPS gearbeitet (provokante Frage, an der sich wohl die Geschmäcker unterscheiden, auf die ich aber auch noch keine richtige Antwort habe). Im Forum wurde das ja schon öfters diskutiert aber eine definitive Aussage habe ich nicht (Ani-Speed/Größe oder so was)...

Vielen Dank und viele Grüße,

Seb!

[shorty]

Hi Seb, sorry für die späte antwort (arbeit)

den fps wert auf den "gleichen", wert wie die vö einstellungen zu setzen hatt sich subjektiv als die am besten geeignete heraus gestellt, ob dem wirklich so ist... hmmm k.a.?

Zur generellen vö. fps von 24 kann ich dir echt nix sagen, hatt sich so eingebürgert - und wird per klick auf meine jsfl datei immer als standardwert gesetzt, da fummel ich nie rum.

gruß,
shorty

{btw} der is aber auch schick

[ripcurl]

Keine Ursache für die späte Antwort (ich seit heut arbeitslos...).

Wenn ich es richtig verstehe, nimmt als Flash den Wert aus beiden, aus der FLA und aus dem AS Code. Hm, ich hätte geschätzt es gibt da einen override, bspw. AS überschreibt FLA. Nun denn, ich werde das mal testen, aber dann wohl mit 31fps...

Viele Grüße,

Seb!

[bobmobile]

ohhhh ich hätte das ding soooo gerne runtergezogen, aber der link geht nicht mehr.... :-(


hat es evtl. jemand und könnte es posten / mirrorn ???

danke !!

[bobo_k1]

auch haben wollen

[bobo_k1]

@shorty-

kannst du eventuell da ding noch mal uploaden, da der Link nicht mehr funzt.

Danke Boris

[shorty]

ja - klar boris, da nimm. Sorry, vorletzten post hab ich total übersehen

gruß,
shorty

[get-the-flash]

will mir das hier gerade in meinem praktikum anschauen (natürlich kein flash hier) und wenn ich die html seite öffne, kommt nix....

hab die swf einfach in den browser gezogen...passt. danke..

super teil!