Anzeige
Tutorialbeschreibung

Voting/Bewertung mit Flash und PHP

Voting/Bewertung mit Flash und PHP

Wen es schon immer mal interessiert hat, wie man eine Bewertung in Flash macht, der ist hier richtig!
(Actionscript 2.0 & PHP)


Schritt 1 (Graphik und Interface):

Als Erstes müsst ihr ein neues Flash AS2-Dokument öffnen, wobei ich denke, das ihr dieses Voting in einer bereits existierenden Flash Website/Spiel/Anwendung/usw. erstellt.

Wir sind so frei und gönnen uns für das Voting einen neuen, leeren, eigenen Movieclip.
Wie der heißt, ist euch überlassen. 

So, nun brauchen wir ein Stern-Shape oder was auch immer ihr nehmen wollt.
Ich zeig euch halt, wie man eine klassische Stern-Bewertung macht (wie bei Youtube und anderen).
Falls ihr gerade keinen Stern bei der Hand habt, könnt ihr euch diesen hier als .fla herunterladen und verwenden.

Bilder


So, nun legen wir 5 Sterne mit gleicher Distanz zueinander in den Hintergrund und machen sie blassgrau, damit man weiß, dass es hier bis zu 5 Sterne gibt.

Bilder


Gleich darauf legen wir eine neue Ebene an, erstellen einen neuen Movieclip namens "SterneAusgewählt" und geben ihm den Instanznamen "SterneAusgewählt".
In diesen Movieclip legen wir einen Stern und konvertieren ihn nochmals in einen Movieclip namens "SternAuswahl".
Zu diesen Movieclip kommen wir später...

Zunächst gehen wir wieder in den "SterneAusgewählt"-Movieclip und ziehen das einzige Keyframe, das momentan in dem Movieclip sein sollte, einen Frame nach hinten.

Bilder


Gleich danach machen wir ein Schlüsselbild (F6) ins 3. Frame, duplizieren (Strg+D) den Stern, der bereits im Frame drin ist und positionieren den Stern genau so, dass er auf den 2. blassen Stern im Hintergrund passt.

Bilder


Das Ganze wiederholt ihr bis zum 5. Stern.
(frame1: kein Stern, frame2: einen Stern, frame3: zwei Sterne ...).

Nun geht ihr einen Pfad zurück, also in den Haupt-Movieclip.

Was wir nun tun müssen ist, abzufragen, auf welchen Stern der User gerade zeigt, und dann dazu in den passenden Frame in dem "SterneAuswahl"-Movieclip zu gehen.
Dazu müssen wir so eine Art Hitbox für die Maus machen.
Macht dazu einfach eine neue Ebene und malt ein Rechteck mit dem Rechteck-Tool, das mindestens so groß ist wie ein Stern.
Dieses Rechteck legt ihr nun auf den ersten Stern und nennt es "st1", dann dupliziert ihr es, legt es auf den zweiten Stern und nennt es "st2".
Das macht ihr mit allen 5 Sternen.
Beachtet dabei, dass keine Lücken zwischen den boxen sein sollten, so wie hier:

Bilder


Schritt 2 (Scripten und Interface):

So, nun müssen wir ans Programmieren ran!

Macht wieder eine neue Ebene in den Haupt-MC und nennt sie "Script".
Markiert dann das Schlüsselbild in dieser Ebene und drückt F9, was den Actionscript-Kompiler öffnet.
In den tippt ihr dann Folgendes:
st1.onRollOver = function () {
    Mouse.hide()
    SterneAusgewählt.gotoAndStop(2)
    hide_ss()
}
st2.onRollOver = function () {
    Mouse.hide()
    SterneAusgewählt.gotoAndStop(3)
    hide_ss()
}
st3.onRollOver = function () {
    Mouse.hide()
    SterneAusgewählt.gotoAndStop(4)
    hide_ss()
}
st4.onRollOver = function () {
    Mouse.hide()
    SterneAusgewählt.gotoAndStop(5)
    hide_ss()
}
st5.onRollOver = function () {
    Mouse.hide()
    SterneAusgewählt.gotoAndStop(6)
    hide_ss()
}


