Domanda

Sto cercando di creare una griglia in cui gli utenti possono 'disegnare' attraverso di esso e cambiare i colori dei quadrati della griglia per un colore scelto.

In questo codice, sto creando la griglia con quadrati. Ho la funzionalità di 'lavoro', ma sta funzionando solo sull'ultimo piazza istanziato.

Come faccio a farlo funzionare su tutte le piazze, non solo l'ultimo?

Grazie per tutto l'aiuto che potete dare.

JD -

package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;


public class ClassBoxColor extends MovieClip {
    public var boxColor = "0xFFFFFF";
    public var lineColor = "0x666666";

    public function ClassBoxColor() {

        // ****Create the Grid****
        var xpos:Number;
        var xposStart:Number = 20;  // Initial Placement of grid along x axis
        var ypos:Number = 100;      // Initial Placement of grid along y axis
        var xNum:Number = 10;       // Size of Grid across in squares
        var yNum:Number = 10;       // Size of Grid across in squares

        for (var yaxis:Number = 1; yaxis <= yNum; yaxis++) {
            xpos = xposStart;
            for (var xaxis:Number = 1; xaxis <= xNum; xaxis++) {
                // Draw the square
                var colorBox:Sprite = new Sprite();
                colorBox.graphics.beginFill(boxColor, 1 );
                colorBox.graphics.lineStyle(1, lineColor);
                colorBox.graphics.drawRect(0,0,20,20);
                colorBox.x = xpos;
                colorBox.y = ypos;
                colorBox.buttonMode = true;
                addChild(colorBox);
                xpos += 20;
            }
            ypos += 20;
        }

        // LISTENERS

        Grey_btn.addEventListener(MouseEvent.CLICK, setGrey);           // This button instance is onstage
        DarkGrey_btn.addEventListener(MouseEvent.CLICK, setDarkGrey);   // This button instance is onstage

        stage.addEventListener(MouseEvent.MOUSE_DOWN, drawColor);
        stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawColor);
        colorBox.addEventListener(MouseEvent.CLICK, changeColor);

        // FUNCTIONS & ACTIONS

        Grey_btn.buttonMode = true;
        DarkGrey_btn.buttonMode = true;

        CurrentBoxColor_txt.text = boxColor;// Display the currently selected color in the CurrentBoxColor_txt instance textfield that is onstage

        function setGrey(event:MouseEvent):void {
            boxColor = "0xCCCCCC";
            CurrentBoxColor_txt.text = boxColor;
        }
        function setDarkGrey(event:MouseEvent):void {
            boxColor = "0x666666";
            CurrentBoxColor_txt.text = boxColor;
        }
        function changeColor(event:MouseEvent):void {
            colorBox.graphics.clear();
            colorBox.graphics.lineStyle(1, lineColor);
            colorBox.graphics.beginFill(boxColor, 1);
            colorBox.graphics.drawRect(0,0,20,20);
            colorBox.graphics.endFill();
        }
        function drawColor(event:MouseEvent):void {
            //colorBox.addEventListener(MouseEvent.MOUSE_DOWN, changeColor);
            colorBox.addEventListener(MouseEvent.ROLL_OVER, changeColor);
        }
        function stopDrawColor(event:MouseEvent):void {
            //colorBox.removeEventListener(MouseEvent.MOUSE_DOWN, changeColor);
            colorBox.removeEventListener(MouseEvent.ROLL_OVER, changeColor);
        }
    }
}

}

È stato utile?

Soluzione

Hai davvero bisogno di una rielaborazione su questo tutta la classe. Avete tutto il codice e metodi definiti direttamente nel costruttore, alcuni nomi di istanza non definita, ecc Sono interessato a come avete ottenuto questo per compilare. Come sidenote, non mettere classe in nome della classe AS.

Quello che dovete avere è una classe che gestisce ColorBox cose molto semplici come rollover, ecc per gestire il colore di per sé. Lasciare la creazione / posizionamento della scatola esterna della classe singola ColorBox.

Qui è una rielaborazione della stessa classe lavorando bene in Flash Player 10. ho separato le cose in due classi. Alcuni dei nomi / stile si è iniziato con sono ancora in gioco. Non ho riscrivere ogni singola riga.

ColorBox è una scatola. Questo è tutto. E non fa altro che gestire il colore.

ColorBoxRoot è la classe principale del documento. Impostare il FLA per questa classe e let'er rip. Aprire un nuovo fla da testare. Ho messo a nudo il codice del pulsante, nonché il codice di campo di testo, ma ha aggiunto in una traccia in cui il campo di testo usato per essere.

