<div id="tutorialrahmen">
Was wird gemacht?: ...
Zielgruppe: ...
Dauer: ca. xx Minuten
</div>
Scrollpanes
hier möchte ich anhand des Beispiels eines simplen Bookingkalenders für zb. Bands zeigen, wie man mehrere Datensätze mit PHP als Bridge aus MySQL ausliest und in Flash dann eine Scrollpane instanziert und mit diesen Inhalten füllt.
Außerdem ist ein simples Admintool zur Verwaltung der Dbase mitinbegriffen, sowie die mittlerweile schon obligatorische Flashdetection.
Die Verwendung der function.inc.php zum Escapen des Variablenseparators '&' in Actionscript, sowie die Funktion und Arbeitsweise der Flashdetection ist hier erklärt. Falls ihr noch keine Erfahrungen mit PHP, MySQL und Actionscript in diesem Zusammenhang habt, sollte ihr auch erst jenes Tutorial durcharbeiten.
Query.php
Beginnen wir hier dann direkt mit der Query.php
<?php
require_once('config.inc.php');
require_once('function.inc.php');
$i=0;
$read=mysql_query("Select date,event,location from $db_tab order by date desc",$handler);
while($a=mysql_fetch_array($read))
{
$result.='&date_'.$i.'='.charReplace::replace(utf8_ encode($a['date']));
$result.='&event_'.$i.'='.charReplace::replace(utf8 _encode($a['event']));
$result.='&location_'.$i.'='.charReplace::replace(u tf8_encode($a['location']));
$i++;
}
$result.='&repeats='.$i;
echo $result;
?>
Der Unterschied zum vorherigen Tutorial ist, das wir hier 3 Variablen definieren, welche pro Datensatz durchgezählt werden.
Diese Werte werden in folgendem Actionscript weiterverarbeitet.
//Actionscript 1.0
MovieClip.prototype.loader=function()
{
var scrollpane=_root.attachMovie('FScrollPan eSymbol','scrollpane',1);
scrollpane._x=0;
scrollpane._y=0;
scrollpane.width=500;
scrollpane.height=200;
var loader=new LoadVars();
loader.object=this;
loader.load('query.php');
loader.onLoad=function()
{
var base_x=10;
var base_y=0;
var container=createEmptyMovieClip('containe r',2);
for(var i=0;i<=this.repeats;i++)
{
var element=container.attachMovie('element', 'event'+i,i);
element.date=this['date_'+i];
element.event=this['event_'+i];
element.location=this['location_'+i];
element._y=base_y+(i*50);
}
scrollpane.setScrollContent(container);
scrollpane.setVScroll=false;
scrollpane.setHScroll=auto;
container._x=base_x;
delete this.object['loader'];
};
};
loader();
this.stop();
Das Interessante für alle, die bisher wenig mit Flash gearbeitet haben ist, das die Bühne vollkommen leer ist und alles per Script erstellt wird.
Zuerst wird die Scrollpane aus der Library auf der Bühne instanziert und in Bezug auf Größe und Platzierung definiert.
Anschließend liest nun das loadVars Objekt mittels der Query.php die Datensätze aus MySQL aus.
Dabei werden die Datensätze synchron ebenfalls mittels i-Zähler durchnumeriert. Das ganze geschieht in einer for-Schleife, dessen Terminierungswert wir von PHP übermittelt bekommen.
Es wird also ein leerer MovieClip dynamisch erstellt, in den wir dann pro Datensatz einen MovieClip einfügen.
Dieser MovieClip besitzt 3 Komponentendefinitionen als Eigenschaften vom Datentyp String. Diese 3 Eigenschaften werden in der for-Schleife mit den Werten aus PHP definiert, damit die in diesem MovieClip enthaltenen, dynamischen Textfelder ihren Inhalt zugewiesen bekommen können.
Die Position der einzelnen DatensatzMovieClips wird mittels des i-Zählers und der Multiplikation dessen mit dem gewünschten Abstand definiert.
Anschließend setzen wir den Container, der die Elemente enthält, als ScrollContent der zuvor instanzierten Scrollpane und definieren die Komponentenparameter bzw. Eigenschaften dieser bezüglich des horizontalen und vertikalen Scrollverhaltens.
Ist das geschehen, richten wir den Container in der Scrollpane nocheinmal aus, indem wir den Abstand zur linken Aussenseite relativ um 10px vergrößern.
Das war's.
Das mitingebriffene Admintool und dessen Funktionen brauche ich hier nicht näher zu erklären, da es den Rahmen des Flashforums sprengen würde.
Viel Spaß damit.
Angehängte Dateien
wechselseitige Kommunikation zwischen Actionscript, PHP & MySQL
Hi zusammen,
hier noch ein Tutorial, das auf dieses Tutorial aufbaut.
Dabei geht es darum, Inhalte zeitgesteuert auszulesen. Hier am Beispiel eine Flashchats, der allerdings aufgrund seines Performancehungers als Beta einzustufen ist. Das Beispiel dient also nur als Lernobjekt. Zum Testen unter realistischen Bedingungen gebe ich euch den Hinweis mit, das ich mit 25 Usern unseren dedicated SQL Server lahmgelegt habe. Teilweise waren bis zu 250 MySQL Transaktionen pro Sekunde zu verzeichnen.
Query.php
Fangen wir mit der Query.php an, die 2 Varianten des Auslesen bereitstellt, welche aus Flash gesteuert werden.
<?php
require_once('config.inc.php');
require_once('function.inc.php');
if($_POST['details']=='show')
{
$read=mysql_query("select user,timestamp,words from $db_tab order by id desc LIMIT 0,50",$handler);
while($a=mysql_fetch_array($read))
{
$result.=$a['user'].' '.$a['timestamp'].'
'.$a['words'].'
';
}
}
else
{
$read=mysql_query("select user,words from $db_tab order by id desc LIMIT 0,50",$handler);
while($a=mysql_fetch_array($read))
{
$result.=$a['user'].'
'.$a['words'].'
';
}
}
echo '&words='.charReplace::replace(utf8_encode ($result));
?>
Der erste Teil des Actionscript liegt auf dem Loginbutton, der den dort eingegeben Usernamen global als Variable definiert.
//Actionscript 1.0
on(release)
{
if(_root.userName.text!='')
{
_global.user=user;
this.gotoAndStop(_currentframe+1);
}
}
on(keyPress '<Enter>')
{
if(_root.userName.text!='')
{
_global.user=user;
this.gotoAndStop(_currentframe+1);
}
}
Im 2. Frame befinden sich dann die Funktionen, die für das Auslesen und Einfügen der Mitteilungen zuständig sind, sowie die Funktion der Checkbox, die definiert, ob das loadVars Objekt detailierte oder minimale Informationen (Datum, Uhrzeit) abfragen soll.
//Actionscript 1.0
var details=this.attachMovie('FCheckBoxSymbo l','details',1);
details._x=52;
details._y=380;
details.setLabel('Details');
details.setChangeHandler('detailsBox');
var detailsBox=function()
{
if(!details.getValue())
{
_global.details='hide';
}
else
{
_global.details='show';
}
}
details.setValue(true);
MovieClip.prototype.read=function()
{
var readContent=new LoadVars();
readContent.object=this;
readContent.details=_global.details;
readContent.sendAndLoad('query.php', readContent, 'POST');
readContent.onLoad=function()
{
_root.main.htmltext=this.words;
_root.read();
delete this.object['readContent'];
}
}
MovieClip.prototype.insert=function()
{
if(_root.userInput.text!='')
{
var insertContent=new LoadVars();
insertContent.object=this;
insertContent.words=words;
insertContent.user=_global.user;
insertContent.sendAndLoad('insert.php', insertContent, 'POST');
insertContent.onLoad=function()
{
_root.userInput.text='';
delete this.object['insertContent'];
}
}
}
this.read();
this.stop();
Neu ist hier also das Nutzen der Checkbox und die Integration ihrer onChangeHanlder in das LoadVars Objekt, welches mit sendAndLoad() eine wechselseitige Kommunikation mit PHP erlaubt. Wenn man nun eine stetige Refreshrate haben möchte, kann man entweder ein Interval für den Aufruf des Read Prototypes setzen, oder aber, man schreibt den Funktionsaufruf in einen onEnterFrame Handler, was allerdings zu den o.g. kritischen SQL-Queries führen wird.