Boxen sortieren

[Meijestic]

Hallo im Anhang habe ich eine Datei die man sortieren kann, also die boxen hin und her schieben kann. Soweit so gut. Ich hab drei Fragen:

1. Warum sind die Boxen nicht alle gleich groß (breit) ?

2. Wie kann ich zwischen den Boxen einen kleinen Abstand hinbekommen?

3. Ich würde gerne jeder Box eine andere Farbe zuweisen. Geht das?

Ich habe langen nach dem Script gesucht da ich mich nicht wirklich mit AS auskenne und verzweifle gerade daran. Am wichtigsten wäre mir, dass jede Box eine andere Farbe hinbekommt.

Hier das Script:

PHP-Code:

var boxNum:int = 4;

var boxes:Array = new Array();

var container:MovieClip = new MovieClip();
container.x = 50;
container.y = 10;
addChild(container);

for (var i:int = 0; i < boxNum; i++){
    var b:MovieClip = new Box();
    b.x = 50 + b.width * i;
    b.originalIndex.text = i;
    setupDraggableBox(b);
    container.addChild(b);
}

function setupDraggableBox(mc:MovieClip):void {
    // local variable for use with zeno's paradox
    mc.xDest = mc.x;
    // randomize the width to illustrate flexibility
    mc.bg.width = int(Math.random() * 30) + 30;
    mc.buttonMode = true;
    mc.mouseChildren = false;
    mc.addEventListener(MouseEvent.MOUSE_DOWN, onDown, false, 0, true);
    boxes.push(mc);
}

function onDown(evt:MouseEvent):void {
    removeEventListener(Event.ENTER_FRAME, onLoop); 
    container.addChild(evt.currentTarget);
    evt.currentTarget.startDrag();
}

stage.addEventListener(MouseEvent.MOUSE_UP, onStageUp, false, 0, true);

function onStageUp(evt:MouseEvent):void {
     stopDrag();
     addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
}

addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);

function onLoop(evt:Event):void {
    // sort the boxes array by the x property
    // of each clip
    boxes.sortOn("x", Array.NUMERIC);
 
    // make sure the first box always eases to 
    // the same position (50, 200);
    boxes[0].x += (0 - boxes[0].x) / 2;
    boxes[0].y += (0 - boxes[0].y) / 2
    boxes[0].currentIndex.text = 0;
    
    // align boxes
    for (var i:int = 1; i < boxNum; i++){
      var b:MovieClip = boxes[i];
      var prev:MovieClip = boxes[i - 1];
      b.currentIndex.text = i;
      b.xDest = prev.x + prev.width;
      b.x += (b.xDest - b.x) / 2;
      b.y += (0 - b.y) / 2;
    }
} 


Und hier die Datei
Datei downloaden


Dankeschön

[thomas_E]

Zitat von Meijestic

1. Warum sind die Boxen nicht alle gleich groß (breit) ?

weil du ihnen eine zufällige Breite zuweist:

mc.bg.width = int(Math.random() * 30) + 30;

Zitat von Meijestic

2. Wie kann ich zwischen den Boxen einen kleinen Abstand hinbekommen?

b.x = 50 + (b.width+abstand) * i;

Zitat von Meijestic

3. Ich würde gerne jeder Box eine andere Farbe zuweisen. Geht das?

Farbe von Rechteck mit Klick ändern
verschiedene farben bei 2 inztanzen eines movieclips

[Meijestic]

Dankeschön. Das mit der Breite habe ich jetzt hinbekommen.

Das mit dem einfärben auch. Das Problem ist das jetzt nur der Ausgangs MC eingefärbt wird.

Habe diesen Code hier (aus deinem Beispiel mit den Schneemännern) genommen und an meinen angepasst.

PHP-Code:

//V1
function setColor(target:MovieClip, color:uint):void
{
    var ct:ColorTransform = new ColorTransform(0,0,0,1);
        ct.color = color;
    target.hg.transform.colorTransform = ct;
}