Spero che questo aiuti!

// ColorBox.as

  

package {       import flash.display.MovieClip;       import flash.display.Sprite;       flash.events importazione *;.

[Event(name="colorChange")]
public class ColorBox extends MovieClip{
//  CONSTANTS
    public static const COLOR_CHANGE:String = "colorChange";
    public static const DEFAULT_WIDTH:uint = 20;
    public static const DEFAULT_HEIGHT:uint = 20;

//  PROPERTIES
    private var _boxColor:uint = 0xFFFFFF;
    public function get boxColor():uint{ return _boxColor; }

    private var _lineColor:uint = 0x666666;

//  CONSTRUCTOR
    public function ColorBox(){
        addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    }

//  EVENT LISTENERS
    private function onAddedToStage(event:Event):void{
        stage.addEventListener(MouseEvent.MOUSE_DOWN, setGrey);
        stage.addEventListener(MouseEvent.MOUSE_UP, resetColors);

        updateDisplay();

        addEventListener(MouseEvent.ROLL_OVER, setGrey);
        addEventListener(MouseEvent.ROLL_OUT, setDarkGrey);
    }

//  PRIVATE METHODS
    private function resetColors(event:Event=null):void{
        _boxColor = 0xFFFFFF;
        updateDisplay();
    }

    private function setGrey(event:MouseEvent):void {
        _boxColor = 0xCCCCCC;
        updateDisplay();
        dispatchEvent(new Event(COLOR_CHANGE));
    }
    private function setDarkGrey(event:MouseEvent):void {
        _boxColor = 0x666666;
        updateDisplay();
        dispatchEvent(new Event(COLOR_CHANGE));
    }

    private function updateDisplay():void {
        graphics.clear();
        graphics.lineStyle(1, _lineColor);
        graphics.beginFill(_boxColor, 1);
        graphics.drawRect(0,0,20,20);
        graphics.endFill();
    }
}

}

// ColorBoxRoot.as

  

package {       import flash.events.Event;       import flash.display.MovieClip;

/**
 * Document root class; Create a new FLA (empty) and set this class as the document root
 */
public class ColorBoxRoot extends MovieClip{
//  STAGE OBJECTS
    //public var Grey_btn:DisplayObject;
    //public var DarkGrey_btn:DisplayObject;

//  CONSTRUCTOR
    public function ColorBoxRoot(){
        addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    }

//  EVENT LISTENERS
    /**
     * Called once the swf stage is ready
     */
    private function onAddedToStage(event:Event):void{
        initializeUI();
        createGrid();
    }

//  PRIVATE METHODS
    /**
     * Always try to initialize your UI in a method so you can recall it later to "reset" things, if needed
     */
    private function initializeUI():void{
        //Grey_btn.buttonMode = true;
        //DarkGrey_btn.buttonMode = true;
    }

    /**
     * Creates the ColorBox grid
     */
    private function createGrid():void{
        var xpos:Number;
        var xposStart:Number = 20;      // Initial Placement of grid along x axis
        var ypos:Number = 100;          // Initial Placement of grid along y axis
        var xNum:Number = 10;           // Size of Grid across in squares
        var yNum:Number = 10;           // Size of Grid across in squares
        var colorBox:ColorBox;

        for (var yaxis:Number = 1; yaxis <= yNum; yaxis++) {
                xpos = xposStart;
                for (var xaxis:Number = 1; xaxis <= xNum; xaxis++){
                        // Draw the square
                        colorBox = new ColorBox();
                        colorBox.addEventListener(ColorBox.COLOR_CHANGE, onBoxColorChange);
                        colorBox.name = "box" + xaxis + "_" + yaxis; //jcbii: give it an identifiable name; just for fun
                        colorBox.x = xpos;
                        colorBox.y = ypos;
                        addChild(colorBox);
                        xpos += ColorBox.DEFAULT_HEIGHT; //jcbii: never hardcode these values; use dynamic values as much as possible
                }
                ypos += ColorBox.DEFAULT_WIDTH; //jcbii: never hardcode these values; use dynamic values as much as possible
        }
    }

    private function onBoxColorChange(event:Event):void{
        trace(event.target.name, ColorBox(event.target).boxColor);
    }
}

}

Altri suggerimenti

Non posso dire che io abbia mai usato come ma .. non si deve aggiungere l'ascoltatore all'interno del per? Stai sovrascrivendo colorBox con ogni iterazione così, alla fine solo l'ultimo si farà riferimento da esso (questo è dove vorrei inveire che si compila anche, dal momento che sembra colorbox accessibile fuori portata; programmatore C in me piange).

