Entwickelt wurde sie mit dem Corona SDK von Ansca Mobile, das es ermöglicht, native Apps in der Skriptsprache LUA zu programmieren. Dadurch kann man Animationen und grafische Effekte ressourcenschonend umzusetzen, ohne sich mit Objective-C und Speichermanagment herumzuplagen. Wer bereits Erfahrungen in ActionScript gesammelt hat, wird sich hier recht schnell zurechtfinden – das Corona Team arbeitete früher für Adobe an deren Flash Lite.

Wer selbst etwas in Corona realisieren möchte, dem sei noch Eclipse mit dem Plugin LUA-Eclipse als Editor ans Herz gelegt. Zwar muss man trotzdem ohne Code-Completion auskommen, hat aber zumindest Syntaxüberprüfung und kann, so man vom Mac OS nicht angetan ist, auch unter seinem gewohnten Betriebssystem entwickeln. Ein Mac zum Kompilieren wird allerdings trotzdem benötigt.

Die App is kostenlos im iTunes Store verfügbar:

Rose Bike Bell

Das Problem: Wir haben im Netzwerk mehrere Virtual-Boxen mit Bridged-Networks zu den Host-Rechnern im Einsatz. Je mehr Boxen aktiv waren, desto häufiger kam es zum Problem, dass die Systeme kurze oder auch lange Netzwerk-Unterbrechnungen hatten. Waren nur wenige Boxen (2) aktiv, waren kaum Aussetzer bemerkbar.

Die Lösung: Ursache des Problems war, dass alle Boxen von einer Master-Box kopiert wurden und daher die MAC-Adressen der virtuellen Netzwerkadapter gleich waren. Das hat scheinbar zu Konflikten über die einzelnen Systeme hinaus geführt. Nach Neugenerierung der MAC-Adressen läuft nun alles glatt.

Bitmap( image.content ).smoothing = true;

Auch ich habe viele diese Methoden probiert doch keine hat zum gewünschten Ergebnis geführt. Wer also in AIR entwickelt und bei dem diese Methoden auch nicht funktionieren, dem empfehle ich eine einzelne Zeile Code:

this.stage.quality = StageQuality.BEST;

Da AIR auf dem Desktop läuft ist dies mit gutem Gewissen im Performancebereich möglich.

In dieser Seite steckt sehr viel Handarbeit im traditionellen Sinn. Gut 9 Monate wurden Schweiß, Blut und vor allem Sägespäne vergossen, das Ergebnis ist nun hier zu betrachten…

Inspiriert von unseren Arbeiten im Stop-Motion-Bereich und Filmen wie Wes Andersons Tiefseetaucher entstand eine kleine Welt voller brodelnder Vulkane, geheimnisvollen Schätzen, furchterrgenden Ungeheuern, einem U-Boot im Steam-Punk-Style und einer liebenswerten Krake.

Die kleine Welt entstand auf Scheiben, die sich, je nachdem wo man sich befindet, zueinander verschieben und immer wieder neue Teilwelten offenbaren. Die Himmelsscheibe dreht dabei abhängig der Tageszeit ein, so dass der Nutzer, betrachtet er die Seite Nachts, auch auf der redhotmagma Insel in Zwielicht agiert.

Der besondere Look der Seite wurde durch ein außergewöhnliches Vorgehen erreicht: Alle grafischen Elemente wurden zunächst auf Sperrholz aufgezeichnet, koloriert, fein säuberlich ausgesägt und schließlich in unserem Studio fotografiert. Lediglich das finale Farb-Grading wurde nachfolgend in Photoshop erreicht.

Das “Zusammenbauen” der Seite erfolgte dann traditionell in Flash und Actionscript 3. Das Deeplinking wird durch swfobject und eine flexible XML-basierte Engine erreicht, die pro Einstieg beliebeige Animationen und Zustände abhandelt.

Wir wollen mit der Seite zeigen, dass Kreativität online und Kreativität offline sich nicht ausschließen, dass traditionelle Muster der Darstellung durchbrochen und mit beliebigen medialen Einflüssen ohne weiteres vermengt werden können.

Ein besonderer Dank gilt dem leitenden Programmierer, Matthias Palme, und unserem Art Director Adrian Marhoffer, die große Teile des Projekts schulterten.

Wir wünschen viel Spaß mit unserer neuen Website

www.redhotmagma.de/experience

Es wird empfohlen, die wunderliche Unter- und Überwasserwelt spielerisch und explorativ zu erforschen – wer Angst hat, nicht alles zu entdecken, darf natürlich auch die herkömmliche Navigation zur Hilfe nehmen.

