Im Auftrag von Pro Helvetia haben wir eine hübsche Website in Flex/Flash produziert.

Die Website mit integriertem Blog ist im Rahmen der Ausstellung “Ménage – Kultur und Politik zu Tisch” entstanden. Die Website und Blog sind 3-sprachig. Dank integriertem CMS (redaxo) kann Pro Helvetia selbständig bei jedem Stationenwechsel der Ausstellung die neuen Inhalte abfüllen. Dies ermöglicht  dem Kunden einmal mehr grösstmöglichste Unabhängikeit beim Bewirtschaften der Website. Neben Website und Blog sind wir auch verantwortlich für die Produktion des Newsletter. Dieser wird ebenfalls in 3 Sprachen versandt.

Besonders zu erwähnen sind bei diesem Projekt noch die Animationen die nicht nur Klasse aussehen, sondern vor allem die inhaltlichen Aspekte, die einmal mehr brandaktuelle Debatte zwischen Kultur und Politik, witzig unterstützen sollen.

Ménage - Home

Subseite - Ausstellung Helvetia Park

Subseite - Video mit Videoplayer

BLOG mit Video

Produziert von ->

• Programming und Animation: DU DA GmbH

• Grafik: riografik, Nina Mambourg

• Auftraggeber: Pro Helvetia

Für En Soie Zürich realisierten wir pünktlich zum Familienauftritt in der Annabelle die neue Website.
Die Website wurde in Flash/Flex programmiert, ist skalierbar und im Full-Screen-Modus präsentierbar. Auch hier wurde ein CMS (redaxo) implementiert, was En Soie ermöglicht, die Website selbständig zu bewirtschaften. Saisonal können so die aktuellen Kollektionen, Impressionen und Videos präsentiert werden. Grafisch wurden wir einmal mehr von Thomas Rütti (Dasing Bash LLC.) unterstützt.

En Soie - Übersicht

En Soie - Detail

Produziert von:

• Programming: DU DA GmbH
• Grafik: Dashing Bash LLC., Thomas Rütti
• Auftraggeber: En Soie Zürich

Wir sind mit dem, unseres Wissens nach, ersten komplett auf Microsoft Navision im Frontend auf Flex basierenden Webshop der Welt online gegangen.

https://www.companys.ch/

Anbei ein paar erste Schnappschüsse :

Introseite

Katalog / Übersicht

Detail / Produkte Seite

Warenkorb / Bezahlen Ebene

Mobitare Memory

Wir haben für Mobitare ein Memory umgesetzt, aber für einmal ein wenig anders.

Das Memory wurde in den drei-dimensionalen Raum gestellt, was natürlich ein paar Ansprüche an die Programmierung stellte. Den die scheinbar einfachsten Dinge können sich als schwieriger als angeommen herausstellen.

Zuerst musste evaluiert werden welches 3D Framework eingesetzt wird. Die erste Wahl fällt auf papervision3d, da es das am meisten verbreitet ist. Doch wäre es in diesem Fall klarer Overkill. Durch Zufall bin ich auf die FIVe3D Engine gestossen, welche im Gegensatz zu papervision3d auf Vektoren setzt.

Viel Erfolg beim spielen!

Links :

• Mobitare 3D Memory Game
• FIVe3D

Produziert von :

• Im Auftrag von Publicis
• Design by DesignersClub Zürich
• Technische Umsetzung programmiert von DU DA GmbH

ps: Das Memory bietet übrigends eine zusätzliche Merkhilfe. Zwei Möbel gehören immer zum selben Designer

Der Digital Life Index soll eine statistische Zwischenbilanz über den akutellen Stand der Digitalisierung der Gesellschaft geben. Dabei werden einige interessante Trends und Rückschlüsse sichtbar. Es wurde bei mehr als 1000 Personen eine Befragung durchgeführt. Diese wurde von Medialogics erfasst und nach einem langjährig bewährten Auswahlverfahren richtig gewichtet. Dieser Index soll nun alle paar Monate neu erhoben werden, um die fortschreitende Digitalisierung und neue Trends in der heutigen Gesellschaft festzustellen. Der Digital Life Index ist auf jeden Fall für alle Digital Marketing und Trend Interessierten einen Blick wert!

Details zur Technischen Umsetzung :

• Flex & Actionscript 3
• Flare zur Auswertung der Daten
• Daten über TAB getrenntes Textfile
• Lokalisation über XML Datei

Hauptseite

Detailseite

Für unsere lieben Actionscripter gibt es jetzt tatsächlich eine Möglichkeit im Webbrowser zu programmieren und zu compilen.
Echt nette Sache!

http://wonderfl.kayac.com/

Für Sony Pictures Schweiz wurde eine Video Bannerkampagne gestaltet und programmiert. Hosting und Statistiken werden von dem eigens für Sony Pictures und Walt Disney programmierten Banner System, das von DU DA GmbH programmiert worden ist, ausgewertet & gehostet.

Beispiel Banner in der Grösse 300 x 250 :

