<?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; webentwicklung</title>
	<atom:link href="http://www.guavestudios.com/blog/tag/webentwicklung/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>Tue, 31 Aug 2010 09:53:30 +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>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>Genetische Algorithmen Mandalaa.com</title>
		<link>http://www.guavestudios.com/blog/2009/07/genetische-algorithmen-mandalaacom/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://www.guavestudios.com/blog/2009/07/genetische-algorithmen-mandalaacom/#comments</comments>
		<pubDate>Wed, 08 Jul 2009 16:12:41 +0000</pubDate>
		<dc:creator>Martin Muther</dc:creator>
				<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[genetic algorithm]]></category>
		<category><![CDATA[mandalaa]]></category>
		<category><![CDATA[webentwicklung]]></category>

		<guid isPermaLink="false">http://www.guavestudios.com/blog/?p=315</guid>
		<description><![CDATA[Mit mandalaa.com haben wir ein Projekt für einen unserer Kunden verwirklicht, dass den Benutzer Blumen generieren lässt. Er kann die Form, Farbe und Maserung dieser durch mutieren und kreuzen beeinflussen. Die Blumen entwickeln sich dadurch weiter und können dann gespeichert und weiterversandt werden. Ein Video des entwickelten Prototyps gibts hier: Mandalaa &#8211; Webproject from Guave [...]]]></description>
			<content:encoded><![CDATA[<p>Mit <a title="Blumen generieren Mandalaa.com" href="http://www.mandalaa.com" target="_blank">mandalaa.com</a> haben wir ein Projekt für einen unserer Kunden verwirklicht, dass den Benutzer Blumen generieren lässt. Er kann die Form, Farbe und Maserung dieser durch mutieren und kreuzen beeinflussen. Die Blumen entwickeln sich dadurch weiter und können dann gespeichert und weiterversandt werden.</p>
<p>Ein Video des entwickelten Prototyps gibts hier:</p>
<p><object width="530" height="298" data="http://vimeo.com/moogaloop.swf?clip_id=4843949&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"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=4843949&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=b8e32b&amp;fullscreen=1" /></object></p>
<p><a href="http://vimeo.com/4843949">Mandalaa &#8211; Webproject</a> from <a href="http://vimeo.com/user1530942">Guave Studios, Zürich</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<h3>Parameter Haufen</h3>
<p>Die Daten der Blumen selbst bestehen aus einem Parameterhaufen, der die verschiedenen Eigenschaften beschreibt. Die Vielfalt der Blumen zeigt, dass mit Hilfe relativ weniger Parameter extrem viele verschiedene Möglichkeiten bestehen. Es gibt auch Beziehungen zwischen Parametern, die für die Mutation und die Kreuzungen wichtig sind.</p>
<h3>Genetische Algorithmen</h3>
<p>Hinter der Applikation verbergen sich einige genetische Algorithmen. Jedoch fehlt ein entscheidender Schritt zur Genetik. Der Einfachheit halber haben wir auf Deathrules (Regeln für das Sterben einer genetischen Linie) verzichtet und den Blumen konkrete Regeln vorgegeben. Dies hat einen entscheidenden Vorteil, da wir die somit nicht darstellbaren Formen von vornherein ausschliessen.</p>
<h3>Reproduzierbare Zufälle</h3>
<p>Da wir zu viele Parameter bräuchten um alles zu beschreiben, brauchten wir Zufälle. Diese mussten aber reproduzierbar sein, sonst würde eine vom Nutzer zuvor gespeicherte Blume bei jedemProgrammaufruf ein bisschen anders ausschauen. Dies umgingen wir mit einem &#8220;Pseudo-Random-Generator&#8221; mit Offset. Was hat das Ganze dann aber noch mit Genetik zu tun? Der Offset ist sowas wie die Genetik. Sie bestimmt bei jeder Blume ihre Charakteristiken.</p>
<h3>Erweiterbarkeit</h3>
<p>Da wir davon ausgehen, dass sich dieses Projekt weiterentwickelt, war die Erweiterbarkeit ein wichtiger Punkt. Was dabei problematisch ist, sind die bisher generierten Blumen. Denn sobald Darstellungsalgorithmen geändert oder erweitert werden müssen, könnte dies fatale Folgen für die bereits gespeicherten Blumen haben. Deswegen ist die Generation, Beschreibung und Darstellung völlig getrennt, austausch- und erweiterbar.</p>
<p><a title="Blumen generieren mandalaa.com" href="http://www.mandalaa.com" target="_blank">Jetzt Blumen generieren auf mandalaa.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%2F07%2Fgenetische-algorithmen-mandalaacom%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/genetische-algorithmen-mandalaacom/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>fCon Flash Deployment Console</title>
		<link>http://www.guavestudios.com/blog/2009/06/fcon-flash-deployment-console/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://www.guavestudios.com/blog/2009/06/fcon-flash-deployment-console/#comments</comments>
		<pubDate>Thu, 18 Jun 2009 11:49:06 +0000</pubDate>
		<dc:creator>Martin Muther</dc:creator>
				<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[fcon]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[webentwicklung]]></category>

		<guid isPermaLink="false">http://www.guavestudios.com/blog/?p=215</guid>
		<description><![CDATA[Die Flash Deployment Console ist für das Deployment in einem Game oder in einer Webseite gedacht, die während der Laufzeit direkten administrativen Eingriff in die Applikation oder Ablauf brauchen. Vergleichbar ist die fCon mit einer Development Console in einem Spiel. (Vielfach mit ^ aufrufbar). Applikationskontrolle Die fCon hat in der Console eine Eingabemöglichkeit (Kommandozeile). So [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-296" title="fcon_logo" src="http://www.guavestudios.com/blog/wp-content/uploads/2009/06/fcon_logo.png" alt="fcon_logo" width="286" height="159" /></p>
<p>Die Flash Deployment Console ist für das Deployment in einem Game oder in einer Webseite gedacht, die während der Laufzeit direkten administrativen Eingriff in die Applikation oder Ablauf brauchen.  Vergleichbar ist die fCon mit einer Development Console in einem Spiel. (Vielfach mit ^ aufrufbar). <strong></strong></p>
<p><strong>Applikationskontrolle</strong></p>
<p>Die fCon hat in der Console eine Eingabemöglichkeit (Kommandozeile). So ist es möglich Commands zu registrieren die beispielsweise den Benutzer in ein gewisses Level setzen.</p>
<p><strong>Modifikation von Variablen</strong></p>
<p>Die fCon bietet Möglichkeiten für das setzen von Variablen. Sie bietet vorallem mit Vervollständigung eine Navigation durch alle DisplayObjects.</p>
<p><strong>Deployment Logging</strong></p>
<p>Gerade bei Flash Online Applikationen befinden sich die Logs einer Applikation auf der Nutzerseite. Somit kann die Laufzeit der Applikation nicht überwacht werden. Natürlich kann man die Logstufen FATAL und ERROR  per Reports an den Server übermitteln, aber bei DEBUG und INFO wäre das mengenmässig ein absolutes Problem. Somit kann man als Entwickler direkt vor Ort in das Geschehen der Applikation Einblick nehmen und den aktuellen Fehler in den Logs suchen.</p>
<p><strong>History</strong></p>
<p>Die fCon bietet eine History mit UP and DOWN keys an. Diese kann mit einer Einstellung Lokal automatisch gespeichert werden. Weiteres kann man mit PAGE_UP oder PAGE_DOWN im Logviewer gescrolled werden. Drückt man zusätzlich SHIFT kann man nach ganz oben oder nach ganz unten.</p>
<p><strong>Scripts und Variablen</strong></p>
<p>Zusätzlich ist ein einfaches Scripting und Variablendeffinitionen möglich.<strong> </strong></p>
<p><strong>Sicherheit</strong></p>
<p>Da wir nicht jedem auf einer Webseite den Zugriff auf die Console bieten wollen kann mit dem Lockmanager ein Passwort gesetzt werden. Das ganze funktioniert versteckt und ohne Visuelles Feedback. Somit ist es in einer gewissen Weise &#8220;geheim&#8221; das diese Applikation eine Console bietet. Das Passwort ist selbstverständlich gehashed und somit auch nicht auslesbar.</p>
<p><strong>Ein paar kleine Beispiele</strong></p>
<p>Einfaches Setup</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package <span style="color: #66cc66;">&#123;</span>
  <span style="color: #0066CC;">import</span> com.<span style="color: #006600;">guavestudios</span>.<span style="color: #006600;">fcon</span>.<span style="color: #006600;">ConsoleImpl</span>;
  <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Sprite</span>;
  <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">StageAlign</span>;
  <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">StageScaleMode</span>;
  <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">Event</span>;
  <span style="color: #0066CC;">import</span> flash.<span style="color: #0066CC;">text</span>.<span style="color: #0066CC;">TextField</span>;
  <span style="color: #0066CC;">import</span> flash.<span style="color: #0066CC;">text</span>.<span style="color: #006600;">TextFieldAutoSize</span>;
&nbsp;
  <span style="color: #808080; font-style: italic;">/**
   * fCon Sample
   * @author maze | guavestudios.com
   */</span>
  <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> Main <span style="color: #0066CC;">extends</span> Sprite <span style="color: #66cc66;">&#123;</span>
&nbsp;
    <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> txt:<span style="color: #0066CC;">TextField</span>;
&nbsp;
    <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> Main<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
      <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">stage</span><span style="color: #66cc66;">&#41;</span> init<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
      <span style="color: #b1b100;">else</span> addEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">ADDED_TO_STAGE</span>, init<span style="color: #66cc66;">&#41;</span>;
    <span style="color: #66cc66;">&#125;</span>
&nbsp;
    <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> init<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">e</span>:Event = <span style="color: #000000; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
      removeEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">ADDED_TO_STAGE</span>, init<span style="color: #66cc66;">&#41;</span>;
      <span style="color: #808080; font-style: italic;">// entry point</span>
      <span style="color: #0066CC;">stage</span>.<span style="color: #0066CC;">scaleMode</span> = StageScaleMode.<span style="color: #006600;">NO_SCALE</span>;
      <span style="color: #0066CC;">stage</span>.<span style="color: #0066CC;">align</span> = StageAlign.<span style="color: #006600;">TOP_LEFT</span>;
&nbsp;
      ConsoleImpl; <span style="color: #808080; font-style: italic;">//reference the console</span>
      <span style="color: #000000; font-weight: bold;">var</span> config:<span style="color: #0066CC;">XML</span>=
&nbsp;
         <span style="color: #66cc66;">&lt;!</span><span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span>crtl+Char.<span style="color: #66cc66;">&lt;</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&gt;&lt;/</span>setting<span style="color: #66cc66;">&gt;</span>
         <span style="color: #66cc66;">&lt;</span>setting id=<span style="color: #ff0000;">&quot;Console.trace&quot;</span><span style="color: #66cc66;">&gt;</span>false<span style="color: #66cc66;">&lt;/</span>setting<span style="color: #66cc66;">&gt;</span>
         <span style="color: #66cc66;">&lt;</span>setting id=<span style="color: #ff0000;">&quot;AutoCompletion.Key&quot;</span><span style="color: #66cc66;">&gt;&lt;!</span><span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span>Char.<span style="color: #66cc66;">&lt;</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&gt;</span>
         <span style="color: #000000; font-weight: bold;">true</span>
         <span style="color: #000000; font-weight: bold;">true</span>
        ;
      Console.<span style="color: #006600;">setStage</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">stage</span>, config<span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">//initialize console</span>
&nbsp;
      Console.<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Hello World&quot;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">//sample trace</span>
&nbsp;
      <span style="color: #808080; font-style: italic;">//create a sample textfield</span>
      txt = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">TextField</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
      txt.<span style="color: #0066CC;">autoSize</span> = TextFieldAutoSize.<span style="color: #0066CC;">LEFT</span>;
      txt.<span style="color: #0066CC;">text</span> = <span style="color: #ff0000;">&quot;Open with 'CRTL + &amp;lt;' and completion with '&amp;lt;'&quot;</span>;
      addChild<span style="color: #66cc66;">&#40;</span>txt<span style="color: #66cc66;">&#41;</span>;
&nbsp;
      <span style="color: #808080; font-style: italic;">//register an sample command with textField</span>
      Console.<span style="color: #006600;">execute</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;loadCommand&quot;</span>,<span style="color: #000000; font-weight: bold;">new</span> SampleCommand<span style="color: #66cc66;">&#40;</span>txt<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;
    <span style="color: #66cc66;">&#125;</span>
&nbsp;
    <span style="color: #808080; font-style: italic;">/**
     * sample function
     * @return testString
     */</span>
    <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> getString<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">String</span> <span style="color: #66cc66;">&#123;</span>
      <span style="color: #b1b100;">return</span> <span style="color: #ff0000;">&quot;this is a test String&quot;</span>;
    <span style="color: #66cc66;">&#125;</span>
  <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Um die Console aufzurufen muss man zuerst das Flash aktivieren und CRTL + &lt; drücken. Dieser Shortcut ist frei definierbar mit der Config.</p>
<p>Das kleine Tutorial zeigt einige Funktionen die die Console im jetztigen Status kann. Die ganzen Kommandos können nach der Reihe ausgeführt werden.<br />
Die Console ist gleich darunter eingebettet und ist noch zugeklappt:<br />
<big>Console</big><br />

<object width="510" height="250">
<param name="movie" value="http://www.guavestudios.com/blog/wp-content/uploads/2009/06/blogfcon4.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>
<embed type="application/x-shockwave-flash" width="510" height="250" src="http://www.guavestudios.com/blog/wp-content/uploads/2009/06/blogfcon4.swf" quality="high" bgcolor="#FFFFFF" wmode="window" menu="false" ></embed>
</object>
</p>
<ul class="numeric">
<li>Ist die Console offen und das Eingabe Feld aktiviert kann man mit <em>&lt;</em> alle verfügbaren Commandos anzeigen.</li>
<li>mit <strong><em>pr</em></strong> und <strong><em>&lt;</em></strong> vervollständigt die Console zu <strong><em>print</em></strong> Leertaste. Danach <strong><em>Hello World</em></strong> eingeben und Enter drücken</li>
<li><strong><em>align help</em></strong> eingeben um eine hilfe über den Align Command darzustellen</li>
<li><strong><em>align bottom</em></strong> eingeben um die Console ganz untem im Flash zu positionieren</li>
<li>Wir befinden uns derzeit auf der Stage</li>
<li><strong><em>print $stage.@</em></strong> und mit <strong><em>&lt;</em></strong> vervollständigen um die verfügbaren Childs der Stage anzuzeigen (nummeriert)</li>
<li>weiter schreiben mit <strong><em>1.</em></strong> und vervollständigen mit <strong><em>&lt;</em></strong>. Wir befinden uns jetzt in der Applikation und sehen die Eigenschaften.</li>
<li>Die ganze Zeile kann jetzt weitergeschrieben werden auf <strong><em>print $stage.@0.txt.text</em></strong> und mit Enter ausführen</li>
<li>Da wir das Textfeld nocheinmal brauchen können wir es in eine Variable speichern.</li>
<li><strong><em>set textField $stage.@0.txt</em></strong></li>
<li>Wir können jetzt eine Variable modifiziern mit <strong><em>modify $textField.name &#8216;myTextField&#8217;</em></strong></li>
<li>Die Vervollständigung kann auch auf Element Namen reagieren.</li>
<li><strong><em>print $stage.@0.#</em></strong> und mit <strong><em>&lt;</em></strong> vervollständigen. Jetzt wird myTextField als benanntes Item angezeigt. (Listet alle DisplayObjects mit Namen auf)</li>
<li>Fertigschreiben <strong><em>print $stage.@0.#myTextField.text</em></strong></li>
<li>Wir können das Textfeld umpositionieren mit <strong><em>modify $textField.y 50</em></strong></li>
<li>Wir haben bei der Initialisierung die Console um &#8220;SampleCommand&#8221; erweitert. Der Command ist sampleCommand</li>
<li><strong><em>sampleCommand $textField.x $textField.y</em></strong></li>
</ul>
<p>Wir haben die Flash Deployment Console mit unseren Applikationen weiterentwickelt und jetzt online verfügbar gemacht.<br />
Im Trunk befinden sich derzeit noch mehr Plugins und Commands die ich bei Zeit vorstellen werde.</p>
<p><a href="http://fcon.googlecode.com" target="blank">fCon on Googlecode.com</a></p>
<p><a href="http://www.guavestudios.com/blog/wp-content/uploads/2009/06/fconblog.zip#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">Sourcecode für Sample</a></p>
<p>Das ganze ist OpenSoure und unter MIT Lizenz. Wer mitentwickeln möchte kann sich gerne bei uns melden.</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%2Ffcon-flash-deployment-console%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/fcon-flash-deployment-console/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
