Anzeige
Tutorialbeschreibung

Balkendiagramme mit ActionScript2 für Fortgeschrittene

Balkendiagramme mit ActionScript2 für Fortgeschrittene

Schritt 1

Alle folgenden Codestücke werden der Reihe nach in das Aktionen Feld des ersten Frames geschrieben. Zuerst müssen wir die Daten erstellen, die unser Script später veranschaulichen soll. Dazu benötigen wir zunächst unsere Variablen, die die Fragen und die Anzahl der Stimmen beinhaltet. In diesem Beispiel nutzen wir also sechs Fragen, die wir mit einem Array erstellen.

 

var my_quest:Array = new Array('Frage 1', 'Frage 2', 'Frage 3', 'Frage 4', 'Frage 5', 'Frage 6');

var my_nums:Array = new Array('22', '65', '47', '19', '34', '52');

Zudem erstellen wir Variablen, die unsere Rahmenbedingungen, wie die Maximale Balkenlänge o.ä. beinhalten:



var länge = 400;// Balkenlänge
var gesamt = 0; // Gesamtstimmen-Variable, auf null lassen!
var a = 0; // Variable für Farbzuweisung

 

Zudem muss man noch einen Array erstellen, der unsere Farben für die verschiedenen Balken enthält. 



var my_colors:Array = new Array('0xCC3300', '0x33CC66', '0x006699', '0xCC9900', '0x333333');

 

Hier kann man den Farbcode beliebig vieler Farben eintragen, die dann nacheinander die Balken einfärben.

 

Schritt 2

Nun beginnen wir unsere Balken zu erstellen. Dazu beginnen wir zunächst mit einer for-Schleife, die  so oft durchlaufen wird, wie es Frage in unserem my_quest-Array gibt.

