Also habe ich es für wichtig befunden, hier kurz darauf einzugehen, was das für eine Auswirkung auf das Medium Internet hat.

Das Web wird mobil

Schon seit geraumer Zeit ist eine Entwicklung im Gange, die meines Erachtens schon Ausmasse erreicht hat, die es schlichtweg unmöglich machen, diese Veränderungen zu ignorieren.
Das Web wird mobil – Immer mehr Menschen (noch vordergründig jüngere) möchten unterwegs die Vorzüge und Möglichkeiten nutzen, die Ihnen das WWW bietet. Wer möchte nicht beispielsweise gerne beim Einkaufsbummel sehen können, wo es das selbe Produkt am günstigsten gibt und auch noch eine Wegbeschreibung dahin erhalten, die Bahnfahrkarte noch schnell online lösen, unterwegs Neuigkeiten lesen, oder während einer langen Zugfahrt mit Freunden schreiben oder TV schauen?

Alleine in der Schweiz schätzt man, das etwa 15% der Bevölkerung bereits ein Smartphone besitzt. Ausserdem sollen alleine in der Schweiz rund 600 000 Personen ein IPhone besitzen (Quelle: http://www.mfx.ch/2009/12/19/statistik-zum-iphone-in-der-schweiz/). Tendenz natürlich steigend. Auch die Datentarife werden (wenn auch etwas verzögert) langsam erschwinglich.

Moderne Anwendungen

Künftig können mittels Augmented Reality, diversen Tags und dem WWW auch stärkere Verbindungen zwischen dem “realen Leben” und dem “virtuellen Profil” hergestellt werden. Das wird starke Auswirkungen auf das Interaktionsdesign haben (Anwendungen sind Touch & Surface Computing, Augmented Reality, Real<->Social,…)

• Ein Beispiel ist Lego. Hier kann man sich im Laden eine Lego-Packung mit einem Tag vor einen Bildschrim halten, dieser Zeigt einem den Packungsinhalt dann funktional und zusammengebaut an und man das Objekt rotieren und sich genau ansehen, was man denn da kauft. Auch im WWW gibt es diese Möglichkeit. Weitere informationen dazu hier.

• Um die Verknüpfung eines “realen Ladenbesuchs” mit Social Media hat sich letztens Die Kleidermarke “DIESEL” bemüht. Eine Diesel-Cam in den Stores bietet die Möglichkeit, sich selbst im neuen Outfit zu fotografieren, das Foto auf sein Facebook Profil zu stellen und sich dann gleich Meinungen einzuholen. Hier gibts mehr Infos.

Natürlich gibts noch etliche Beispiele. Ich freue mich auch über mehr Beispiele von euch!

Die Aufgabe …

… die wir als digital Media Agenturen haben ist, uns auf diese Entwicklung frühzeitig (wenn nicht schon geschehen: JETZT) einzustellen, sie genau zu untersuchen, auszutesten und sich keinesfalls vor ihr zu verschliessen.

• Deshalb optimieren wir schon seit geraumer Zeit als ersten Schritt bei Guave Studios unsere Microsites und Websites für mobile Devices.
  Die Zugänglichkeit einer Webseite oder Applikation über mobile Endgeräte muss gewährleistet sein, die Zielgruppe ist gross und die Accessibility-Anforderungen beschränken sich heute nichtmehr nur auf klassische Computer.
• Der Entwicklung von Apps für IPhones, IPads und Android Devices haben wir uns ebenfalls angenommen – einige Apps sind in Entwicklung – wir werden hier noch genauer darüber berichten.
• Touch- und Multitouchanwendungen mit Webanbindung (z.B. Social-Media) Anbindung beispielsweise für Touchscreens oder Geräte auf Messen oder in Filialen entwickeln wir auch seit kurzem.

Wir sind gespannt, wo uns diese Entwicklung hinführen wird und sind offen für Neues!

Wenn ihr auch Erfahrungen gemacht habt, oder interessante Projekte in dem Zusammenhang gefunden habt, zögert bitte nicht, uns diese bei den Kommentaren zu posten!
Gruss
Sandro

liste wird hin und wieder erweitert!
Sandro

Wieder einmal hatten wir nun die Gelegenheit einen Action geladenen Trailer für einen unserer Kunden zu produzieren. Das Budget reichte zwar nur für einen Drehtag, aber das hat uns natürlich nicht davon abgehalten so viel “Action” wie nur möglich in den Trailer reinzupacken. Luxus Yacht, heisse Girls, schnelle Autos, Verfolgungsjagd, Gewehre, und was heutzutage auch nicht fehlen darf … ein Parkour Künstler!

Um das alles auch optisch anspruchsvoll zu verpacken war der Einsatz der RED ONE natürlich unumgänglich. Die mit einem Vollformat-35mm CMOS Sensor bestückte digitalen Filmkamera lieferte uns hochauflösende, gestochen scharfe, 4k Bilder. Zudem hatten wir die Möglichkeit die Framerate auf bis zu 120 fps einzustellen um somit die Zeit zu verlangsamen und wunderschöne Slow-Motion-Effekte zu erzeugen.

Durch einen optimierten digitalen 2k Workflow konnten wir die Post-Produktion sogar innerhalb von drei Tagen abschliessen (inkl. 3D Visual Effects!).

Diese “filmische Blitzaktion” verlangte natürlich grossen Einsatz des gesamten Teams und somit möchten wir uns nochmals bei allen Mitwirkenden bedanken für ihr Engagement!

… und nun noch ein paar Bilder des Drehs:

… und natürlich den “Fake-Trailer” (… in 3Dee !! ):

Jump ‘n Run – Official Fake Trailer from Guave Studios on Vimeo.

Eine Idee war noch, ein QR-Tag einzubinden. Finde ich keine schlechte Idee, besonders da wir ja überwiegend im digitalen Bereich unterwegs sind.
Allerdings sieht so ein QR-Tag auf der gestylten Karte mehr als störend aus. Ausser man zieht einen Pixel- bzw. Bitmapstyle über die ganze Karte hinweg durch,
was sich allerdings stark mit unserem CD beissen würde.  Ideen?

Über Meinungen freue ich mich.

Mit Guave Studios einen Blick auf Adobe AIR

Da wir bei Guave Studios daran intressiert sind, in den verschiedensten Kanälen interaktive Inhalte bereitzustellen, beschäftigen wir uns intensiv mit den Möglichkeiten, die uns mobile Endgeräte bieten. Ein wichtiger Faktor für uns ist eine möglichst plattformunabhänige Lösung, um keinen unnötigen Aufwand zu generieren. Unter Plattformunabhänig verstehen wir nicht “Eine generelle Lösung für alle” sondern “Eine Lösung für den Einzelnen basierend auf der Lösung für alle”.  Adobe AIR bietet einen gemeinsamen Nenner. Ich denke, dass für viele Applikationen – vorallem im promotionalen Bereich – Adobe AIR ausreicht. Sollte dies nicht der Fall sein, kann eine spezielle Lösung in betracht gezogen werden.

AIR for Android

AIR gibt es für den Android Emulator und auch die Devices mit Android 2.1 (7) oder 2.2 (8). Derzeit befindet sicht AIR noch in der Entwicklung (Beta). Benötigt wird ebenfalls das Android SDK.

Flash CS5

Nachdem man die Vorraussetzungen (AIR auf dem Device/Emulator, Android SDK) installiert und konfiguriert hat (weiter unten) kann man relativ schnell mit der Entwicklung loslegen.

Der Workflow gestaltet sich recht einfach. Unter File -> AIR Android Settings kann man die Parameter für die Erstellung anpassen. Hier hat man die Möglichkeit einen Schlüssel zu generieren der danach zum signieren verwendet wird. Beim Veröffentlichen wird die APK generiert und automatisch bei angschlossenem Device oder Emulator direkt auf dem Endgerät gestartet. Somit kann auch sofort getestet werden.

Nur: Wer codet denn in CS5 ?

Flash Develop

(Tutorial)

Wir hätten auch die Möglichkeit mit Flash Develop über CS5 zu publishen. Ich zeige hier aber die Lösung ohne CS5 benützen zu müssen.

Mit ein paar Einstellungen und einem Template bekommen wir das auch auf Flash Develop oder anderen IDEs zum laufen. Der ganze Worklfow kann per Kommandozeile nachgebaut werden. Selbst debugging direkt in Flash Develop wird möglich.

Hierfür brauchen wir aber noch folgendes:

• Flash Develop
• AIR Android Template for Flash Develop
• AIR 2.5 SDK (register at the prerelease programm)
• Flex SDK 3.5 oder 4.0
• Flashplayer 10.1 playerglobal.swc
• Android SDK

Dann einfach die Flex SDK entpacken. In denselben Ordner können dann die AIR 2.5 Dateien entpackt werden. Dann noch die playerglobal.swc in den Ordner flex40sdk\frameworks\libs\player\10.1 entpacken.

Android SDK entpacken und Setup ausführen. Die aktuellen APIs updaten. Um testen zu können benötigen wir hier jetzt den Emulator. (USB weiter unten).  Hier wird Android 2.1 oder 2.2 erstellt. Auf der Seite AIR 2.5 SDK muss man noch die APK Datein für den Emulator und eventuell für das Device runterladen. Ich würde empfehlen, den AndroidSDK/tools Pfad zu den Umgebungsvariablen hinzuzufügen (Rechtsklick auf Computer->Erweiterte Systemeinstellungen -> Umgebungsvariablen-> PATH)

Wir können jetzt in der Kommandozeile einen Sever starten mit adb start-server. Wenn wir jetzt den Emulator per emulator -avd [EmulatorName] starten. Mit “adb devices” sehen wir ob unser Emulator erkannt wurde. Sonst nochmal per “adb kill-server” und “adb start-server” probieren.

Wenn wir jetzt das air.apk für den Android Emulator ausgepackt haben, können wir per adb install Runtime_Emulator_Eclair_20100517.apk (Eclair ist Android 2.1)

Flash Develop (ab 3.1.1) normal installieren und mit dem Flex SDK verbinden (über Einstellungen->AS3 Context->Path to Flexsdk)

Das Flash Develop Template airandroid.fdz kann jetzt ausgeführt werden. Dies ist standardmässig auf Windows mit Flash Develop verlinkt und wird dann automatisch installiert. Alternativ kann man auch die Datei auf .zip umbenennen und in den Flash Develop/Projects Ordner entpacken.

Mit Flash Develop kann jetzt ein Projket vom Typ “Air Android AS3″ erstellt werden. Der Parameter Name ist Pflicht und sollte wenn möglichst klein und ohne Leerzeichen geschrieben werden. Der Package Path kann ich auch empfehlen auszufüllen, da die erstellte Android ApplikationsID sich dann aus packagepath.projectname zusammensetzt.

Wir können das Projekt jetzt anlegen.

Im src Ordner kann jetzt die Datei Main.as editiert werden. Ein kleines trace(“Hello World”); sollte für unseren ersten Test reichen.

Im Projektordner scripts sollte man noch die settings.bat anpassen um individuelle Keys zu generieren. Es kann auch hier direkt ein Key hinterlegt werden. (CERTIFICATE_FILE). Es kann hier auch ein Passwort spezifiziert werden. Dies ist dann aber während der ganzen Zeit in der Datei gespeichert. Ich würde empfehlen während des Entwicklungsprozesses den SelfSigned Key zu verwenden und erst beim Release auf den richtigen Code Signingkey zu verwenden. Derweilt wird das Passwort automatisch beim Debuggen aus der settings.bat gelesen.

Endlich testen!

Jetzt können wir das Projekt direkt per F5 oder dem Run Button testen.

Ablauf:

1. .swf File wird gebuildet
2. key wird gecheckt und evtl generiert
3. IP Addresse wird ermittelt um den Debugger zu connecten (Erste IPv4 im ipconfig)
4. Das APK wird gebuildet und mit dem Key gesigned
5. Die Applikation wird auf dem verbundenen Device deinstalliert (falls installiert)
6. Die Applikation wird auf dem verbundenen Device installiert
7. Die Applikation wird auf dem Device gestartet
8. Der Debugger connected zum Debugger auf der hinterlegten IP
9. Hello Android müsste in der Console auftauchen

Anmerkungen zum Device USB Debugging

Das heikelste war es, mein HTC Desire mit Android 2.1 für die Entwicklung zu präparieren. Ich habe viele Informationen im Internet gefunden, jedoch nur wenige waren erfolgreich.

Was ich speziell zum HTC Desire sagen kann ist, den Treiber der auf der SD Card ist zu benutzen. Dieser wird mit HTC Sync installiert. Aktiviert man auf dem Device das USB Debugging, sieht das Device mit “adb devices”.

Für das Flash Debugging wird WLAN Access benötigt. Mit einer zugewiesenen IP (DHCP zb) kann man das Device zum Debugger verbinden.

Und voila, viel Spass beim Applikationen schreiben.

Links

• Android SDK
• Flash CS5
• Flash Develop
• AIR Android Template for Flash Develop
• AIR 2.5 SDK (register at the prerelease programm)
• Flex SDK 3.5 oder 4.0
• Flashplayer 10.1 playerglobal.swc

Die Website ist unter http://www.pragueassignment.com erreichbar.

Official Trailer – The Prague Assignment

The Prague Assignment – Official Trailer from Guave Studios on Vimeo.

Zurzeit befinden wir uns noch in der Postproduktion, einen genauen Release Termin können wir leider noch nicht nennen, schätzen aber, dass es ende August soweit ist. Natürlich werden wir auch in unserem Blog darüber berichten.

Film Konzept – lydaa:
Der Film hat sehr viele interessante Erfahrungen mit sich gebracht, insbesondere mit einigen ungelernten jungen Schauspielern arbeiten zu können, die keine grossen Erfahrungen hatten.

Das Konzept dieser Produktion entstand in Kooperation mit der Partnerin lydaa (live your dreams artist agency), die auch den Teil des Produzenten bei diesem Projekt übernahm. Lydaa ermöglichte es selektierten Leuten, einmal in die Rolle eines Charakters zu schlüpfen und jungen Schauspielern, ihren Traum (einmal in einem grösseren Film mitzuwirken) Wirklichkeit werden zu lassen.

Eine grosse Herausforderung war der Dreh, bei dem wir 16 Tage zu Verfügung hatten, die sehr gut aufgeteilt werden mussten. Bevor die erste Klappe fiel, hatten wir eine Vorproduktion von 4 Monaten bei der wir Drehbuchanpassungen, Storyboards, technische Tests und Drehorganisation übernahmen. Lydaa übte in dieser Zeit bereits mit den ausgesuchten Schauspielern ihre Rollen ein und auch die Kampfkoordination musste geübt werden.
Nach dieser Trainingsphase machten wir noch kurz eine kleine Einführung in das Thema “Arbeiten am Set” auch aus technischer Sicht. Somit waren alle über den Drehablauf gut informiert und wir konnten speditiv arbeiten.

Alle beteiligten hatten bei der ganzen Realisierung sehr viel Spass und durften sehr viele unvergessliche Momente erleben.
Es freut uns, dieses Projekt unterstützen zu können, bei dem für einige Mitwirkende ein Traum in Erfüllung gegangen ist.

Auf der Film Website sind weitere Informationen über den Film zu finden.
Wir freuen uns auf eure Feedbacks.

Die Flash Version Information ist ein Development und Deployment Tool für Flash Anwendungen.

Implementierung

Die einfache Implementierung erfordert eine Zeile Code.

Fnfo.initialize(this);

Mit BuildInformation Plugin

Fnfo.initialize(this, {versioninfo:FnfoVersion_fnfo.VERSION_FILE } );

Das Resultat ist dieses untere Flash. (Rechts in das Flash klicken und den Context Menüpunkt fnfo anklicken)

Um die Information zu schliessen einfach nochmal Rechtsklick und fnfo anklicken.

Der Output wäre wie folgt:

Version: 0.0.1
ProjectName: fnfo
VersionNumber: 0.7.0.5-32
BuildTime: 07.04.2010 12:09:00.44
BuildComputer: MARTIN-WORK/martin
PlayerVersion: WIN 10,0,42,34
PlayerDebug: true
PlayerType: PlugIn
PlayerAudio: true
PlayerMp3: true
SystemOs: Windows 7
ScreenResulution: 1680/1050
ExternalInterface: true
ExternalInterfaceObject: null
ReportTime: Wed Apr 7 16:10:20 GMT+0200 2010
ReportExecution: 00:00:04:293
LastError: none
LoadUrl: http://www.guavestudios.com/blog/fnfo-07.swf
SwfVersion: 9
BytesTotal: 14933
StageParam: test1Param = Hello
StageParam: test2Param = World

Die angezeiten Informationen helfen ein Problem genauer zu klassifizieren. Besonders wenn der Kunde eine Fehlermeldung tätigt, kann dieser mit einem Rechtsklick auf einfache Art und Weise wichtige Infos übermitteln. Die wichtigsten Informationen sind oben aufgelistet, können aber beliebig erweitert werden.

Weitere Beispiele finden sich unter: GettingStarted

Plugins

Derzeit sind die meisten Plugins integriert. Eine Plugin Struktur ermöglicht es aber eigene Plugins selbst hinzuzufügen.

Unter anderem arbeite ich derzeit an einem Screenshot Plugin, dass per Knopfdruck einen aktuellen Screenshot der Applikation mit den gesammelten Informationen und einen Zusatztext an einen Server schicken kann. Dies ist besonders hilfreich, um während der Entwicklung schnell und präzise Fehlerinformationen zu sammeln. Seit Flashplayer 10.1 gibt es zudem die Möglichkeit den zuletzt aufgetretenen Fehler zu melden.

Integration in bestehende IDEs

Die einfachste Integration bietet derzeit ein Prebuild Command. Jede IDE die dies unterstützt kann aktuelle Buildinformationen dem SWF beifügen. Zusätzlich generiert das Script (version.bat) eine Versionsklasse in der die Versionsdatei eingespeichert ist. Diese wird, wenn nicht vorhanden direkt im src Ordner erstellt. Damit kann man diese schnell und einfach anbinden.

Prebuild command in Flash Develop:

scripts/version.bat $(OutputName) $(ProjectName) src

Die Buildnummer setzt sich derzeit aus:

{major}.{minnor}.{build}.{svnrevision}-{localbuild}
{major}.{minnor}.{build} gelesen aus {projectswf}.productversion
{svnrevision} wird mit dem WCRev Utilty aus TortoiseSVN ermittelt
{localbuild} erhöht sich jedes mal bei einem lokalen Build und wird in  {projectswf}.buildnr gespeichert

Status

Derzeit befindet sich das Tool in Entwicklung. Vorallem mit dem Flashplayer 10.1 mit Global Errorhandling werden wir eine komfortable “Fehler melden” Möglichkeit einbauen.

Meinen Dank an Guave Studios, dass dieses Projekt ebenfalls Open Source ist.

Links

• http://code.google.com/p/fnfo
• http://code.google.com/p/fnfo/wiki/GettingStarted

Eine interaktive Aufklärungskampagne der Suva.

Das Projekt

Gemeinsam mit Angelink haben wir vor kurzem das Projekt gress-cam.ch realisiert.
Hier tritt Gilbert Gress als Botschafter der schweizer Unfallversicherung Suva auf. Die Kampagne stellt wichtige Informationen zur Suva bereit und klärt über Unfallprävention im Sport auf.

Die Idee

Die Idee war direkt mit Gilbert Gress in Kontakt zu treten, der einem dann erklärt auf was man beim Sport besonders achten muss um Unfälle zu vermeiden. Dazu soll er sogar Nutzer anrufen, die ihm seine Telefonnummer hinterlegen.

Realisiert wurden diese Anforderungen mit einer Microsite, die die Webcam von Gilbert Gress zeigt. Gilbert klärt hier einen Besucher über Telefon auf was alles gefährlich sein könnte. Nach Beendigung des Gesprächs fordert die Trainerlegende den Besucher auf, seine Telefon/Natelnummer einzugeben. Dann könne er einen aus der Liste der Besucher aussuchen und einen Rückruf tätigen.

Umsetzung

Damit Gilbert Gress wirklich anrufen kann, benötigten wir einen Telefonservice, der ein Tonband von seiner Stimme in der richtigen Sprache abspielt und dies mit dem Webcam-Video synchronisiert. Die Dreharbeiten fanden nicht bei Gilbert Gress zu Hause, sondern bei uns im eingerichteten Studio statt.

Das gesamte Video besteht aus einem einzigen progressiven Stream. Während der Anrufer wartet, loopt ein Video Controller vor und zurück. Sobald der Teilnehmer den Anruf annimmt, wird die Lautstärke des Videos nach unten geregelt und das Video spielt synchron weiter ab. Hat der Anrufer keine Nummer eingegeben, wird er wiederum zum Zaungast und kann die Unterhaltung mithören. Am Ende verabschiedet sich Gilbert Gress und wünscht den Zuschauern alles Gute.

Grossen Wert wurde auf die sharing-Funktionen gelegt, um es dem Besucher so einfach wie möglich zu machen, seinen Freunden von der Seite zu erzählen. Das Feedback Formular ermöglicht es, zusätzlich Rückfragen und Vorschläge zu tätigen.

Als Grundstock verwendeten wir das PureMVC Framework. Einige andere Libraries (fnfo,fcfg,puremvc,puremvc-syncer,asaf3,flayout,osmf,resm,servicelib,tweener) reduizierten unseren Arbeitsaufwand erheblich.
Hiermit ein Dankeschön an die Entwickler.

Ein tolles Projekt mit vielen Raffinessen.

Wir haben in unserem Web-Team ab März eine Praktikumstelle frei und möchten diese an eine Praktikantin aus dem Raum Zürich vergeben.

Wieso eine PraktikantIN?
Wir möchten unser Web-Team längerfristig um eine weibliche Komponente erweitern.
Bei einer späteren Festanstellung werden wir Praktikanten, die einmal bei uns gearbeitet haben, den Vorzug geben.

Was bringt mir ein Praktikum bei Guave Studios?

Du kannst dich in ein junges Team von hoch-qualifizierten Fachleuten integrieren,
lernst die interne Unternehmensorganisation kennen,
wirst Kundenkontakt haben,
darfst an interessanten Projekten für namhafte Kunden mitarbeiten,
wirst dich kreativ entfalten können,
dein know-how erweitern,
und spass an der Arbeit haben!

Was muss ich können?

Wichtig ist uns, dass du eine Leidenschaft für Design und Webentwicklung mitbringst, selbstständig arbeiten kannst, flexibel, fleissig, und wissbegierig bist.
Basis Know-How in HTML/CSS und Screendesign solltest du mitbringen – von Vorteil wäre Know-How in der Flash Programmierung.

Guave Studios at Critics Show by Zacuto Films from Guave Studios on Vimeo.

Wie auch in der Show erwähnt wird, drehten wir diesen Spot noch bevor das Firmware-Update mit den manuellen Funktionen der Canon 5D Mark II veröffentlicht wurde.

Für uns eine sehr spannende Herausforderung, die wir aber mit dem tollen Team am Set schnell meisterten.

Ein weiteres Projekt das komplett mit der Canon 5D Mark II gedreht wurde ist unser Kurzspielfilm “The Prague Assignment” der sich zur Zeit in der Post Produktion befindet.