[Flash CS4] Projekt: Reservationssystem

[McDonnough]

2 Flash-Anfänger (aber totale) und ein Projekt.

Also, wie der Titel ja schon verrät, geht es um ein Reservationssystem, welches auf der Basis von Flash, PHP und SQL aufgebaut sein soll.

Erste Schritte haben wir schon getätigt und bereits einen Saalplan erstellt, der hier erreichbar ist. Bisher sind aber nur die Plätze in der oberen Zeile mit den verschiedenen Zuständen ausgestattet.

Jetzt stossen wir schon mal zu den ersten Problemen
1. Ein (ziemlich) heilloses Drucheinander von Objekten.
2. Keine Ahnung, wie man Ordnung da reinbringt.

Ich habe im Anhang die Flash-Datei hinzugefügt. Wenn uns jemand Tipps zur Ordnung geben kann, immer her damit.

Das nächste Problem ist, das die Buttons eine Grafik haben sollen, wenn man draufklickt und wieder los lässt, also einmaliges Klicken. Habe verschiedene Sachen probiert, aber nichts zustande gebracht.

Die weiteren Fragen folgen, sobald diese hier geklärt sind.

In diesem Sinne und mit Hoffnung auf Hilfe

McDonnough

PS: Wusste nicht wohin damit. Habe den Thread jetzt einfach mal hier eröffnet.
PS2: Es werden noch einige Fragen folgen, darum habe ich auch einen eigenen Thread dafür aufgemacht. Sollten einzelne Fragen schon geklärt worden sein, habe ich diese entweder nicht kapiert oder nicht gefunden.

[shin10]

wow,

da werdet ihr nie fertig. das ist ja alles von hand reingesetzt und mit namen versehen

sitze rauslöschen! und ein paar wichtige positionen merken (die koordinaten der jeweils ersten in einer reihe)
//vorher natürlich ne sicherungskopie

1.1 sucht euren button für den sitzplatz in der bibliothek
1.2 rechte maustaste/eigenschaften...
1.3 häkchen setzten bei "export für actionscript"
1.4 Klasse: Sitz

2. code, z. b.:

PHP-Code:

stop();
const SITZE_PRO_REIHE = 12;
const SITZ_ABSTAND = 15;
for(var i:int=0; i < SITZE_PRO_REIHE; i++){
    var sitz:Sitz = new Sitz();
    sitz.x = 45;
    sitz.y = 192 + i*SITZ_ABSTAND;
    sitz.name = "Sitz_A-"+i;
    sitz.addEventListener(MouseEvent.CLICK, sitzClickHandler);
    addChild(sitz);
}
function sitzClickHandler(e:MouseEvent):void{
    trace(e.currentTarget.name);
} 


aber da wär es jetzt sinnvoll, wenn man wüsste, wie die plätze tatsächlich nummeriert sind.
tischnummern? dann, sollte man auch ein tischobjekt (inkl. der zugehörigen stühle) in erwägung ziehen (Tisch A5, Platz 3)

bitte mehr infos, vllt. eine kleine skizze

--------------------------------------------------
das bild des simplebuttons kann man ändern.
mit SimpleButton.upState bekommt man zugriff auf das anzeigeobjekt
z.b.:

PHP-Code:

function sitzClickHandler(e:MouseEvent):void{
    var btn:SimpleButton = e.currentTarget as SimpleButton;
    trace(btn.name);
        //graues rechteck in neuen mc zeichnen
    var mc:MovieClip = new MovieClip();
    mc.graphics.beginFill(0x888888);
    mc.graphics.drawRect(0,0,12,12);
    mc.graphics.endFill();

    btn.upState = mc;//bild ersetzen
} 


um dann aber im nachhinein den status (reserviert/frei) abrufen zu können solltet ihr euch eine eigene klasse dafür erstellen...
das solltet ihr unbedingt noch nachschlagen!

mfg

sx

[McDonnough]

OK. Skizze wird folgen. Zur Nummerierung müssen wir uns noch Gedanken machen. Sehen uns aber heute ziemlich sicher.

PS: Ich habe ja gewarnt, dass wir Anfänger sind.

[McDonnough]

sry für Doppelpost