for (var i:Number = 0; i<my_quest.length; i++) {

 

In diese Schleife werden nun unsere MovieClips erzeugt, in die wir im nächsten schritt unsere Rechtecke zeichnen.



this.createEmptyMovieClip('balken'+i, this.getNextHighestDepth());
            this['balken'+i]._x = 95; // X-Achsen Postion der Balken
            this['balken'+i]._y = 15*i; // Y-Achsen Postion der Balken jeweils weiter nach unten versetzt        

 

 

Die Movieclips heißen nun also balken0, balken1, balken 2 und so weiter…

 

Schritt 3

Jetzt also werden die Rechtecke erzeugt.

import flash.display.BitmapData;
            if (a == my_colors.length) { // Hier wird geprüft ob  alle Farben schon vergeben sind und gegebenenfalls wieder von vorne eingefärbt
                      a = 0;
            }
            var myBitmapData:BitmapData = new BitmapData(2, 10, false, my_colors[a]);
            a++;


 

um mit dem folgenden Befehl unseren balken MCs hinzugefügt.

 

this['balken'+i].attachBitmap(myBitmapData, this.getNextHighestDepth());

 

Schritt 4

Dieser schritt dient lediglich zur Verschönerung unserer Balken. Denn nun erstellen wir einen Schatten und einen leichten Glanz. So wirken die se etwas plastischer.

var myDropFilter = new flash.filters.DropShadowFilter(2, 45, 0x000000, .8, 2, 2, 1, 3, false, false, false); // Schatten
            var myDropFilter1 = new flash.filters.DropShadowFilter(4, 90, 0xFFFFFF, .5, 3, 3, 1, 3, true, false, false); //weißer Glanz von Oben
            var myFilters:Array = this['balken'+i].filters;
            myFilters.push(myDropFilter);
            myFilters.push(myDropFilter1);
            this['balken'+i].filters = myFilters; 

Schritt 5

Jetzt benötigen wir jeweils zwei Textfelder, in denen unsere Frage und die Prozentzahl stehen. Mit dem Befehl createTextField werden diese Erstellt, und zugleich positioniert.

this.createTextField('prozent+i, this.getNextHighestDepth()+i, 52, 15*i-3, 40, 20);// Name; Ebene; X; Y;Breite; Höhe
this.createTextField('frage_'+i, this.getNextHighestDepth()+i, 2, 15*i-3, 50, 20);

 

Damit unsere Textfelder mittig zu den Balken sind, benötigen wir bei der Y-Koordinate einen Justierungswert von 3 Pixeln, daher die Angabe 15*i-3. Unserem Textfeld, welches die Frage beinhalten soll können wir nun gleich unsere Frage zuweisen.

 

this['frage_'+i].text = my_quest[i];

Die Werte für die Prozentangaben werden wir erst erzeugen, daher können wir sie noch nicht zuweisen.

 

Schritt 6

Zu guter letzt der for-Schleife erstellen füttern wir noch unsere oben erstellte Variable gesamt mit allen abgegebenen Stimmen, sodass wir die gesamte Stimmenzahl erhalten.



gesamt = Number(gesamt)+Number(my_nums[i]);

 


Jetzt muss die for-Schleife nur noch mit einem } geschlossen werden.

Schritt 7

Jetzt schreiben wir den Code, der für die Animation der Balken nötig ist. Zunächst beginnen wir mit

onEnterFrame = function () {

 


in dieser Funktion  wir nun ein Wert, welcher unsere Prozentzahl darstellt, ständig erhöht.

a++,

 


jetzt wird wieder eine for-Schleife benötigt, damit wir jeweils unsere Balken ansprechen können.

for (var i:Number = 0; i<my_quest.length; i++) {

in dieser Schleife wird die Breite der MCs so lange erhöht bis sie den prozentualen Wert darstellen.

if (this['balken'+i]._width<my_nums[i]/gesamt*länge+1) { // my_nums[i]/gesamt*länge+1 => Prozentualer wert
               this['balken'+i]._width += länge/100; // länge/100 => Konstante, damit zahlen und Balken gleichzeitig aufhören zu laufen.

}

 

                      

Jetzt werden unsere Prozentzahlen für die Anzeige erstellt.

 

if (a<my_nums[i]/gesamt*100+1) {
           this['prozent'+i].text = a+' %';// Die Schleife lässt die Werte von 0 bis zur erreichten Prozentzahl durchlaufen
   } else {
        var zahl = my_nums[i]/gesamt*100;
       this['prozent'+i].text = zahl.runden (",", 1)+'%'; // und zeigt dann einen gerundeten Prozentwert an
   } 

 

Damit unser Text nicht in einer X-beliebigen Schriftart angezeigt wird legen wir diese nun fest.

var my_fmt:TextFormat = new TextFormat();
my_fmt.size = 11;
my_fmt.align = 'right';
my_fmt.font = 'Arial';
this['prozent'+i].setTextFormat(my_fmt);
this['frage_'+i].setTextFormat(my_fmt);

 

 

 

und schließen nun sowohl die for-Schleife, als auch die onEnterFrame-Funktion mit

         }
};

 

 

Schritt 8

Zu guter letzt benötigen wir noch die Rundungsfunktion.

Number.prototype.runden = function(DezZeichen, Stellen) {
            return (Math.floor(this)+DezZeichen+Math.round(this*Math.pow(10, Stellen)).toString().slice(-Stellen));
};

 

 

Der gesamte Code sollte nun so aussehen:

var my_nums:Array = new Array('22', '65', '47', '19', '34', '52');

var my_quest:Array = new Array('Frage 1', 'Frage 2', 'Frage 3', 'Frage 4', 'Frage 5', 'Frage 6');

var länge = 300;

// Balkenlänge

var gesamt = 0;

// Gesamtstimmen variable, auf null lassen

var a = 0;

// Variable für Farbzuweisung, und als Hilfsvariable genutzt

var my_colors:Array = new Array('0xCC3300', '0x33CC66', '0x006699', '0xCC9900', '0x333333');

for (var i:Number = 0; i<my_quest.length; i++) {

            this.createEmptyMovieClip('balken'+i, this.getNextHighestDepth());

            this['balken'+i]._x = 95;

            // X-Achsen Postion der Balken

            this['balken'+i]._y = 15*i;

            // Y-Achsen Postion der Balken jeweils weiter nach unten versetzt

            import flash.display.BitmapData;

            if (a == my_colors.length) {

                        // Hier wird geprüft ob  alle Farben schon vergeben sind und gegebenenfalls wieder von vorne eingefärbt

                        a = 0;

            }

            var myBitmapData:BitmapData = new BitmapData(1, 10, false, my_colors[a]);

            a++;

            this['balken'+i].attachBitmap(myBitmapData, this.getNextHighestDepth());

            var myDropFilter = new flash.filters.DropShadowFilter(2, 45, 0x000000, .8, 2, 2, 1, 3, false, false, false);

            // Schatten

            var myDropFilter1 = new flash.filters.DropShadowFilter(4, 90, 0xFFFFFF, .5, 3, 3, 1, 3, true, false, false);

            //weißer Glanz von Oben

            var myFilters:Array = this['balken'+i].filters;

            myFilters.push(myDropFilter);

            myFilters.push(myDropFilter1);

            this['balken'+i].filters = myFilters;

            this.createTextField('prozent'+i, this.getNextHighestDepth()+i, 52, 15*i-3, 40, 20);

            // Name; Ebene; X; Y; Breite; Höhe

            this.createTextField('frage_'+i, this.getNextHighestDepth()+i, 2, 15*i-3, 50, 20);

            this['frage_'+i].text = my_quest[i];

            gesamt = Number(gesamt)+Number(my_nums[i]);

}

onEnterFrame = function () {

            a++;

            for (var i:Number = 0; i<my_quest.length; i++) {

                        if (this['balken'+i]._width<my_nums[i]/gesamt*länge+1) {

                                   // my_nums[i]/gesamt*länge+1 => Prozentualer wert

                                   this['balken'+i]._width += länge/100;

                                   // länge/100 => Konstante, damit zahlen und Balken gleichzeitig aufhören zu laufen.

                        }

                        if (a<my_nums[i]/gesamt*100+1) {

                                   this['prozent'+i].text = a+' %';

                                   // Die Schleife lässt die Werte von 0 bis zur erreichten Prozentzahl durchlaufen

                        } else {

                                   var zahl = my_nums[i]/gesamt*100;

                                   this['prozent'+i].text = zahl.runden(",", 1)+'%';

                                   // und zeigt dann einen gerundeten Prozentwert an

                        }

                        var my_fmt:TextFormat = new TextFormat();

                        my_fmt.size = 11;

                        my_fmt.align = 'right';

                        my_fmt.font = 'Arial';

                        this['prozent'+i].setTextFormat(my_fmt);

                        this['frage_'+i].setTextFormat(my_fmt);

            }

};

Number.prototype.runden = function(DezZeichen, Stellen) {

            return (Math.floor(this)+DezZeichen+Math.round(this*Math.pow(10, Stellen)).toString().slice(-Stellen));

};

Jetzt habt ihr ein animiertes Balkendiagramm erstellt, das richtig schön aussieht!

 


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Blue2th
  • 14.11.2010 - 17:22

Klasse Tutorial! Hat mir sehr geholfen!

Portrait von arimano
  • 13.05.2010 - 23:15

achja übersehen:
"
Damit unsere Textfelder mittig zu den Balken sind, benötigen wir bei der Y-Koordinate einen Justierungswert von 3 Pixeln, daher die Angabe 15*i-3. Unserem Textfeld, welches die Frage beinhalten soll können wir nun gleich unsere Frage zuweisen.


this['frage_'+i].text = my_quest[i];

"

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 02.02.2010 - 18:54

ach ja sorry wegen doppel posten, aber auser das ich da keine feldern zum name und PLZ finden kann, wolte ich noch wissen, wo man die frage länge ändern kann, hab da einiges gefunden welscher abstand was ist aber nicht von der fragen länge? :-(
so wird bsp:
aus.
wie gefehlt ihnen unsere hompage 92% --balken---
??
wie gehef 92% ---balben---

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 02.02.2010 - 18:15

hmm und soweit leuft alles auser das bei paar undefiened steht, aber wo sind die feldern wo man die fragen beantworten kann?

Portrait von arimano
  • 13.05.2010 - 23:12

es ging um Balkendiagramme und nicht um ein Fragespiel wie auch immer...

Portrait von aliasltb
  • 26.01.2010 - 09:38

Also ich habe den Code mal kopiert und bei den Prozentanzeigen steht nur "indefined", sobald die Balken still stehen.

Portrait von Spin_1987
  • 29.07.2009 - 15:16

Also bei mir zeigt er nur Fehler an, weil ich mit As3 progge:/

Er sagt mir ich muss die Mthoden ändern, bzw. die sind nicht mehr supportet.

Sonst super erklärt, aber komme nicht weiter :/ schade

Portrait von kleeaar
  • 29.07.2009 - 15:38

Deshalb steht auch im Titel schon, dass es nur mit AS2 geht.
as2 und as3 sind zweierlei paar Schuhe ;)

Grüße

Portrait von kleeaar
  • 15.06.2009 - 14:59

Es hat den Link rausgeschmissen...LINK:http://www.jules-london.com/index.php?download=13&title=Animiertes%20Kreisdiagramm%20Dynamisch%20erstellen

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 29.05.2009 - 00:26

sehr schön geschrieben war echt ne gute hilfe bei nem eigenen projekt

vielleicht könnteste ja mal nen tutorial für nen kreisdiagramm machen

aber trotzdem *daumen hoch*

Portrait von kleeaar
  • 15.06.2009 - 14:57

Gesagt getan...<br>
ist zwar kein Tutorial aber ein Script mit dem Du Kreisdiagramme erstellen kannst...<br>
LINK:<a href="http://www.jules-london.com/index.php?download=13&amp;amp;title=Animiertes%20Kreisdiagramm%20Dynamisch%20erstellen"> Kreisdiagramm in Flash AS2.0</a> [www.jules-london.com]<br>
Grüße

Portrait von kleeaar
  • 18.07.2009 - 14:56

Ich hab jetzt auch ein Tutorial zu dem Kreidiagramm geschrieben:<br>
http://www.jules-london.com/index.php?tutorial=8&title=Kreisdiagramme dynamisch erstellen (AS2.0)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 22.05.2009 - 23:12

sehr aufschlussreich, sehr gut für einsteiger und fortgeschrittene

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 06.05.2009 - 12:08

sehr gutes tut für einsteiger und fortgeschrittene

Portrait von NitroMani
  • 13.03.2009 - 17:00

wow! Super Tut!
Faszinierend ist, dass du alles Graphische allein mit AC erledigt hast, und das auch sehr hübsch!

Portrait von Stanislas
  • 05.03.2009 - 18:11

Supergrandios...dafür solte es 6 sterne geben ;)
ne wirkllich echt gelungen und voll einfach also finde es netmal so fortgeschritten,....;)

Portrait von Lukiiii
  • 17.02.2009 - 15:44

sehr sehr gut erklärt. DANKE!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 31.10.2008 - 15:21

Super verständliches Tutorial mit einem sehr schönen Resultat. Vielen Dank für die Mühe!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 21.07.2008 - 17:13

Super Tut!
Alles Funzt.

Portrait von xxhawk12x
  • 21.07.2008 - 12:48

Sehr gut erklärt und hab direkt einen Einsatz gefunden. Echt Klasse Tutorial!

x
×
×