Soeben ging der neue Auftritt der Werbeagentur Frau Lönne & Herr Baak live. Das schlichte stilvolle Layout hat uns inspiriert die Umsetzung mit HTML5 zu machen. So konnten wir insbesondere für mobile Endgeräte mit Bewegungssensor einen tollen WOW-Effekt spendieren. Pflegbar ist die Seite für die kreativen Techniklaien dank Wordpress als CMS. Mit dem neuen Auftritt kann sich die Agentur authentisch präsentieren: kreativ, schnell und innovativ.

Der neue Auftritt der Werbeagentur FRAU LÖNNE & HERR BAAK erhält seinen WOW-Effekt durch einen HTML5 Parallax-Effekt. Durch eine unterschiedlich schnelle Bewegung der verschiedenen Ebenen des Bildes, wird ein 3D Effekt simuliert. Was am PC durch die Mausbewegung erzeugt wird, wirkt noch viel besser auf dem iPad und dem iPhone durch Kippen der Devices.

Unsere Aufgabe lautete das vorhandene Layout zu würzen. Wir sind dem Prinzip “Less is more” gefolgt und haben die spannende Tiefe des Layouts aufgegriffen. Als kleines Bonbon haben wir der Seite ein kleines CMS spendiert, damit die Agentur alle Inhalte selbst pflegen kann. Als einfache und intuitive Lösung agiert dafür Wordpress hinter den Kulissen.

FRAU LÖNNE & HERR BAAK sagen SPITZE!

Aber wer ist das eigentlich?

FRAU LÖNNE & HERR BAAK machen Werbung – zusammen gerechnet seit über 40 Jahren, seit dem 01. Juli 2011 zusammen in Oldenburg.

Jetzt aber reinschauen – viel Spaß mit FRAU LÖNNE & HERR BAAK
http://www.frauloenneundherrbaak.de!

Als kleinen Bonus haben wir hier noch Video vom Foto-Shooting für die Website auf dem Flughafen:

Eilmeldung: In weniger als 2 Wochen ists soweit: FDT5 ist wieder Sponsor der beyond tellerand. Sie findet statt vom 20. bis zum 22. November in der wunderschönen NRW-Landeshauptstadt Düsseldorf. Powerflasher- und FDT-Blog Leser erhalten einen Rabatt von 10% auf die restlichen Eintrittskarten.

Powerflasher präsentiert auf der renommierten Konferenz FDT5, die freemium IDE für Interactive Developer mit viel Coding Comfort in Flash/Flex, Mobile und HTML5 / JavaScript / WebGL / PHP dank haXe.

Die beyond tellerrand bietet ein in Deutschland einmaliges Angebot: Drei sehr hochwertige Tage Konferenz und Workshops zum günstigen Preis. Vom 20. bis 22. November gibt es reichlich Updates für Web-Enthusiasten: Design, Technik, Inspiration und Networking. Am ersten Tag finden drei ganztägige Workshops mit Seb Lee-Delisle, Jeremy Keith und Vitaly Friedman statt. Jeder Workshop ist auf maximal 19 Teilnehmer begrenzt, damit es ein intensives und lernreiches Erlebnis für jeden Teilnehmer wird. Am zweiten und dritten Tag gibt es Vorträge von 15 hochkarätigen, international bekannten Sprechern. Alle Vorträge sind gefolgt von einer Q&A im Q&A-Café, wo man die Chance hat sich mit den Referenten auszutauschen und Fragen zu stellen.

Die Tickets für die Konferenz gibt es normalerweise €249,00 all inkl. Für treue Leser gibt’s hierauf nochmals Rabatt! Schreibt eine einfach eine Mail an contact@beyondtellerrand.com mit dem Hinweis auf diesen Blogpost und erhaltet das Ticket mit einem Rabatt in Höhe von 10%!