Dieses Script bewirkt nun, dass alle Stern-Hitboxen getestet werden, ob man mit der Maus darüber fährt.
Wenn man nun über z.B den 3. Stern fährt, dann springt Flash im "SterneAusgewählt"-MC zu dem 4. Frame, in dem genau 3 Sterne sind.
Der "Mouse.hide()"-Befehl sorgt nur dafür, dass die Maus unsichtbar wird, sobald man einen der Sterne berührt.
Die Funktion "hide_ss()" erkläre ich später!

Nun müssen wir noch abfragen, ob die Maus die Hitboxen verlässt.
Dazu schreibt ihr einfach diesen Code zum anderen dazu:

st1.onRollOut = st2.onRollOut = st3.onRollOut = st4.onRollOut = st5.onRollOut = function () {
    Mouse.show()
    stars.gotoAndStop(1)
    show_ss()
}

Wenn nun die Maus eine der 5 Hitboxen verlässt, springt Flash in den 1. Frame in dem "SterneAusgewählt"-MC, welches keinen Stern beinhaltet.
Außerdem wird die Maus wieder sichtbar gemacht.
Auch die Funktion show_ss() erkläre ich später!

Wenn ihr alles soweit richtig habt, solltet ihr Folgendes herausbekommen (nur online verfügbar):


Schritt 3 (verschönern):

Jetzt machen wir noch ein paar "Schönheits-Operationen":

Wie ich oben schon erklärt habe, haben wir im "SterneAusgewählt"-MC die Sterne in einzelne MC gepackt.
Was wir nun machen werden:
Wir markieren im 2. Frame in dem "SterneAusgewählt"-MC den einzigen Stern, klicken mit der rechten Maustaste und wählen "Symbol duplizieren".
Als Symbolnamen gebt ihr "SternAusgewählt" ein.

Dann geht ihr in den 3. Frame und markiert dort den ersten Stern von rechts, macht einen Rechtsklick und wählt "Symbol austauschen".
Dann wählt ihr den "SternAusgewählt"-MC aus.
Das Ganze macht ihr mal wieder mit allen 5 Sternen.

Jetzt öffnet ihr den "SternAusgewählt"-MC aus der Bibliothek.
Nun klickt ihr mit der rechten Maustaste auf den 1. Frame und wählt Klassischen Tween erstellen (in Flash CS3 Bewegungs-Tween erstellen).
Dann markiert ihr den 6. Frame und drückt  F6.
Dann skaliert ihr den Stern im 6. Frame auf ca. 120 % und schreibt in den Actionscript-Kompiler (F9) in den 6. Frame:
stop()
Jetzt machen wir noch schnell eine neue Ebene und ziehen einen schönen "Klick"-Sound in die Ebene, hier ein Beispiel.

Nun sollte das Ergebnis so sein (ich habe jetzt einen schwarzen Hintergrund gewählt, aber das spielt ja keine Rolle ;) ):
(nur online verfügbar)




Schritt 4 (Server und Scripting):

So, nun kommen wir nicht mehr drumherum...wir müssen mit dem Server kommunizieren!

Dazu braucht ihr einen Server mit den Bedingungen:
  • PHP allgemein erlaubt
  • php.fopen() erlaubt
  • mehr als 100 KB Speicher :)
So, jetzt werden vielleicht einige von euch keinen Server (Domain, Webspace...) haben..., aber das ist kein Problem, es gibt nämlich ein paar kostenlose Hoster, die einen
-2 GB Webspace
-PHP
-MySQL
anbieten. Hier sind mal zwei:
ohost
funpic
Meldet euch an und aktiviert den FTP-Zugang.


Bevor wir alles überstürzen, erst einmal das Prinzip:

Bilder


So, nun müssen wir die Bewertungs-Text-Datei so einrichten, dass sie für Flash benutzbar ist.

Öffnet den Editor (in Mac "Text Edit") und schreibt:

&score=0&
&voters=0&


"score" ist die Bewertung (1 Stern = 1000, 2 Stern = 2000, ...)
und "voters" ist die Anzahl an Bewertungen.
Speichert es unter den Namen "vote1.txt"!

