<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Guave Studios - Agentur für digitale Medien &#187; flash</title>
	<atom:link href="http://www.guavestudios.com/blog/tag/flash/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.guavestudios.com/blog</link>
	<description>Blog für Webdesign Zürich, Onlinemarketing und Multimedia.</description>
	<lastBuildDate>Thu, 02 Feb 2012 11:15:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Hello Air, hello Android :C&#124;</title>
		<link>http://www.guavestudios.com/blog/2010/06/hello-adobe-air-android-tutorial/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://www.guavestudios.com/blog/2010/06/hello-adobe-air-android-tutorial/#comments</comments>
		<pubDate>Mon, 07 Jun 2010 07:42:06 +0000</pubDate>
		<dc:creator>Martin Muther</dc:creator>
				<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.guavestudios.com/blog/?p=717</guid>
		<description><![CDATA[AIR für Android ist da. Mit CS5 kann man für Android direkt APK Pakete erstellen. Dieser Artikel erklärt wie man AIR auf Android mit FlashDevelop zum laufen bekommt.]]></description>
			<content:encoded><![CDATA[<p>Adobe AIR für Android ist da. Mit CS5 kann man direkt für Android APK Pakete erstellen. Dieser Artikel erklärt wie man AIR auf Android mit FlashDevelop entwickeln kann.</p>
<h3>Mit Guave Studios einen Blick auf Adobe AIR</h3>
<p>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 &#8220;Eine generelle Lösung für alle&#8221; sondern &#8220;Eine Lösung für den Einzelnen basierend auf der Lösung für alle&#8221;.  Adobe AIR bietet einen gemeinsamen Nenner. Ich denke, dass für viele Applikationen &#8211; vorallem im promotionalen Bereich &#8211; Adobe AIR ausreicht. Sollte dies nicht der Fall sein, kann eine spezielle Lösung in betracht gezogen werden.</p>
<h3>AIR for Android</h3>
<p>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 <a title="Android SDK" href="http://developer.android.com/sdk/index.html" target="_blank">Android SDK</a>.</p>
<h3>Flash CS5</h3>
<p>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.</p>
<p>Der Workflow gestaltet sich recht einfach. Unter File -&gt; 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.</p>
<p><em>Nur: <span style="font-size: 14px;">Wer codet denn in CS5 <img src='http://www.guavestudios.com/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  ?</span></em></p>
<h3>Flash Develop</h3>
<h3>(Tutorial)</h3>
<p>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.</p>
<p>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.</p>
<p>Hierfür brauchen wir aber noch folgendes:<a title="Flash Develop" href="http://www.flashdevelop.org" target="_blank"></a></p>
<ul>
<li><a title="Flash Develop" href="http://www.flashdevelop.org" target="_blank">Flash Develop</a></li>
<li><a href="http://www.guavestudios.com/blog/wp-content/uploads/2010/06/airandroidtemplate.fdz#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">AIR Android Template for Flash Develop</a></li>
<li><a title="AIR Android" href="http://labs.adobe.com/technologies/air2/android/" target="_blank">AIR 2.5 SDK</a> (register at the prerelease programm)</li>
<li><a title="Flex SDK" href="http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK" target="_blank">Flex SDK 3.5 oder 4.0</a></li>
<li><a title="Flashplayer 10.1" href="http://labs.adobe.com/downloads/flashplayer10.html">Flashplayer 10.1 playerglobal.swc</a></li>
<li><a title="Android SDK" href="http://developer.android.com/sdk/index.html" target="_blank">Android SDK</a></li>
</ul>
<p>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<em> flex40sdk\frameworks\libs\player\10.1</em> entpacken.</p>
<p>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 <a title="AIR Android" href="http://labs.adobe.com/technologies/air2/android/" target="_blank">AIR 2.5 SDK</a> muss man noch die APK Datein für den Emulator und eventuell für das Device runterladen. Ich würde empfehlen, den <em>AndroidSDK/tools </em>Pfad zu den Umgebungsvariablen hinzuzufügen (Rechtsklick auf Computer-&gt;Erweiterte Systemeinstellungen -&gt; Umgebungsvariablen-&gt; PATH)</p>
<p>Wir können jetzt in der Kommandozeile einen Sever starten mit <em>adb start-server</em>. Wenn wir jetzt den Emulator per <em>emulator -avd [EmulatorName]</em> starten. Mit <em>&#8220;adb devices&#8221;</em> sehen wir ob unser Emulator erkannt wurde. Sonst nochmal per <em>&#8220;adb kill-server&#8221;</em> und <em>&#8220;adb start-server&#8221;</em> probieren.</p>
<p><a href="http://www.guavestudios.com/blog/wp-content/uploads/2010/06/adb-kill-startserver.png#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="aligncenter size-full wp-image-728" title="adb-kill-startserver" src="http://www.guavestudios.com/blog/wp-content/uploads/2010/06/adb-kill-startserver.png" alt="adb-kill-startserver" width="680" height="248" /></a></p>
<p>Wenn wir jetzt das air.apk für den Android Emulator ausgepackt haben, können wir per <em>adb install Runtime_Emulator_Eclair_20100517.apk</em> (Eclair ist Android 2.1)</p>
<p>Flash Develop (ab 3.1.1) normal installieren und mit dem Flex SDK verbinden (über Einstellungen-&gt;AS3 Context-&gt;Path to Flexsdk)</p>
<p>Das Flash Develop Template <a href="http://www.guavestudios.com/blog/wp-content/uploads/2010/06/airandroidtemplate.fdz#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">airandroid.fdz</a> 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.</p>
<p style="text-align: left;">Mit Flash Develop kann jetzt ein Projket vom Typ &#8220;Air Android AS3&#8243; 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 <em>packagepath.projectname</em> zusammensetzt.</p>
<p style="text-align: left;"><a href="http://www.guavestudios.com/blog/wp-content/uploads/2010/06/airandroid_installshot.png#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="size-full wp-image-727 aligncenter" title="AIR Android Flash Wizzard" src="http://www.guavestudios.com/blog/wp-content/uploads/2010/06/airandroid_installshot.png" alt="AIR Android Flash Wizzard" width="557" height="484" /></a></p>
<p>Wir können das Projekt jetzt anlegen.</p>
<p>Im <em>src</em> Ordner kann jetzt die Datei Main.as editiert werden. Ein kleines <em>trace(&#8220;Hello World&#8221;);</em> sollte für unseren ersten Test reichen.</p>
<p>Im Projektordner scripts sollte man noch die <em>settings.bat</em> 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.</p>
<h3>Endlich testen!</h3>
<p>Jetzt können wir das Projekt direkt per F5 oder dem Run Button testen.</p>
<p>Ablauf:</p>
<ol>
<li>.swf File wird gebuildet</li>
<li>key wird gecheckt und evtl generiert</li>
<li>IP Addresse wird ermittelt um den Debugger zu connecten (Erste IPv4 im ipconfig)</li>
<li>Das APK wird gebuildet und mit dem Key gesigned</li>
<li>Die Applikation wird auf dem verbundenen Device deinstalliert (falls installiert)</li>
<li>Die Applikation wird auf dem verbundenen Device installiert</li>
<li>Die Applikation wird auf dem Device gestartet</li>
<li>Der Debugger connected zum Debugger auf der hinterlegten IP</li>
<li>Hello Android müsste in der Console auftauchen</li>
</ol>
<h3>Anmerkungen zum Device USB Debugging</h3>
<p>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.</p>
<p>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 <em>&#8220;adb devices&#8221;</em>.</p>
<p>Für das Flash Debugging wird WLAN Access benötigt. Mit einer zugewiesenen IP (DHCP zb) kann man das Device zum Debugger verbinden.</p>
<p>Und voila, viel Spass beim Applikationen schreiben.</p>
<h3>Links</h3>
<ul>
<li><a title="Android SDK" href="http://developer.android.com/sdk/index.html" target="_blank">Android SDK</a></li>
<li><a title="Flash CS5" href="http://www.adobe.com/products/flash/" target="_blank">Flash CS5</a></li>
<li><a title="Flash Develop" href="http://www.flashdevelop.org" target="_blank">Flash Develop</a></li>
<li><a href="http://www.guavestudios.com/blog/wp-content/uploads/2010/06/airandroidtemplate.fdz#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">AIR  Android Template for Flash Develop</a></li>
<li><a title="AIR Android" href="http://labs.adobe.com/technologies/air2/android/" target="_blank">AIR 2.5 SDK</a> (register at the prerelease programm)</li>
<li><a title="Flex SDK" href="http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK" target="_blank">Flex  SDK 3.5 oder 4.0</a></li>
<li><a title="Flashplayer 10.1" href="http://labs.adobe.com/downloads/flashplayer10.html">Flashplayer  10.1 playerglobal.swc</a></li>
</ul>
<p><script type="text/javascript">// <![CDATA[
	var flattr_url = 'http://www.guavestudios.com/blog/2010/06/hello-adobe-air-android-tutorial/';
// ]]&gt;</script><br />
<script src="http://api.flattr.com/button/load.js" type="text/javascript"></script></p>
<div id="facebook_like"><iframe style="height:80px" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.guavestudios.com%2Fblog%2F2010%2F06%2Fhello-adobe-air-android-tutorial%2F&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:auto;"></iframe></div>]]></content:encoded>
			<wfw:commentRss>http://www.guavestudios.com/blog/2010/06/hello-adobe-air-android-tutorial/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Fnfo &#8211; Flash Info</title>
		<link>http://www.guavestudios.com/blog/2010/04/fnfo-flash-info/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://www.guavestudios.com/blog/2010/04/fnfo-flash-info/#comments</comments>
		<pubDate>Fri, 30 Apr 2010 15:30:57 +0000</pubDate>
		<dc:creator>Martin Muther</dc:creator>
				<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[fnfo]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[webentwicklung]]></category>

		<guid isPermaLink="false">http://www.guavestudios.com/blog/?p=604</guid>
		<description><![CDATA[Fnfo ist ein Utility um Informationen über ein Flash Objekt anzuzeigen. Hinzu kann Fnfo um Plugins erweitert werden, die z.b. Build Informationen anzeigen.]]></description>
			<content:encoded><![CDATA[<p><strong>Flash Version Information</strong></p>
<p>Die Flash Version Information ist ein Development und Deployment Tool für Flash Anwendungen.</p>
<h3>Implementierung</h3>
<p>Die einfache Implementierung erfordert eine Zeile Code.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">Fnfo.<span style="color: #006600;">initialize</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">this</span><span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p>Mit BuildInformation Plugin</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">Fnfo.<span style="color: #006600;">initialize</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">this</span>, <span style="color: #66cc66;">&#123;</span>versioninfo:FnfoVersion_fnfo.<span style="color: #006600;">VERSION_FILE</span> <span style="color: #66cc66;">&#125;</span> <span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p>Das Resultat ist dieses untere Flash. (Rechts in das Flash klicken und den Context Menüpunkt fnfo anklicken)</p>
<p>
<object width="800" height="450">
<param name="movie" value="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/fnfo-07.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="window"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<param name="flashvars" value="test1Param=Hello&amp;test2Param=World"></param>
<embed type="application/x-shockwave-flash" width="800" height="450" src="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/fnfo-07.swf" quality="high" bgcolor="#FFFFFF" wmode="window" menu="false" flashvars="test1Param=Hello&amp;test2Param=World" ></embed>
</object>
</p>
<p>Um die Information zu schliessen einfach nochmal Rechtsklick und fnfo anklicken.</p>
<p>Der Output wäre wie folgt:</p>
<pre>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</pre>
<p>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.</p>
<p>Weitere Beispiele finden sich unter: <a title="GettingStarted" href="http://code.google.com/p/fnfo/wiki/GettingStarted">GettingStarted</a></p>
<h3>Plugins</h3>
<p>Derzeit sind die meisten Plugins integriert. Eine Plugin Struktur ermöglicht es aber eigene Plugins selbst hinzuzufügen.</p>
<p>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.</p>
<h3>Integration in bestehende IDEs</h3>
<p>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.</p>
<p>Prebuild command in Flash Develop:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">scripts<span style="color: #66cc66;">/</span><span style="color: #0066CC;">version</span>.<span style="color: #006600;">bat</span> $<span style="color: #66cc66;">&#40;</span>OutputName<span style="color: #66cc66;">&#41;</span> $<span style="color: #66cc66;">&#40;</span>ProjectName<span style="color: #66cc66;">&#41;</span> src</pre></div></div>

<p>Die Buildnummer setzt sich derzeit aus:</p>
<pre>{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</pre>
<h3>Status</h3>
<p>Derzeit befindet sich das Tool in Entwicklung. Vorallem mit dem Flashplayer 10.1 mit Global Errorhandling werden wir eine komfortable &#8220;Fehler melden&#8221; Möglichkeit einbauen.</p>
<p>Meinen Dank an Guave Studios, dass dieses Projekt ebenfalls Open Source ist.</p>
<h3>Links</h3>
<ul>
<li><a title="Fnfo Project" href="http://code.google.com/p/fnfo">http://code.google.com/p/fnfo</a></li>
<li><a title="GettingStarted" href="http://code.google.com/p/fnfo/wiki/GettingStarted">http://code.google.com/p/fnfo/wiki/GettingStarted</a></li>
</ul>
<div id="facebook_like"><iframe style="height:80px" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.guavestudios.com%2Fblog%2F2010%2F04%2Ffnfo-flash-info%2F&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:auto;"></iframe></div>]]></content:encoded>
			<wfw:commentRss>http://www.guavestudios.com/blog/2010/04/fnfo-flash-info/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Gilbert Gress ruft euch an!</title>
		<link>http://www.guavestudios.com/blog/2010/04/gilbert-gress-ruft-euch-an/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://www.guavestudios.com/blog/2010/04/gilbert-gress-ruft-euch-an/#comments</comments>
		<pubDate>Wed, 07 Apr 2010 15:50:12 +0000</pubDate>
		<dc:creator>Martin Muther</dc:creator>
				<category><![CDATA[Multimedia]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[gress-cam.ch]]></category>
		<category><![CDATA[webentwicklung]]></category>

		<guid isPermaLink="false">http://www.guavestudios.com/blog/?p=589</guid>
		<description><![CDATA[Eine spannende und neue Aufklärungskampange der Suva mit Gilbert Gress als Hauptperson. http://www.gress-cam.ch]]></description>
			<content:encoded><![CDATA[<p><a title="Gress-cam.ch" href="http://www.gress-cam.ch" target="_blank">http://www.gress-cam.ch</a></p>
<p>Eine interaktive Aufklärungskampagne der Suva.</p>
<h3>Das Projekt</h3>
<p>Gemeinsam mit <a title="Angelink" href="http://www.angelink.ch/" target="_blank">Angelink</a> haben wir vor kurzem das Projekt gress-cam.ch realisiert.<br />
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.</p>
<p><a title="gress-cam.ch Screenshot" rel="lightbox[gresscam]" href="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gilbert_web.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignnone size-full wp-image-648" title="gilbert_web" src="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gilbert_web.jpg" alt="gilbert_web" width="520" height="221" /></a></p>
<h3>Die Idee</h3>
<p>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.</p>
<p>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.</p>
<p><a rel="lightbox[gresscam]" href="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh4_gross.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignnone size-full wp-image-623" title="gresscam-dreh4" src="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh4.jpg" alt="gresscam-dreh4" width="520" height="221" /></a></p>
<h3>Umsetzung</h3>
<p>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.</p>
<p><a rel="lightbox[gresscam]" href="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh5_gross.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignnone size-full wp-image-625" title="gresscam-dreh5" src="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh5.jpg" alt="gresscam-dreh5" width="520" height="221" /></a></p>
<p><a rel="lightbox[gresscam]" href="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh1_gross.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignnone size-thumbnail wp-image-618" style="margin-right:27px;" title="gresscam-dreh1_gross" src="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh1_gross-150x150.jpg" alt="gresscam-dreh1_gross" width="150" height="150" /></a><a rel="lightbox[gresscam]" href="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh3_gross.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignnone size-thumbnail wp-image-622" style="margin-right:27px;" title="gresscam-dreh3_gross" src="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh3_gross-150x150.jpg" alt="gresscam-dreh3_gross" width="150" height="150" /></a><a rel="lightbox[gresscam]" href="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh2_gross.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignnone size-thumbnail wp-image-620" title="gresscam-dreh2_gross" src="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh2_gross-150x150.jpg" alt="gresscam-dreh2_gross" width="150" height="150" /></a></p>
<p>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.</p>
<p>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.</p>
<p>Als Grundstock verwendeten wir das <a title="PureMVC Framework" href="http://www.puremvc.org" target="_blank">PureMVC Framework</a>. Einige andere Libraries (<a title="Fnfo Project" href="http://code.google.com/p/fnfo" target="_blank">fnfo</a>,<a title="Fcfg Project" href="http://code.google.com/p/fcfg" target="_blank">fcfg</a>,<a title="PureMVC Framework" href="http://www.puremvc.org" target="_blank">puremvc</a>,puremvc-syncer,asaf3,flayout,<a title="Open Source Media Framework" href="http://www.opensourcemediaframework.com/" target="_blank">osmf</a>,resm,servicelib,<a href="http://code.google.com/p/tweener" target="_blank">tweener</a>) reduizierten unseren Arbeitsaufwand erheblich.<br />
Hiermit ein Dankeschön an die Entwickler.</p>
<p>Ein tolles Projekt mit vielen Raffinessen.</p>
<p><a rel="lightbox[gresscam]" href="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh6_gross.jpg#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignnone size-full wp-image-627" title="gresscam-dreh6" src="http://www.guavestudios.com/blog/wp-content/uploads/2010/04/gresscam-dreh6.jpg" alt="gresscam-dreh6" width="520" height="221" /></a></p>
<div id="facebook_like"><iframe style="height:80px" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.guavestudios.com%2Fblog%2F2010%2F04%2Fgilbert-gress-ruft-euch-an%2F&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:auto;"></iframe></div>]]></content:encoded>
			<wfw:commentRss>http://www.guavestudios.com/blog/2010/04/gilbert-gress-ruft-euch-an/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Festtagsgrüsse der besonderen Art</title>
		<link>http://www.guavestudios.com/blog/2009/12/augmented-reality-festtagsgrusse/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://www.guavestudios.com/blog/2009/12/augmented-reality-festtagsgrusse/#comments</comments>
		<pubDate>Tue, 08 Dec 2009 18:19:40 +0000</pubDate>
		<dc:creator>Sandro Wellenzohn</dc:creator>
				<category><![CDATA[Aktivitäten]]></category>
		<category><![CDATA[augmented]]></category>
		<category><![CDATA[christmas]]></category>
		<category><![CDATA[festtage]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[reality]]></category>
		<category><![CDATA[weihnachten]]></category>

		<guid isPermaLink="false">http://www.guavestudios.com/blog/?p=470</guid>
		<description><![CDATA[Unter http://www.guavestudios.com/xmas könnt ihr uns ab sofort mit Hilfe einer &#8220;Augmented Reality&#8221; App, die wir für euch gemacht haben einen tollen Weihnachtsgruss zu kommen lassen. Natürlich haben auch wir dort einen hinterlassen und wünschen an dieser Stelle allen frohe Festtage und einen guten Start ins neue Jahr!]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-471" title="xmasblog" src="http://www.guavestudios.com/blog/wp-content/uploads/2009/12/xmasblog.jpg" alt="xmasblog" width="520" height="224" /></p>
<p><big>Unter<strong> <a href="http://guavestudios.com/xmas" target="_blank">http://www.guavestudios.com/xmas</a></strong> könnt ihr uns ab sofort mit Hilfe einer &#8220;Augmented Reality&#8221; App, die wir für euch gemacht haben einen tollen Weihnachtsgruss zu kommen lassen.</big></p>
<p>Natürlich haben auch wir dort einen hinterlassen und wünschen an dieser Stelle allen frohe Festtage und einen guten Start ins neue Jahr!</p>
<div id="facebook_like"><iframe style="height:80px" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.guavestudios.com%2Fblog%2F2009%2F12%2Faugmented-reality-festtagsgrusse%2F&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:auto;"></iframe></div>]]></content:encoded>
			<wfw:commentRss>http://www.guavestudios.com/blog/2009/12/augmented-reality-festtagsgrusse/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flash-Freelancer gesucht</title>
		<link>http://www.guavestudios.com/blog/2009/08/flash-freelancer-gesucht/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://www.guavestudios.com/blog/2009/08/flash-freelancer-gesucht/#comments</comments>
		<pubDate>Wed, 26 Aug 2009 19:14:15 +0000</pubDate>
		<dc:creator>Sandro Wellenzohn</dc:creator>
				<category><![CDATA[Aktivitäten]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[developer]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[freelancer]]></category>

		<guid isPermaLink="false">http://www.guavestudios.com/blog/?p=389</guid>
		<description><![CDATA[Als Aushilfe in arbeitsintensiven Zeiten und für interessante Projekte suchen wir einen Flash Developer auf Freelance-Basis. Mitbringen solltest du: *) Möglichst viel AS3 Erfahrung und Kenntnis in objektorientierter Programmierung *) SVN Kenntnisse *) Teamfähigkeit *) Starke Nerven für Stresssituationen *) Flexibilität Wir freuen uns auf deine Rückmeldung unter off&#8230;@guavestudios.com]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-390" title="flahsergesucht" src="http://www.guavestudios.com/blog/wp-content/uploads/2009/08/flahsergesucht.jpg" alt="flahsergesucht" width="520" height="221" /></p>
<p>Als Aushilfe in arbeitsintensiven Zeiten und für interessante Projekte suchen wir einen Flash Developer auf Freelance-Basis.</p>
<p>Mitbringen solltest du:</p>
<p>*) Möglichst viel AS3 Erfahrung und Kenntnis in objektorientierter Programmierung<br />
*) SVN Kenntnisse<br />
*) Teamfähigkeit<br />
*) Starke Nerven für Stresssituationen <img src='http://www.guavestudios.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
*) Flexibilität</p>
<p>Wir freuen uns auf deine Rückmeldung unter <a title="Reveal this e-mail address" onclick="window.open('http://mailhide.recaptcha.net/d?k=01_bbqpPoA5mc11zURlgErXA==&amp;c=9N9ZSrek5KTUoFfOg5hFVKBb2VvhuzbEqLRK3gELlO4=', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;" href="http://mailhide.recaptcha.net/d?k=01_bbqpPoA5mc11zURlgErXA==&amp;c=9N9ZSrek5KTUoFfOg5hFVKBb2VvhuzbEqLRK3gELlO4=">off&#8230;@guavestudios.com</a></p>
<div id="facebook_like"><iframe style="height:80px" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.guavestudios.com%2Fblog%2F2009%2F08%2Fflash-freelancer-gesucht%2F&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:auto;"></iframe></div>]]></content:encoded>
			<wfw:commentRss>http://www.guavestudios.com/blog/2009/08/flash-freelancer-gesucht/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>PPMCity.com &#8211; Surf Through</title>
		<link>http://www.guavestudios.com/blog/2009/07/ppmcitycom-surf-through/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://www.guavestudios.com/blog/2009/07/ppmcitycom-surf-through/#comments</comments>
		<pubDate>Wed, 01 Jul 2009 15:38:12 +0000</pubDate>
		<dc:creator>Sandro Wellenzohn</dc:creator>
				<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[community]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[portal]]></category>
		<category><![CDATA[ppmcity]]></category>
		<category><![CDATA[virtuelle Stadt]]></category>

		<guid isPermaLink="false">http://www.guavestudios.com/blog/?p=305</guid>
		<description><![CDATA[Ich habe mir jetzt doch mal die Zeit genommen, eine kurze Vorstellung eines unserer grössten Projekte, nämlich die für den schweizer Star-DJ Sir Colin umgesetzte virtuelle Stadt &#8220;PPMCity.com&#8221; zu machen. Das erspart euch langes Probieren und Rumsurfen in der virtuellen Stadt. Ich empfehle trotzdem jedem, der gerne moderne Kommunikationstechinken nutzt, gerne Poker spielt oder eine [...]]]></description>
			<content:encoded><![CDATA[<p>Ich habe mir jetzt doch mal die Zeit genommen, eine kurze Vorstellung eines unserer grössten Projekte, nämlich die für den schweizer Star-DJ Sir Colin umgesetzte <a href="http://www.ppmcity.com/city" target="_blank">virtuelle Stadt &#8220;PPMCity.com&#8221;</a> zu machen. Das erspart euch langes Probieren und Rumsurfen in der virtuellen Stadt. Ich empfehle trotzdem jedem, der gerne moderne Kommunikationstechinken nutzt, gerne Poker spielt oder eine eigene virtuelle Wohnung einrichtet und knifflige Spiele mag, sich in PPMCity umzusehen. </p>
<p>Für jeden interessierten Webdesigner und Flasher lohnt sich der Besuch auf jeden Fall. </p>
<p>Einige erste Eindrücke nun hier im Video:</p>
<p><object width="530" height="350"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5408755&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=b8e32b&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=5408755&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=b8e32b&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="530" height="350"></embed></object>
<p><a href="http://vimeo.com/5408755">PPMCity &#8211; a surf through</a> from <a href="http://www.vimeo.com/user1978664">PPMCity</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<div id="facebook_like"><iframe style="height:80px" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.guavestudios.com%2Fblog%2F2009%2F07%2Fppmcitycom-surf-through%2F&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:auto;"></iframe></div>]]></content:encoded>
			<wfw:commentRss>http://www.guavestudios.com/blog/2009/07/ppmcitycom-surf-through/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flash&amp;Usability &#8211; Nutzerfreundliche Flashprojekte</title>
		<link>http://www.guavestudios.com/blog/2009/06/flashusability-nutzerfreundliche-flashprojekte/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://www.guavestudios.com/blog/2009/06/flashusability-nutzerfreundliche-flashprojekte/#comments</comments>
		<pubDate>Tue, 16 Jun 2009 21:21:50 +0000</pubDate>
		<dc:creator>Sandro Wellenzohn</dc:creator>
				<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[suchmaschinenoptimierung]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://www.guavestudios.com/blog/?p=171</guid>
		<description><![CDATA[Flash ermöglicht Designern und Entwicklern multimedial aufbereitete Inhalte weitgehend browserunabhängig bereitzustellen. Man kann Animationen erstellen, mehr Interaktivität produzieren und damit beeindruckende Interfaces erstellen. Mit AS3 besitzt Flash mittlerweile eine Scriptsprache, mit der sich alle wichtigen Prinzipien der Objektorientierung umsetzen lassen. Damit kann man mit Flash als Entwicklungsumgebung auch grosse Projekte umsetzen. Leider gibt es durch [...]]]></description>
			<content:encoded><![CDATA[<p>Flash ermöglicht Designern und Entwicklern multimedial aufbereitete Inhalte weitgehend browserunabhängig bereitzustellen. Man kann Animationen erstellen, mehr Interaktivität produzieren und damit beeindruckende Interfaces erstellen. Mit AS3 besitzt Flash mittlerweile eine Scriptsprache, mit der sich alle wichtigen Prinzipien der Objektorientierung umsetzen lassen. Damit kann man mit Flash als Entwicklungsumgebung auch grosse Projekte umsetzen.</p>
<p>Leider gibt es durch diese Möglichkeiten auch immer wieder Ausbrüche von „Flash-Euphorie“, die dazu führen, das diese tolle Technologie relativ unvorteilhaft für Nutzer und damit auch für die Betreiber eingesetzt wird.<br />
Ich möchte an dieser Stelle aber nicht darüber philosophieren, wann und wo Flash eingesetzt werden soll, sondern ein paar Techniken vorstellen, die dazu verwendet werden können, speziell Flash-Webseiten und Applikationen so aufzubereiten, dass sie möglichst „usable“  werden.</p>
<p><strong><big>Flash und der Browser</big></strong></p>
<p>Auch wenn der Flash-Player heutzutage eine hohe Verbreitung geniesst, ist er ein Browser-Plugin. Die Verwendung von Browserplugins im WWW ist aus mehreren Gründen nicht ganz unproblematisch. Eine Sache ist, dass die damit ausgeführten Programme als Elemente einer einzigen Seite implementiert sind und dadurch nicht über mehrere Seiten einer Webseite weiterlaufen können. Dies ist vor allem problematisch wenn komplette Webseiten mit Flash realisiert werden. Daraus ergeben sich einige Probleme.</p>
<p><strong>Flash Einbetten</strong></p>
<p>Schon beim Implementieren des Flash-Objektes in die HTML Struktur kann man einiges herausholen. Beispielsweise kann mit der Angabe des Parameters „Accesskey“ beim Flash-Objekt der Focus per Tastatur geregelt werden.</p>
<p>Weiterhin empfiehlt es sich heute, die &lt;embeds&gt; und &lt;objects&gt; für die SWFS per Javascript zu schreiben (beispielsweise <a href="http://osflash.org/flashobject" target="_blank">FlashObject</a>), da so die ActiveX -Element -Sperre von Microsoft-Browsern umgangen werden kann und das Flash sofort den Fokus erhält. (sonst muss man das Flash eventuell mit einem zusätzlichen Klick aktivieren)<br />
Hier ist aber zu beachten, im &lt;noscript&gt; &#8211; Bereich eine Alternative bereitzustellen.<br />
Generell sollte für Flash-Elemente auch einen alternativen Inhalt bereitgestellt werden, der immer dann geladen wird, wenn kein FlashPlayer vorhanden ist (FlashObject z.B. hat die Möglichkeit das zu Prüfen bereits implementiert). Das Minimum sollte sein, dass eine Meldung ausgegeben wird, das kein Flash -Player vorhanden ist und ein Download-Link zum Plugin. Auch sollte auf die FlashVersion abgeprüft werden, und gegebenenfalls eine Alternative, oder besser, ein Update auf die neueste Version des Players gestartet werden können.</p>
<p><strong>Zurück – Vorwärts – Reload ?</strong></p>
<p>Viele Benutzer navigieren oft mit den Browserbuttons für „Vor“ und „Zurück“ sowie „Aktualisieren“. Eine einheitliche Bedienung (<em>don&#8217;t make users think</em>) und gewohnt funktionale Bedienelemente sind in der Usability sehr wichtig. Deshalb sollten für reine Flash-Webseiten oder Apps Tricks angewandt werden um diese Funktionalität wieder zu ermöglichen. Eine verbreitete Möglichkeit ist, mit dem Tool „<a href="http://www.asual.com/swfaddress/" target="_blank">SWFAdress</a>“ zu arbeiten, das im Grunde eine Library ist, die es ermöglicht, für Flash-Dateien „virtuelle URLs“ anzulegen, die dann in Flash aufgelöst werden. Dadurch wird es   wieder möglich, die Seite zu aktualisieren, in der Chronik vor- und zurückzublättern, oder direkte Links zu Unterseiten der Flash-Webseite (z.B. per E-Mail) zu versenden.</p>
<p>Als Beispiel erwähne ich an dieser Stelle eines unserer älteren Projekte, die virtuelle Stadt <a href="http://www.ppmcity.com/city" target="_blank">ppmcity.com</a>, wo wir auch die Positionen in den Blätterscripts, etc. in der URL mitübergeben. <em>(Um die Stadt ohne registrieren zu Betreten, könnt ihr unter der Login-Maske &#8220;als Gast einloggen&#8221; anklicken.)</em></p>
<p><strong><big>Suchmaschinenoptimierte Flashs</big></strong></p>
<p>Adobe Flash hat sich als populäres Format für interaktive Anwendungen und Internetseiten etabliert. Jedoch besitzen Flash-Webseiten einen entscheidenden Nachteil &#8211; publizierte Inhalte können nur teilweise von Suchmaschinen erfasst und verarbeitet werden. Einige Suchmaschinen lesen mittlerweile schon komplette Zeichenfolgen aus den Flash-Dateien aus,  auf diesem Gebiet wird geforscht und gearbeitet. Trotzdem ist die Indizierung von HTML &#8211; Dateien der Indizierung von Flash Inhalten noch weit voraus.</p>
<p>Der erste Schritt bei der Suchmaschinenoptimierung für Flash-Webseiten ist also im Prinzip der, den es bei HTML nicht in dieser Form braucht, nämlich den Bots der Suchmaschinen, die das Internet durchforsten einen Inhalt zur Verfügung zu stellen, den sie besser und genauer lesen können. Diese Bots können nämlich z.B. keine Flash-MovieClips an sich lesen, sondern lesen im Prinzip eigentlich das, was wir sehen, wenn wir den Quelltext einer Webseite ansehen. Ich möchte mich jetzt nicht allzu tief in diese Problematik vertiefen, aber ich möchte auf <a href="http://bachelorarbeit.holgerstitz.de/" target="_blank">ein Beispiel zur Suchmaschinenoptimierung von Flashseiten</a> verlinken. Ich werde im späteren Verlauf bei Interesse noch einen eigenen Post hier hineinstellen. Wichtig ist aber grundsätzlich, dass man sich bewusst ist, dass es bei Flash-Webseiten zusätzlichen Aufwand benötigt, um eine akzeptable On-Page optimierung zu bekommen.</p>
<p><strong><big>Das Flashprojekt ansich</big></strong></p>
<p><strong>Ladezeiten</strong></p>
<p>Flash verleitet natürlich gerade aufgrund der Möglichkeiten im Streamingbereich dazu, Projekte mit grosser Datenmenge zu realiseren. Trotzdem gilt auch für Flash-Elemente<em> „Don’t squander users’ patience“</em> &#8211; stelle die Geduld der Nutzer nicht auf die Probe!  Zu lange Ladezeiten (z.B. &gt; 15 Sek. bei durchschnittlicher Breitbandverbindung) sollten vor allem bei Flash-Webseiten vermieden werden. Bei Onlinespielen und Videos sind Nutzer meiner Erfahrung nach meist gewillt, längere Ladezeiten in Kauf zu nehmen. Sinnvoll ist es auf jeden Fall einen „Preloader“ darzustellen, um dem Nutzer den Fortschritt zu veranschaulichen. Bei grösseren Projekten empfehle ich, dass ihr euch auch eine prebuffering – Strategie ausdenkt.</p>
<p><strong>Funktionalitäten und Design der UI &#8211; Elemente</strong></p>
<p>Flash bietet die tolle Möglichkeit, jegliches Bedienelement auf der Webseite individuell zu gestalten. Hier ist die Gefahr also besonders gross, dass Unübersichtlichkeit und damit „Unbedienbarkeit“ vorherrscht.<br />
Achtet also darauf, dass das Aussehen von Bedienelementen mit gleicher Funktionalität (z.B. alle Dropdowns) auch möglichst gleich ist. Das Links und Backlinks, Menüelemente, oder Formulare und Bedienelemente ein durchgängiges Design haben und dass das Aussehen und die Funktion nicht zu extrem von gewohnten Normen abweichen.  Ein zu starkes Abweichen der Normen hat hier fast immer zur Folge, dass sich der Nutzer intensiver mit dem Element auseinandersetzen muss und das Gefühl verliert, die Applikation unter Kontrolle zu haben bzw. zu wissen was passiert, wenn er agiert. Viele sind dazu nicht gewillt. Dies kann bzw. wird sich negativ auf die User Experience auswirken. Es kann aber auch Vorteilhaft sein, wenn man eine spezifische Zielgruppe erreichen möchte oder das Projekt nicht vordergründig der Informationsvermittlung dient („<em>discover</em>“ &#8230; Onlinespiele – Rätsel – etc.)</p>
<p><a href="http://www.nintendo.com/wiifit/launch/" target="_blank"><img class="alignnone size-full wp-image-189" title="wiifit" src="http://www.guavestudios.com/blog/wp-content/uploads/2009/06/wiifit.jpg" alt="wiifit" width="510" height="318" /></a></p>
<p><em>Bei Wii-Fit haben das die Kollegen von FI hinbekommen, wie ich finde.<br />
</em></p>
<p><strong>Loony – loops &amp; Animation</strong></p>
<p>Animationen sieht man mittlerweile oft und überall. Meistens werden Sie bei kommerziellen Webangeboten dazu genutzt, die Aufmerksamkeit des Nutzers (z.B bei Bannerwerbung) auf sich zu ziehen. Mit Animationen klappt das oft sehr gut.  Das Problem ist, dass sich das in anderen Einsatzbereichen auch negativ auswirken kann. Wenn ich z.B. diesen Blog Eintrag lesen würde und im Header oder (noch schlimmer) an der Seite läuft eine schnelle und bunte, sich wiederholende 3D-Animation ab, würde das meinen Lesefluss extrem stören <img src='http://www.guavestudios.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .<br />
Ich rate nicht von Anmiationen ab, aber es ist generell wichtig, sich im vorhinein zu überlegen, wohin man (und z.B. in welcher Reihenfolge) den Fokus des Betrachters lenken möchte. Dies kann man mit ganz wenig typografischen oder layouttechnischen Mitteln erreichen, und eben auch mit Animationen. Diese sollten –  vor allem bei vordergründig Informations-vermittelnden Flash-Programmen – eher dazu verwendet werden auch Informationen zu vermitteln oder bei der Vermittlung von Informationen unterstützen (z.B. veranschaulichen) und nicht in der Schleife ablaufen. Natürlich kann man Animationen auch einsetzen um „Athmosphäre“ zu schaffen, ich empfehle euch dann jedoch, vorallem wenn ihr noch Lesematerial anzeigt, das vorsichtig zu tun. Wenn man Animationen richtig verwendet, sind sie ein mächtiges Werkzeug. Bei Spielen haben Anis noch zusätzliche wichtige Aufgaben, deshalb gilt dieser Punkt eher für Webseiten und Anwendungen.</p>
<p><img title="beispiel focus" src="http://www.sitepoint.com/blogs/wp-content/uploads/2009/05/image0142.jpg" alt="http://www.sitepoint.com/blogs/wp-content/uploads/2009/05/image0142.jpg" width="510" height="325" /></p>
<p><em>In diesem Beispiel wird der Fokus des Nutzers sofort auf die wichtigen Stellen</em><em><br />
(Beschreibung und Funktionalitäten der Webseite) fallen.</em></p>
<p><strong>Accessibility-Klasse</strong></p>
<p>Um die zugänglichkeit von mit Flash bereitgestellten Informationen zu erhöhen, könnt ihr die Accessibility – Klasse (seit AS2 meines Wissens nach) einsetzen.<br />
Die Accessibility-Klasse verwaltet die Kommunikation mit Bildschirmleseprogrammen. Bildschirmleseprogramme sind eine Art unterstützende Technologie für Sehbehinderte, die auf diese Weise eine akustische Umsetzung des Bildschirminhalts erhalten. Man kann abprüfen, ob ein Computersystem Eingabehilfen unterstützt und dann die vorzulesenden Inhalte den verschiedenen Objekten hinzufügen. Es gibt Projekte, wo sehr zugänglich sein müssen und solche Massnahmen ziemlich wichtig sind.</p>
<p><strong>Sounds</strong></p>
<p>Sounds sind natürlich ein tolles und im Web oft vernachlässigtes Feature, mit dem man viel Athmosphäre schaffen kann um Eindrücke zu vermitteln und damit eine positive User Experience zu schaffen. Generell ist es aber in der Usability ziemlich wichtig, dem Benutzer immer das Gefühl zu geben, alles kontrollieren zu können : ).<br />
Deshalb finde ich es im Bezug auf Sounds sehr wichtig, immer eine Control anzubieten, mit der der Benutzer den Sound aus- und einschalten kann. Ich selber speichere bei unseren Projekten die Auswahl des Nutzers („aus“ oder „ein“) immer in ein local-shared-object oder ein cookie um die Auswahl auch dann speichern zu können, wenn der Nutzer das nächste mal die Seite besucht.<br />
Ein Beispiel wäre hier <a href="http://www.daviddolder.com" target="_blank">die Seite des Hochzeitsfotografen David Dolder</a>.</p>
<p><em> </em></p>
<p><em><br />
Flash und Usability ist kein Gegensatz. Wenn man mit Flash arbeitet, heisst das nicht, dass Usability  komplett ignoriert werden kann. Und Usability wiederrum heisst in meinen Augen nicht, auf alle Vorzüge von Flash verzichten zu müssen.<br />
Viele haben Spass mit Flash und ignorieren jegliche Usability Richtlinien. Das ist OK, wenn das einzige Ziel des Projektes ist, damit Spass zu haben. Allen die auch  Projekte mit zusätzlichem Zweck realisieren, rate ich dazu, es mal auszuprobieren ; )<br />
</em></p>
<div id="facebook_like"><iframe style="height:80px" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.guavestudios.com%2Fblog%2F2009%2F06%2Fflashusability-nutzerfreundliche-flashprojekte%2F&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:auto;"></iframe></div>]]></content:encoded>
			<wfw:commentRss>http://www.guavestudios.com/blog/2009/06/flashusability-nutzerfreundliche-flashprojekte/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