http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html

Fernab von Apples fast schon propagandistischer Interpretation der Dinge rate ich aber, wie viele echte und vor allem unabhängige Stimmen, davon ab, schwarzweiß zu malen. Das video-Tag ansich bietet in der einfachen Einbindung von Videos viele Vorteile. Und HTML5 und CSS3 wird, wenn die Standardisierung besser klappt als bei allen HTML/CSS-Versionen zuvor (was es abzuwarten gilt) kann durchaus mächtig sein. Der Weg dorthin ist jedoch noch lange.

serialize verwandelt die Felder eines beliebigen Formulars in eine Paramterstring, etwa:

var data = $('#my-form').serialize();

$.ajax({
type: ‘POST’,
url: ‘/my-script.php’,
data: {‘data’ : data}
});

Die PHP Seite macht dann mit parse_str ein Array mit den Werten. So können die Feldnamen z.B. auch unbekannt sein:

$data =$_REQUEST['data'];

// Params Array zu lokaler Variable wandeln
parse_str($data, $output);
var_dump($output);

Mehr Infos unter: http://www.redhotmagma.de/business/facebook_apps.php

Als erstes sollte bei dem Anlegen von der Facebook-Anwendung darauf geachtet werden, dass als Rendermethode das Iframe verwendet wird.

Facebook Application Settings

Die URL, der Seite, die in das Iframe geladen werden soll, muss unter “Canvas Callback URL” eingetragen werden. In diesem Fall liegen die Dateien von Elferchallenge auf elferchallenge.de.

Zur weiteren Vorbereitung sollte das PHP-SDK für die Facebook-API heruntergeladen werden. Das Software Development Kit basiert auf Curl und einer Session, die mithilfe eines Cookies gespeichert wird. Da kommen schon die ersten kleinen Probleme auf: Cookies in Iframes? Die meisten Browser akzeptieren keine Third Party Cookies von Haus aus, sodass ein anderer Weg zur Sessionübergabe verwendet werden sollte. Dazu später mehr.

Damit sich zuerst einmal die Anwendung auf Facebook authentifizieren kann, können bei dem Konstruktoraufruf des API-SDKs von Facebook Parameter zur Authentifizierung mitgegeben werden.

$this->facebook = new Facebook(
    array(
        'appId'  => '66947884760',
        'secret' => 'your secret key'
    )
);

Damit sich nun auch noch der Benutzer mit der Anwendung authentifizieren kann, muss überprüft werden, ob eine gültige Facebook-Session vorhanden ist. Wenn der Benutzer authentifiziert ist, wird die aktuelle Facebook-Session in der lokalen Session abgespeichert, ansonsten muss sich der Benutzer mit der Anwendung (neu) authentifizieren.

Mit der Funktion checkLogin() erfolgt diese Überprüfung. Der Parameter $boolIsApiCall wird verwendet um zwischen API-Aufrufen vom Actionscript und Seitenaufrufe von Benutzern zu unterscheiden. Wenn der Benutzer die Seite aufruft und noch nicht authentifiziert ist, wird er direkt zur Authentifizierung weitergeleitet. Bei den API-Aufrufen wird der Text ‘reload’ ausgegeben, welcher im Actionscript als Neuladen der Seite interpretiert wird.

private function checkLogin( $boolIsApiCall = true ) {
    if ( $this->logged_in() ) {
        $facebookSession = $this->facebook->getSession();
        $_SESSION['fb'] = serialize( $this->facebook->getSession() );
    }
    else {
        $this->login( $boolIsApiCall );
    }
}

private function logged_in() {
    $session = $this->facebook->getSession();

    if ( isset($session) && (($session['expires']) > time()) ) {
        return true;
    }
    return false;
}

private function login( $boolIsApiCall ) {
    $nextUrl = 'http://apps.facebook.com/elferchallenge/';

    // Facebook Iframe Bug in Opera -> iframe too small
    // if browser is opera overwrite $nextUrl
    if ( strstr($_SERVER["HTTP_USER_AGENT"], 'Opera')) {
        $nextUrl = 'http://elferchallenge.de/';
    }

    if ( $boolIsApiCall == true ) {
        echo 'reload';
    }
    else {
        // build login url
        $url = $this->facebook->getLoginUrl(
            array(
                'req_perms' => 'publish_stream,read_friendlists',
                'fbconnect' => '0',
                'api_key'   => 'f99b1c470160abdf236e8fbbecf2194b',
                'next'      => $nextUrl
            )
        );
        // redirect to page
        echo 'top.location.href = "' . $url . '";';

    }

    // stop other output
    die();
}