Wir haben mit dem FDT Team einen Stand und mischen uns wie immer unter die Menge. Als besonderes Erkennungsmerkmal tragen wir unsere neuen, extracoolen FDT5 Shirts, die sehen so aus:

Wir freuen uns darauf, eure Fragen, Anregungen und Kommentare zu FDT5 zu hören. Sprecht uns bitte unbedingt an.

Am Montag Abend wollen wir mit euch auf den Release anstoßen. Wir freuen uns euch gemeinsam mit beyond tellerrand ordentlich Freibier einschenken zu dürfen.

• GPU Rendering via Stage3D/Molehill
• H.264 Encoding
• Native JSON
• Captive Runtime Support
• Native Extensions
• …

Die Liste ist unendlich lang und noch nicht jedes Feature konnten wir genauer unter die Lupe nehmen. Aktuell entwickeln wir gerade Native Extensions für Android, also Schnittstellen, mit denen wir und ihr nativen Java Code über AIR 3.0 auf eurem Android Gerät ausführen könnt.

Diese möchten wir euch nicht vorenthalten und stellen sie deshalb auf github für euch bereit. Die API und Beispiele zu den einzelnen Sensoren und Services sind im github wiki dokumentiert. Bisher decken die Extensions folgende Features ab:

• AmbientLight Informationen abrufen
• Gyroscope Informationen abrufen
• Orientation (Kompass) Informationen abrufen
• Näherungssensor Informationen abrufen
• Battery Status abrufen
• Vibrationshardware ansteuern

Weitere Extensions werden in Kürze folgen, auch iOS steht auf unserer Liste.

Wir freuen uns auf euer Feedback.

Die Entwicklung von Mobile Apps ohne einen Debugger kann nervenraubend sein. Manchmal ist ein guter Logger, wie z.B. unser SOSmax bereits ausreichend, jedoch könnt ihr auch in FDT den Debugger dazu bringen, eure Android App live zu debuggen.

Alles was ihr tun müsst, ist beim Packagen eurer Android, Playbook oder iOS Applikation den zusätzlichen Parameter

-connect "IP EURES RECHNERS"

anzugeben und vor dem Starten der App den Debugger zu starten, z.B. bequem via eines unserer FDT Ant Tasks:

< fdt.startDebugger switchperspectiveonbreakpoint="true" projectname="Projektname" />

Beim Starten der App sollte sich diese mit dem Debugger verbinden können und bei euren gesetzten Breakpoints anhalten.

Viel Spaß.

Unter dem Titel “Into the molehill – Der Blick ins Loch” durfte ich eben auf der FFK11 meinen Vortrag über Molehill präsentieren. Im Vordergrund meines Vortrags stand der praktische Einstieg in die Entwicklung mit Molehill. Dazu wurden Grundlagen vermittelt, die Konfiguration der Entwicklungsumgebung erklärt, verschiedene Beispiele mit Away3d und M2D gezeigt sowie mögliche Einsatzgebiete vorgestellt.

Falls ihr euch die Folien oder Beispiele nochmal anschauen wollt, könnt ihr sie euch hier herunterladen:

• Folien: Into the molehill – Der Blick ins Loch
• FDT Beispiele: Molehill Beispiel-Projekte

Bevor ihr die Beispiele startet, solltet ihr eure Entwicklungsumgebung entsprechend konfigurieren. Wie das geht, ist hier detailliert beschrieben.

Mir hat der Vortrag auf jeden Fall viel Spaß gemacht und ich hoffe, dass ich bald von euch viele fantastische Molehill-Beispiele sehen darf! Viel Spaß beim Experimentieren!

„The Witness – The first movie in the outernet“ ist der erste interaktiven Film im Outernet. Das Projekt ist Bestandteil einer integrierten Kampagne von Jung von Matt/Spree für den Pay-TV-Sender 13TH STREET Universal. Der interaktive Film kombiniert Video-Sequenzen mit einem GPS-Real-Life-Game. Ihren ganz persönlichen Thriller erleben die Spieler mit einer iPhone Applikation, die von Powerflasher Hamburg entwickelt wurde.

