Hvordan lage en Flash Pie Chart
En Flash kakediagram kan lages utelukkende gjennom bruk av Action. Action er språket som du kan styre Flash-objekter, inkludert sine grafiske objekter. Dette betyr at du kan lage grafikk på skjermen i Action uten å måtte trekke noe i Flash. Dette er nyttig for å lage et kakediagram fordi størrelser av objekter må matematisk beregnet for å finne ut størrelsen på hver skive i diagrammet. Dessuten gir dette mer kontroll for brukeren, siden kaken kartdata kan bringes inn fra en ekstern fil, for eksempel et XML-fy.
Bruksanvisning
1 I Flash, gå til \ "Fil \" \ "Ny \" og lage en ny \ "Flash Actionscript 2.0 \" fil.
2 Second Klikk på første bildet og velg \ "Handlinger \" fra kontekstmenyen for å få opp redigeringsvinduet Actionscript.
3 Kopier-lim inn følgende Actionscript. Denne koden belastninger i piechart data fra en ekstern XML som vil bli opprettet senere:
stoppe()
GÅ
xmlfile = ny XML ()
GÅ
xmlfile.onLoad = parseData
GÅ
pieColors = []
GÅ
pieValues = []
GÅ
textArray = []
GÅ
funksjon parseData (suksess) {
if (suksess) {
for (var k = 0; k <xmlfile.childNodes.length; k ++) {
if (xmlfile.childNodes [k] .nodeName == \ "pieData \") {
Var nodePieData = xmlfile.childNodes [k]
GÅ
gå i stykker
GÅ
}
}
for (var k = 0; k <nodePieData.childNodes.length; k ++) {
if (nodePieData.childNodes [k] .nodeName == \ "kaken \") {
nodePie = nodePieData.childNodes [k]
GÅ
pieColors.push (parseInt (nodePie.attributes.color, 16))
GÅ
for (var p = 0; p <nodePie.childNodes.length; p ++) {
if (nodePie.childNodes [p] .nodeName == \ "value \") {
pieValues.push (parseInt (nodePie.childNodes [p] .firstChild, 10))
GÅ
}
if (nodePie.childNodes [p] .nodeName == \ "tekst \") {
textArray.push (nodePie.childNodes [p] .firstChild)
GÅ
}
}
}
}
slette (xmlfile)
GÅ
spille()
GÅ
}
}
xmlfile.load (\ "pieData.xml \");
4 I tidslinjen andre Klikk ramme 2 på filmen og velg \ "Opprett Blank Keyframe \" fra kontekstmenyen. Åpne handlinger åpnes og copy-paste følgende Action å definere snittstørrelser i Pie Chart:
itemArray = []
GÅ
sliceArray = []
GÅ
bbx0 = 400
GÅ
bby0 = 80
GÅ
piex0 = 180
GÅ
piey0 = 180
GÅ
for (var k = 0; k <pieColors.length; k ++) {
attachMovie (\ "pie3d \", \ "kaken \" + k, k + 1)
GÅ
attachMovie (\ "BBclip \", \ "bb \" + k, k + 300)
GÅ
sliceArray.push (dette [\ "kaken \" + k])
GÅ
itemArray.push (dette [\ "BB \" + k])
GÅ
med (dette [\ "kaken \" + k]) {
_x = piex0
GÅ
_y = piey0
GÅ
}
med (dette [\ "BB \" + k]) {
_y = bby0 + (300 * k / pieColors.length)
GÅ
_x = bbx0
GÅ
_xscale = 70
GÅ
_yscale = 70
GÅ
}
dette [\ "BB \" + k] .id- = k
GÅ
}
5 I tidslinjen, velg det tredje rammen av filmen, og opprette en tom keyframe. Åpne handlinger åpnes og copy-paste denne siste bit av Actionscript som skaper en farget legende på siden av din Pie Chart:
stoppe()
GÅ
temp = 0
GÅ
sum = 0
GÅ
for (var k = 0; k <pieValues.length; k ++) {
sum + = Number (pieValues [k])
GÅ
if (pieValues [k]> temp) {
temp = pieValues [k]
GÅ
maxIndex = k
GÅ
}
}
ang0 = 90
GÅ
index = maxIndex
GÅ
for (var count = 0; count <pieValues.length; teller ++) {
if (indeks> = pieValues.length) {
index - = pieValues.length
GÅ
}
verdi = pieValues [index]
GÅ
angOffset = verdi
360 / sum
GÅ
Var clip2 = sliceArray [index]
GÅ
med (clip2) {
percentValue = int (verdi 100 / sum)
GÅ
Vis (ang0, ang0 + angOffset)
GÅ
setHue (pieColors [index])
GÅ
if (ang0 <270) {
dybde = 10-count
GÅ
} Else {
dybde = 10 + count
GÅ
}
swapDepths (dybde)
GÅ
}
ang0 + = angOffset
GÅ
index ++
GÅ
}
for (var k = 0; k <pieValues.length; k ++) {
itemArray [k] .txt.text = textArray [k] + \ ": \" + pieValues [k]
GÅ
itemArray [k] .setHue (pieColors [k])
GÅ
}
6 Gå til \ "Fil \" \ "Lagre som ... \" og lagre filen i en katalog du kan huske.
7 Åpne opp din favoritt teksteditor (Notepad i Windows eller TextEdit på Mac vil gjøre) og kopiere-lim inn følgende XML-kode, som definerer Elementnavnene og verdier for kakediagram (du kan endre alt som er i den \ "<verdi> \ "og \" <tekst> \ "deler til etiketten og mengden av elementer i sektordiagram):
<? Xml version = \ "1.0 \"?>
<PieData>
<Pai color = \ "FF0000 \">
<value>100</value>
<text>Item 1 </text>
</ Pai>
<Pai color = \ "00FF00 \">
<value>150</value>
<text>Item 2</text>
</ Pai>
<Pai color = \ "0000FF \">
<value>50</value>
<text>Item 3</text>
</ Pai>
<Pai color = \ "FFFF00 \">
<value>20</value>
<text>Item 4</text>
</ Pai>
<Pai color = \ "FF00FF \">
<value>80</value>
<text>Item 5</text>
</ Pai>
</ PieData>
8 Gå til \ "Fil \" \ "Lagre som \" og naviger til katalogen du lagret din Flash-fil. Type \ "pieData.xml \" som navn på filen og klikk \ "Save. \"
9 I Flash, gå til \ "Control \" \ "Test Movie \" for å teste filmen. Du skal se en fargekodet kakediagram med en legende på siden som viser etikettene og verdier du innmatet i XML-filen i trinn 7.