Im abbastanza nuovo con AS3, ma sembra che tu problema è quando si inizializza i tuoi piazze. E chiamando ChangeColor () su colorbox. Hai una sola colorbox cui si gioca in giro con, non 10 come si desidera avere (?). Qui di seguito non è la soluzione migliore per questo, ma il suo più vicino ad una soluzione per la vostra base di codice corrente.

Crea un array chiamato colorboxArray e aggiungi le colorboxes ad esso.

var colorBoxArray:Array = new Array();
 for (var yaxis:Number = 1; yaxis <= yNum; yaxis++) {
         xpos = xposStart;
         for (var xaxis:Number = 1; xaxis <= xNum; xaxis++) {
         // Draw the square
          var colorBox:Sprite = new Sprite();
          colorBoxArray[yaxis] = colorBox;
          ..
          colorBoxArray[yaxis].addEventListener(MouseEvent.CLICK, changeColor);
          ..
 }

E non chiamate ChangeColor sul colorBoxArray [IdOfTheBoxYouWantToChangeColorOn]

Un modo migliore per farlo sarebbe quello di spostare tutte le funzioni di cui sopra per una classe denominata "Box", e creare istanze della classe Box nel vostro ciclo di creazione sopra, aggiungere ascoltatori di tutte le scatole e il set. Mi piace array anche se, (

non testato, ma dovrebbe essere di lavoro ... utilizzare MouseEvent :: buttonDown, a guardare, se il pulsante è giù ...

package {
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.text.TextField;


    public class ClassBoxColor extends MovieClip {
        public var boxColor = "0xFFFFFF";
        public var lineColor = "0x666666";

        public function ClassBoxColor() {

            // ****Create the Grid****
            var xpos:Number;
            var xposStart:Number = 20;      // Initial Placement of grid along x axis
            var ypos:Number = 100;          // Initial Placement of grid along y axis
            var xNum:Number = 10;           // Size of Grid across in squares
            var yNum:Number = 10;           // Size of Grid across in squares

            for (var yaxis:Number = 1; yaxis <= yNum; yaxis++) {
                xpos = xposStart;
                for (var xaxis:Number = 1; xaxis <= xNum; xaxis++) {
                    // Draw the square
                    var colorBox:Sprite = new Sprite();
                    colorBox.graphics.beginFill(boxColor, 1 );
                    colorBox.graphics.lineStyle(1, lineColor);
                    colorBox.graphics.drawRect(0,0,20,20);
                    colorBox.x = xpos;
                    colorBox.y = ypos;
                    colorBox.buttonMode = true;
                    addChild(colorBox);
                    colorBox.addEventListener(MouseEvent.CLICK, changeColor);
                    colorBox.addEventListener(MouseEvent.ROLL_OVER, changeColor);
                    xpos += 20;
                }
                ypos += 20;
            }

            // LISTENERS

            Grey_btn.addEventListener(MouseEvent.CLICK, setGrey);                   // This button instance is onstage
            DarkGrey_btn.addEventListener(MouseEvent.CLICK, setDarkGrey);   // This button instance is onstage

            // FUNCTIONS & ACTIONS

            Grey_btn.buttonMode = true;
            DarkGrey_btn.buttonMode = true;

            CurrentBoxColor_txt.text = boxColor;// Display the currently selected color in the CurrentBoxColor_txt instance textfield that is onstage

            function setGrey(event:MouseEvent):void {
                boxColor = "0xCCCCCC";
                CurrentBoxColor_txt.text = boxColor;
            }
            function setDarkGrey(event:MouseEvent):void {
                boxColor = "0x666666";
                CurrentBoxColor_txt.text = boxColor;
            }
            function changeColor(event:MouseEvent):void {
                if ((event.type == MouseEvent.CLICK) || (event.buttonDown)) {
                    colorBox.graphics.clear();
                    colorBox.graphics.lineStyle(1, lineColor);
                    colorBox.graphics.beginFill(boxColor, 1);
                    colorBox.graphics.drawRect(0,0,20,20);
                    colorBox.graphics.endFill();
                }
            }
        }
    }
}

In generale, penso ci si avvicina non è molto pulito ... la classe non ha dipendenze su alcune Grey_btn e DarkGrey_btn e altre cose esterne ... questo è un cattivo stile ... davvero ... anche ci sono alcune cose che non capisco perfettamente, ma ok ... questo è forse colpa mia ...:)

Buona fortuna comunque ...;)

greetz

back2dos

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top