Der Live-Event startet am 9. April 2011 in Berlin. Die Mitspieler sind dabei interaktiv an der Aufklärung des Thrillers beteiligt und müssen direkt an den unterschiedlichen Tatorten ermitteln. Über ihr iPhone erhalten sie wichtige Hinweise und Verfolgen das Geschehen über virtuell eingespielte Film-Szenen vor Ort.

Für „The Witness“ setzen die Powerflasher eine iPhone-App um, mit der Spieler sprichwörtlich zum Augenzeugen wird. Dabei verwendeten sie Technologien wie Augmented Reality (AR) zur Video-Einbindung und Location-based services (LBS), um Aktionen anhand des Standorts der Mitspieler auszulösen.

Ein Blick hinter die Kulissen.

Die App wurde komplett mit der nativen Sprache Objective-C für das iPhone entwickelt. So lassen sich die Eigenschaften des Smartphones optimal nutzen, um dem Spieler ein möglichst reales und involviertes Spielgefühl zu geben. Funktionen wie beispielsweise der eingebaute Kompass werden dadurch unterstützt. Per Kompass und Augmented Reality wird dem Spieler so z.B. die Richtung gewiesen, in der er die Kamera seines Handys bewegen muss um eine Videoszene abhängig von seiner Position im Raum zu starten.

Für ein möglichst involvierendes Spielerlebnis wurde zudem ein QR Code Scanner eingebaut. Benutzer scannen am Set versteckte Codes, die ihnen im Spiel wichtige Daten liefern. Je nachdem, wie der Spieler im Spielverlauf mit diesen Daten umgeht, wendet sich der Ausgang des Spiels zum Guten oder Schlechten.

Die Applikation verfolgt des Weiteren per GPS den aktuellen Ort des Benutzers (Location Based Services). Verlässt der Spieler einen Tatort, bekommt er eine Anweisung, wie er zum nächsten Ort des Geschehens kommt. Sobald er dort eintrifft, erkennt dies die Applikation uns startet das nächste Spiel-Level automatisch. Im interaktiven Spiel hat der Spieler an verschiedenen Punkten die Möglichkeit zu entscheiden, zu welchem Ort er als Nächstes geht. Diese Entscheidungen sind in der App berücksichtigt und verändern den Spielverlauf.

Je nach Spielstand erhält der Benutzer zudem Anrufe während des Spiels. Diese Anrufe werden von der App automatisch ausgelöst und als Sprachanrufe getätigt. Auch wenn die App nicht mehr aktiv oder im Vordergrund ist, erhält der Spieler alle Benachrichtigungen.

Powerflasher konnten bei „The Witness“ wieder mit den Partnern zusammenarbeiten, mit denen sie bereits im letzten Jahr erfolgreich der interaktive Horror-Film „Last Call“ für 13TH STREET Universal umsetzten. Das interaktive Film-Projekt, bei dem Zuschauer im Kino die Filmfigur per Handy steuern konnten, wurde international mit zahlreichen Awards ausgezeichnet. Auch zum neuen Projekt „The Witness“ lieferte Jung von Matt/Spree wieder Konzept und Idee. Für die Produktion zeichnet sich @radical.media und nhb Berlin verantwortlich.

Wie bei jeder Programmierung ist es oft nur wenig sinnvoll, das Rad neu zu erfinden. Bei fast jeder App, die wir mit Cocoa Touch und Objective-C entwickeln, kommen ein paar Libraries zu Einsatz. Ein paar gibt es nun hier kurz und knackig vorgestellt.

