AS3 Data inlezen van PHP/MySQL

[Pykow]

Beste tweakers,

Ik ben bezig met een diavoorstelling te maken voor op een website. Deze website maakt gebruik van een MySQL Database en PHP.

Met JavaScript ben ik beperkt om dit goed te kunnen maken.

MySQL Database:
ID FotoBoek = 1
Interval = 3000 (3 seconde)

Ik wil dus dat de Foto's uit de fotoboek gebruikt kunnen worden in mijn Flashbestand en dat de interval meegestuurd kan worden.
De gebruiker kan in mijn applicatie aangeven Welke FotoAlbum ze willen gebruiken en hoeveel seconde er tussen de foto's moeten zitten.

Mijn vraag is dus. Hoe kan ik er voor zorgen met ActionScript3 dat hij deze data uit mijn MySQL Database leest en gebruikt.

var interval = 3000;
Moet dus worden
var interval = $_GET['Interval'];

Please ik kom er niet uit

[Verwijderd]

Bedoel je niet gewoon

code:

<script>
var interval=<?php echo $interval; ?>;
</script>

waarbij je dus mbv PHP de uit MySQL opgehaalde informatie 'injecteert' in javascript?

[Pykow]

Verwijderd schreef op woensdag 24 februari 2010 @ 16:16:
Bedoel je niet gewoon

code:

<script>
var interval=<?php echo $interval; ?>;
</script>

waarbij je dus mbv PHP de uit MySQL opgehaalde informatie 'injecteert' in javascript?

Met de PHP Pagina zorg ik ervoor dat de gebruiker Data in mijn MySQL Database kan Wijzigen.
Zoals de interval te wijzigen naar 3 seconden.
Zodat in mijn flash om de 3 seconde de foto wijzigt of laat zien
Ik wil dus de DATA uit mijn MySQL Database gebruiken in Flash

Wat jij zegt is alleen voor javaScript dat heb ik ook geprobeerd.

code:

var internval;
<? 
$Interval = 3000;
Echo ('interval = $interval');
?>

[McVirusS]

De beste methode voor jouw project is denk ik een PHP bestand schrijven die XML output. Deze output kan je dan in AS3 inlezen.

Google maar eens op XML en actionscript 3.0.

[Pykow]

Ow leuk ik heb pas 1 keer met XML zelf gewerkt. Nu moet ik eerst gaan kijken hoe ik mySQL Data in een XML File krijg en daarna het inlezen van XML in flash

[disjfa]

angienl schreef op woensdag 24 februari 2010 @ 16:45:
Ow leuk ik heb pas 1 keer met XML zelf gewerkt. Nu moet ik eerst gaan kijken hoe ik mySQL Data in een XML File krijg en daarna het inlezen van XML in flash

Begin gewoon met het correct maken van xml vanuit php. Dan komt het koppelen aan flash daarna wel

Zo moeilijk is dat niet hoor

[Pykow]

Nou het maken van een XML file met PHP is nog wel lastig.

Dit zou mijn XML bestand moeten worden uiteindelijk

code:

<?xml version="1.0" encoding="utf-8"?>
<tblDIA>
    <FOTOBOEKNUMMER>1</FOTOBOEKNUMMER>
    <INTERVAL>3000</INTERVAL>
</tblDIA>

Maar Hoe krijg ik dit met PHP ? simplexml command of iets dergelijks

[HuHu]

angienl schreef op woensdag 24 februari 2010 @ 16:56:
Nou het maken van een XML file met PHP is nog wel lastig.

Dit zou mijn XML bestand moeten worden uiteindelijk

code:

<?xml version="1.0" encoding="utf-8"?>
<tblDIA>
    <FOTOBOEKNUMMER>1</FOTOBOEKNUMMER>
    <INTERVAL>3000</INTERVAL>
</tblDIA>

Maar Hoe krijg ik dit met PHP ? simplexml command of iets dergelijks