Produziert von ->

• Grafik & Animation DU DA GmbH
• Programmierung DU DA GmbH
• Auftrag & Kunde Sony Pictures Schweiz

Ps. Wir haben 100 te von weiteren Bannerbeispielen. Einfach melden unter info@dudagroup.com und wir werden Ihnen gerne Auskunft über Preise und Möglichkeiten geben.

Rechtzeitig auf den Autosalon in Genf produzierten wir für Hyundai Suisse eine Microsite -> eco-blue.ch . Im Zentrum der Microsite stand das neue Umweltprogramm eco-blue. Die 3-sprachige Microsite wurde in Flex/Flash programmiert. Dies bietet einerseits optimale Flexibiltät in der Programmierung und lässt andererseits auf Inhaltsseite viel Spielraum offen. Alles in allem eine saubere Sache!

Hyundai * eco-blue

Zudem erstellten wir für die neue Hyundai i-blue Serie einen AD-Banner. Als Basis dienten die Printvorlagen der Kampagnge. Der Schmetterling wurde aus einem Video extrahiert und neu in den Banner integriert. Produktion in Flash.

Format: 300×250

Produziert von :

• Auftrag, Konzept Ruf & Lanz
• Gestaltung & Programmierung DU DA GmbH

dudaballs

Wir haben ein wenig mit dem JigLib experimentiert. JigLib ist eine Physik Engine die ihren Ursprung bei C++ hat und nun nach ActionScript3 portiert wurde.

Man nehme Papervision3d, JigLib für AS3 + SmartFox Server und heraus kommt dudaballs.

Eigentlich geht’s bei dudaballs nur darum seine Gegner von der Plattform zu schubsen, macht aber trotzdem Spass.

Das Spiel war relativ schnell zusammengestellt. Der SmartFox Server und Papervision3d stellen grosszügig API und Hilfe zur Verfügung. JigLib ist noch nicht ganz so weit, war aber auch nicht so schwer darin zu recht zu finden.

Die wahre Schwierigkeit bestand in der Spiel Logik:

• 3d Physik die akkurat berechnet werden muss
• Jeder sollte das gleiche sehen
• Kein Zentralserver der diese vornimmt

Unser erster Ansatz war, dass einer der Mitspieler auch der Host ist. Das heisst seine Flashinstanz berechnet die 3d Welt und schickt die wichtigen Daten zu den anderen Spielern. Diese wiederum senden aufgrund der grafischen Darstellung ihre Aktion zum Berechner.

Probleme:

• Abgleichungen sind durch Netlag fehlerhaft
• Was passiert wenn der Berechner sich auslogged

Natürlich könnte man jetzt eine Ausgleichlogik einbauen die den Lag mit einberechnet. Aber wir haben uns für eine schnellere und einfachere Lösung entschieden.

• Jeder Mitspieler berechnet alles
• Jeder Mitspieler sendet den anderen alle paar Millisekunden seine Position

So kann ein flüssiger und fast 100% korrekter Spielablauf garantiert werden.

Für einen Prototype ist die Lösung gar nicht schlecht, müsste für eine Endlösung aber sicher überdacht und verbessert werden.

Die Aufgabe war es eine Powerpoint ähnliche Applikation für den Webbrowser zu entwickeln, die Designern und Architekten zu helfen sollte, in  möglichst kurzer Zeit ein Moodboard mit Bildvorschlägen aus einer Datenbank zu liefern. Diese können ihre Kunden ansehen und auch weiter bearbeiten, um möglichst rasch eine Richtung festzulegen, mit welchen Produkten sie für das jeweilige Projekt arbeiten sollen.

Die Main Features dieser Flex Applikation (RIAA) sind :

• Multipage fähig
• Gespeicherte Moods können weiter editiert und wieder abgespeichert & versendet werden
• Dynamischer Bilder Import mittels vorhandener Bilddatenbank
• Vollbild Modus für Präsentationen
• Bildplatz und -skalierung mittels Drag & Drop
• Titel und Texte können dazugefügt werden
• Eigene Druckvorlage mit 300 DPI Logo
• Mehrfaches rückgängig machen der Arbeitsschritte (Unlimited Undo)
• Voll skalierbar (Browser grösser und kleiner machen, damit die Arbeitsfläche grösser und kleiner wird)

Moodboard

Produziert von ->

• Grafik & Auftrag von Architonic
• Programmierung DU DA GmbH

Bei Bylandlaw.com wurde versucht, allen Design- und Browser-Kompatibilitätsproblemen Rechnung zu tragen. Die Webseite sollte sowohl als Flex wie auch als Html Version umgesetzt werden und aus dem selben CMS Export mit Inhalt gefüttert zu werden um sämtlichen Browsern, verschiedenen Monitor Auflösungen wie auch der Mobile Devices Problematik Rechnung zu tragen. Also wurde eine grössen flexible Flex Version und eine HTML Website mit Hilfe von Redaxo als zentrales Content-Managment-System umgesetzt.

Anbei das Ergebnis :

