<?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>Sascha Wolter &#187; AIR</title>
	<atom:link href="http://www.wolter.biz/tag/air/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.wolter.biz</link>
	<description>Craftsman for Pervasive Computing, Rich Applications and Mobile Apps in all flavors.</description>
	<lastBuildDate>Wed, 18 Jan 2012 20:07:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>I do not care – Technologieneutrale Anwendungsentwicklung f&#252;r mobile Ger&#228;te</title>
		<link>http://www.wolter.biz/2011/09/13/i-do-not-care-technologieneutrale-anwendungsentwicklung-fur-mobile-gerate/</link>
		<comments>http://www.wolter.biz/2011/09/13/i-do-not-care-technologieneutrale-anwendungsentwicklung-fur-mobile-gerate/#comments</comments>
		<pubDate>Tue, 13 Sep 2011 13:58:34 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[Conference]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Lego Mindstorms]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[Windows Phone 7]]></category>
		<category><![CDATA[WPF]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=837</guid>
		<description><![CDATA[Kaum ein Thema ist m&#252;hsamer, als sich bei einem Projekt f&#252;r die vermeintlich richtige Technologie zu entscheiden. Ganz besonders dann, wenn diese Entscheidung auch noch von strategischer Bedeutung und im besten Fall ger&#228;teunabh&#228;ngig sein soll. Und wie man es macht, macht man es verkehrt, denn auch die Glaskugel verr&#228;t uns nicht, was schon in wenigen [...]]]></description>
			<content:encoded><![CDATA[<p>Kaum ein Thema ist m&uuml;hsamer, als sich bei einem Projekt f&uuml;r die vermeintlich richtige Technologie zu entscheiden. Ganz besonders dann, wenn diese Entscheidung auch noch von strategischer Bedeutung und im besten Fall ger&auml;teunabh&auml;ngig sein soll. Und wie man es macht, macht man es verkehrt, denn auch die Glaskugel verr&auml;t uns nicht, was schon in wenigen Monaten angesagt ist. Doch wenn man die richtigen Konzepte versteht und mit etablierten Mustern arbeitet, dann ist es fast egal, f&uuml;r welche Plattform eine Anwendung erstellt wird und ob diese nativ oder weborientiert arbeitet. Sprachen wie JavaScript, Java, Objective-C, C# oder was auch immer verkommen zu einer austauschbaren Nebens&auml;chlichkeit.</p>
<p>In meinem aktuellen Vortrag zeige ich, wie ich dieser Herausforderung begegne und was ich in fast 15 Jahren als Rich-Application-Experte f&uuml;r Desktop, Browser und Mobile von Flash &uuml;ber Silverlight bis hin zu HTML5 gelernt habe, um den st&auml;ndig wechselnden Anforderungen Herr zu werden. Aus der Praxis bew&auml;hrte Prozesse und Entwurfsmuster werden ebenso behandelt wie eine grundlegende Softwarearchitektur und beispielhaft in eine konkrete Anwendung &uuml;berf&uuml;hrt!</p>
<p>Die Folien zu diesem Vortrag gibt es <a href='http://www.wolter.biz/blog/wp-content/uploads/2011/09/i_do_not_care.pdf'>hier als PDF</a> (ca. 4 MB). Konstruktive Kritik und Anregungen sind willkommen&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2011/09/13/i-do-not-care-technologieneutrale-anwendungsentwicklung-fur-mobile-gerate/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To: Interoperabilit&#228;t</title>
		<link>http://www.wolter.biz/2010/07/10/next-generation-user-interfaces-how-to-interoperabilitaet/</link>
		<comments>http://www.wolter.biz/2010/07/10/next-generation-user-interfaces-how-to-interoperabilitaet/#comments</comments>
		<pubDate>Sat, 10 Jul 2010 08:00:25 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Lego Mindstorms]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[Wii]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=766</guid>
		<description><![CDATA[Die Ein- und Ausgabem&#246;glichkeiten Web-basierter Technologien sind beinahe unersch&#246;pflich, dennoch gibt es Grenzen – sp&#228;testens wenn man den Rechner verlassen und die Au&#223;enwelt kontaktieren m&#246;chte. Gl&#252;cklicherweise ist hier Abhilfe in Form von Arduino (http://www.arduino.cc/) und Co. verf&#252;gbar. Das Arduino-Board erlaubt die analoge und digatale Ein- und Ausgabe per serieller Schnittstelle, um beispielsweise Sensoren auszulesen oder [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image9.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb9.png" width="244" height="185" /></a> Die Ein- und Ausgabem&ouml;glichkeiten Web-basierter Technologien sind beinahe unersch&ouml;pflich, dennoch gibt es Grenzen – sp&auml;testens wenn man den Rechner verlassen und die Au&szlig;enwelt kontaktieren m&ouml;chte. Gl&uuml;cklicherweise ist hier Abhilfe in Form von Arduino (<a href="http://www.arduino.cc/">http://www.arduino.cc/</a>) und Co. verf&uuml;gbar. Das Arduino-Board erlaubt die analoge und digatale Ein- und Ausgabe per serieller Schnittstelle, um beispielsweise Sensoren auszulesen oder Motoren zu steuern. Browser-basierten Anwendungen ist es aber normalerweise nicht erlaubt, aus ihrer Sandbox heraus auf diese Schnittstelle zugreifen. Hier kommt dann ein spezieller Server zum Einsatz, der die Daten mit der seriellen Schnittstelle austauscht und dann wie ein Webserver per http oder noch etwas direkter per Socket-Verbindung zur Verf&uuml;gung stellt. F&uuml;r Arduion und Flash gibt es beispielsweise as3glue (<a href="http://code.google.com/p/as3glue/">http://code.google.com/p/as3glue/</a>).</p>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image10.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb10.png" width="244" height="184" /></a> Es gibt viele Elektronik- oder Robotorbauk&auml;sten mit denen &auml;hnliches erreicht werden kann, etwa Lego Mindstorms (<a href="http://mindstorms.lego.com/">http://mindstorms.lego.com/</a>). Die einfache Steuerung eines Lego Roboters gelingt dank der Nxt#-Bibliothek des Niederl&auml;nders Bram Fokke, die er unter <a href="http://nxtsharp.fokke.net">http://nxtsharp.fokke.net</a> inklusive Quellcode zum Download anbietet. Diese Bibliothek kommuniziert direkt per Bluetooth mit dem Roboter. Per WCF (Windows Communication Foundation) kann dann mit Hilfe dieser Bibliothek ein Dienst zum Senden von Nachrichten an den Roboter angeboten werden.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using System.<span style="color: #202020;">ServiceModel</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">ServiceModel</span>.<span style="color: #202020;">Activation</span><span style="color: #339933;">;</span>
using Bram.<span style="color: #202020;">NxtSharp</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverNXT.<span style="color: #202020;">Web</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #009900;">&#91;</span>ServiceContract<span style="color: #009900;">&#40;</span>Namespace <span style="color: #339933;">=</span> <span style="color: #339933;">&amp;</span>quot<span style="color: #339933;">;&amp;</span>quot<span style="color: #339933;">;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#93;</span>
    <span style="color: #009900;">&#91;</span>AspNetCompatibilityRequirements<span style="color: #009900;">&#40;</span>RequirementsMode <span style="color: #339933;">=</span> AspNetCompatibilityRequirementsMode.<span style="color: #202020;">Allowed</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#93;</span>
    public class MindstormsService
    <span style="color: #009900;">&#123;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">// Statisch, da es nur einen Robotor für alle gibt</span>
        <span style="color: #993333;">static</span> private NxtBrick brick<span style="color: #339933;">;</span>
        <span style="color: #993333;">static</span> private NxtTankDrive tankDrive<span style="color: #339933;">;</span>
&nbsp;
        public MindstormsService<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
&nbsp;
            <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>brick <span style="color: #339933;">==</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                <span style="color: #666666; font-style: italic;">// Erzeuge Stellvertreter des NXT-Steins, der im Roboter verbaut ist</span>
                brick <span style="color: #339933;">=</span> new NxtBrick<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #666666; font-style: italic;">// Wichtig: Setze den Namen der Kommunikationsschnittstelle</span>
                brick.<span style="color: #202020;">COMPortName</span> <span style="color: #339933;">=</span> <span style="color: #339933;">&amp;</span>quot<span style="color: #339933;">;</span>Com11<span style="color: #339933;">&amp;</span>quot<span style="color: #339933;">;;</span>
&nbsp;
                <span style="color: #666666; font-style: italic;">// Konfiguriere NXT-Stein mit Motoren und ggf. Sensoren</span>
                NxtMotor motorB <span style="color: #339933;">=</span> new NxtMotor<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                NxtMotor motorC <span style="color: #339933;">=</span> new NxtMotor<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                motorB.<span style="color: #202020;">Brick</span> <span style="color: #339933;">=</span> brick<span style="color: #339933;">;</span>
                brick.<span style="color: #202020;">AttachMotor</span><span style="color: #009900;">&#40;</span>NxtMotorPort.<span style="color: #202020;">PortB</span><span style="color: #339933;">,</span> motorB<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                motorC.<span style="color: #202020;">Brick</span> <span style="color: #339933;">=</span> brick<span style="color: #339933;">;</span>
                brick.<span style="color: #202020;">AttachMotor</span><span style="color: #009900;">&#40;</span>NxtMotorPort.<span style="color: #202020;">PortC</span><span style="color: #339933;">,</span> motorC<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #666666; font-style: italic;">// Erzeuge Hilfsobjekt zur Steuerung des Robotors ähnlich einem Panzer</span>
                tankDrive <span style="color: #339933;">=</span> new NxtTankDrive<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                tankDrive.<span style="color: #202020;">Brick</span> <span style="color: #339933;">=</span> brick<span style="color: #339933;">;</span>
                tankDrive.<span style="color: #202020;">Motor1</span> <span style="color: #339933;">=</span> motorB<span style="color: #339933;">;</span>
                tankDrive.<span style="color: #202020;">Motor2</span> <span style="color: #339933;">=</span> motorC<span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #666666; font-style: italic;">// Stelle Verbindung mit dem NXT-Stein des Robotors her</span>
                brick.<span style="color: #202020;">Connect</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #009900;">&#91;</span>OperationContract<span style="color: #009900;">&#93;</span>
        public <span style="color: #993333;">void</span> Run<span style="color: #009900;">&#40;</span>SByte power<span style="color: #339933;">,</span> ushort distance<span style="color: #339933;">,</span> SByte turnRation<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            tankDrive.<span style="color: #202020;">Move</span><span style="color: #009900;">&#40;</span>power<span style="color: #339933;">,</span> distance<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #009900;">&#91;</span>OperationContract<span style="color: #009900;">&#93;</span>
        public <span style="color: #993333;">void</span> Coast<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            tankDrive.<span style="color: #202020;">Coast</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>F&uuml;r die Nutzung in Silverlight sollte dieser Dienst im Silverlight Projekt als Service Reference hinzugef&uuml;gt werden. Visual Studio erzeugt den notwendigen Code automatisch, so dass der Dienst mit den folgenden Zeilen konsumiert werden kann.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Controls</span><span style="color: #339933;">;</span>
using SilverNXT.<span style="color: #202020;">MindstormsServiceReference</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverNXT
<span style="color: #009900;">&#123;</span>
    public partial class MainPage <span style="color: #339933;">:</span> UserControl
    <span style="color: #009900;">&#123;</span>
        MindstormsServiceClient client <span style="color: #339933;">=</span> new MindstormsServiceClient<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        public MainPage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> runButton_Click<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> RoutedEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            client.<span style="color: #202020;">RunCompleted</span> <span style="color: #339933;">+=</span> new EventHandler<span style="color: #339933;">&lt;</span>system.<span style="color: #202020;">componentmodel</span>.<span style="color: #202020;">asynccompletedeventargs</span><span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span>client_AsyncCompleted<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            client.<span style="color: #202020;">RunAsync</span><span style="color: #009900;">&#40;</span><span style="color: #0000dd;">50</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">100</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> coastButton_Click<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> RoutedEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            client.<span style="color: #202020;">CoastCompleted</span> <span style="color: #339933;">+=</span> new EventHandler<span style="color: #339933;">&lt;</span>system.<span style="color: #202020;">componentmodel</span>.<span style="color: #202020;">asynccompletedeventargs</span><span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span>client_AsyncCompleted<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            client.<span style="color: #202020;">CoastAsync</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #993333;">void</span> client_AsyncCompleted<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">ComponentModel</span>.<span style="color: #202020;">AsyncCompletedEventArgs</span> e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// nothing</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

</p>
<blockquote>
<p><a href="http://vimeo.com/channels/weave#5277603"><img style="border-bottom: 0px; border-left: 0px; display: inline; margin-left: 0px; border-top: 0px; margin-right: 0px; border-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image11.png" width="244" height="184" /></a> <a href="http://vimeo.com/channels/weave#5277603">Bierzapfen am Computer“Wii Draught Masters” f&uuml;r Stella Artois.</a></p>
</blockquote>
<p>&#160;</p>
<p>&#160;</p>
<p>&#160;</p>
<p>&#160;</p>
<p>Verschiedene Quellen datieren den Joystick auf ca. 1940. Dort wird dieser erstmalig im Zusammenhang mit der Raketensteuerung erw&auml;hnt. Der Joystick sowie dessen Nachfolger wie Gamepad und die Wii Remote lassen sich ebenfalls f&uuml;r Benutzerinteraktionen verwenden. Dabei erfreuen sich gerade die Eingabeger&auml;te der seit 2006 vertriebenen Wii gro&szlig;er Beliebtheit: Darunter seit ca. 2008 das Balance Board und seit ca. 2009 das Guitar Hero Schlagzeug. Und da diese per Bluetooth arbeiten, ist die Kombination mit anderen Technologien durchaus m&ouml;glich. Die gr&ouml;&szlig;te Herausforderung ist, dass nicht jede Bluetooth-Umgebung harmoniert; Gute Erfahrungen haben wir &uuml;brigens mit den Bluetooth-Treiber von BlueSoleil (<a href="http://www.bluesoleil.com/">http://www.bluesoleil.com/</a>) gemacht.</p>
<p>&Auml;hnlich wie schon bei dem Lego Mindstorms Robotor gibt es auch hier eine Bibliothek zur Nutzung in eigenen Projekten namens WiiMoteLib (<a href="http://wiimotelib.codeplex.com/">http://wiimotelib.codeplex.com/</a>) in .NET basierten Projekten, etwa mit WPF.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span><span style="color: #339933;">;</span>
using WiimoteLib<span style="color: #339933;">;</span>
&nbsp;
namespace WiiWPF
<span style="color: #009900;">&#123;</span>
    <span style="color: #666666; font-style: italic;">/// &lt;summary&gt;</span>
    <span style="color: #666666; font-style: italic;">/// Interaction logic for MainWindow.xaml</span>
    <span style="color: #666666; font-style: italic;">/// &lt;/summary&gt;</span>
    public partial class MainWindow <span style="color: #339933;">:</span> Window
    <span style="color: #009900;">&#123;</span>
        public MainWindow<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            Loaded <span style="color: #339933;">+=</span> new RoutedEventHandler<span style="color: #009900;">&#40;</span>MainWindow_Loaded<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #993333;">void</span> MainWindow_Loaded<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> RoutedEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            WiimoteCollection mWC <span style="color: #339933;">=</span> new WiimoteCollection<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            try
            <span style="color: #009900;">&#123;</span>
                <span style="color: #666666; font-style: italic;">// Finde alle angeschlossenen Wii Remotes</span>
                mWC.<span style="color: #202020;">FindAllWiimotes</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #666666; font-style: italic;">// Verbinde mit der ersten gefundenen Wii Remote</span>
                Wiimote wm <span style="color: #339933;">=</span> mWC<span style="color: #009900;">&#91;</span><span style="color: #0000dd;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                wm.<span style="color: #202020;">Connect</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #666666; font-style: italic;">// Schalte die Vibration an der Wii Remote ein</span>
                wm.<span style="color: #202020;">SetRumble</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
            catch <span style="color: #009900;">&#40;</span>Exception ex<span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                MessageBox.<span style="color: #202020;">Show</span><span style="color: #009900;">&#40;</span>ex.<span style="color: #202020;">Message</span><span style="color: #339933;">,</span> <span style="color: #339933;">&amp;</span>quot<span style="color: #339933;">;</span>Wiimote error<span style="color: #339933;">&amp;</span>quot<span style="color: #339933;">;,</span> MessageBoxButton.<span style="color: #202020;">OK</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Kombiniert mit einem Socket-Server k&ouml;nnen so die Eingabeger&auml;te der Wii Technologien wie Flash und Silverlight angeboten werden – genau das &uuml;bernimmt im Falle von Flash das Projekt WiiFlash von Joa Ebert und Thibault Imbert (<a href="http://code.google.com/p/wiiflash/">http://code.google.com/p/wiiflash/</a>).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/07/10/next-generation-user-interfaces-how-to-interoperabilitaet/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To: Gesten</title>
		<link>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-gesten/</link>
		<comments>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-gesten/#comments</comments>
		<pubDate>Mon, 05 Jul 2010 10:01:20 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Multi-Touch]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=754</guid>
		<description><![CDATA[Der „X-Y-Positions-Anzeiger f&#252;r ein Bildschirmsystem“, kurz Maus, ist das Standardeingabeger&#228;t f&#252;r grafische Benutzungsschnittstellen (GUI) geworden. Doch dabei kann mit der Maus weit mehr erreicht werden, als einfach nur das Ziehen und Klicken in Anwendungen. Die Kombination der verschiedenen Maustastenzust&#228;nde und der Mausposition erlaubt ein Benutzererlebnis &#228;hnlich zur Wii ganz ohne weitere Hardware (weiter unten mehr [...]]]></description>
			<content:encoded><![CDATA[<p>Der „X-Y-Positions-Anzeiger f&uuml;r ein Bildschirmsystem“, kurz Maus, ist das Standardeingabeger&auml;t f&uuml;r grafische Benutzungsschnittstellen (GUI) geworden. Doch dabei kann mit der Maus weit mehr erreicht werden, als einfach nur das Ziehen und Klicken in Anwendungen. Die Kombination der verschiedenen Maustastenzust&auml;nde und der Mausposition erlaubt ein Benutzererlebnis &auml;hnlich zur Wii ganz ohne weitere Hardware (weiter unten mehr zur Wii).</p>
<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image3.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb3.png" width="244" height="164" /></a> Einfache Maus-Interaktionen wie Dr&uuml;cken, Bewegen und Loslassen der Maus ergeben in Kombination nicht nur Benutzereingaben wie „Drag and Drop“ sondern k&ouml;nnen auch als Geste f&uuml;r das Durchschneiden eines Objektes am Bildschirm dienen. F&uuml;r die Flash-Welt liefert der D&uuml;sseldorfer David Ochmann unter <a href="http://davidochmann.de/#/info?p=462">http://davidochmann.de/#/info?p=462</a> eine Bibliothek namens DoGestures f&uuml;r ActionScript 2 und 3, die das Verwenden von <b>Mausgesten</b> erleichtert.</p>
</blockquote>
<p>Zur Nutzung von DoGesture in Flash muss dessen Klassenpfad erst einmal verf&uuml;gbar gemacht werden. Dies geschieht &uuml;ber das Men&uuml; „Datei -&gt; Einstellungen f&uuml;r das Ver&ouml;ffentlichen“, dann im Register Flash &uuml;ber die Einstellungen f&uuml;r ActionScript. Dort wird der Quellpfad hinzugef&uuml;gt.</p>
<p>Als n&auml;chstes wird nur noch der folgende Code ben&ouml;tigt, um die Klassen per Import bekannt zu machen, die Geste zu erzeugen und auf deren Ereignis zu warten sowie eine passende Ereignisbehandlung durchzuf&uuml;hren:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">// Mache Klassen verfügbar</span>
<span style="color: #0066CC;">import</span> de.<span style="color: #006600;">davidochmann</span>.<span style="color: #006600;">utilities</span>.<span style="color: #006600;">dogesture</span>.<span style="color: #006600;">DoGesture</span>;
<span style="color: #0066CC;">import</span> de.<span style="color: #006600;">davidochmann</span>.<span style="color: #006600;">utilities</span>.<span style="color: #006600;">dogesture</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">GestureEvent</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// Erzeuge Geste (der ausführliche Weg)</span>
<span style="color: #000000; font-weight: bold;">var</span> movedown:DoGesture = <span style="color: #000000; font-weight: bold;">new</span> DoGesture<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">stage</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// Lausche dem Ereignis, dass die Geste stattfand</span>
movedown.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>GestureEvent.<span style="color: #006600;">GESTURE_COMPLETE</span>, movedownCompleteHandler<span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Wie lange darf das Ausführen der Geste dauern</span>
movedown.<span style="color: #006600;">setTimeout</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1000</span><span style="color: #66cc66;">&#41;</span>; 
<span style="color: #808080; font-style: italic;">// Definiere die notwendigen Bewegungen für die Geste</span>
movedown.<span style="color: #0066CC;">add</span><span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">50</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Starte das Warten auf die Geste</span>
movedown.<span style="color: #0066CC;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; 
&nbsp;
<span style="color: #808080; font-style: italic;">// Ereignismethode</span>
<span style="color: #000000; font-weight: bold;">function</span> movedownCompleteHandler<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">e</span>:GestureEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #808080; font-style: italic;">// Was soll nun passieren...</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&amp;</span>quot;Geste wurde durchgeführt<span style="color: #66cc66;">!&amp;</span>quot;<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<blockquote>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image4.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb4.png" width="244" height="173" /></a> <a href="http://www.microsoft.com/surface/" target="_blank">Microsoft Surface</a> ist ein Tisch aus dem Jahre 2007. Er zeichnet sich durch eine ber&uuml;hrungsempfindliche Oberfl&auml;che aus, der u. a. per Mulit-Touch und durch mehrere Nutzer gleichzeitig bedient werden kann.</p>
</blockquote>
<p>Der Maus droht seit ihrer Erfindung 1 963 durch Douglas C. Engelbart und William English Konkurrenz durch die Eingabe mit dem Finger oder anderen K&ouml;rperteilen. Im Falle von Single-Touch, dient der eine Finger in der Tat auch meist eher als Mausersatz und das sogar mit ganz massiven Nachteilen: Der Finger verdeckt die Informationen am Bildschirm und f&uuml;hrt bei der Arbeit an senkrechten Fl&auml;chen zu schnell erm&uuml;denden Armen – &auml;hnlich wie bei der Arbeit an einer Schultafel f&uuml;hrt.</p>
<p>Sobald mehrere Ber&uuml;hrungspunkte m&ouml;glich sind, lassen sich neue intuitive Gesten jenseits der Mausbedienung formulieren. Bekannt sind das Drehen und Skalieren von Inhalten mit zwei Fingern.</p>
<p>Silverlight bietet bereits seit Version 3 <b>Multi-Touch</b>. Dabei beschr&auml;nkt sich Silverlight abh&auml;ngig von der Abspielplattform auf die einzelnen Ber&uuml;hrungspunkte. Gesten m&uuml;ssen selber erkannt und verarbeitet werden. Ein Beispiel inkl. Quellcode findet sich unter <a href="http://www.microsoft.com/downloads/details.aspx?displaylang=en&amp;FamilyID=4b281bde-9b01-4890-b3d4-b3b45ca2c2e4">http://www.microsoft.com/downloads/details.aspx?displaylang=en&amp;FamilyID=4b281bde-9b01-4890-b3d4-b3b45ca2c2e4</a>.</p>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image5.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb5.png" width="244" height="184" /></a> F&uuml;r eine einfache Touch-Anwednung in Silverlight ben&ouml;tigen wir ein beliebiges sichtbares Objekt, dass in diesem Beispiel mit monster benannt ist. Alles Weitere geschieht dann in der Code-Behind-Datei. Als erstes wird dort ein Transofrmations-Objekt f&uuml;r die Verschiebung des Monsters angelegt und das Ereignis f&uuml;r Ber&uuml;hrungen angemeldet (Touch.FrameReported). In der Ereignismethode wird ab nun bei jedem Touch-Ereignis das Monster genau zu der Position der Ber&uuml;hrung bewegt.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Controls</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Media</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverTouch
<span style="color: #009900;">&#123;</span>
    public partial class MainPage <span style="color: #339933;">:</span> UserControl
    <span style="color: #009900;">&#123;</span>
&nbsp;
        public MainPage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Required to initialize variables</span>
            InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            Loaded <span style="color: #339933;">+=</span> new System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">RoutedEventHandler</span><span style="color: #009900;">&#40;</span>MainPage_Loaded<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> MainPage_Loaded<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">RoutedEventArgs</span> e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Erzeuge Transformationsobjekt für Verschiebung</span>
            CompositeTransform transform <span style="color: #339933;">=</span> new CompositeTransform<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            monster.<span style="color: #202020;">RenderTransform</span> <span style="color: #339933;">=</span> transform<span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #666666; font-style: italic;">// Lausche auf Touch-Ereignis</span>
            Touch.<span style="color: #202020;">FrameReported</span> <span style="color: #339933;">+=</span> new System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span>.<span style="color: #202020;">TouchFrameEventHandler</span><span style="color: #009900;">&#40;</span>Touch_FrameReported<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> Touch_FrameReported<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span>.<span style="color: #202020;">TouchFrameEventArgs</span> e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Ermittle Tranformationsobjekt </span>
            CompositeTransform transform <span style="color: #339933;">=</span> monster.<span style="color: #202020;">RenderTransform</span> as CompositeTransform<span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Ermittle primären Berührungspunkt</span>
            TouchPoint tp <span style="color: #339933;">=</span> e.<span style="color: #202020;">GetPrimaryTouchPoint</span><span style="color: #009900;">&#40;</span>monster<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Verschiebe Objekt zum Berührungspunkt</span>
            transform.<span style="color: #202020;">TranslateX</span> <span style="color: #339933;">+=</span> tp.<span style="color: #202020;">Position</span>.<span style="color: #202020;">X</span> <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>monster.<span style="color: #202020;">ActualWidth</span> <span style="color: #339933;">/</span> <span style="color: #0000dd;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            transform.<span style="color: #202020;">TranslateY</span> <span style="color: #339933;">+=</span> tp.<span style="color: #202020;">Position</span>.<span style="color: #202020;">Y</span> <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>monster.<span style="color: #202020;">ActualHeight</span> <span style="color: #339933;">/</span> <span style="color: #0000dd;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image6.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb6.png" width="244" height="149" /></a>Auf dem Windows Phone Series 7 nutzt Silverlight f&uuml;r die Oberfl&auml;chenelemente Manipulationsereignisse (u. a. ManipulationDelta). Diese teilen mit, inwiefern Skaliert oder Verschoben wurde. Um das Ereignis zu erhalten, kann in Expression Blend 4 oder Visual Studio 2010 bei einem Windows Phone Projekt ein Oberfl&auml;chenelement mit einem Manipulationsereignis versehen werden.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;phoneNavigation:PhoneApplicationPage</span> </span>
<span style="color: #009900;">    <span style="color: #000066;">x:Class</span>=<span style="color: #ff0000;">&quot;SilverPhone.MainPage&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:x</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:phoneNavigation</span>=<span style="color: #ff0000;">&quot;clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:d</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/expression/blend/2008&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:mc</span>=<span style="color: #ff0000;">&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">mc:Ignorable</span>=<span style="color: #ff0000;">&quot;d&quot;</span> <span style="color: #000066;">d:DesignWidth</span>=<span style="color: #ff0000;">&quot;480&quot;</span> <span style="color: #000066;">d:DesignHeight</span>=<span style="color: #ff0000;">&quot;800&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">FontFamily</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneFontFamilyNormal}&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">FontSize</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneFontSizeNormal}&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">Foreground</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneForegroundBrush}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;LayoutRoot&quot;</span> <span style="color: #000066;">Background</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneBackgroundBrush}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid.RowDefinitions<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;RowDefinition</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;Auto&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;RowDefinition</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;*&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid.RowDefinitions<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
        <span style="color: #808080; font-style: italic;">&lt;!--TitleGrid is the name of the application and page title--&gt;</span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;TitleGrid&quot;</span> <span style="color: #000066;">Grid.Row</span>=<span style="color: #ff0000;">&quot;0&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;TextBlock</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;textBlockPageTitle&quot;</span> <span style="color: #000066;">Style</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneTextPageTitle1Style}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;Run</span> <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;MY &quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span><span style="color: #000000; font-weight: bold;">&lt;Run</span> <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;TOUCH &quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span><span style="color: #000000; font-weight: bold;">&lt;Run</span> <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;APPLICATION&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/TextBlock<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;TextBlock</span> <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;touch me&quot;</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;textBlockListTitle&quot;</span> <span style="color: #000066;">Style</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneTextPageTitle2Style}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;ContentGrid&quot;</span> <span style="color: #000066;">Grid.Row</span>=<span style="color: #ff0000;">&quot;1&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Image</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;monster&quot;</span> <span style="color: #000066;">ManipulationDelta</span>=<span style="color: #ff0000;">&quot;Main_ManipulationDelta&quot;</span> <span style="color: #000066;">Source</span>=<span style="color: #ff0000;">&quot;Assets/monster.png&quot;</span> <span style="color: #000066;">HorizontalAlignment</span>=<span style="color: #ff0000;">&quot;Center&quot;</span> <span style="color: #000066;">VerticalAlignment</span>=<span style="color: #ff0000;">&quot;Center&quot;</span> <span style="color: #000066;">Width</span>=<span style="color: #ff0000;">&quot;240&quot;</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;342&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/phoneNavigation:PhoneApplicationPage<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>In der zugeh&ouml;rigen Code-Behind-Datei muss dann zum einen ein Tranformationsobjekt f&uuml;r eine Skalierung oder Verschiebung angelegt und in der Ereignismethode f&uuml;r das Manipulationsereignis eine Transformation durchgef&uuml;hrt werden.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Media</span><span style="color: #339933;">;</span>
using Microsoft.<span style="color: #202020;">Phone</span>.<span style="color: #202020;">Controls</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverPhone
<span style="color: #009900;">&#123;</span>
    public partial class MainPage <span style="color: #339933;">:</span> PhoneApplicationPage
    <span style="color: #009900;">&#123;</span>
&nbsp;
        public MainPage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Required to initialize variables</span>
            InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            Loaded <span style="color: #339933;">+=</span> new System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">RoutedEventHandler</span><span style="color: #009900;">&#40;</span>MainPage_Loaded<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> MainPage_Loaded<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">RoutedEventArgs</span> e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Erzeuge Transformationsobjekt für Verschiebung</span>
            CompositeTransform transform <span style="color: #339933;">=</span> new CompositeTransform<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            monster.<span style="color: #202020;">RenderTransform</span> <span style="color: #339933;">=</span> transform<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">// Ereignismethode</span>
        private <span style="color: #993333;">void</span> Main_ManipulationDelta<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> ManipulationDeltaEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Ermittle Tranformationsobjekt </span>
            CompositeTransform transform <span style="color: #339933;">=</span> monster.<span style="color: #202020;">RenderTransform</span> as CompositeTransform<span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #666666; font-style: italic;">// Verschiebe Objekt bzgl. der durchgeführten Manipulation</span>
            transform.<span style="color: #202020;">TranslateX</span> <span style="color: #339933;">+=</span> e.<span style="color: #202020;">DeltaManipulation</span>.<span style="color: #202020;">Translation</span>.<span style="color: #202020;">X</span><span style="color: #339933;">;</span>
            transform.<span style="color: #202020;">TranslateY</span> <span style="color: #339933;">+=</span> e.<span style="color: #202020;">DeltaManipulation</span>.<span style="color: #202020;">Translation</span>.<span style="color: #202020;">Y</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>F&uuml;r Flash griff man bisher auf Zusatzprogramme zur&uuml;ck, die die notwendigen Daten – meist per TUIO (<a href="http://www.tuio.org/">http://www.tuio.org/</a>) – direkt an Flash &uuml;bermittelten. Mit Flash Player 10.1 und AIR 2 h&auml;lt Multi-Touch nun aber auch Einzug in die Flash-Welt. Abh&auml;ngig von der Abspielplattform verstehen Flash und AIR einzelne Ber&uuml;hrungspunkte und Gesten (gerade unter Mac OS ist das noch recht eingeschr&auml;nkt, siehe auch <a href="http://www.adobe.com/devnet/flash/articles/multitouch_gestures.html">http://www.adobe.com/devnet/flash/articles/multitouch_gestures.html</a>).</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">!</span>Multitouch.<span style="color: #006600;">supportsGestureEvents</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
	Alert.<span style="color: #0066CC;">show</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&amp;</span>quot;Gesten werden nicht unterstützt<span style="color: #66cc66;">&amp;</span>quot;, <span style="color: #66cc66;">&amp;</span>quot;Hinweis<span style="color: #66cc66;">&amp;</span>quot;<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #808080; font-style: italic;">// Stelle sicher, Gesten zu nutzen</span>
	Multitouch.<span style="color: #006600;">inputMode</span> = MultitouchInputMode.<span style="color: #006600;">GESTURE</span>;
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>Je nach Plattform werden unterschiedliche Gesten unterst&uuml;tzt (<code>Multitouch.supportedGestures</code>). Diese m&uuml;ssten sonst selbst aus den Ber&uuml;hrungspunkten ermittelt werden.</p>
<p>Mit dem Flex 4 SDK und AIR 2 kann jedes interaktive Oberfl&auml;chenelement Gesten nutzen. In den zugeh&ouml;rigen Ereignismethoden werden dann abschlie&szlig;end die Werte der Gesten verwendet.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:WindowedApplication</span> <span style="color: #000066;">xmlns:fx</span>=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span> </span>
<span style="color: #009900;">			 <span style="color: #000066;">xmlns:s</span>=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span> </span>
<span style="color: #009900;">			 <span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/mx&quot;</span></span>
<span style="color: #009900;">			 <span style="color: #000066;">creationComplete</span>=<span style="color: #ff0000;">&quot;windowedapplication_creationCompleteHandler(event)&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #339933;">&lt;![CDATA[</span>
&nbsp;
<span style="color: #339933;">			import mx.controls.Alert;</span>
<span style="color: #339933;">			import mx.events.FlexEvent;</span>
&nbsp;
<span style="color: #339933;">			protected function windowedapplication_creationCompleteHandler(event:FlexEvent):void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				if (!Multitouch.supportsGestureEvents) {</span>
<span style="color: #339933;">					Alert.show(&quot;Gesten werden nicht unterstützt!&quot;, &quot;Hinweis&quot;);</span>
<span style="color: #339933;">				} else {</span>
<span style="color: #339933;">					// Stelle sicher, Gesten zu nutzen</span>
<span style="color: #339933;">					Multitouch.inputMode = MultitouchInputMode.GESTURE;</span>
<span style="color: #339933;">				}</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			protected function image_gestureZoomHandler(event:TransformGestureEvent):void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				// Skaliere Objekt</span>
<span style="color: #339933;">				(event.currentTarget as InteractiveObject).scaleX *= event.scaleX;</span>
<span style="color: #339933;">				(event.currentTarget as InteractiveObject).scaleY *= event.scaleY;</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			protected function image_gesturePanHandler(event:TransformGestureEvent):void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				// Verschiebe Objekt</span>
<span style="color: #339933;">				(event.currentTarget as InteractiveObject).x += event.offsetX;</span>
<span style="color: #339933;">				(event.currentTarget as InteractiveObject).y += event.offsetY;</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			protected function image_gestureRotateHandler(event:TransformGestureEvent):void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				// Drehe Objekt</span>
<span style="color: #339933;">				(event.currentTarget as InteractiveObject).rotation += event.rotation;</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">		]]&gt;</span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Image</span> <span style="color: #000066;">x</span>=<span style="color: #ff0000;">&quot;20&quot;</span> <span style="color: #000066;">y</span>=<span style="color: #ff0000;">&quot;20&quot;</span> <span style="color: #000066;">source</span>=<span style="color: #ff0000;">&quot;assets/monster.png&quot;</span> </span>
<span style="color: #009900;">			  <span style="color: #000066;">gesturePan</span>=<span style="color: #ff0000;">&quot;image_gesturePanHandler(event)&quot;</span></span>
<span style="color: #009900;">			  <span style="color: #000066;">gestureZoom</span>=<span style="color: #ff0000;">&quot;image_gestureZoomHandler(event)&quot;</span></span>
<span style="color: #009900;">			  <span style="color: #000066;">gestureRotate</span>=<span style="color: #ff0000;">&quot;image_gestureRotateHandler(event)&quot;</span></span>
<span style="color: #009900;">			  <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:WindowedApplication<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image7.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb7.png" width="244" height="164" /></a> Silverlight bietet seit Version 2 mit dem InkPresenter eine weitere Eingabem&ouml;glichkeit: Diesmal mit dem Stift. Der InkPresenter zeichnet die einzelnen Punkte der Stift- oder Mausbewegung auf. Sofern verf&uuml;gbar sogar drucksensitiv.</p>
</p>
<p>&#160;</p>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image8.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb8.png" width="244" height="184" /></a> In Expression Blend (oder auch mit Visual Studio) f&uuml;gen Sie das Steuerlement InkPresenter ein und geben diesem einen Hintergrund (Background) hinzu, da andernfalls keine Eingaben erkannt werden. Klar, dass nat&uuml;rlich auch die Gr&ouml;&szlig;en- und Positionsangaben passen m&uuml;ssen – in diesem Beispiel sind keine expliziten Angaben vorgenommen worden, da auf diese Weise die komplette Fl&auml;che ausgef&uuml;llt wird. F&uuml;r die eigentliche Aufzeichnung der Stifteingabe nutzen wir das Dr&uuml;cken der linken Maustaste (MouseLeftButtonDown), das Bewegen der Maus (MouseMove) und die Nachricht, wenn der Bezug zur Maus wieder verloren wird (LostMouseCapture). Die zugeh&ouml;rigen Ereignismethoden landen in der zugeh&ouml;rigen Code-Behind-Datei:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Controls</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Documents</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Ink</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Media</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Media</span>.<span style="color: #202020;">Animation</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Shapes</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverPen
<span style="color: #009900;">&#123;</span>
	public partial class MainPage <span style="color: #339933;">:</span> UserControl
	<span style="color: #009900;">&#123;</span>
&nbsp;
		private Stroke currentStroke<span style="color: #339933;">;</span>
&nbsp;
		public MainPage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			<span style="color: #666666; font-style: italic;">// Required to initialize variables</span>
			InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>			
		<span style="color: #009900;">&#125;</span>
&nbsp;
		private <span style="color: #993333;">void</span> inkPresenter_MouseLeftButtonDown<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span>.<span style="color: #202020;">MouseButtonEventArgs</span> e<span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Starte mit der Aufzeichnung</span>
			inkPresenter.<span style="color: #202020;">CaptureMouse</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Merke die Punkte</span>
			StylusPointCollection stylusPointCollection <span style="color: #339933;">=</span> new StylusPointCollection<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Füge die ersten Punkte hinzu</span>
            stylusPointCollection.<span style="color: #202020;">Add</span><span style="color: #009900;">&#40;</span>e.<span style="color: #202020;">StylusDevice</span>.<span style="color: #202020;">GetStylusPoints</span><span style="color: #009900;">&#40;</span>inkPresenter<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Erstelle aus den Punkten einen Strich</span>
			currentStroke <span style="color: #339933;">=</span> new Stroke<span style="color: #009900;">&#40;</span>stylusPointCollection<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Zeichne den Strich (dieser wird später weiter aktualisiert)</span>
			inkPresenter.<span style="color: #202020;">Strokes</span>.<span style="color: #202020;">Add</span><span style="color: #009900;">&#40;</span>currentStroke<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		private <span style="color: #993333;">void</span> inkPresenter_LostMouseCapture<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span>.<span style="color: #202020;">MouseEventArgs</span> e<span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Beende die Aufzeichnung</span>
			currentStroke <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #339933;">;</span>
			inkPresenter.<span style="color: #202020;">ReleaseMouseCapture</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		private <span style="color: #993333;">void</span> inkPresenter_MouseMove<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span>.<span style="color: #202020;">MouseEventArgs</span> e<span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			<span style="color: #666666; font-style: italic;">// Füge dem aktuellen Strich neue Punkte hinzu</span>
    		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>currentStroke <span style="color: #339933;">!=</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        		currentStroke.<span style="color: #202020;">StylusPoints</span>.<span style="color: #202020;">Add</span><span style="color: #009900;">&#40;</span>e.<span style="color: #202020;">StylusDevice</span>.<span style="color: #202020;">GetStylusPoints</span><span style="color: #009900;">&#40;</span>inkPresenter<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Nat&uuml;rlich k&ouml;nnte das Aussehen des gezeichneten Striches (Stroke) &uuml;ber dessen Attribute variiert und zum Beispiel mit dem Druck des Stiftes kombiniert werden:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">currentStroke.<span style="color: #202020;">DrawingAttributes</span>.<span style="color: #202020;">Height</span> <span style="color: #339933;">=</span> e.<span style="color: #202020;">StylusDevice</span>.<span style="color: #202020;">GetStylusPoints</span><span style="color: #009900;">&#40;</span>inkPresenter<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #0000dd;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #202020;">PressureFactor</span> <span style="color: #339933;">*</span> <span style="color: #0000dd;">100</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Wenn man das wie im Beispiel unter <a href="http://msdn.microsoft.com/en-us/magazine/cc721604.aspx#id0090072">http://msdn.microsoft.com/en-us/magazine/cc721604.aspx#id0090072</a> weitertreibt, dann ist sogar eine Handschriftenerkennung im Browser m&ouml;glich.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-gesten/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To: Bildverarbeitung</title>
		<link>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-bildverarbeitung/</link>
		<comments>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-bildverarbeitung/#comments</comments>
		<pubDate>Mon, 05 Jul 2010 09:34:53 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Multi-Touch]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=728</guid>
		<description><![CDATA[Ein eindrucksvolles Beispiel f&#252;r die Verarbeitung von Videodaten ist Eywriter (http://www.eyewriter.org). Hier war es das Ziel, zu m&#246;glichst geringen Kosten ein Eyetracking-System zu schaffen, dass es gel&#228;hmten Personen erlaubt, einen Computer mit den Augen zu Bedienen und so beispielsweise Texte zu verfassen oder Bilder zu malen. Sowohl Flash als auch Silverlight erlauben die Nutzung einer [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb.png" width="244" height="95" /></a> Ein eindrucksvolles Beispiel f&uuml;r die Verarbeitung von Videodaten ist Eywriter (<a href="http://www.eyewriter.org">http://www.eyewriter.org</a>). Hier war es das Ziel, zu m&ouml;glichst geringen Kosten ein Eyetracking-System zu schaffen, dass es gel&auml;hmten Personen erlaubt, einen Computer mit den Augen zu Bedienen und so beispielsweise Texte zu verfassen oder Bilder zu malen.</p>
</blockquote>
<p>Sowohl Flash als auch Silverlight erlauben die Nutzung einer Videokamera. Das gestaltet sich dabei sehr &auml;hnlich zu dem Einsatz eines Mikrofons. Im Falle von Flash erh&auml;lt man sogar wie beim Sound einen Wert zur Aktivit&auml;t. Dieser beschreibt hier aber nicht die Lautst&auml;rke sondern die Ver&auml;nderungen im Bild. Sprich: Je mehr man sich vor der Kamera bewegt, desto h&ouml;her ist der Wert.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> cam:<span style="color: #0066CC;">Camera</span>;
<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">video</span>:<span style="color: #0066CC;">Video</span>;
<span style="color: #808080; font-style: italic;">// Ermittle die Standardkamera</span>
cam=<span style="color: #0066CC;">Camera</span>.<span style="color: #006600;">getCamera</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Erzwinge die Verarbeitung durch den Flash Player</span>
<span style="color: #0066CC;">video</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Video</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #0066CC;">video</span>.<span style="color: #006600;">attachCamera</span><span style="color: #66cc66;">&#40;</span>cam<span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Überprüfe bei jedem &amp;quot;Redraw&amp;quot; des Bildschirms...</span>
addEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">ENTER_FRAME</span>, enterFrameHandler<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// ...die Aktivität vor der Kamera...</span>
<span style="color: #000000; font-weight: bold;">function</span> enterFrameHandler<span style="color: #66cc66;">&#40;</span>event:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span>cam.<span style="color: #0066CC;">activityLevel</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #808080; font-style: italic;">// ...und zeichne eine Linie abhängig vom Wert!</span>
	graphics.<span style="color: #0066CC;">lineStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
	graphics.<span style="color: #0066CC;">lineTo</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">500</span>-x,<span style="color: #cc66cc;">500</span>-cam.<span style="color: #0066CC;">activityLevel</span><span style="color: #66cc66;">*</span><span style="color: #cc66cc;">4</span><span style="color: #66cc66;">&#41;</span>;
	x--;
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<blockquote>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image1.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb1.png" width="244" height="158" /></a> Nat&uuml;rlich kann man noch einen Schritt weitergehen und die Bildinformationen auswerten. &Auml;hnlich wie bei Sonys EyeToy (<a href="http://www.eyetoy.com/">http://www.eyetoy.com/</a>) aus dem Jahr 2003 l&auml;sst sich so ermitteln, welche Gesten jemand vor der Kamera durchf&uuml;hrt. Am einfachsten geht dies, indem die Anwendung auf spezielle Farbwerte – beispielsweise dem Farbton der Hand – reagiert.</p>
</blockquote>
<blockquote>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image2.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb2.png" width="244" height="165" /></a> Einen Schritt weiter geht Microsoft bei dem Project Natal, indem dort auch Tiefenmessung per Infrarot zum Einsatz kommen soll (<a href="http://www.xbox.com/en-US/live/projectnatal/">http://www.xbox.com/en-US/live/projectnatal/</a>). Project Natal befindet sich aktuell noch in der Entwicklung und soll zu Weihnachten 2010 verf&uuml;gbar sein. Speziell f&uuml;r dieses Projekt hat Microsoft &uuml;brigens Johnny Chung Lee eingestellt, der durch seine Experimente mit der Wii bekannt geworden ist (<a href="http://johnnylee.net/projects/wii/">http://johnnylee.net/projects/wii/</a>), darunter ein preiswert umsetzbares Finger- und Headtracking sowie ein Multi-Touch Whiteboard.</p>
</blockquote>
<p>Eine einfachere Art der Bilderkennung kommt h&auml;ufig bei Augmented Reality zum Einsatz (<a href="http://saqoosha.net/en/flartoolkit/start-up-guide/">http://saqoosha.net/en/flartoolkit/start-up-guide/</a> ). Hier wird ein in der Regel aus rechteckigen Bl&ouml;cken aufgebautes Symbol in die Kamera gehalten und dessen Lage im Raum dient dann zur Steuerung eines Gegenstandes im Computer. Diese Form der erweiterten Realit&auml;t basiert urspr&uuml;nglich auf dem ARToolKit von <a href="http://en.wikipedia.org/w/index.php?title=Hirokazu_Kato&amp;action=edit&amp;redlink=1">Hirokazu Kato</a> aus dem Jahre 1999 (<a href="http://sourceforge.net/projects/artoolkit/">http://sourceforge.net/projects/artoolkit/</a>). Die Portierung f&uuml;r ActionScript 3 nennt sich FLARToolKit (<a href="http://www.libspark.org/wiki/saqoosha/FLARToolKit/en">http://www.libspark.org/wiki/saqoosha/FLARToolKit/en</a>), die f&uuml;r Silverlight SLARToolkit (<a href="http://slartoolkit.codeplex.com/">http://slartoolkit.codeplex.com/</a>).</p>
<p>F&uuml;r das Lesen eines Barcodes gibt es ebenfalls bereits fertige Bibliotheken wie die von Bernd Engelbrecht unter <a href="http://www.codeproject.com/KB/graphics/BarcodeImaging3.aspx%20f&uuml;r%20.NET">http://www.codeproject.com/KB/graphics/BarcodeImaging3.aspx</a>. F&uuml;r einen eigenen Barcode-Scanner ist eine Schaltfl&auml;che zum Start der Videoaufzeichnung notwendig.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;UserControl</span> <span style="color: #000066;">x:Class</span>=<span style="color: #ff0000;">&quot;SilverScanner.MainPage&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:x</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span> <span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;LayoutRoot&quot;</span> <span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Button</span> <span style="color: #000066;">Content</span>=<span style="color: #ff0000;">&quot;Scan&quot;</span> <span style="color: #000066;">Name</span>=<span style="color: #ff0000;">&quot;scanCapturingBtn&quot;</span> <span style="color: #000066;">HorizontalAlignment</span>=<span style="color: #ff0000;">&quot;Left&quot;</span> <span style="color: #000066;">VerticalAlignment</span>=<span style="color: #ff0000;">&quot;Top&quot;</span> <span style="color: #000066;">Click</span>=<span style="color: #ff0000;">&quot;scanCapturingBtn_Click&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/UserControl<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>Die Vorschau des Videobildes wird in der Code-Behind-Datei per CaptureSource erledigt und im Hintegrund dargestellt. Diese CaptureSource dient ebenfalls f&uuml;r das Ermitteln des Barcodes mit Hilfe der Klassen BarcodeImaging und BarcodeCapture aus dem Beispielprojekt f&uuml;r Silverlight unter <a href="http://www.silverlight.net/community/samples/silverlight-4/barcode-scanner/">http://www.silverlight.net/community/samples/silverlight-4/barcode-scanner/</a>.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Controls</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Media</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverScanner
<span style="color: #009900;">&#123;</span>
    public partial class MainPage <span style="color: #339933;">:</span> UserControl
    <span style="color: #009900;">&#123;</span>
&nbsp;
        CaptureSource captureSource<span style="color: #339933;">;</span>
        BarcodeCapture barcodeCapture<span style="color: #339933;">;</span>
&nbsp;
        public MainPage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        protected <span style="color: #993333;">void</span> activateCamera<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>captureSource <span style="color: #339933;">==</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                <span style="color: #666666; font-style: italic;">// Zeige Vorschau des Videobildes</span>
                captureSource <span style="color: #339933;">=</span> new CaptureSource<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                captureSource.<span style="color: #202020;">VideoCaptureDevice</span> <span style="color: #339933;">=</span> CaptureDeviceConfiguration.<span style="color: #202020;">GetDefaultVideoCaptureDevice</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                VideoBrush previewBrush <span style="color: #339933;">=</span> new VideoBrush<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                previewBrush.<span style="color: #202020;">Stretch</span> <span style="color: #339933;">=</span> Stretch.<span style="color: #202020;">Uniform</span><span style="color: #339933;">;</span>
                previewBrush.<span style="color: #202020;">SetSource</span><span style="color: #009900;">&#40;</span>captureSource<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                LayoutRoot.<span style="color: #202020;">Background</span> <span style="color: #339933;">=</span> previewBrush<span style="color: #339933;">;</span>
                <span style="color: #666666; font-style: italic;">// Wähle möglichst gutes Videoformat für bessere Scan-Ergebnisse</span>
                VideoFormat desiredFormat <span style="color: #339933;">=</span> new VideoFormat<span style="color: #009900;">&#40;</span>PixelFormatType.<span style="color: #202020;">Format32bppArgb</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">640</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">480</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">12</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                captureSource.<span style="color: #202020;">VideoCaptureDevice</span>.<span style="color: #202020;">DesiredFormat</span> <span style="color: #339933;">=</span> desiredFormat<span style="color: #339933;">;</span>
                <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>CaptureDeviceConfiguration.<span style="color: #202020;">AllowedDeviceAccess</span> <span style="color: #339933;">||</span> CaptureDeviceConfiguration.<span style="color: #202020;">RequestDeviceAccess</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
                <span style="color: #009900;">&#123;</span>
                    captureSource.<span style="color: #202020;">Start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
&nbsp;
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> scanCapturingBtn_Click<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> RoutedEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            activateCamera<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>barcodeCapture <span style="color: #339933;">==</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                <span style="color: #666666; font-style: italic;">// Starte das Erkennen des Barcodes</span>
                barcodeCapture <span style="color: #339933;">=</span> new BarcodeCapture<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                barcodeCapture.<span style="color: #202020;">BarcodeDetected</span> <span style="color: #339933;">+=</span> new EventHandler<span style="color: #339933;">&lt;</span>barcodeeventargs<span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span>onBarcodeDetected<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                barcodeCapture.<span style="color: #202020;">CaptureSource</span> <span style="color: #339933;">=</span> captureSource<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> onBarcodeDetected<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> BarcodeEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Zeige gefundenen Barcode</span>
            System.<span style="color: #202020;">Diagnostics</span>.<span style="color: #202020;">Debug</span>.<span style="color: #202020;">WriteLine</span><span style="color: #009900;">&#40;</span>e.<span style="color: #202020;">Barcode</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-bildverarbeitung/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To: Tastatureingabe</title>
		<link>http://www.wolter.biz/2010/05/16/next-generation-user-interfaces-how-to-tastatureingabe/</link>
		<comments>http://www.wolter.biz/2010/05/16/next-generation-user-interfaces-how-to-tastatureingabe/#comments</comments>
		<pubDate>Sun, 16 May 2010 09:07:38 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=635</guid>
		<description><![CDATA[Eine der g&#228;ngigsten Interaktionsm&#246;glichkeiten ist die Tastatureingabe. In einem kleinen &#220;berblick m&#246;glicher Formen der Mensch-Maschine-Interaktion darf diese darum nicht fehlen. Zumal die Tastatureingabe f&#252;r mehr als nur das Ausf&#252;llen von Textfeldern dienen kann. Tastatureingaben sind beispielsweise zum Aufruf eines Kommandos n&#252;tzlich, etwas f&#252;r Spiele oder als Abk&#252;rzung f&#252;r g&#228;ngige Operationen in Programmen wie Apfel/Strg+Z zum [...]]]></description>
			<content:encoded><![CDATA[<p>Eine der g&auml;ngigsten Interaktionsm&ouml;glichkeiten ist die Tastatureingabe. In einem kleinen <a href="http://www.wolter.biz/2010/05/13/next-generation-user-interfaces-how-to/">&Uuml;berblick m&ouml;glicher Formen der Mensch-Maschine-Interaktion</a> darf diese darum nicht fehlen. Zumal die Tastatureingabe f&uuml;r mehr als nur das Ausf&uuml;llen von Textfeldern dienen kann. Tastatureingaben sind beispielsweise zum Aufruf eines Kommandos n&uuml;tzlich, etwas f&uuml;r Spiele oder als Abk&uuml;rzung f&uuml;r g&auml;ngige Operationen in Programmen wie <em>Apfel/Strg+Z </em>zum R&uuml;ckg&auml;ngigmachen. Mehr dazu und weitere ungew&ouml;hnlichen Interaktiosm&ouml;glichketen mit der Tastatureingabe gibt es in einem sp&auml;teren Text zum Thema “Komandozeile”.</p>
<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/05/focus.png" target="_blank"><img style="display: inline; margin-left: 0px; margin-right: 0px; border-width: 0px;" title="focus" src="http://www.wolter.biz/blog/wp-content/uploads/2010/05/focus_thumb.png" border="0" alt="focus" width="244" height="184" align="right" /></a><em>Ver&auml;nderungen an dem HTML-Rahmen m&uuml;ssen im Flex- oder Flash-Builder in der index.template.html-Datei vorgenommen werden. Die fertige HTML-Seite wird dann daraus generiert.</em></p></blockquote>
<p>Doch auch bei der Tastatureingabe gibt es kleinere Gemeinheiten wie etwa den Fokus. Denn normalerweise erh&auml;lt nur diejenige Anwendung mit dem aktuellen Fokus Kenntnis &uuml;ber einen Tastendruck (und auch nur dann, wenn der Browser diese Tastenkombination nicht vorbelegt hat und abf&auml;ngt). Bei Webanwendungen kann man dies durch die folgende JavaScript-Anweisung erzwingen: document.getElementById(&#8220;<em>FlashContentID</em>&#8220;).focus(); F&uuml;r Flex-Anwendungen kann diese Angabe beispielsweise in der index.template.html-Datei erfolgen, die als Vorlage f&uuml;r den erzeugten HTML-Rahmen und die darin dann eingebettete SWF-Datei dient. Dank dem Platzhalter ${application} l&auml;sst sich die Bezeichnung der Flash-Player-Instanz leicht ermitteln und dann zum Beispiel nach erfolgreichem Laden des HTML-Dokumentes der Fokus darauf setzen. Innerhalb von Flex gelingt das Setzen des Fokus wie in der Abbildung auf einem TextInput-Steuerelement durch die Methode setFocus – nur dass dieser Fokus abgesehen vom Erscheinungsbild leider nichts n&uuml;tzt, wenn eben der Flash Player selbst keinen Fokus hat.</p>
<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/05/flashkey1.png" target="_blank"><img style="display: inline; margin-left: 0px; margin-right: 0px; border-width: 0px;" title="flashkey" src="http://www.wolter.biz/blog/wp-content/uploads/2010/05/flashkey_thumb.png" border="0" alt="flashkey" width="244" height="177" align="right" /></a><em>Um Tastatureingaben in Flash &uuml;ber das Men&uuml; „Steuerung -&gt; Film testen“ ausprobieren zu k&ouml;nnen, sollten im Testplayer &uuml;ber das Men&uuml; „Steuerung“ Tastenk&uuml;rzel deaktiviert werden.</em></p></blockquote>
<p>In Flash und Flex mit ActionScript 3 benachrichtigt das Ereignis KeyboardEvent.KEY_DOWN beim Dr&uuml;cken bzw. KeyboardEvent.KEY_UP beim Loslassen einer Taste. Das funktioniert aber auch hier nur, wenn der Fokus gesetzt ist; In der Abbildung ist deshalb die B&uuml;hne (stage) als Objekt gew&auml;hlt. Das Dr&uuml;cken wiederholt sich jedoch auch ohne zwischenzeitliches Loslassen wenn die Taste nur lange genug gedr&uuml;ckt bleibt (die Wiederholrate findet sich unter Windows 7 in der Systemsteuerung unter „Tastatur -&gt; Geschwindigkeit“). Au&szlig;erdem muss man unterscheiden, ob das eigegebene Zeichen (charCode) oder die gedr&uuml;ckte Taste (keyCode) auf der Tastatur wichtig ist, also ob auch die Gro&szlig;undkleinschreibung interessiert:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">// Die notwendigen Klassen sind in Flash CS4 und CS5 automatisch bekannt.</span>
<span style="color: #808080; font-style: italic;">// Im Flex/Flash Builder müssen die Klassen importiert werden.</span>
&nbsp;
<span style="color: #808080; font-style: italic;">// Abonniere Ereignis, um das Drücken der Tasten zu erfahren</span>
<span style="color: #0066CC;">stage</span>.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>KeyboardEvent.<span style="color: #006600;">KEY_DOWN</span>, application_keyDownHandler<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// Ereignismethode, um das Drücken der Tasten zu verarbeiten</span>
<span style="color: #000000; font-weight: bold;">function</span> application_keyDownHandler<span style="color: #66cc66;">&#40;</span>event:KeyboardEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Taste gedrückt/wiederholt&quot;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Tastencode: &quot;</span> + event.<span style="color: #006600;">keyCode</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Zeichencode: &quot;</span> + event.<span style="color: #006600;">charCode</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Zeichen: &quot;</span> + <span style="color: #0066CC;">String</span>.<span style="color: #0066CC;">fromCharCode</span><span style="color: #66cc66;">&#40;</span>event.<span style="color: #006600;">charCode</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/05/image.png" target="_blank"><em><img style="display: inline; margin-left: 0px; margin-right: 0px; border-width: 0px;" title="image" src="http://www.wolter.biz/blog/wp-content/uploads/2010/05/image_thumb.png" border="0" alt="image" width="244" height="201" align="right" /></em></a><em> Barcode-Scanner wie hier der </em><a href="http://www.motorola.com/Business/US-EN/Business+Product+and+Services/Bar+Code+Scanning/Bar+Code+Scanners/General+Purpose+Scanners/LS1203_US-EN"><em>Symbol LS1203</em></a><em> machen sich &uuml;brigens meist auch die Tastatur zu nutze. Ein gescannter Barcode erscheint dann – angereichert um ein paar Steuerzeichen – als Tastatureingabe in der Anwendung. Barcode-Scanner sind somit oft nur eine benutzerfreundliche Variante der manuellen Eingabe: Der Zugbegleiter kann Tickets so schneller verarbeiten und der Schlosser muss seine Handschuhe nicht erst ausziehen.</em></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/05/16/next-generation-user-interfaces-how-to-tastatureingabe/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To</title>
		<link>http://www.wolter.biz/2010/05/13/next-generation-user-interfaces-how-to/</link>
		<comments>http://www.wolter.biz/2010/05/13/next-generation-user-interfaces-how-to/#comments</comments>
		<pubDate>Thu, 13 May 2010 12:58:00 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Multi-Touch]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/2010/05/13/next-generation-user-interfaces-how-to/</guid>
		<description><![CDATA[Kommandozeile und grafische Benutzeroberfl&#228;chen waren gestern: Jetzt geht es um m&#246;glichst nat&#252;rliche Schnittstellen. Egal ob f&#252;r den Desktop oder das Web, beinahe jede Art der Kommunikation zwischen Nutzer und System ist denkbar. Interaktionsformen auf der Basis von AIR, Flash und Silverlight reichen von der normalen Tastatureingabe bis hin zur Lego Mindstorms Sensorik. Der m&#246;glichst nat&#252;rlichen [...]]]></description>
			<content:encoded><![CDATA[<p>Kommandozeile und grafische Benutzeroberfl&auml;chen waren gestern: Jetzt geht es um m&ouml;glichst nat&uuml;rliche Schnittstellen. Egal ob f&uuml;r den Desktop oder das Web, beinahe jede Art der Kommunikation zwischen Nutzer und System ist denkbar. Interaktionsformen auf der Basis von AIR, Flash und Silverlight reichen von der normalen Tastatureingabe bis hin zur Lego Mindstorms Sensorik.</p>
<p>Der m&ouml;glichst nat&uuml;rlichen Nutzung von Benutzungsschnittstellen (Natural User Interfaces) wird dank Apple und Microsoft wieder verst&auml;rkte Aufmerksamkeit geschenkt. Dabei sind viele der Ideen alles andere als neu: Ein Multi-Touch-Display ist beispielsweise bereits 1982 durch Nimish Mehta an der Universit&auml;t Toronto entwickelt worden, auch wenn es erst im Februar 2006 durch <a href="http://www.perceptivepixel.com/applications.html">Jefferson Han</a> auf der TED-Konferenz popul&auml;r gemacht wurde.</p>
<p>Auch wird oft vergessen, dass das Benutzererlebnis und die Ergonomie nicht nur von der Nat&uuml;rlichkeit sondern auch vom Kontext abh&auml;ngen. Das iPhone beispielsweise versagt im Winter, da es sich nicht mit Handschuhen bedienen l&auml;sst. Desshalb nutzen Koreaner <a href="http://www.engadget.com/2010/02/11/south-korean-iphone-users-turn-to-sausages-as-a-cold-weather-me/">ein W&uuml;rstchen zur Eingabe</a>, wie der s&uuml;dkoreanische Nachrichtendienst <a href="http://itnews.inews24.com/php/news_view.php?g_serial=474508&amp;g_menu=022600">inews24.com</a> meldet.</p>
<p>Eine weitere Herausforderung: Anwendungen m&uuml;ssen heutzutage oft auf unterschiedlichen und uneinheitlichen Ger&auml;ten laufen. Teilweise stehen Interaktionsformen bereits zur Verf&uuml;gung, etwa Multi-Touch. Aber wenn die Abspielumgebung das einmal nicht hergibt, dann muss eben nachgeholfen werden. Dank zahlreicher Schnittstellen zur Au&szlig;enwelt ist das mit modernen Technologien kein gr&ouml;&szlig;eres Problem.</p>
<p>Fast jede Form der Mensch-Maschine-Interaktion ist, gen&uuml;gend Kreativit&auml;t vorausgesetzt, umsetzbar. Plattformen wie AIR, Flash und Silverlight erlauben viele Interaktionsformen bereits nativ. Und sollten dann doch einmal Beschr&auml;nkungen existieren, kommt entweder eine Technologie mit Hardwarezugriff wie z. B. WPF zum Einsatz oder es wird eben mit einem Hilfsprogramm beispielsweise &uuml;ber eine Socket-Verbindung kommuniziert. Aber gehen tut es schlussendlich so gut wie immer. Ob es dann auch sinnvoll ist, das ist eine andere Frage…</p>
<p>Demn&auml;chst m&ouml;chte ich hier Beispiele f&uuml;r ungew&ouml;hnliche Interaktionsformen oder f&uuml;r gew&ouml;hnliche Interaktionsformen in ungew&ouml;hnlichen Szenarien anhand kleiner Code-Snippets vorstellen. Dazu z&auml;hlen Themen wie:</p>
<ul>
<li><a href="http://www.wolter.biz/2010/05/16/next-generation-user-interfaces-how-to-tastatureingabe/">Tastatureingabe</a> </li>
<li><a href="http://www.wolter.biz/2010/06/09/next-generation-user-interfaces-how-to-kommandozeile/">Kommandozeile</a> </li>
<li><a href="http://www.wolter.biz/2010/06/09/next-generation-user-interfaces-how-to-spracheingabe/">Spracheingabe</a></li>
<li><a href="http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-bildverarbeitung/">Bildverarbeitung</a></li>
<li><a href="http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-gesten/">Gesten</a></li>
<li><a href="http://www.wolter.biz/2010/07/10/next-generation-user-interfaces-how-to-interoperabilitaet/">Interoperabilit&auml;t (Lego Mindstorms und Wii Remote)</a></li>
</ul>
<p>Im Rahmen meines Vortrags “Next Generation User Interfaces How-To” sind bereits Beispiele entstanden, die es <a href='http://www.wolter.biz/blog/wp-content/uploads/2010/05/samples_flash.zip'>hier f&uuml;r Flash</a> und <a href='http://www.wolter.biz/blog/wp-content/uploads/2010/05/samples_silverlight.zip'>hier f&uuml;r Silverlight</a> als ZIP zum Download gibt. &Uuml;ber weitere Anregungen f&uuml;r neue Beispiele freue ich mich sehr, nur her damit!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/05/13/next-generation-user-interfaces-how-to/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Konferenz Herbst</title>
		<link>http://www.wolter.biz/2009/08/06/konferenz-herbst/</link>
		<comments>http://www.wolter.biz/2009/08/06/konferenz-herbst/#comments</comments>
		<pubDate>Thu, 06 Aug 2009 17:21:46 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Conference]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=225</guid>
		<description><![CDATA[Auch die zweite Jahresh&#228;lfte bietet viele spannende Konferenzen. Auf einigen davon bin ich als Referent dabei. Darunter die NRW Conf am 28. August in Wuppertal, der Ria Summer Jam am 12. September in M&#252;nchen und die WebTech vom 16. bis zum 18. November in Karlsruhe – dort ist neben meinem Vortrag auch das Flashforum als [...]]]></description>
			<content:encoded><![CDATA[<p>Auch die zweite Jahresh&auml;lfte bietet viele spannende Konferenzen. Auf einigen davon bin ich als Referent dabei. Darunter die <a href="http://www.nrwconf.de/NRW09/">NRW Conf</a> am 28. August in Wuppertal, der <a href="http://www.nrwconf.de/NRW09/">Ria Summer Jam</a> am 12. September in M&uuml;nchen und die <a href="http://it-republik.de/konferenzen/webtech09/">WebTech</a> vom 16. bis zum 18. November in Karlsruhe – dort ist neben meinem Vortrag auch das Flashforum als Partner vertreten und au&szlig;erdem darf ich noch eine ganze Vortragsreihe moderieren.</p>
<p>Als Besucher freue ich mich dann noch sehr auf die <a href="http://www.flashonthebeach.com/">Flash on the Beach</a> vom 21. bis zum 23. September in Brighton. Ich hoffe, man sieht sich auf einer der Veranstaltungen (und &uuml;ber inhaltliche W&uuml;nsche zu meinen Vortr&auml;gen im Vorfeld sowie Kritik und Anregungen w&uuml;rde ich mich sehr freuen).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2009/08/06/konferenz-herbst/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Buchtipp: Styling von Flex Anwendungen</title>
		<link>http://www.wolter.biz/2009/07/12/buchtipp-styling-von-flex-anwendungen/</link>
		<comments>http://www.wolter.biz/2009/07/12/buchtipp-styling-von-flex-anwendungen/#comments</comments>
		<pubDate>Sun, 12 Jul 2009 18:31:53 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Books]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=198</guid>
		<description><![CDATA[„Creating Visual Experiences with Flex 3.0“ ist ein sch&#246;ner Einsteig und umfassender &#220;berblick &#252;ber die grafischen M&#246;glichkeiten von Flash und Flex. Wenn man sich nicht von dem ersten Kapitel mit arg allgemeinen Inhalten zum Thema Rich Internet Applications abschrecken l&#228;&#223;t, dann wird man im ersten Teil mit einer Beschreibung der grafischen Grundfunktionen des Flex 3 [...]]]></description>
			<content:encoded><![CDATA[<p>„Creating Visual Experiences with Flex 3.0“ ist ein sch&ouml;ner Einsteig und umfassender &Uuml;berblick &uuml;ber die grafischen M&ouml;glichkeiten von Flash und Flex. Wenn man sich nicht von dem ersten Kapitel mit arg allgemeinen Inhalten zum Thema Rich Internet Applications abschrecken l&auml;&szlig;t, dann wird man im ersten Teil mit einer Beschreibung der grafischen Grundfunktionen des Flex 3 SDKs (Layout, Styling, Skinning, Fonts, Renderer, Filter und Mischmodi, Effekte und &Uuml;berg&auml;nge), dem Zusammenspiel mit Flash und einiger Besonderheiten von AIR belohnt. Der zweite Teil des Buches vertieft die besprochenen Themen dann anhand zahlreicher &Uuml;bungen. Auch wenn das Buch eher umfassend ist und weniger in die Tiefe geht, bietet es doch viele Tipps auch f&uuml;r versierte Anwender. Einzig Themen wie Degrafa und mehr zum Workflow fehlten mir&#8230; </p>
<p>„Creating Visual Experiences with Flex 3.0“<br />
Autor: Juan Sanchez, Andy McIntosh<br />
Preis: ca. Euro 35,-<br />
ISBN: 0321545370<br />
Erscheinungsdatum: Addison-Wesley Longman, Amsterdam, 2008<br />
Link: <a target="_blank" href="http://www.amazon.de/exec/obidos/ASIN/0321545370/wolter-21">http://www.amazon.de/exec/obidos/ASIN/0321545370/wolter-21</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2009/07/12/buchtipp-styling-von-flex-anwendungen/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>FFK09 &#8211; Community. Code. Creativity.</title>
		<link>http://www.wolter.biz/2008/11/03/ffk09-community-code-creativity/</link>
		<comments>http://www.wolter.biz/2008/11/03/ffk09-community-code-creativity/#comments</comments>
		<pubDate>Mon, 03 Nov 2008 06:48:49 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/2008/11/03/ffk09-community-code-creativity/</guid>
		<description><![CDATA[Es steht fest: Die FFK09 findet vom 27. bis zum 30. April 2009 erneut im Komed in K&#246;ln statt. Und getreu dem Motto „Der fr&#252;he Vogel f&#228;ngt den Wurm“ hoffen Marc Thiele und ich, dass du dir schon jetzt den Termin rot im Kalender markierst. F&#252;r die Konferenz am 28. und 29. April 2009 soll [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://ffk09.flashforum.de/"><img src="http://www.flashforum.de/forum/kopf-fuss/ffk09_137x60.jpg" alt="FFK09 - Community. Code. Creativity." /></a><br />
Es steht fest: Die FFK09 findet vom 27. bis zum 30. April 2009 erneut im Komed in K&ouml;ln statt. Und getreu dem Motto „Der fr&uuml;he Vogel f&auml;ngt den Wurm“ hoffen Marc Thiele und ich, dass du dir schon jetzt den Termin rot im Kalender markierst. F&uuml;r die Konferenz am 28. und 29. April 2009 soll das Programm noch abwechslungsreicher werden als bisher! Schwerpunkt der Veranstaltung ist das Thema Web-Anwendungen (Rich Applications) mit Flash, Flex, AIR und Silverlight. Verst&auml;rkt sind auch wieder Themen f&uuml;r Designer dabei. Au&szlig;erdem gibt es im Vorfeld am 27. April einf&uuml;hrende Workshops sowie im Anschluss an die Konferenz am 30 April vertiefende Workshops. Wer einen Vortrag halten m&ouml;chte oder eine Partnerschaft anstrebt, soll sich gerne bei mir melden. Kritik sowie Vorschl&auml;ge zur Konferenz sind nat&uuml;rlich ebenfalls jederzeit willkommen.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2008/11/03/ffk09-community-code-creativity/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tipp Flash CS4: AIR Projekte erstellen</title>
		<link>http://www.wolter.biz/2008/09/23/tipp-flash-cs4-air-projekte-erstellen/</link>
		<comments>http://www.wolter.biz/2008/09/23/tipp-flash-cs4-air-projekte-erstellen/#comments</comments>
		<pubDate>Tue, 23 Sep 2008 17:45:12 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/2008/09/23/ankuendigung-flash-cs4-air-inside/</guid>
		<description><![CDATA[Wie &#252;blich folgt die neueste Flash Autorenumgebung namens Flash CS4 Professional mit dem Flash Player 10 den Vorgaben der neuesten Laufzeitumgebung. Aber nicht mehr nur der Flash Player ist von Interesse, denn neben dem Small Web Formt (SWF) ist die Ausgabe auch f&#252;r Adobes Browser unabh&#228;ngige Laufzeitumgebung AIR (Adobe Integrated Runtime) direkt im Programm zu [...]]]></description>
			<content:encoded><![CDATA[<p>Wie &uuml;blich folgt die neueste Flash Autorenumgebung namens Flash CS4 Professional mit dem Flash Player 10 den Vorgaben der neuesten Laufzeitumgebung. Aber nicht mehr nur der Flash Player ist von Interesse, denn neben dem Small Web Formt (SWF) ist die Ausgabe auch f&uuml;r Adobes Browser unabh&auml;ngige Laufzeitumgebung AIR (Adobe Integrated Runtime) direkt im Programm zu finden. Es gibt zwei Wege, um ein Projekt in Flash f&uuml;r AIR aufzubereiten. Die erste Variante finden Sie entweder im Startmen&uuml; oder &uuml;ber das Men&uuml; Datei -> Neu. In beiden F&auml;llen k&ouml;nnen Sie eine Flash Datei f&uuml;r Adobe AIR anlegen. Sollte jedoch schon ein Projekt existieren und f&uuml;r AIR umgestellt werden, dann m&uuml;ssen Sie die Ver&ouml;ffentlichungseinstellungen ver&auml;ndern und z. B. &uuml;ber das Men&uuml; Datei -> Einstellungen f&uuml;r Ver&ouml;ffentlichungen innerhalb des Registers Flash den Player auf „Adobe AIR 1.1“ umstellen. Die weiten Details stellen Sie dann &uuml;brigens in den AIR-Einstellungen ein. Diese finden Sie ebenfalls u. a. im Men&uuml; Datei.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2008/09/23/tipp-flash-cs4-air-projekte-erstellen/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