Met de XMLwriter.

[HuHu]

Je zou trouwens ook eens kunnen kijken naar Zend_Amf, een implementatie in PHP van Adobe's Action Message Format. Daarmee kun je communiceren tussen de Flash Player en PHP.

[McVirusS]

Wil je echt alleen die 2 waardes meegeven? En niet welke foto's er moeten worden geladen?

Want dan is zelfs XML overkill.

Je kan dan gewoon via FlashVars 2 waarden meegeven, kijk eens naar SWFObject en naar FlashVars.

[Pykow]

Even mijn opdracht in het kort:

Gebruiiker geeft aan dat FotoBoek 1 ( Voetbal) op de diavoorstelling moet komen
Flash moet er dan voorzorgen dat alle Voetbal Foto's uit FotoBoek 1 weergegeven wordt.
Daarnaast kan de gebruik ook aangeven hoesnel de dia's wisselen en dat is niet meer dat de gebruiker zegt. 3 seconde ( Dat is dan 3*1000 = 3000 milliseconde) en die 3000 moet dus ook ingelezen kunnen worden door flash

@mcVirusS. Dat is de bedoeling ja


Een koppeling maken met FLASH en MySQL/PHP heb ik nog nooit gedaan en daarom is dit best wel een pittige opgave voor mij. Daarom vraag ik dit aan jullie voor extra hulp

[Janoz]

angienl schreef op woensdag 24 februari 2010 @ 16:56:
Nou het maken van een XML file met PHP is nog wel lastig.

Dit zou mijn XML bestand moeten worden uiteindelijk

code:

<?xml version="1.0" encoding="utf-8"?>
<tblDIA>
    <FOTOBOEKNUMMER>1</FOTOBOEKNUMMER>
    <INTERVAL>3000</INTERVAL>
</tblDIA>

Maar Hoe krijg ik dit met PHP ? simplexml command of iets dergelijks

Nee, gewoon eens eventjes goed nadenken...

PHP:

<?xml version="1.0" encoding="utf-8"?>
<tblDIA>
    <FOTOBOEKNUMMER><?php echo $fotoboeknummer ?></FOTOBOEKNUMMER>
    <INTERVAL><?php echo $interval ?></INTERVAL>
</tblDIA>

Klaar

Waar je even goed op moet letten bij software ontwikkeling zijn de volgende 2 punten:
1 - breek je probleem eens op in kleinere deelstukjes. Jij vindt php samen met flash lastig, maar xml inlezen is weer simpeler. En xml met php maken is niet veel anders dan html maken met php. Dan heb je alvast twee simpelere deelproblemen
2 - Denk niet zo moeilijk.

[ Voor 20% gewijzigd door Janoz op 25-02-2010 09:39 ]

[Pykow]

UPDATE:

Ik ben even heel de dag flink bezig geweest met als resultaat dat ik heel veel data uit mijn XML kan lezen en in flash gebruiken.
Maar ik heb een groot probleem. Er verschijnt namelijk maar 1 foto. Mijn programma weet dat er 3 foto's in mijn XML bestand aanwezig zijn dus dat gaat goed. Toch laat hij alleen de laatste foto zien uit mijn fotoboek.
Ik zie het even niet meer. Het enigste wat ik merk is dat hij alleen de laatste opgehaalde Array(foto) op mijn flash pagina plaats.

Dit is mijn code:

code:

// SlideShow met XML File
//Gemaakt door Angelo van Erven
//25-02-10 14:00
//Versie 0.1

var imagesArray:Array = new Array();
for(var i:int=0; i <4; i++)
{
    var imageLoader:Loader = new Loader();
    imageLoader.x = 10;
    imageLoader.y = 25+(i*12);
    stage.addChild(imageLoader);
    imagesArray.push(imageLoader);
}
var urlArray:Array = new Array();
for(var j:int=0; j <4; j++)
{
    var imageRequest:URLRequest = new URLRequest();
    this.addChild(imageRequest);
    urlArray.push(imageRequest);
}