Nun müssen wir diese Text-Datei auf den Server bekommen.
Einige von euch werden sich bereits mit FTPs auskennen.
Die, die das zum ersten Mal machen, können sich hier schlau machen!

Erstellt dazu einen neuen Ordner/Verzeichnis mit dem Namen "votes" in eurem Hauptverzeichnis und ladet die vote1.txt in das Verzeichnis.

So, nun können wir in Flash zurückkehren und den ersten Schritt mit dem Laden der Bewertung angehen.

Schritt 5 (Laden der Bewertung vom Server):

Wir müssen nun die Variablen von der "vote1.txt"-Datei in Flash laden; dafür nehmen wir einfach die "LoadVars"-Klasse her!
Schreibt in den Haupt-MC in eine neue Ebene folgenden Code:
var lv:LoadVars = new LoadVars()
lv.load("http://deineseite.de/votes/vote1.txt",lv)

lv.onLoad = function () {
    c_score = Number(lv.score)
    c_vote = Number(lv.voters)
    voteLoad(c_score,c_vote)
}

Nun geben wir der LoadVars Variable (lv) den Befehl, die Text-Datei zu laden.
Sobald die Textdatei geladen wurde, führt sie die onLoad-Funktion aus, welche die aktuelle Bewertung in die "c_score" schreibt und die Anzahl der Bewertungen in die "c_vote" schreibt.
Anschließend wollen wir auch, dass die Bewertung gezeigt wird; deshalb rufen wir die Funktion "voteLoad(bewertung,anzahl)" auf, welche wir später noch definieren werden.

Nun müssen wir noch ein bisschen an dem Interface weitermachen. Was nämlich noch fehlt, sind die Sterne, die anzeigen, welche Gesamtbewertung steht.
Dazu machen wir einfach noch eine Ebene im Haupt-MC und ziehen eine Stern-Shape (kein Stern MovieClip, einfach die blanke Stern-Shape) auf den ersten grauen Stern, konvertieren
den Stern in einen Movieclip namens "SternDisplay" und geben ihm den Instanznamen "stern1".
Macht einen Doppelklick auf den MC und macht gleich eine neue Ebene. Zieht diese Ebene unter die Ebene mit dem Stern.
Zeichnet dann mit dem Rechteck-Werkzeug eine Box in die untere Ebene, welche dieselbe Farbe wie der Stern hat und ihn gut überdeckt.

Bilder


Dann konvertiert ihr das Rechteck in der unteren Ebene zu einem Symbol, dessen Instanznamen "st_bg" sein sollte.
Nun macht ihr die obere Ebene zu einer Maske.
Vielleicht fragen sich jetzt einige von euch, was das soll. Nun ja, es ist eigentlich ganz logisch:
Bei mehr als 2 Bewertungen kann es sein, dass die Bewertung 4,5 Sterne sind...man könnte das jetzt abrunden, oooder, wie es wir machen werden, mit halben, viertel, usw. Sternen.
Wenn wir nämlich eine Bewertung von z.B. 3,5 haben, dann zeigen wir 3 volle Sterne an, und beim 4. positionieren wir das "st_bg" Rechteck um die Hälfte der Länge des "st_bg" in die negative X-position...das Resultat: 3 ganze und ein halber Stern ;D

Nun geht ihr wieder in den Haupt-MC, und wie schon so oft dupliziert ihr den Stern, zieht ihn auf den zweiten grauen Stern und gebt ihm den Instanznamen "stern2"...usw. ;)
Konvertiert dann alle 5 Sterne (stern1,stern2.stern3, ...) in einen Movieclip namens "SterneBewertung" und gebt ihm den Instanznamen "sterne".

Was wir nun mit diesem "SterneBewertung" -MC machen, ist:
Wir werden ihn vorerst unsichtbar machen:
sterne._alpha = 0

Sobald nun die Bewertung von der Text-Datei geladen wurde, werden wir die Sterne langsam einblenden.

Schritt 6 (Anzeigen der Bewertung):