Hier die Skizze. Nicht gerade ein Meisterwerk, aber man sollte alls erkennen können.

Erklärung

Positionen/Verteilung:
Es gibt zwei Reihen à 7 Tische. An jedem Tisch stehen links und rechts jeweils 12 Stühle, insgesamt also 24.
Auf dem Balkon gibt es von vorne her, 3 Reihen à 25 Stühlen, dann eine Reihe à 23 und dann noch eine Reihe à 21 Stühlen.

Nummerierung:
Die Tischreihen sind wie auf der Skizze zu sehen, von der Türe her nach links "buchstabiert". Die Stühle an jedem Tisch haben die Nummern 1 bis 24. Links die geraden und rechts die ungeraden Zahlen (falls möglich).
Auf dem Balkon erfolgt die Nummerierung von vorne, also:

Reihe 1 -> 1-25
Reihe 2 -> 1-25
Reihe 3 -> 1-25
Reihe 4 -> 1-23
Reihe 5 -> 1-21

Falls du noch weiter Infos brauchst, einfach fragen.

Edit: Man erkennt es doch nicht so gut.

[shin10]

soderla,

fangen wir mal an.
also du hast da eine menge möglichkeiten objekte sinnvoll zusammenzusetzen.

1. stuhl
2. stuhlreihe vertikal
3. tisch (mit stuhlreihen)
4. parterre (7 tische)

5. stuhlreihen horizontal
6. balkon (aus horizontalen stuhlreihen)

jetzt müssen wir erstmal klären, wie man eine klasse erstellt.
z.B. den Stuhl:

PHP-Code:

package Raum{//Raum ist der unterordner in dem sich die .as-datei befinden muss (groß-/kleinschreibung beachten!)
    //im gegensatz zu framescripts müssen bei eigenen klassen ALLE benötigten klassen hinzugefügt werden!
    import flash.display.SimpleButton;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    public class Stuhl extends SimpleButton{
        public function Stuhl(stuhlName:String=""):void{
            //diese funktion wird beim erstellen des Objekts ausgeführt
            if(stuhlName!=""){
                name = stuhlName;
            }
            this.addEventListener(MouseEvent.CLICK, clickHandler);
        }
        private var _reserviert:Boolean = false;
        private function clickHandler(e:MouseEvent):void{
            reservierung(!_reserviert);//toggle der reservierung
        }
        public function get reserviert():Boolean{
            return _reserviert;
        }
        public function set reserviert(val:Boolean):void{
            reservierung(val);
        }
        private function reservierung(val:Boolean):void{
            _reserviert = val;
            //ersetzen des standardbilds durch ein farbiges rechteck.
            //du kannst natürlich auch ein anderes bild (png, jpg) einfügen; machen wir später
            var mc:Sprite = new Sprite();
            var color:uint;
            _reserviert ? color=0x888888 : color=0xff0000;//grau, wenn reserviert; rot, wenn nicht.
            mc.graphics.beginFill(color);
            mc.graphics.drawRect(0,0,16, 16);
            mc.graphics.endFill();
            this.upState = mc;
            _reserviert ? trace("Stuhl "+name+" wurde reserviert.") : trace("Die Reservierung für Stuhl "+name+" wurde storniert.");
        }
    }
} 


scheint jetzt vermutlich erstmal kompliziert, ist aber sehr praktisch.
besonders die getter/setter funktionen. _reserviert ist eine variable, die durch private nur der stuhlinstanz selbst zugänglich ist.
durch die getterfunktion kannst du aber reserviert ganz normal wie eine variable aufrufen.

PHP-Code:

trace(stuhl_19.reserviert);//false 


mit der setterfunktion - jetzt kommts! - hast du die möglichkeit eine funktion auszuführen (hier reservierung) um, wie hier gleich auf die änderung zu reagieren (anderes bild einfügen o. ä.). super praktisch.

PHP-Code:

stuhl_19.reserviert = true; 


dass das klappt, musst du noch folgendes machen:
1. such dir den stuhl in der bibliothek.
2. eigenschaften
3. export für actionscript
4. Klasse: Raum.Stuhl (wieder auf groß/kleinschreibung achten)