var dataXML:XML;
var xmlURL:URLRequest = new URLRequest("quizvragen.xml");
var xmlLoader:URLLoader = new URLLoader(xmlURL);
xmlLoader.addEventListener(Event.COMPLETE, test);




function test(ev:Event)
{
    dataXML = XML(ev.target.data);

         
    //var theURL:String = "images/plaatje1.jpg"; 
    for (var i:int = 0; i < dataXML.images.child("*").length();i++)
    {
    imageRequest[i] = new URLRequest(dataXML.images.image[i].@source);     
    imageLoader[i].load(imageRequest[i]); 
    imageLoader[i].contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
    }
          
            
    function onComplete(ev:Event)
    {
        addChild(imageLoader[i].content);
    }

    
    
}

Er gaat wat is met mijn ImagesRequest URL en mijn Loader. Kan iemand mij hierbij helpen

[ Voor 153% gewijzigd door Pykow op 25-02-2010 14:54 . Reden: ik heb 70% klaar ]

[Alfredo]

Daarvoor bestaat er dus AMF. Ik begrijp echt niet dat je vanuit PHP een XML bestand gaat genereren en dat dan inladen in Flash. Dat is dubbel werk, met AMF kan je gewoon de return values uit PHP inlezen. Maar goed, dat is iets voor de volgende keer misschien.

Voor je code, het gaat waarschijnlijk mis bij je geneste functie. De for lus erboven wordt sneller uitgevoerd dan het inladen van de afbeeldingen zelf. Tegen dat Event.COMPLETE wordt gedispatched, is i reeds gelijk aan 4 en wordt er dus 4x dezelfde afbeelding aan je stage toegevoegd.

Los daarvan is je code erg omslachtig geschreven. Je loaders en urlrequest hoeven niet op voorhand aangemaakt te worden en al zeker niet aan de displaylist toegevoegd worden. URLRequest extend de klasse Object, dat kan je zelfs niet aan je displaylist toevoegen.

Je data is dynamisch, je loops horen dat dus ook te zijn. Waarden daar hardcoden, is vragen om problemen. Nesten van functies is ook niet echt netjes en hier niet nodig/gewenst. Als laatste (en dit lost ook je probleem op), afbeeldingen laad je best sequentieel in. Dan kan je er ook een preloader aanhangen en weet je altijd wanneer je laatste afbeelding is ingeladen. Dus niet met een for loop, maar handmatig een teller aanmaken en als het complete event van afbeelding 1 wordt afgevuurd, dan pas afbeelding 2 inladen.

[Pykow]

Ja ik ben flink bezig geweest met mijn code in AS3 en het is me aardig gelukt.
De plaatjes worden opgehaald uit mijn XML bestand met de juiste path.
Hij laat nu het eerste plaatje in. Die gaat naar rechts en daarna komt me 2e plaatje. Wanneer alle voorbij zijn geweest begint die weer bij de eerste plaatje.
Dit is mijn code die ik daarvoor gebruik:

code:

var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
var imageLoader:Loader = new Loader();
var xmlString:String;
var container:Sprite = new Sprite();
var counter:int = 0;
this.addChild( container );
xmlString = "list.xml";
xmlLoader.load( new URLRequest( xmlString ) );
xmlLoader.addEventListener( Event.COMPLETE, xmlLoaded );
var klok:Timer = new Timer(200);
var snelheid:int = 1;
var aantal:int = 0;
        
function xmlLoaded( event:Event ):void
    {
        xml = XML( event.target.data );
        xmlList = xml.image;
        aantal = xml.child("*").length();
        fillContainer();
        klok.addEventListener(TimerEvent.TIMER, beweeg);
        klok.start();
            
    }
        
function fillContainer():void
    {
        imageLoader.x = 0;
        imageLoader = new Loader();
        imageLoader.load( new URLRequest( xmlList[ counter ].@source ) );
        container.addChild( imageLoader );
    }