Nun, bevor wir die Sterne dann einblenden können, müssen wir die richtige Anzahl haben - je nach Bewertung.
Deshalb schreiben wir jetzt die "voteLoad()"-Funktion unter das andere Script, doch davor brauchen wir noch eine Tweener-Klasse, die die Sterne dann einblendet.
Ich verwende dazu den caurina-Tweener (hier zum Download).
Legt den "com"-Ordner in der .zip einfach neben eure .fla-datei.
Nun zum Script:
import caurina.transitions.*
function voteLoad(score,voters){
    for(k=0;k<5;k++){
        sterne["stern"+(k+1)]._visible = false
    }
    sc_int = Math.floor(score/1000 - 0.0001)
    sc_fl = score/1000 - sc_int
   
    for(i=0;i<sc_int;i++){
        sterne["stern"+(i+1)]._visible = true
        sterne["stern"+(i+1)].st_bg._x = 0
    }
    sterne["stern"+(sc_int+1)]._visible = true
    sterne["stern"+(sc_int+1)].st_bg._x = -sterne["stern"+(sc_int+1)].st_bg._width*(1-sc_fl)

    Tweener.addTween(sterne,{_alpha:100,time:0.9,transition:"linear"})
}

Als Erstes importiert flash nun den Tweener.
Dann macht er alle inneren Sterne erst mal unsichtbar.
Die variable "sc_int" ist die Ganzzahl der Bewertung (wenn Bewertung 3.4, dann ist "sc_int" 3) und die "sc_fl"-Variable ist die Kommazahl der bewertung (wenn bewertung 3.4 dann ist "sc_fl" 0.4).
Dann werden alle ganzen Sterne mit einer for-Schleife sichtbar gemacht.
Da fast immer noch ein Drittel- oder halber Stern übrig ist, wird noch ein Stern sichtbar gemacht; bei dem wird aber das innere Rechteck so verschoben, dass der Stern je nach dem "sc_fl"-Wert gefüllt ist.
Nun ist es Zeit, alles sichtbar zu machen, und zwar mit dem caurina-Tweener.
Das Prinzip des Tweeners ist:
Tweener.addTween(MovieClipName,{_x:poistionX,_y:positionY,_alpha:transparenz,delay:verspätung,transition:welche art von Tween,time:wie lange der Tween braucht})

Was jetzt noch fehlt, ist Folgendes:
  1. das Anzeigen der Anzahl der Bewertungen
  2. das Verstecken der aktuellen Bewertung, wenn man mit der Maus über einen Stern fährt
  3. das Uploaden, wenn man eine Bewertung abgegeben hat

Schritt 7 (Anzeigen der Anzahl der Bewertungen):

Dafür müsst ihr einfach ein dynamisches Textfeld machen, wo ihr wollt, und es votes_txt nennen, dieses dann in einen Movieclip mit dem Instanznamen "votes_mc" packen.
Dann müsst ihr noch folgenden Code in die geschweiften Klammern der "voteLoad()"-Funktion schreiben:
votes_mc.votes_txt.text = voters + (voters==1 ? " Vote" : " Votes")

Schritt 8 (Verstecken der aktuellen Bewertung, wenn man mit der Maus über einen Stern fährt):

Dafür müssen wir jetzt die zwei Funktionen "show_ss()" und "hide_ss()" definieren, die ich gaaanz oben schon mal erwähnt habe:
import caurina.transitions.*
function voteLoad(score,voters){
    for(k=0;k<5;k++){
        sterne["stern"+(k+1)]._visible = false
    }
    sc_int = Math.floor(score/1000 - 0.0001)
    sc_fl = score/1000 - sc_int
   
    for(i=0;i<sc_int;i++){
        sterne["stern"+(i+1)]._visible = true
        sterne["stern"+(i+1)].st_bg._x = 0
    }
    sterne["stern"+(sc_int+1)]._visible = true
    sterne["stern"+(sc_int+1)].st_bg._x = -sterne["stern"+(sc_int+1)].st_bg._width*(1-sc_fl)

    Tweener.addTween(sterne,{_alpha:100,time:0.9,transition:"linear"})
}

Das Endresultat sollte nun so ausschauen:
(nur online verfügbar)


Jetzt müssen wir nur noch den Upload programmieren!


