Come creare un grafico a torta Flash

April 4

Come creare un grafico a torta Flash


Un grafico a torta Flash può essere creata solamente attraverso l'uso di ActionScripting. ActionScript è il linguaggio con cui è possibile controllare gli oggetti Flash, compresi i suoi oggetti grafici. Ciò significa che è possibile creare elementi grafici sullo schermo in ActionScript, senza mai dover disegnare qualsiasi cosa in Flash. Questo è utile per creare un grafico a torta perché le dimensioni degli oggetti devono essere matematicamente calcolato in modo da capire le dimensioni di ogni fetta nel grafico. Inoltre, questo permette un maggiore controllo per l'utente, poiché i dati del grafico a torta possono essere portati da un file esterno, ad esempio un fie XML.

istruzione

1 In Flash, andare a \ "File, \" \ "Nuovo, \" e creare un nuovo file \ "Flash ActionScript 2.0 \".

2 In secondo luogo, fare clic sul primo fotogramma e selezionare \ "Azioni \" dal menu contestuale per aprire la finestra di editor di ActionScript.

3 Copia-incolla il seguente codice ActionScript. Questo codice carica nei dati Piechart da un XML esterno che verranno creati in seguito:
Stop()
ANDARE
XMLFILE = new XML ()
ANDARE
xmlfile.onLoad = parseData
ANDARE
pieColors = []
ANDARE
pieValues ​​= []
ANDARE
textArray = []
ANDARE
Funzione parseData (successo) {
if (successo) {
for (var k = 0; k <xmlfile.childNodes.length; k ++) {
if (xmlfile.childNodes [k] .nodeName == \ "pieData \") {
var = nodePieData xmlfile.childNodes [k]
ANDARE
rompere
ANDARE
}
}

for (var k = 0; k <nodePieData.childNodes.length; k ++) {
if (nodePieData.childNodes [k] .nodeName == \ "torta \") {
nodePie = nodePieData.childNodes [k]
ANDARE
pieColors.push (parseInt (nodePie.attributes.color, 16))
ANDARE
for (var p = 0; p <nodePie.childNodes.length; p ++) {
if (nodePie.childNodes [p] .nodeName == \ "valore \") {
pieValues.push (parseInt (nodePie.childNodes [p] .firstChild, 10))
ANDARE
}
if (nodePie.childNodes [p] .nodeName == \ "text \") {
textArray.push (nodePie.childNodes [p] .firstChild)
ANDARE
}
}
}
}
delete (XMLFILE)
ANDARE
giocare()
ANDARE
}
}
xmlfile.load (\ "pieData.xml \");

4 Nella timeline, secondo clic frame 2 del filmato e selezionare \ "Crea Fotogramma chiave vuoto \" dal menu contestuale. Aprire la finestra azioni e copiare e incollare il codice ActionScript seguente per definire la dimensione fetta nel grafico a torta:
ItemArray = []
ANDARE
sliceArray = []
ANDARE

bbx0 = 400
ANDARE
bby0 = 80
ANDARE
piex0 = 180
ANDARE
piey0 = 180
ANDARE

for (var k = 0; k <pieColors.length; k ++) {
attachMovie (\ "pie3d \", \ "torta \" + k, k + 1)
ANDARE
attachMovie (\ "BBclip \", \ "BB \" + k, k + 300)
ANDARE
sliceArray.push (questo [\ "torta \" + k])
ANDARE
itemArray.push (questo [\ "bb \" + k])
ANDARE
con (questo [\ "torta \" + k]) {
_x = piex0
ANDARE
_y = piey0
ANDARE
}
con (questo [\ "bb \" + k]) {
_y = bby0 + (300 * k / pieColors.length)
ANDARE
_x = bbx0
ANDARE
_xscale = 70
ANDARE
_yscale = 70
ANDARE
}
questo [\ "bb \" + k] .id = k
ANDARE
}

5 Nella timeline, selezionare il terzo fotogramma del filmato, e creare un fotogramma chiave vuoto. Aprire la finestra azioni e copia-incolla questo ultimo bit di ActionScript che crea una leggenda colorata sul lato del grafico a torta:
Stop()
ANDARE

temp = 0
ANDARE
sum = 0
ANDARE
for (var k = 0; k <pieValues.length; k ++) {
sum + = Number (pieValues ​​[k])
ANDARE
if (pieValues ​​[k]> temp) {
temp = pieValues ​​[k]
ANDARE
MaxIndex = k
ANDARE
}
}

ang0 = 90
ANDARE
index = MaxIndex
ANDARE
for (var count = 0; conteggio <pieValues.length; contare ++) {
se (indice> = pieValues.length) {
index - = pieValues.length
ANDARE
}
value = pieValues ​​[index]
ANDARE
angOffset = valore

360 / sum
ANDARE
var = clip2 sliceArray [index]
ANDARE
con (clip2) {
percentValue = int (valore 100 / sum)
ANDARE
spettacolo (ang0, ang0 + angOffset)
ANDARE
setHue (pieColors [index])
ANDARE
if (ang0 <270) {
Profondità = 10-count
ANDARE
} altro {
Profondità = 10 + conteggio
ANDARE
}
swapDepths (profondità)
ANDARE
}
ang0 + = angOffset
ANDARE
Indice ++
ANDARE
}

for (var k = 0; k <pieValues.length; k ++) {
ItemArray [k] = .txt.text textArray [k] + \ ": \" + pieValues ​​[k]
ANDARE
ItemArray [k] .setHue (pieColors [k])
ANDARE
}

6 Vai a \ "File, \" \ "Salva con nome ... \" e salvare il file in una directory facile da ricordare.

7 Aprite il vostro editor di testo preferito (Notepad su Windows o TextEdit su Mac farà) e copiare-incollare il seguente codice XML, che definisce i nomi ei valori per il grafico a torta (si può cambiare tutto ciò che è nella \ "<valore> \ "e \" <testo> \ "sezioni per l'etichetta e quantità degli articoli nel grafico a torta):
<? Xml version = \ "1.0 \"?>
<PieData>
<Colore pie = \ "FF0000 \">

&lt;value>100&lt;/value>
&lt;text>Item 1 &lt;/text>

</ Pie>
<Colore pie = \ "00FF00 \">

&lt;value>150&lt;/value>
&lt;text>Item 2&lt;/text>

</ Pie>
<Colore pie = \ "0000FF \">

&lt;value>50&lt;/value>
&lt;text>Item 3&lt;/text>

</ Pie>
<Colore pie = \ "FFFF00 \">

&lt;value>20&lt;/value>
&lt;text>Item 4&lt;/text>

</ Pie>
<Colore pie = \ "FF00FF \">

&lt;value>80&lt;/value>
&lt;text>Item 5&lt;/text>

</ Pie>
</ PieData>

8 Vai a \ "File, \" \ "Salva con nome \" e passare alla directory che si è salvato il file Flash. Tipo \ "pieData.xml \" come nome del file e fare clic su \ "Salva. \"

9 In Flash, andare a \ "Controllo, \" \ "Prova filmato \" per provare il filmato. Si dovrebbe vedere un grafico a torta con codifica a colori con una leggenda sul lato che mostra le etichette e valori abbia immesso nel file XML al punto 7.


Articoli Correlati