dann kannst du einfach mal ein paar von den stühlen auf die bühne schieben.
schaun wir mal obs soweit klappt, dann machen wir mit den tischen weiter.

mfg

sx

[shin10]

yo McDonnough,

alles klar bei euch beiden? ich weiß, dass ist erstmal ein ganz schöner brocken. sollte euch aber nicht abschrecken.

mfg

sx

[McDonnough]

Hatten nicht so viel Zeit die letzten Tage.

Werden aber so schnell wie möglich weitr arbeiten.

[McDonnough]

sry für Doppelpost, aber wir können die Arbeit erst wieder Mitte Juni aufnehmen (voraussichtlich). Also nicht wundern, wenn (wie schon lange) nichts kommt.

[shin10]

Keine sache - eile mit weile ^^
schöne ferien-/feiertage noch, sofern ihr welche habt.

mfg

sx

[McDonnough]

Sind irgendwie ein bisschen Begriffsstutzig.

Könntest du mal den ersten (oder die ersten paar) Stuhl, auf die Bühne setzen, damit wir uns das mal anschauen können.

Wäre nett wenn.

Im Anhang die momentane Flash-Datei.

[shin10]

aha!

da sind sie wieder
ich schau morgen mal was ich da noch hab. hatte da nämlich schon ein wenig vorgearbeitet und muss das erst selbst nochmal sichten. ich komm morgen allerdings wohl erst gegen abend heim. ich hoffe das eilt nicht so...

vielleicht könnt ihr mir aber nochmal sagen, wie es mit euren vorkenntnissen aussieht, dass ich besser abwägen kann, was ich erklären muss und was nicht. mit anderen sprachen habt ihr ja schon gearbeitet, wenn ich nicht ganz daneben liege.
also was ein array ist, oder eine for-schleife müssen wir nicht klären, oder?

bis denne

sx

[McDonnough]

Also, zur Erklärung:
Ich bin in der Regel der, der sich mit den verschiedenen Sprachen auseinandersetzt. Habe schon mit PHP gearbeitet (-> if, else), mit SQL und wenig mit Java. Wenn ich ein Array oder eine for-Schleife sehe, sollte ich also erklären können was es beinhaltet, bedeutet, macht, etc.
Flash haben wir aber beide keinerlei Grundkentnisse, also immer langsam mit den jungen Pferden.
Das Projekt sollte irgendwann im September oder Oktober fertig sein. Muss mal fragen wann Redaktionsschluss unseres Vereinsorgans ist, denn da muss es auch noch rein.

[shin10]

ok,

also ich hätte es wie gesagt folgender maßen gemacht; insgesamt 5 klassen:
-stuhl
-tisch
-tischgruppe (obere und untere hälfte vom parkett)
ferner
-balkonreihe
-balkon

und das ganze wird mit der main.as erstellt...

main.as
erstellt zwei tischgruppen, den balkon und setzt sie auf die bühne
zum test wird mal der stuhl nr. 500 reserviert...

PHP-Code:

package {
    import flash.display.Sprite;
    import Raum.*;
    public class main extends Sprite{
        var p1:TischGruppe;
        var p2:TischGruppe;
        var b:Balkon;
        public function main():void{
            //stage.align = "T";
            //stage.scaleMode = "noScale";
            
            //Parkett
            p1 = new TischGruppe(["Tisch G", "Tisch F", "Tisch E", "Tisch D", "Tisch C", "Tisch B", "Tisch A"]);
            p1.name = "Parkett";
            p1.x = stage.stageWidth*.5 - p1.width*.5;
            p1.y = 50;
            addChild(p1);
            p2 = new TischGruppe(["Tisch N", "Tisch M", "Tisch L", "Tisch K", "Tisch J", "Tisch I", "Tisch H"]);
            p2.name = "Parkett";
            p2.x = stage.stageWidth*.5 - p2.width*.5;
            p2.y = 350;
            addChild(p2);
            
            //Balkon
            b = new Balkon(new Array(25, 25, 25, 23, 21));
            b.name = "Balkon";
            b.y = 680;
            b.x = stage.stageWidth*.5;
            addChild(b);
            
            Stuhl.stuhlListe[500].reserviert = true;
        }
    }
} 