Schritt 9 (Bewertung auf dem Server eintragen):

Jetzt müssen wir auf jeder Stern-Hitbox abfragen, ob man draufgedrückt hat.
Dafür schreibt noch zu dem onRollOver und onRollOut-Script:

st1.onPress = function () {
    vote(1)
}
st2.onPress = function () {
    vote(2)
}
st3.onPress = function () {
    vote(3)
}
st4.onPress = function () {
    vote(4)
}
st5.onPress = function () {
    vote(5)
}


Nun, wenn man z.B. auf den 3. Stern drückt, dann ruft Flash die funktion "vote(bewertung)" mit 3 Sternen auf, welche wir jetzt gleich programmieren:

function vote(s){
    Mouse.show()
    n_score = Math.floor((c_score*c_vote + s*1000)/(c_vote+1))
    sendVote(n_score,(c_vote+1))
    }
}

Hier wird noch nichts an den Server gesendet, aber es wird ausgerechnet, wie die Bewertung nach der Abgabe deiner Bewertung sein wird.
Mit der funktion "sendVote" werden die Daten endgültig gesendet:

function sendVote(s,v){
    var sv:LoadVars = new LoadVars()
    sv.file = "vote1.txt"
    sv.content = "&score=" + s + "&&voters=" + v + "&"
   
    sv.sendAndLoad("http://deindomain/votes/write_data.php",sv,"POST")
    sv.onLoad = function () {
        Tweener.addTween(SterneAusgewählt,{_alpha:0,time:0.35,transition:"linear"})
        voteLoad(s,v)
        st1._visible = false
        st2._visible = false
        st3._visible = false
        st4._visible = false
        st5._visible = false
    }
}


Man kann sehen, dass die Daten an eine PHP-Datei gesendet werden.
Diese erstellt ihr am besten mit Dreamweaver. Falls ihr so ein Programm nicht habt, könntet ihr auch den Windows Editor hernehmen und dann als .php speichern!
Der Inhalt der PHP würde dann so sein:

<?PHP
$information = $_POST["content"];
$datei_handle=fopen($_POST["file"],"w+");
fwrite($datei_handle,$information);
fclose($datei_handle);
?>


Die Daten, die von Flash geschickt werden (sv.file = "vote1.txt"   ;    sv.content = "&score=" + s + "&&voters=" + v + "&") werden in der php mit $_POST aufgefangen.
Dann wird die Datei mit dem "w+"-Modus geöffnet...dieser bewirkt, dass der komplette Inhalt der Textdatei gelöscht und der neue Wert hineingeschrieben wird.

Speichert diese PHP-Datei unter dem Namen "write_data.php" und ladet diese php-Datei über ftp neben eure "vote1.txt"-Datei!



So, ich hoffe, dieses Tutorial hat euch allen ein bisschen geholfen!
Wer jetzt nicht mitgekommen ist, kann sich die Arbeitsdateien herunterladen ;)
(Die Arbeitsdateien haben noch ein paar Extras, aber die hier noch zu erklären, würde alles doppelt so lang machen ;))


Vielen Dank für eure Aufmerksamkeit!


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Tragg0r
  • 10.02.2011 - 11:49

Super geil! Danke danke danke!!!

Portrait von Daniel_Knecht
  • 04.02.2011 - 22:06

Super. Werde ich bei Gelegenheit die nächste Zeit mal Ausprobieren. Danke :)

Portrait von Susan99
  • 20.08.2010 - 21:53

Klasse. Vielen Dank!
LG Susan

Portrait von flashpit
  • 17.08.2010 - 14:57

...dafür gibt's 5 Sterne !!!!!

Portrait von support_teg
  • 01.05.2010 - 10:07

echt klasse kann ich immer wieder verwenden!!! Super

Portrait von fetterwurm
  • 23.04.2010 - 20:17

Sehr cool. Das kann man doch immer mal gebrauchen. Vielen Dank

Portrait von Susan99
  • 23.04.2010 - 15:36

Danke vielmals! Ein sehr schönes und verständliches Tutorial.
Davon müsst es mehr geben .... .-))

Liebe Grüsse
Susan