Für das Handling von Online Daten ist ASIHTTPRequest sehr angenehm. Es kann Download und Upload, synchron wie auch asynchron, handeln und unterstützt verschiedenste Arten von Requests, wie natürlich POST und GET, aber auch das Senden über Formularfelder. Vor allem in Verbindung mit dem json-framework kann man alles abdecken, was mit Remote Daten über Http zu tun hat. Das json-framework ist einfach in der Handhabung durch simples Dekodieren und Enkodieren von JSON Daten in Dictionaries. Und wenn die Daten aus dem Netz mal gezipped sind hilft ZipKit, eine Library für iOS und OSX zum Ver- und Entpacken von Daten in den verschiedensten Formaten.

Für QR Code Scanning kann ZXing („Zebra Crossing“) wärmstens empfohlen werden. Die bekannte Library von Google gibt es für verschiedenste Plattformen. Angenehm ist hier das einfache Skinning der Scan Komponente. Einfach einen ViewController das CaptureDelegate Protokoll implementieren lassen, ein paar Capture Methoden schreiben oder aus der Beispielimplementierung von ZXing nehmen und schon kann’s los gehen.

Für eine einfache Anbindung an Facebook gibt es auch für iOS Devices das Facebook iOS SDK, die bereits mit etwas GUI kommt. Über Facebook Sessions können alle Funktionen (auch mit der Graph API) ausgeführt werden, die das Social Herz begehrt. Nur beim Skinning mit unterschiedlichen Sprachlokalisierungen muss man etwas vorsichtig sein, da die GUI sehr an die englische Wortlänge angepasst ist.

Und zu guter Letzt ist, falls mal was nicht so gut läuft, auch eine Objective-C Schnittstelle zu unserem guten SOSmax Logger verfügbar. Mit soslog-objc ist das sehr bequeme Logging in die SOSMax Konsole möglich, wenn das iOS Device im WLAN hängt auch vom Device.

Was benutzt ihr so? Neue Frameworks, SDKs und APIs sind bei uns immer gerne gesehen und wenn sie gut sind, gibt’s vielleicht auch noch einen Blogbeitrag.

Mozilla Firefox hat ab Version 3.6.4 das Konzept der Plugin Container eingeführt. Dadurch soll das Abstürzen des Browsers bei Fehler in Browser Plugins wie Adobe Flash, Microsoft Silverlight oder Apple Quicktime verhindert werden. Durch dieses Konzept kommt es unter Windows aber anscheinend zu Problemen, wenn man Flash über das ExternalInterface eine Alert Box öffnet. In den meisten Fällen friert der Browser ein und es hilft oftmals nur das manuelle beenden des Prozesses “plugin-container.exe”.
Um diesen Problem vorzubeugen hilft es, die Alert Box nicht wie üblich einfach über die Funktion “alert()” aufzurufen, sondern das ganze über die Javascript timeout Funktion aufzurufen. Ein Aufruf würde dann so aussehen:

setTimeout("alert('Alert message with timeout of 1 ms')", 1);

Dadurch wird die Alert Box nicht sofort sondern erst nach einem kurzen Timeout aufgerufen, was das Problem behebt. Der Bug existiert bereits in der Mozilla Bugbase und man kann nur auf ein baldiges beheben hoffen.
Der Sourcecode mit einem einfachen Beispiel findet ihr hier: FirefoxJSBug

Mit Begeisterung präsentieren wir die Alpha Version des FDT haXe Plugins! Die Community wartet schon seit langer Zeit auf eine professionelle Entwicklungsumgebung für haXe Projekte.

In Kooperation mit Influxis hat sich nun das Powerflasher FDT Team dazu entschlossen haXe Support in FDT zu integrieren. Unser Ziel ist es dabei das beste Programmierelebnis für die multi-platform Sprache haXe zu bieten um den selben Coding-Komfort wie in ActionScript u. MXML zu erleben.

Hier eine Übersicht der Features in der Alpha Version:

• Live Error Checking
• Autocompletion (Variablen u. Funktionen)
• Syntax Coloring
• Code-Editierungs-Funktionen
• Open Type
• New Class/Interface/Enum Wizards