www.bylandlaw.com

Die Flex Version -> (Flash Plugin 9 und höher)

• Skalierbar – Browser grösser und kleiner machen um die skalierbarkeit zu Testen
• Wurde verwendet um die Übergangs & Loader Animationen hübsch umzusetzen und Typografisch mit den Custom Fonts genau dem CI zu entsprechen da dies dem Kunden extrem wichtig war.
• Inhalt ist von Google per Sitemap durchsuchbar & verlinkbar
• Funktioniert mit Hilfe von Direktlinks, damit man direkt eine Unterseite Aufrufen kann und beim URL kopieren von der Adressbar auf den direkten Link verwesen / verschicken kann.
• Ist unkompliziert erweiterbar um neue Tools einzubauen und auch grössere Skin & Design Änderungen zu vollziehen
• Klick ins Schwarze = Fullscreen
• Inhalt der jeweiligen Seite wird in eine saubere Printvorlage beim Drucken der Website gesetzt mit verschiedenen Briefköpfen in 300dpi bei Deutsch / English

HTML Version ->

• Standart Conform nach W3C
• Maximale Kompatibilität auf allen Webbrowsern
• Google friendly SEO
• Aus dem selben Inhalt geschnitzt wie die Flex Seite
• Auf dem Mobile Device bzw. Browser wird direkt als Startseite die Kontaktadresse angezeigt und bewusst zugesichert das man hier falls man mit einem Mobile Internet Explorer unterwegs ist die Flex Version wirklich nicht zu Gesicht bekommt zb. bei Herrn Bylands Nokia

Produziert von ->

• Design & Typografie Dashing Bash
• Programmierung DU DA GmbH

Im letzten Dezember 2008 gab es zum ersten Mal eine Rundfunk.fm CHRISTMAS SESSION.

Täglich, vom 1. bis zum 24. Dezember 2008, wurde ein exklusives Musikprogramm von ausgewählten Musikmachern zubereitet. DU DA produzierte die Website (Flash) und zudem haben wir uns etwas Besonderes einfallen lassen!

Neben den Cablecom-Frequenzen, dem Internetstream kreierten wir einen Rundfunk.fm-Musikplayer, der gleich 3-fach einsetzbar war:

• als Widget in Websites,
• als Download
• und als Installer Version.

Dafür wurden folgende Techniken, Verfahren angewandt:

• Flex / Flash
• MP3 & AAC+ Streaming
• XML

Aber auch die Website liess keine Weihnachtswünsche offen. 24 (flash-animierte) Kalendertürli empfingen die User, der Schnee rieselte leise (Physics-Engine) und ein Equalizer gab den den Beat an. Funktionen wie Newsletter, Send a Friend, Photo-Gallery etc. gehören sowieso zu den Standards.

Rundfunk.fm ist bald zurück, dieses Jahr wieder wie gewohnt im Sommer!

Rundfunk.fm Christmas Session

Produziert von ->

• Design & Typografie Designers Club Zürich
• Programmierung DU DA GmbH
• Auftrag & Kunde Sirup inc.

Auf  Topsupporter.ch können Hockey Fans Comunitys gegeneinander antreten. 3 lustige Spiele animieren zum frohen anziehen, durstlöschen oder die Spieler zur richtigen Zeit aufs Eis zu schicken. Postfinance hat dieses Portal extra zur Hockey WM 2009 von Publicis produzieren lassen.

Übersicht Seite

Playboard von 1nem der 3 Games

Community Bereich

Produziert von :

• Konzept & Idee by Publicis
• Illustrationen by Patrick Graf von Elefant Studios Zürich
• Technische Umsetzung Flash Frontend DU DA GmbH
• Technische Umsetzung Backend PHP, Html & Javascript iFace

Die Website bill.ag wurde auf dem Konzept aufgezogen: Was kann man tun, um die Billag Gebühren nicht zu bezahlen. Ein weiteres Element der Kampagne war ein mit echter Physik Engine ausgestattetes Game. Dieses wurde basierend auf dem AS3 Port der Box2D C#  Libary programmiert.

Folgendes sind die Features der Website:

• Der Benutzer wird mittels 3D Animation durch die spannende Geschichte geführt.
• Die Sprecher sind die originalen Sprecher der Werbespots.
• Diverse Goodies wie Wallpapers, Klingeltöne etc.

Story Seite

Game Features:

• Actionscript 3 Physik Engine
• Animationen bestehend aus über 5000 einzelnen Bildern (Frames)
• Highscore und Benutzerdaten mittels PHP5 und Mysql
• jede Menge Ambientsounds & Soundeffekte

Das Game

Produziert von :

• 3D und Film by Elefant Studios Zürich
• Konzept & Idee by Peek & DU DA GmbH
• Technische Umsetzung DU DA GmbH

PS : Es wurde hier sehr viel Goodwill und wenig Geld in das Projekt gesteckt, weil man ein schönes Produkt anstrebte und die Produktion allen Beteiligten grossen Spass machte.