function beweeg(ev:TimerEvent)
    {
        if(aantal > 0)
            {
                if(imageLoader.x > stage.stageWidth )
                {
                    
                    counter++;
                    snelheid = 3;
                    aantal--;
                    if(aantal > 0)
                    {
                        container.removeChild(imageLoader);
                        fillContainer();
                    }
                    klok.addEventListener(TimerEvent.TIMER, beweeg);
                }
                else
                {
                    
                    imageLoader.x +=snelheid;
                    snelheid++;
                }
            }
            else
            {
                aantal = xml.child("*").length();
                counter = 0;
                snelheid = 1;
                container.removeChild(imageLoader);
                fillContainer();
                klok.addEventListener(TimerEvent.TIMER, beweeg);
            }
    }

Zoals je ziet maak ik nu dus wel gebruik van een teller en ook kijk ik dynamisch hoeveel plaatjes er aanwezig zijn in mijn XML file.
Het nadeel is wel dat de plaatjes niet vloeiend weglopen en de plaatjes moeten elkaar overlappen eigenlijk.
zodat wanneer plaatje 1 naar rechts gaat, Dat je gelijk daaron plaatje 2 ziet. Wanneer plaatje 1 uit het scherm is moet plaatje 2 naar rechts gaan en plaatje 1 moet dan weer onder plaatje 2 komen. Ik weet nog niet hoe ik dit precies moet oplossen

[Alfredo]

Nu luister je niet meer naar het complete event, dat zou ik terug toevoegen.
En voor je tweede probleem, waarom laad je je afbeeldingen niet allemaal in? Dan kan je ze boven elkaar op je stage plaatsen en als er dan eentje wegschuift, is de volgende onmiddellijk zichtbaar. Je hoeft elke afbeelding dan ook niet opnieuw in te laden als je ze wilt tonen, dan kan je ze gewoon uit een array halen.

[Pykow]

Ja ik zal dus een Array moeten aanmaken voor me object Loader ( dat heet bij mij imageLoader)

dus dan krijg ik dus dit ongeveer

code:

for(var i:int = 0; i < xml.child("*").length();
{
imageLoader[i].x = 0;
imageLoader[i] = new Loader();
imageLoader.load( new URLRequest( xmlList[i].@source ) );
}

en dan in een tweede for lus iets van

code:

for(var J:int = 0; J < xml.child("*").length();
{
container.addChild(imageloader[J]);
}

of zit ik er helemaal naast ?
Ik zal de foto's zeker eerst in moeten laden omdat ik mijn XML File schrijf vanuit de server naar mijn Flash bestand en om steeds terug te koppelen naar de XML file op de server. Dat gaat niet echt super werken lijkt mij

[Alfredo]

Geen for lussen gebruiken, dan laad je ze parallel in en weet je niet wanneer je laatste afbeelding is ingeladen. Ik zou het zo doen:

code:

        var loader:Loader;
        var nextImage:String;
        var imageArray:Array = new Array();
        var i:uint = 0;

        loadImages( xmlList[i].@source );

        function loadImages( nextImage:String ):void
        {
            loader = new Loader();
            loader.contentLoaderInfo.addEventListener( Event.COMPLETE, completeHandler );
            loader.load( new URLRequest( nextImage ) );
        }
        
        private function completeHandler( event:Event ):void
        {
            // Event listener verwijderen, teller ophogen en afbeelding toevoegen aan array
            
            if ( i == xml.child("*").length() )
            {
                // Voer je slideshow uit
            } else {
                // Laad volgende afbeelding in
            }
            
        }

[Pykow]

code:

private function completeHandler( event:Event ):void
        {
            // Event listener verwijderen, teller ophogen en afbeelding toevoegen aan array
            
            if ( i == xml.child("*").length() )
            {
                // Voer je slideshow uit
            } else {
                // Laad volgende afbeelding in
            }
            
        }

Dit stukje snap ik niet helaal als ik kijk naar de code die ik nu heb.
Event listerner verwijderen ?, Counter++ of i++ want dan krijg ik dus dat die de eerste keer met 1 begint en niet met 0 ?
en afbeelding in een array stoppen op wat voor manier dan ?

[Alfredo]

angienl schreef op maandag 01 maart 2010 @ 09:39:
Event listerner verwijderen ?

Je voegt op loader.contentLoaderInfo een event listener toe. Bij het inladen van de volgende afbeelding doe je echter loader = new Loader() en voeg je weer een event listener toe. Doordat er nog een event listener gekoppeld is aan de oude variabele, gaat je garbage collector die nooit opruimen. Daarom verwijder je de event listener als hij niet meer nodig is (of je maakt hem weakly referenced, maar verwijderen is een goede gewoonte).

Counter++ of i++ want dan krijg ik dus dat die de eerste keer met 1 begint en niet met 0 ?

Nee, de eerste keer begint hij gewoon op 0. Je roept loadImages( xmlList[i].@source ); in het begin van je code op en i = 0 op dat moment. Je verhoogt de teller telkens als er een afbeelding is ingeladen.

en afbeelding in een array stoppen op wat voor manier dan ?

imageArray.push(loader.content), veel verder moet je het niet zoeken. Op het einde heb je dan een array van afbeeldingen, waar je eenvoudig kan doorlopen voor je slideshow. En als je op de laatste afbeelding zit, start je gewoon terug van index 0.

[Pykow]

Sorry maar ik kom dus echt niet verder met die stuk code die je mij stuurt.
Hij klapt er gelijk uit wanneer ik hem probeer op te starten met de foutmelding:
The Private Attribute be used only on class property definitions.
bron:Private function completeHandeler(event:Event):void

Dit is de code:|

code:

var container:Sprite = new Sprite();
this.addChild(container);
var nextImage:String;
var imageArray:Array = new Array();
var i:uint = 0;
var klok:Timer = new Timer(10);
var snelheid:int = 3;

xmlLoader.addEventListener( Event.COMPLETE, xmlLoaded );

function xmlLoaded( event:Event ):void
    {
        xml = XML( event.target.data );
        xmlList = xml.image;
        loadImages( xmlList[i].@source );
    }

function loadImages( nextImage:String ):void
     {
        loader = new Loader();
        loader.contentLoaderInfo.addEventListener( Event.COMPLETE, completeHandler );
        loader.load( new URLRequest( nextImage ) );
        container.addChild(loader);
        
     }
        
private function completeHandler( event:Event ):void
     {
        // Event listener verwijderen, teller ophogen en afbeelding toevoegen aan array
        
        i++;
        
            
        if ( i == xml.child("*").length() )
            {
               // Voer je slideshow uit
            } 
        else 
            {
                // Laad volgende afbeelding in
            }
            
      }

Ik weet niet wat er mis gaat. want ik geef toch waardes mee.
Als de XML klaar is met lezen doe ik LoadImage met de source van de eerste plaatje (index 0).
Dan gaat die als het goed is naar de functie Loadimages met de string (xmlList[0].@source)

Dan gaat die naar CompleteHandeler en dan klapt die er gelijk uit.
Wat is flash toch irritant als je alleen maar in C#,PHP hebt geprogrammeerd

[Verwijderd]

Er staat in je completeHandler geen call naar loadImages(xmlList[i].@source). En je doet niets wanneer alles ingeladen is.

Overigens is het ook perfect mogelijk om parallel alle images in te laden. Is veelal wat sneller. Bijvoorbeeld (uit het hoofd, niet getest):

Java:

import flash.display.Bitmap;
import flash.display.Loader;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.IOErrorEvent;
import flash.net.URLRequest;
import flash.display.LoaderInfo;

public class ImageLoader extends EventDispatcher {
    private var _imagesLoaded:int = 0;
    private var _images:Array;
    private var _bitmaps:Array;

    public function ImageLoader(images:Array) {
        _images = [];
        var img:Image;
        for each(var image:String in images) {
            img = new Image(image);
            img.addEventListener("complete", imageLoaded, false, 0, true);
            _images.push(img);
        }
    }
    
    private function imageLoaded(e:Event):void {
        Image(e.target).removeEventListener("complete", imageLoaded);
        _imagesLoaded++;
        // alle images ingeladen
        if (_imagesLoaded == _images.length) {
            _bitmaps = [];
            for each(var image:Image in _images) {
                _bitmaps.push(image.bitmap);
            }
            // vang dit event op
            dispatchEvent(new Event("complete"));
        }
    }
    
    // hiermee haal je je bitmaps op
    public function get images():Array { return _bitmaps; }
}

public class Image extends EventDispatcher {
    private var _url:String;
    private var _bmp:Bitmap;
    
    public function Image(url:String) {
        _url = url;
        loadImage();
    }
    private function loadImage():void {
        var loader:Loader = new Loader();
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded, false, 0, true);
        loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioError, false, 0, true);
        loader.load(new URLRequest(_url));
    }
    private function imageLoaded(e:Event):void {
        LoaderInfo(e.target).removeEventListener(Event.COMPLETE, imageLoaded);
        LoaderInfo(e.target).removeEventListener(IOErrorEvent.IO_ERROR, ioError);
        _bmp = Bitmap(LoaderInfo(e.target).loader.content);
        dispatchEvent(new Event("complete"));
    }
    private function ioError(e:IOErrorEvent):void {
        // bij parallel laden en een slechte verbinding zijn ioerrors niet uitgesloten
        // daarom gewoon opnieuw proberen, je kan hier best nog wel een maximum aantal retries voor
        // inprogrammeren als een image echt niet ingeladen kan worden
        loadImage();
    }
    
    public function get bitmap():Bitmap { return _bmp; }
}