Eine genaue Installations- und Getting-Started-Anleitung sowie weitere Informationen gibt es hier am FDT-Blog.

Viel Spaß beim “haXen”,
@Michael_Plank

Warum haben wir uns auf unserer Webseite für Partikel entschieden? Die Partikel stehen symbolisch für das Team, den Spirit und die Energie der Powerflasher. Sie sind flexibel und passen sich agil den unterschiedlichsten Formen an. Außerdem sind sie schön anzuschauen und es macht Spaß mit ihnen zu spielen. Die Darstellung von Partikelströmen in Flash war eine tolle Herausforderung.

Wir setzen zwei Sorten von Partikeln ein.

1. Beim Rollover Effekt der Buttons werden Partikel in Pixelgröße eingesetzt. Diese wurden auf der Basis des Flint Partikel Systems umgesetzt.
2. Zwischen dem Hintergrund und den Inhalten bewegen sich Partikelströme in dreidimensionalen Raum. Die Tiefenwirkung entsteht durch den Einsatz von Flächen mit variierender Unschärfe. Diese Partikel sind hausgemacht.

Zu den hausgemachten 3D Partikelströmen.

Es gibt folgende Bewegungen:

• Zielpositionen in einem Screen ansteuern
• Der Maus folgen
• Anzeigen einer Form
• Interaktion mit Sound

So ergibt sich ein steter Wechsel an Interaktion. Die Ströme orientieren sich an den leitfarbenen Flächen der Inhalte, interagieren mit dem User, formen individuelle Hintergründe und synchronisieren ihre Bewegungen mit der Hintergrundmusik.

Ziel war es hohe Geschwindigkeiten über den gesamten Screen zu erreichen. Um schnell layouten zu können sollte die Konfiguration einfach sein.

Details zur Programmierung:

Optimierung der Render Performance

• Alle Partikel (Größe und Farbe) werden als Vektor von BitmapData vorberechnet
• Der Zugriff auf ein Partikel ist sehr effizient: circleParticles.particleImage[colorBucketIndex + imageSizeIndex]
• BitmapData liegt über der gesamten Bühnengröße. Um den Flash Redraw optimal klein zu halten wird immer der Bereich gespeichert, wo zuletzt Partikel waren (top-left/ bottom-down)
• Nur dieser Bereich wird gelöscht (BitmapData.fillRect) -> dadurch wird ein optimal kleiner Redraw erreicht (Siehe DebugPlayer -> Show Redraw Regions)
• Insgesamt kostet der Redraw von 1000 Partikeln so höchstens 8ms (MacBook Pro 4.1)
• Es erfolgen nur sehr wenig Methodenaufrufe
• Es laufen nur 2 Schleifen über alle Partikel (Bewegung und Rendering)

Form und Bewegung

• Formen definieren für jedes Partikel eine Zielposition, die sich in jedem Frame auch ändern kann (z.B. drehende Formen, Mouse follow)
• Jede Form hat eine Anzahl an benötigten Partikeln
• Die Engine hat immer eine aktuelle Form, aber Partikel können auch noch in alten Formen feststecken, da sie nur nach und nach rausgelassen werden. So entsteht unter anderem das Strom-Verhalten
• Unterscheidet sich die Anzahl der benötigen Partikel, lässt die Engine Partikel sterben oder klont Partikel, ohne dass der Betrachter dies bemerkt
• Jedes Partikel bemüht sich nun pro Frame seine von der Form vorgegebene Zielposition zu erreichen
• Bei dem Übergang in die Views wird die Form aus dem Zielbild berechnet (z.B. alle Partikel zu den roten Farben)
• In den Views wird nach 10 Sekunden die Form aus 3d Funktionen errechnet und mit Assets (Linien, Dreiecke) ergänzt, auch hierbei werden alle Partikel in nur einer Schleife ohne Methodenaufrufe verarbeitet
• Die Definition und  Zuweisung der Formen erfolgt programmatisch und ist nicht sehr geschwätzig