Nachdem der Benutzer sich mit der Anwendung authentifiziert hat, gibt Facebook seine Session als JSON-Parameter mit. Diese Facebook-Session wird, wie oben beschrieben, lokal abgespeichert.
Bei der Elferchallenge wird die lokale Session, genauer die lokale Session-ID, über die URL mitgegeben. Beim Aufruf von der Anwendung wird die lokale Session-ID einmalig an das Flash übergeben und von dort an bei jedem API-Aufruf an PHP mit übergeben.

Hier sind zwei Beispiele wie mit dem PHP SDK an die GRAPH-API von Facebook Anfragen gesendet werden.

$params = array(
    'fields' => 'id, name, picture'
);
$friendInformation = $this->facebook->api(
        '/me/friends',
        'GET', $param
    );

In diesem Beispiel werden von allen Freunden jeweils Facebook-ID, Namen und Profilbild-URL abgerufen.

private function writeToWall( $message, $picture = '', $link = '',
                              $caption = '', $name = '',
                              $description = '', $facebookId = 'me'
                             ) {

    $params = array(
        'message'      => $message,
        'picture'      => $picture,
        'link'         => $link,
        'name'         => $name,
        'caption'      => $caption,
        'description'  => $description
    );

    $result =  $this->facebook->api(
                                     '/' . $facebookId . '/feed',
                                     'post',
                                     $params
                                   );

    if ( empty($result) ) {
        return false;
    }

    return true;
}

Die Funktion writeToWall() macht es möglich, an die eigene oder an die Wand von einem anderen Facebook-Benutzer zu schreiben.

Der Grundstein ist gelegt!

Flash bzw. das Actionscript sendet nun Http-Requests an die PHP-Datei und bekommt die aufbereiteten Daten zurück, welche im Flash dargestellt werden. Von der PHP Seite aus, wird dann zum Einen mit Facebook und zum Anderen mit der Datenbank kommuniziert.
Bei der Freundesrangliste wird das sehr deutlich. Es werden zwei Datenquellen benötigt. Die Eine ist Facebook und die Andere die lokale Datenbank. Diese Daten werden verbunden und es wird die Rangliste der Freunde erstellt. Bei einem API-Aufruf vom Flash wird aus der Rangliste ein JSON-String erstellt, welcher an das Flash zurück gesendet wird.

In der 3ten Phase erhällt der Benutzer Informationen über Herausforderungen anderer Spieler, fertig gespielte Spiele und eine Rangliste die in eine Länder-, Einzel- und Freundeswertung unterteilt ist, auf die ich später noch einmal eingehen werde, desweiteren wird unter der Rangliste noch ein Spieler aus der vorher ausgewählten Nation mitsamt den gesamt gespielten Spielen, den gewonnen Spielen, verlorenen Spielen, unentschieden ausgegangenen Spielen, die Punkte und die Platzierung angezeigt.
Zusätzlich besteht die Möglichkeit alle Listen zu aktualisieren, eine Hilfestellung einzusehen oder bereits hier die Geräusche abzustellen. Diese Einstellung wird in einem Flashcookie also einem SharedObject ( Actionscript 3 ) gespeichert.

protected var muteCookie:SharedObject =
SharedObject.getLocal("Elferchallenge_Cookie");
...
muteCookie.data.soundONOFF = muteClicked;
muteCookie.flush();

Der Vorteil eines Flashcookies im Vergleich zu einem normalen Cookie besteht darin, dass ein Flashcookie direkt in das Dateisystem gespeichert wird und nicht vom jeweiligen Browser verarbeitet wird. Um einen Spieler innerhalb seiner Facebookfreunde herauszufordern muss man nur auf den Button “Challenge!!!” klicken, hierbei werden alle Freunde eines Spielers aus dem Ergebnis eines vorher abgesetzten PHP Aufrufs angezeigt. Nun kommt man in die 4te Phase in welcher man die 5 Schuss und 5 Haltepositionen wählt. Jeder vorher auf der Stage platzierte Ball, und auch Handschuh, besteht aus einem Objekt in dem der Movieclip und eine Zählvariable angegeben sind, dies war notwendig um auf die Position die der Benutzer wählt, die in beliebiger Reihenfolge stattfinden kann, zuzugreifen.

for( var i:int = 0; i < 5; i++ ) {
    ballArray[i] =  {image:AssetManager.getAsset( "ball" )
                        as MovieClip, id:i };
    handsArray[i] = { image:AssetManager.getAsset( "handschuhe" )
                        as MovieClip, id:i };
    numberArray[i] = i;
}