function setModel(target:MovieClip, model:int=-1):void
{
    if(model == -1){
        model = Math.ceil(Math.random() * target.totalFrames);
    }
    target.gotoAndStop(model);
}




setColor(bg, 0xFF00FF); 


mein MC aus dem also die würfel generiert werden hat bei mir den instanznamen "bg". In diesen MC habe ich dann diesen Code eingefügt

PHP-Code:

//du kannst entweder hier die Programmierung unterbringen
//oder wie ich es auch gemacht habe, in Ball V2 und Hut V2



//hier kümmert sich der Code direkt darum zu machen, was nötig ist
function get farbeHut():uint
{
    return bg.hg.transform.colorTransform.color;
}
function set farbeHut(val:uint):void
{
    var ct:ColorTransform = bg.hg.transform.colorTransform;
        ct.color = val;
    bg.hg.transform.colorTransform = ct;
} 


Wie gesagt, es funktioniert, jedoch nicht die generierten Würfel färben sich nur der erste.

Siehe hier
Datei downloaden

Was hab ich falsch gemacht.

PS: Das mit den Abständen hat nicht funktioniert.

Ich bedanke mich

[thomas_E]

hab deinen Code und die Objekte etwas umgebaut.
schau mal, ob du den Code gut nachvollziehen kannst.

[Meijestic]

Zitat von thomas_E

hab deinen Code und die Objekte etwas umgebaut.
schau mal, ob du den Code gut nachvollziehen kannst.

Dankeschön. Jetzt werden den Boxen aber Zufallsfarben zugeteilt. Ich brauche aber 4 Boxen und den vier Boxen möchte ich eine bestimmte Farbe zuweisen, so wie du bei dem Schneemann. Das funktioniert wohl nicht oder ?

Eigentlich möchte ich ja nur 4 Boxen haben denen ich eine Farbe zuweisen kann und die ich zu unter einander verschieben kann wie es jetzt in deiner datei ist. Mit dem einrasten und dem Abstand alles super.

Dann brauch ich das ganze generieren bestimmt gar nicht oder?

Kann ich in die Funktion wo die Box erstellt wird auch noch ein Ereignis einbauen? Also bei klick auf button 1 mach das, bei klick auf button 2 mach das bei box 3 das und bei box 4 das?

Ich bedanke mich

[thomas_E]

Jetzt werden den Boxen aber Zufallsfarben zugeteilt.

stimmt, aber die Stelle findest du sicher ganz leicht.

Ich brauche aber 4 Boxen und den vier Boxen möchte ich eine bestimmte Farbe zuweisen, so wie du bei dem Schneemann.

wenn die eh alle dieselbe Farbe haben sollen, und diese auch nicht geändert wird, wieso machst du das dann nicht direkt in der Grafischen Oberfläche?

Dann brauch ich das ganze generieren bestimmt gar nicht oder?

lies dir nochmal durch, was beim "generieren" alles gemacht wird, und überleg dann nochmal, was man davon rausschmeissen kann.

Kann ich in die Funktion wo die Box erstellt wird auch noch ein Ereignis einbauen? Also bei klick auf button 1 mach das, bei klick auf button 2 mach das bei box 3 das und bei box 4 das?

ja kann man, nur die Boxen haben doch schon ein solches Event; Sie machen schon was, wenn du die Maus drückst, oder wieder loslässt.

Überleg dir mal, wie dein Programm sich verhalten soll (Look and Feel).


Auch wenn du noch Anfänger bist, etwas Eigenleistung erwarte ich schon von dir. Ich hab wenig lust dir dein Programm zu schreiben.

[Meijestic]

ja ich bin ja schon die ganze Zeit dabei. Ich verusche es nochmal

Ich meinte auch nicht das alle die Selbe Farbe haben sondern jeder Würfel eine andere, die ich aber jeweils selbst festlegen kann.

Also dann noch mals vielen Dank und ich berichte was ich geschafft habe.

Dankeschön

[Meijestic]