Raum\Stuhl.as:
momentan die aufwendigst klasse. die schaun wir uns an, wenn es soweit bei euch läuft.

PHP-Code:

package Raum{//Raum ist der unterordner in dem sich die .as-datei befinden muss (groß-/kleinschreibung beachten!)
    //im gegensatz zu framescripts müssen bei eigenen klassen ALLE benötigten klassen hinzugefügt werden!
    import flash.display.SimpleButton;
    import flash.display.Sprite;
    import flash.display.DisplayObject;
    import flash.events.MouseEvent;
    import Raum.Tisch;
    import Raum.TischGruppe;
    
    public class Stuhl extends SimpleButton{
        private static var _stuhlListe:Array = new Array();
        private var id:uint;
        public function Stuhl(stuhlName:String=""):void{
            id = _stuhlListe.length;
            _stuhlListe.push(this);
            //diese funktion wird beim erstellen des Objekts ausgeführt
            if(stuhlName!=""){
                name = stuhlName;
            }
            //
            
            this.upState = stuhlZeichnen(0xff0000);
            this.downState = stuhlZeichnen(0x00ccff);
            this.overState = stuhlZeichnen(0x0088cc);
            this.hitTestState = stuhlZeichnen(0);
            
            this.addEventListener(MouseEvent.CLICK, clickHandler);
        }
        private var _reserviert:Boolean = false;
        private function clickHandler(e:MouseEvent):void{
            reservierung(!_reserviert);//toggle der reservierung
        }
        public function get reserviert():Boolean{
            return _reserviert;
        }
        public function set reserviert(val:Boolean):void{
            reservierung(val);
        }
        private function reservierung(val:Boolean):void{
            _reserviert = val;
            //ersetzen des standardbilds durch ein farbiges rechteck.
            //du kannst natürlich auch ein anderes bild (png, jpg) einfügen; machen wir später
            var color:uint;
            _reserviert ? color=0x888888 : color=0xff0000;//grau, wenn reserviert; rot, wenn nicht.
            this.upState = stuhlZeichnen(color);
            var pn:String = getParentNames();
            _reserviert ? trace(pn+", "+name+"("+id+") wurde reserviert.") : trace("Die reservierung für "+pn+", "+name+"("+id+") wurde storniert.");
        }
        private function stuhlZeichnen(color:uint):Sprite{
            var mc:Sprite = new Sprite();
            mc.graphics.beginFill(color);
            mc.graphics.lineStyle(1, 0, .5);
            mc.graphics.drawRect(-6,-6, 12, 12);
            mc.graphics.endFill();
            mc.graphics.beginFill(0x000000, .2);
            mc.graphics.lineStyle(1, 0, .2);
            mc.graphics.drawRect(-6,-3, 9, 6);
            mc.graphics.endFill();
            return mc;
            //buttonState = mc;
        }
        private function getParentNames():String{
            var pn:Array = new Array();
            if(parent is Tisch){
                pn.unshift(parent.name);
                if(parent.parent is TischGruppe){
                    pn.unshift(parent.parent.name);
                }
            }else if(parent is Balkonreihe){
                pn.unshift(parent.name);
                if(parent.parent is Balkon){
                    pn.unshift(parent.parent.name);
                }
            }
            return pn.join(", ");
        }
        public static function get stuhlListe():Array{
            return _stuhlListe;
        }
    }
} 


Raum\Tisch.as
zeichnet ein rechteck für den tisch und setzt links und rechts eine reihe stühle daneben.

PHP-Code:

package Raum{
    import flash.display.Sprite;
    import Raum.Stuhl;
    public class Tisch extends Sprite{
        public function Tisch(tischName:String=""):void{
            if(tischName!=""){
                name = tischName;
            }
            //Tisch zeichnen
            graphics.beginFill(0x99999);
            graphics.drawRect(-12, 0, 24, 284);
            graphics.endFill();
            
            //Stuhlreihen setzen
            stuhlreiheVertikal("links");
            stuhlreiheVertikal("rechts");
        }
        private const STUHLABSTAND_ZUM_TISCH:Number = 20;
        private const STUHL_ANZAHL:uint = 16;
        private const STUHL_ABSTAND:Number = 18;
        private function stuhlreiheVertikal(seite:String):void{
            if(seite=="links"){
                var startIdx:uint=0;
                var xPos:Number = -STUHLABSTAND_ZUM_TISCH;
                var scale_x:int = -1; //spiegeln des stuhls, falls er etwas ausgefallener aussieht als ein viereck^^
            }else if(seite=="rechts"){
                startIdx=1;
                xPos = STUHLABSTAND_ZUM_TISCH;
                scale_x = 1;
            }else{
                return;
            }
            for(var i:uint = startIdx; i < STUHL_ANZAHL*2; i+=2){
                var st:Stuhl = new Stuhl("Stuhl "+(i+1).toString());
                st.x = xPos;
                st.scaleX = scale_x;
                st.y = (i-startIdx)*STUHL_ABSTAND*.5 +st.height*.5;
                addChild(st);
            }
        }
    }
} 


Raum\TischGruppe.as
setzt mehrere tische nebeneinander. die zahl hängt vom array ab, das man dem konstruktor übergibt (tischNamen)

PHP-Code:

package Raum{
    import flash.display.Sprite;
    import Raum.Tisch;
    public class TischGruppe extends Sprite{
        private const TISCH_ABSTAND:Number = 85;
        public function TischGruppe(tischNamen:Array):void{
            if(tischNamen.length>0){
                for(var i:uint = 0; i<tischNamen.length; i++){
                    var t:Tisch = new Tisch(tischNamen[i]);
                    t.x = i*TISCH_ABSTAND;
                    addChild(t);
                }
            }
        }
    }
} 


Raum\Balkonreihe.as
nur eine reihe stühle nebeneinander

PHP-Code:

package Raum{
    import flash.display.Sprite;
    import Raum.Stuhl;
    public class Balkonreihe extends Sprite{
        private const STUHL_ABSTAND:Number = 16;
        public function Balkonreihe(stuhlAnzahl:uint):void{
            for(var i:uint = 0; i < stuhlAnzahl; i++){
                var st:Stuhl = new Stuhl("Stuhl "+(i+1));
                st.rotation = 90;
                st.x = -i*STUHL_ABSTAND;
                addChild(st);
            }
        }
    }
} 


Raum\Balkon.as
erstellt die stuhlreihen des balkons

PHP-Code:

package Raum{
    import flash.display.Sprite;
    public class Balkon extends Sprite{
        private const REIHEN_ABSTAND:Number = 20;
        public function Balkon(reihen:Array):void{
            if(reihen.length>0){
                for(var r:uint = 0; r<reihen.length; r++){
                    var reihe:Balkonreihe = new Balkonreihe(reihen[r]);
                    reihe.y = r*REIHEN_ABSTAND;
                    reihe.name = "Reihe "+(r+1);
                    reihe.x = reihe.width*.5
                    trace(reihe.width)
                    addChild(reihe);
                }
            }
        }
    }
} 


speicher das alles einfach mal in den angegebenen dateien, also:
main.as
Raum\Stuhl.as
Raum\Tisch.as
Raum\TischGruppe.as
Raum\Balkonreihe.as
Raum\Balkon.as

Dann machst du erstellst du dir eine neue fla und speicherst diese im selben verzeichnis.
bei den eigenschaften der fla gibst du main.as als klasse an.

dann sollte das schon mal laufen. wenn's klappt schaun wir's uns nochmal an.

mfg

sx

[McDonnough]

Also, gleich mal zwei Fragen bevor ich loslege:

1. Wie und wo erstelle ich die einzelnen Klassen. (Ginge das auch mit dem AS-PlugIn für Eclipse?)
2.

Zitat von shin10

main.as
erstellt zwei tischgruppen, den balkon und setzt sie auf die bühne

Zwei Tischgruppen erstellen Dringende Erklärung nötig.

[shin10]

Zwei Tischgruppen erstellen Dringende Erklärung nötig.

als tischgruppe habe ich den unteren/oberen teil des "parketts" bezeichnet

Ginge das auch mit dem AS-PlugIn für Eclipse?

das nehm ich an. das müsste sogar mit notepad gehen. hauptsache da gibts die datei und die wird beim compilieren gefunden.