[Pykow]

Ik wil even mededelen dat alles goed is gelukt qua animatie alleen zit ik nu met me laatste vraag over XML/PHP

Op welke manier moet/kan ik mijn PHP XML File gebruiken ?

Manier 1:

xmlScriptInstel.php

code:

<?php
     //XML Script voor Instellingen FLASH SLIDESHOW
     
     echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
     //snelheid
     $speed = 3;
     //Richting
     $richting = 1;
     //Animatie
     $animatie = 3; 
     //totaal beweging
     $beweging = $richting.$animatie;  
     echo"<instellingen>";
        echo"<instel>";
            echo"<speed>$speed</speed>";
            echo"<richting>$richting</richting>";
        echo"</instel>"; 
     echo"</instellingen>";
?>

Alleen dan heb ik toch geen XML file maar een PHP File gewoon met deze gegevens ?

[ Voor 255% gewijzigd door Pykow op 03-03-2010 14:12 ]

[Cartman!]

Zolang het maar valide XML oplevert (en juiste headers meestuurt) maakt het weinig uit hoe je t genereert, flash leest dat gewoon als 'echte' XML file.

[Janoz]

angienl schreef op dinsdag 02 maart 2010 @ 11:44:

Alleen dan heb ik toch geen XML file maar een PHP File gewoon met deze gegevens ?

Nee, je hebt ook geen php file. Je hebt een php script dat door de webserver uitgevoerd wordt. Dit script heeft als uitvoer data. Deze data wordt naar de client gestuurd. Meestal leveren uitgevoerde php scripts html data op, maar ze kunnen ook xml data, plaintekst of zelfs jpeg data opleveren. Om er iig voor te zorgen dat de gebruiker het type data kan herkennen is het af en toe wel handig om een content-type header mee te sturen. Daarin kun je aangeven of het om xml of een plaatje gaat.