Ich bekomms nicht hin. Ich weiß nicht wo ich das eintragen soll. Hier wird das ganze ja konfiguriert

PHP-Code:

//Boxen erstellen, plazieren und konfigurieren
    var destX:Number = 0;
    for(var i:int = 0; i<NUM_BOXES; ++i){
        var b:Box = new Box();
            setColor(b.bg, Math.random() * 0xFFFFFF);
            b.bg.width = 50;
            
            b.x = destX;
            b.y = 0;
            
            b.buttonMode = true;
            b.mouseChildren = false;
            b.addEventListener(MouseEvent.MOUSE_DOWN, onDown, false, 0, true);
            b.originalIndex.text = i.toString(); 


Ich versteh einfach nicht ab wann die zweite Box erstellt ist. Ich denke so:
Ich müsste eine Variable habe die hochgezählt wird für die Farbe. Oben gebe ich den Wert mit "0" an. Wenn 1 erreicht ist setze Farbe auf xy, wenn zwei erreicht ist auf xy2 usw.

Kann man das so angehen?

[thomas_E]

Ich müsste eine Variable habe die hochgezählt wird für die Farbe. Oben gebe ich den Wert mit "0" an. Wenn 1 erreicht ist setze Farbe auf xy, wenn zwei erreicht ist auf xy2 usw.

der Iterator i wird doch schon hochgezählt. und ein switch ist hier etwas umständlich.

PHP-Code:

//config
const COLORS:Array = [0xFF0000, 0x00FF00, 0x0000FF, 0xFF00FF];

//in init()
var destX:Number = 0;
    for(var i:int = 0; i<NUM_BOXES; ++i){
        var b:Box = new Box();
            setColor(b.bg, COLORS[i]);   //<---
            b.bg.width = 50;
            
            b.x = destX;
            b.y = 0; 
            //... 


[Meijestic]

Ja das mit dem Array hab ich noch nicht ganz verstanden. Jetzt schon ;-)

Dankeschön

[Meijestic]

Ich hab ein Problem: Das Ganze läuft in AS3 ich möchte es aber gerne in AS2 haben.

Wenn ich AS2 einstelle meckert er bei folgenden Sachen:

PHP-Code:

function get color():uint
{
    return bg.transform.colorTransform.color;
}

function set color(val:uint):void
{
    var ct:ColorTransform = bg.transform.colorTransform;
        ct.color = val;
    bg.transform.colorTransform = ct;
} 


folgende Fehler spuckt er aus

• Symbol=Box, layer=Layer 4, frame=1, Zeile 1 Attribut außerhalb der Klasse verwendet.
• Symbol=Box, layer=Layer 4, frame=1, Zeile 2 Die Klasse oder die Benutzeroberfläche 'uint' konnte nicht geladen werden.
• Symbol=Box, layer=Layer 4, frame=1, Zeile 6 Attribut außerhalb der Klasse verwendet.
• Symbol=Box, layer=Layer 4, frame=1, Zeile 8 Die Klasse oder die Benutzeroberfläche 'ColorTransform' konnte nicht geladen werden.

Könnte mir das jemand auf AS2 umschreiben?

[thomas_E]

getter und setter wurden in AS2 anders registriert. da du diese in deinem aktuellen Code aber garnicht verwendest, kannst du sie ersatzlos streichen.

Zitat von Meijestic

Symbol=Box, layer=Layer 4, frame=1, Zeile 2 Die Klasse oder die Benutzeroberfläche 'uint' konnte nicht geladen werden.

AS2 kennt kein int oder uint, nur Number

Zitat von Meijestic

Symbol=Box, layer=Layer 4, frame=1, Zeile 8 Die Klasse oder die Benutzeroberfläche 'ColorTransform' konnte nicht geladen werden.

nach kurzem suchen im Netz, bin ich zu folgendem Code zum einfärben in AS2 gekommen:

PHP-Code:

new Color(rect).setRGB(0xFF0000); 


Zitat von Meijestic

Könnte mir das jemand auf AS2 umschreiben?

NEIN
und an dieser Stelle verabschiede ich mich.

Zitat von thomas_E

Auch wenn du noch Anfänger bist, etwas Eigenleistung erwarte ich schon von dir. Ich hab wenig lust dir dein Programm zu schreiben.

(die zweite)

[Meijestic]

Vielleicht hat ja noch jemand anderst einen Tipp

PHP-Code:

//CONFIG
const BOX_SPACING:Number = 10;
const NUM_BOXES:Number = 4;
//config
const COLORS:Array = [0xF07F24, 0x8C99A3, 0xA8C20F, 0x173764]; 


var container:MovieClip;
var boxes:Array = [];

init();


function init():void
{
    trace('init');
    //container erstellen
    container = new MovieClip();
    container.x = 50;
    container.y = 10;
    addChild(container);
    
    //Boxen erstellen, plazieren und konfigurieren
var destX:Number = 0;
    for(var i:int = 0; i<NUM_BOXES; ++i){
        var b:Box = new Box();
            setColor(b.bg, COLORS[i]);   //<---
            b.bg.width = 50;
            
            b.x = destX;
            b.y = 0;  
            
            b.buttonMode = true;
            b.mouseChildren = false;
            b.addEventListener(MouseEvent.MOUSE_DOWN, onDown, false, 0, true);
            b.originalIndex.text = i.toString();
                
            
        container.addChild(b);
        boxes[i] = b;
        
        destX += b.width + BOX_SPACING;
    }
    
    stage.addEventListener(MouseEvent.MOUSE_UP, onStageUp);
}

function setColor(target:DisplayObject, color:uint):void
{
    var ct:ColorTransform = target.transform.colorTransform;
        ct.color = color;
    target.transform.colorTransform = ct;
}

function onDown(evt:MouseEvent):void
{
    removeEventListener(Event.ENTER_FRAME, onLoop);
    var t:Box = Box(evt.currentTarget);
    t.parent.addChild(t);
    t.startDrag();

}


function onStageUp(evt:MouseEvent):void
{
     stopDrag();
     addEventListener(Event.ENTER_FRAME, onLoop);
}

function onLoop(evt:Event):void
{
    boxes.sortOn("x", Array.NUMERIC);
    
    var isMoving:Boolean;
    
    var destX:Number = 0;
    for (var i:int = 0; i < NUM_BOXES; i++){
        var b:MovieClip = boxes[i];
            b.currentIndex.text = i;
        
        var bx:Number = b.x;
        var by:Number = b.y;
        
        b.x += (destX - b.x) * .5;
        b.y += (0 - b.y) * .5;
        
        if(b.x == bx && b.y == by){
            b.x = destX;
            b.y = 0;
        }else{
            isMoving = true;
        }
        
        destX += b.width + BOX_SPACING;
    }
    
    if(!isMoving){
        //alle Boxen sind an Ihrem Platz
        //onLoop kann beendet werden
        
        removeEventListener(Event.ENTER_FRAME, onLoop);
    }
} 


Ich brauch das für eine Präsentation. Leider ist der Code in AS3 geschrieben ich brauch es aber in AS2 da ich den Rest auch in AS 2 habe und er sonst immer Fehlermeldungen ausgibt.

Zwei Fehlermeldungen spuckt er bis jetzt aus. Denke aber das dann bestimmt noch weitere kommen.

• Szene=Scene 1, layer=action, frame=1, Zeile 2 Syntaxfehler.
• Symbol=Box, layer=Layer 2, frame=1, Zeile 1 Die Klasse oder die Benutzeroberfläche 'Box' konnte nicht geladen werden.

Durch was kann ich denn in AS2 "const" ersetzen? Bzw. gibt es eine List wo man sieht Vorher so jetzt so?? Das wäre mir eine Hilfe. Vielleicht.
Ich weiß nur das ich wohl "init" durch "number" ersetzen muss oder?

Würde auch ein kleinen Obolus bezahlen, da ich es ja anscheinend nicht hinbekomme.