Nun kann der Benutzer entscheiden, ob er den Spieler wirklich Herausfordern möchte oder ob er dies doch nicht mehr möchte, auf jeden Fall wird nun ein dispatchEvent geworfen anhand dem dann ein PHP Aufruf mit einer Objektklasse gesendet wird und der Screen gelöscht werden kann. Die Objektklasse hat lediglich die Aufgabe die übergebenen Parameter, wie Spieler-ID und die Postionen, in ein MatchObject zu speichern, welches dann innerhalb von PHP verarbeitet werden kann.

matchObject.mID = mID;
matchObject.cName = cName;
matchObject.cID = cID;
matchObject.cShots = cShots;
matchObject.cBlocks = cBlocks;
matchObject.cNation = cNation;
matchObject.oName = oName;
matchObject.oID = oID;
matchObject.oShots = oShots;
matchObject.oBlocks = oBlocks;
matchObject.oNation = oNation;
matchObject.maxPage = maxPage;

Die 5te Phase besteht darin sich ein Spiel an zugucken um es Schlussendlich zu beenden und die Punkte, egal ob Sieg, Niederlage oder Unentschieden, zu vergeben. Bevor die Animation jedoch abgespielt werden kann, wird anhand der vorher gewählten und in einer Datenbank via PHP abgespeicherten Nation die entsprechende Spieler SWF-Datei geladen. Danach werden die gesamten Animationen von einer Funktion überwacht womit gewährleistet ist, dass die Animationen gleichmäßig abgespielt werden. Wenn alle Animationen abgespielt sind, kann nun wieder ein dispatchEvent geworfen, anhand dem dann die 6te Phase gelangt und eine neue Klasse gerufen wird welche den Endstand des Spieles anzeigt und ein weiterer PHP Aufruf der das Ergebnis in die Datenbank speichert und es dann aus der Liste der gespielten Spiele gelöscht wird. Hier besteht dann noch die Möglichkeit den Spieler erneut zu fordern.

Im Informationsbereich wieder angelangt werden die Listen automatisch aktualisiert. Nun möchte ich auf die Highscoreliste etwas näher angehen. Die Highscoreliste besteht aus mehreren Bereichen, zuerst ein mal der Navigationsbereich oben rechts in dem man sich die verschiedenen Listen angucken kann, dann der Bereich direkt darunter in dem der Inhalt der jeweiligen Liste angezeigt wird, danach folgt eine kleine Navigationsleiste auf der die Seitenanzahl und Navigationspfeile angezeigt werden und ganz unten ist der Bereich in dem die aktuelle Position des Spielers zwischen den anderen Spielern der jeweiligen Liste angezeigt wird. Alle Listen werden per PHP Aufruf empfangen und verarbeitet. Dabei besteht jede Liste aus 2 Objekten, zum einen die eigentliche Liste und zum anderen die jeweilige Platzierung. In der Länderrangliste gibt es zu dem eine Besonderheit zu lösen. Das Objekt welches die Informationen besitzt gibt nur die Länderkürzel mit, also musste zuerst das gesamte Array durchsucht und die Länderkürzel durch die ganzen Ländernamen ersetzt werden.

for each( var element:Object in arr ) {
    if( ( element != null ) && ( element != "null" ) ) {
        if( translator.iso == "de" ) {
            fullName.push( {place:element.pos,
            cName:ElferchallengeConfig.fullCountryNameDE[
                ElferchallengeConfig.countryArray.indexOf(
                element.iso,0 ) ],
	    country:element.iso,
	    games:element.total_played,
	    wins:element.wins,
	    losses:element.losses,
	    draws:element.draws,
	    punkte:element.points} );
	}
	else {
	    fullName.push( {place:element.pos,
	    cName:ElferchallengeConfig.fullCountryNameEN[
               ElferchallengeConfig.countryArray.indexOf(
               element.iso,0 ) ],
	    country:element.iso,
	    games:element.total_played,
	    wins:element.wins,
	    losses:element.losses,
	    draws:element.draws,
	    punkte:element.points} );
	}
    }
}

Das gleiche muss, durch die Möglichkeit zwischen Deutsch und Englisch hin und her zu schalten, auch für die Englische Sprache verarbeitet werden.

Das war also ein kleiner Einblick in den technischen Flash Teil von Elferchallenge, man liest sich.

INSERT INTO … ON DUPLICATE KEY UPDATE …

http://dev.mysql.com/doc/refman/5.0/en/insert-on-duplicate.html