Portrait von helgeschneider
  • 22.04.2010 - 11:36

Super gemacht, hoffentlich gibt noch weiter so informative Tuts von dir.

Portrait von suti5
  • 21.04.2010 - 21:37

Sehr gute Beschreibung.

Portrait von mfgleo
  • 20.04.2010 - 06:24

Super Tutorial! Sehr ausführlich beschrieben!

Portrait von buhu
  • 18.04.2010 - 15:01

Hi! habe leider noch recht wenig Erfahrung mit Actionscript daher eine Frage: ist es möglich anstatt der statischen Text-Datei auch eine PHP Datei mit einem Parameter anzusprechen? Ich denke da z.B. an ein PHP Script welches mithilfe einer übergebenen ID die Daten aus einer MySQL Datenbank holt. Also in etwa sowas hier: lv.load("http://deineseite.de/votes/getVote.php?id=23",lv) --> Funktioniert sowas mit ActionScript?

Gut gemachtes TUT =D

Portrait von NitroMani
  • 18.04.2010 - 16:08

Selbstverständlich!

Das ganze Tutorial hätte ich auch auf MySQL Basis machen können, doch dann wär das ganze noch etwas komplizierter! ;)

rein Flash-technisch ist das überhaupt kein Problem:

um Daten einer php Datei zu empfangen, benutzt man genau die selbe Methode wie bei einer textdatei.

angenommen der Bewertungsvariable in der getvote.php heißt $Bewertung und die Anzahl $Anzahl (die Werte hast du ja schon aus MySQL ausgelesen und in die variablen geschrieben.)
damit Flash nun dieses variablen empfängt, musst du einfach folgendes machen:

echo "score=" . $Bewertung;
echo "&votes=" . $Anzahl;

im Endeffekt wird das was mit Echo zurückgegeben wird als textdatei gesehen.

Das mit der ID verstehe ich leider nicht ganz, aber wenn du diesen Parameter trotzdem in php empfangen willst, dann musst du folgendes schreiben

$ID = $_REQUEST["ID"];

($ID ist dann der wert den du beim Aufruf übergibst)

ciao

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.04.2010 - 23:03

Trotz dass das Tutorial gut geschrieben ist, habe ich ein bisschen Kritik anzuwenden:
Für Anfänger ist das Tutorial kaum geeignet. Man merkt zwar, dass Du Dir Mühe gegeben hast, es zu Strukturieren, aber man kommt doch durcheinander.
Das Mausverschwinden finde ich auch nicht so gut.
Und, was eigentlich wichtig ist: Man muss für jede zu Bewertende Sache einen neuen Ordner mit einer neuen *.fla, *.php und *.txt oder am Besten noch einem neuen "com"-Verzeichnis erstellen. Das könnte auch anders gelöst werden!
Ich hoffe, meine Kritik kann Dir weiter helfen!
Grüße photoedit

Portrait von NitroMani
  • 18.04.2010 - 14:25

Hey photoedit,

danke für deine Kritik!
Sie hat mir weitergeholfen! ;)

Das dieses Tutorial nicht für Anfänger ist, sollte ich sicher noch erwähnen!

Das mit dem com/php/fla/... Ordnern ist bei größeren Projekten sicher ein Vorteil, doch bei so einem kleinen Projekt. Finde ich sowas ein wenig überflüssig.
Außerdem geht das mit dem COM Ordnern doch eher zu Klassen hin, und das ist doch nochmal ein anderes Kapitel.

Ciao

Portrait von jojoho
  • 17.04.2010 - 00:15

Super sache.. Das Mausverschwinden is mir auch negativ aufgefallen. Aber kann ja jeder machen, wie er will..

Portrait von Datapixel
  • 16.04.2010 - 19:38

Sehr gute Beschreibung.

Portrait von statistiker
  • 16.04.2010 - 09:39

Top Tutorial, aber wieso verschwindet die Maus immer?

Portrait von SineTempore
  • 16.04.2010 - 17:09

wegen der zeile Mouse.hide(). einfach weglassen und die maus bleibt da

Portrait von mitstreiter
  • 16.04.2010 - 09:25

das isn cooles tutorial! thx!

x
×
×