<?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>Actionscript Programmierer . Patrick Tresp</title>
	<atom:link href="http://blog.patricktresp.de/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.patricktresp.de</link>
	<description>Things about Flash™, JavaScript, OOP and other software development topics.</description>
	<lastBuildDate>Wed, 22 Feb 2012 13:58:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Internet Explorer 8 and all the fun stuff: e.stopPropagation, e.preventDefault, mousedown&#8230;.</title>
		<link>http://blog.patricktresp.de/2012/02/internet-explorer-8-and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/</link>
		<comments>http://blog.patricktresp.de/2012/02/internet-explorer-8-and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/#comments</comments>
		<pubDate>Thu, 16 Feb 2012 11:04:20 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.patricktresp.de/?p=105</guid>
		<description><![CDATA[When working with JQuery, it seems all work is taken over by the library. Actually it does, unless a client tells you afterwards, Internet Explorer 8 is still his/her weapon of choice, next to the ipad of course. A really funny combination of technical aspects, but client is king, lets make him feel that way. [...]]]></description>
			<content:encoded><![CDATA[<p>When working with JQuery, it seems all work is taken over by the library.<br />
Actually it does, unless a client tells you afterwards, Internet Explorer 8 is still his/her weapon of choice, next to the ipad of course.<br />
A really funny combination of technical aspects, but client is king, lets make him feel that way.</p>
<p>A real pain is that IE8 is not able to use event.preventDefault() nor event.stopPropagation().</p>
<p>For this, its helpful to use a function that will end the event, no matter what browser:</p>
<p>Step 01. make sure to stop Events</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> stopEvent<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>e<span style="color: #009900;">&#41;</span> <span style="color: #003366; font-weight: bold;">var</span> e <span style="color: #339933;">=</span> window.<span style="color: #660066;">event</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//e.cancelBubble is supported by IE -</span>
        <span style="color: #006600; font-style: italic;">// this will kill the bubbling process.</span>
	e.<span style="color: #660066;">cancelBubble</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	e.<span style="color: #660066;">returnValue</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//e.stopPropagation works only in Firefox.</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> e.<span style="color: #660066;">stopPropagation</span> <span style="color: #009900;">&#41;</span> e.<span style="color: #660066;">stopPropagation</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> e.<span style="color: #660066;">preventDefault</span> <span style="color: #009900;">&#41;</span> e.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>		
&nbsp;
       <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Step 02: adding and removing the listeners.</p>
<p>Since IE (8) does not support addEventListener or removeEventListener etc. the element needs to be checked, whether it supports addEventListener or attachEvent ( IE )</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> addListeners<span style="color: #009900;">&#40;</span> el <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span><span style="color: #006600; font-style: italic;">// Allow function call without passing parameters</span>
	<span style="color: #003366; font-weight: bold;">var</span> e <span style="color: #339933;">=</span> el<span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>e <span style="color: #009900;">&#41;</span>  e <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'myDiv'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> el <span style="color: #339933;">=</span> e<span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> el <span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> el.<span style="color: #660066;">addEventListener</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>	
			el.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mouseup'</span><span style="color: #339933;">,</span> onMouseUp<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mousemove'</span><span style="color: #339933;">,</span> onMouseMove<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchstart'</span><span style="color: #339933;">,</span> onTouchStart<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchmove'</span><span style="color: #339933;">,</span> onTouchMove<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchend'</span><span style="color: #339933;">,</span> onTouchEnd<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>			
		<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> el.<span style="color: #660066;">attachEvent</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        <span style="color: #006600; font-style: italic;">// make sure mouse events have the prefix &lt;strong&gt;on&lt;/strong&gt;</span>
			el.<span style="color: #660066;">attachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'onmouseup'</span><span style="color: #339933;">,</span>    onMouseUp<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>		
			el.<span style="color: #660066;">attachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'onmousemove'</span><span style="color: #339933;">,</span>    onMouseMove<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">attachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchstart'</span><span style="color: #339933;">,</span>   onTouchStart<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">attachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchmove'</span><span style="color: #339933;">,</span>    onTouchMove<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">attachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchend'</span><span style="color: #339933;">,</span> onTouchEnd<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: #006600; font-style: italic;">// also remove the Listeners correctly:</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> removeListeners<span style="color: #009900;">&#40;</span> el <span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>	<span style="color: #003366; font-weight: bold;">var</span> e <span style="color: #339933;">=</span> el<span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>e <span style="color: #009900;">&#41;</span>  e <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'myDiv'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> el <span style="color: #339933;">=</span> e<span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> el <span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> el.<span style="color: #660066;">removeEventListener</span> <span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>	
			el.<span style="color: #660066;">removeEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mouseup'</span><span style="color: #339933;">,</span> onMouseUp<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">removeEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mousemove'</span><span style="color: #339933;">,</span> onMouseMove<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">removeEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchstart'</span><span style="color: #339933;">,</span> onTouchStart<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">removeEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchmove'</span><span style="color: #339933;">,</span> onTouchMove<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">removeEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchend'</span><span style="color: #339933;">,</span> onTouchEnd<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> el.<span style="color: #660066;">detachEvent</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			el.<span style="color: #660066;">detachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'onmouseup'</span><span style="color: #339933;">,</span>    onMouseUp<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">detachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'onmousemove'</span><span style="color: #339933;">,</span>    onMouseMove<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">detachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchstart'</span><span style="color: #339933;">,</span>   onTouchStart<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">detachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchmove'</span><span style="color: #339933;">,</span>    onTouchMove<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			el.<span style="color: #660066;">detachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'touchend'</span><span style="color: #339933;">,</span> onTouchEnd<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></div></div>

<p>Now its just a Matter of Needs, what to do within the handlers:<br />
an Example could be</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"> <span style="color: #003366; font-weight: bold;">function</span> onMouseUp<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	log<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'-&amp;gt; mouse up'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	e.<span style="color: #660066;">touches</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#123;</span>clientX<span style="color: #339933;">:</span> e.<span style="color: #660066;">clientX</span><span style="color: #339933;">,</span> clientY<span style="color: #339933;">:</span> e.<span style="color: #660066;">clientY</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	removeListeners<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	stopEvent<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> onMouseDown<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	log<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'-&amp;gt; mouse down'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	addListeners<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	e.<span style="color: #660066;">touches</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#123;</span>clientX<span style="color: #339933;">:</span> e.<span style="color: #660066;">clientX</span><span style="color: #339933;">,</span> clientY<span style="color: #339933;">:</span> e.<span style="color: #660066;">clientY</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	onTouchStart<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	stopEvent<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> onMouseMove<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	log<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'-&amp;gt; mouse move'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	e.<span style="color: #660066;">touches</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#123;</span>clientX<span style="color: #339933;">:</span> e.<span style="color: #660066;">clientX</span><span style="color: #339933;">,</span> clientY<span style="color: #339933;">:</span> e.<span style="color: #660066;">clientY</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	onTouchMove<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	stopEvent<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> onTouchStart<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	log<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'-&amp;gt; touch start'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//do something with e.touches[0].clientX or e.touches[0].clientY</span>
   stopEvent<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> onTouchMove<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	log<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'-&amp;gt; touch move'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//do something with e.touches[0].clientX or e.touches[0].clientY</span>
	stopEvent<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> onTouchEnd<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	log<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'-&amp;gt; touch end'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>is_touch_device<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> removeListeners<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>And to not get any errors, add function log and function is_touch_device&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> log<span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> c<span style="color: #339933;">;</span>
	c <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'console'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	c.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> str <span style="color: #339933;">+</span> <span style="color: #3366CC;">'
'</span> <span style="color: #339933;">+</span> c.<span style="color: #660066;">innerHTML</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> is_touch_device<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #339933;">!!</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ontouchstart'</span> <span style="color: #000066; font-weight: bold;">in</span> window<span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Finally, if it is an Touch device, you want to add the listeners onLoad of the document, on regular devices on MouseDown. Call this function on documen_ready or onLoad.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> init<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> el<span style="color: #339933;">;</span>
    el <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'myDiv'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> el.<span style="color: #660066;">addEventListener</span> <span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		el.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mousedown'</span><span style="color: #339933;">,</span> onMouseDown<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> el.<span style="color: #660066;">attachEvent</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		el.<span style="color: #660066;">attachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'onmousedown'</span><span style="color: #339933;">,</span>    onMouseDown<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> is_touch_device<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> addListeners<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>it works so far in IE8/9, FireFox 3.6.1+, Safari and mobile Safari ( ios )</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.patricktresp.de/2012/02/internet-explorer-8-and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Getting those HTML5-Videos running // correct MIME-Types on Server</title>
		<link>http://blog.patricktresp.de/2012/02/getting-those-html5-videos-running-correct-mime-types-on-server/</link>
		<comments>http://blog.patricktresp.de/2012/02/getting-those-html5-videos-running-correct-mime-types-on-server/#comments</comments>
		<pubDate>Thu, 09 Feb 2012 11:44:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Allgemein]]></category>

		<guid isPermaLink="false">http://blog.patricktresp.de/?p=102</guid>
		<description><![CDATA[During a Projekt, i was wondering, why local use of HTML5 Videos was running, but online it failed. It turned out, that the MIME-Types for .ogg or .webm were not correctly set. The Server served them as plain text-files. To get the Server to add correct headers to the files, it is helpful to add [...]]]></description>
			<content:encoded><![CDATA[<p>During a Projekt, i was wondering, why local use of HTML5 Videos was running, but online it failed.</p>
<p>It turned out, that the MIME-Types for .ogg or .webm were not correctly set. The Server served them as plain text-files.</p>
<p>To get the Server to add correct headers to the files, it is helpful to add those lines in your .htacess .</p>
<p>Not all of them are always neccessary.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">AddType video<span style="color: #339933;">/</span>ogg <span style="color: #339933;">.</span>ogm 
AddType video<span style="color: #339933;">/</span>ogg <span style="color: #339933;">.</span>ogv 
AddType video<span style="color: #339933;">/</span>ogg <span style="color: #339933;">.</span>ogg 
AddType video<span style="color: #339933;">/</span>webm <span style="color: #339933;">.</span>webm 
AddType audio<span style="color: #339933;">/</span>webm <span style="color: #339933;">.</span>weba
AddType video<span style="color: #339933;">/</span>mp4 <span style="color: #339933;">.</span>mp4 
AddType video<span style="color: #339933;">/</span>x<span style="color: #339933;">-</span>m4v <span style="color: #339933;">.</span>m4v</pre></div></div>

<p>Sometimes it&#8217;s that easy</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.patricktresp.de/2012/02/getting-those-html5-videos-running-correct-mime-types-on-server/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How i became more efficient &#8230;</title>
		<link>http://blog.patricktresp.de/2011/11/how-i-became-more-efficient/</link>
		<comments>http://blog.patricktresp.de/2011/11/how-i-became-more-efficient/#comments</comments>
		<pubDate>Thu, 24 Nov 2011 15:39:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Allgemein]]></category>

		<guid isPermaLink="false">http://blog.patricktresp.de/?p=96</guid>
		<description><![CDATA[or&#8230;. how to get back to efficiency. One of the major issues for me as a developer is how to use my time. Decisions need to be made, what has to be done ( by me ) till when and what needs to be worked on next. Since i am a very lucky in the [...]]]></description>
			<content:encoded><![CDATA[<p>or&#8230;. how to get back to efficiency.</p>
<p>One of the major issues for me as a developer is how to use my time. Decisions need to be made, what has to be done ( by me ) till when and what needs to be worked on next.</p>
<p>Since i am a very lucky in the fact, that i have lots of jobs, i tended to fuddle up everything and not get anything done stress free.</p>
<p>So what now? I won&#8217;t be the one, that will invent a time stretching mechanism in physics, astrology or whatever.</p>
<p>I read an article that came per tweet ( can&#8217;t find it of course by now ) that inspired me, coming back to more efficiency.</p>
<p><strong>First</strong>, a couple weeks ago a friend reminded me, that i could set my phone to not push e-mails anytime to my phone. Which means, whenever i want or need to receive E-Mails, i simply open the mail-app manually. Whoa what a relief &#8211; the phone does not &#8220;pling&#8221; all the time which distracts me or wants my attention.</p>
<p>Which leads me to the <strong>second</strong> point. Event though my phone doesn&#8217;t pling that much anymore, i wondered, what distracts my attention to code while programming. The pling&#8230; it is still there, cause my mail program of course is checking my mails all the time. Every 10-20 minutes or in even smaller periods the pling comes up. I sat back and read the mails, that needed so much urgent attention:</p>
<ul>
<li>Cheap Flights to London for 29 € ( Oh yeah lets go )</li>
<li>Get a Picture framed for 40% off ( right, haven&#8217;t done that for a while )</li>
<li>Tibet needs help &#8211; Donate here ( just phish my account! )</li>
<li>etc.</li>
<li>etc.</li>
</ul>
<p>I figured, its not SPAM! I really signed up for those newsletters and surely marked them as read, whenever they came in. So for a couple of weeks i unsubscribed all newsletters which i really do not need to receive, since i look up stuff manually that interests me. Many services are unsubscribed by now and daily E-Mail rate dropped 80%. Still working on more!<br />
<strong></strong></p>
<p><strong>Third</strong>- Email is no real-time communication, even though we tend to force ourselves to believe that. I do, for example, have a time, where i am very productive in coding, another time for writing Mails, another for doing office stuff. There not the same each day, but when i feel, i am getting ready to code, i close my mail program for at least an hour. no more pling&#8230;</p>
<div>
<p>Oh, don&#8217;t want to forget the other attractors, even though <strong>nobody</strong> does it while working! Twitter, Skype, Facebook, g+, Online-News, community etc, etc.<br />
Since Skype is the only thing, that connects me to other developers and friends i tend not to switch it off, Facebook kind of killed that totally crazy chatting anyhow. Whenever i really want silence &#8211; i am &#8220;busy&#8221;.<br />
Twitter, Facebook, News and all the other information spreaders i watch first in the morning, before i even start thinking of work, after lunch and sometimes before i leave.<br />
Compact distraction!<br />
This week i did work on 7 different jobs and different clients, usually it would mean, i don&#8217;t get home till midnight and i feel worn out, but i didn&#8217;t.<br />
It wasn&#8217;t a 9-5 week of course but i sure did have the time to come down, think about, what i do and i even found time to write down those lines&#8230;.</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.patricktresp.de/2011/11/how-i-became-more-efficient/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>FDT &#8211; External Viewer Scaling Problem &#8211; SWF Shrinks</title>
		<link>http://blog.patricktresp.de/2011/08/fdt-external-viewer-scaling-problem-swf-shrinks/</link>
		<comments>http://blog.patricktresp.de/2011/08/fdt-external-viewer-scaling-problem-swf-shrinks/#comments</comments>
		<pubDate>Thu, 04 Aug 2011 12:04:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Allgemein]]></category>

		<guid isPermaLink="false">http://blog.patricktresp.de/?p=77</guid>
		<description><![CDATA[With the latest Update of OSX Lion and therefore getting the new Webkit, the external Viewer seems to shrink the output swf. Even though i do like small applications, i love to be able to read an click what i produce. So whats up? FDT creates a wrapper to launch the swf when using the [...]]]></description>
			<content:encoded><![CDATA[<p>With the latest Update of OSX Lion and therefore getting the new Webkit, the external Viewer seems to shrink the output swf.</p>
<p>Even though i do like small applications, i love to be able to read an click what i produce.</p>
<p>So whats up?</p>
<p>FDT creates a wrapper to launch the swf when using the external swf viewer. In this wrapper, the embed tag does not include any informations about width and height of the swf, and that causes the swf to shrink. Thanks to FDT support, it is possible to have a workaround on that, besides using the standalone player or the browser ( i kinda got stuck to the external viewer ).</p>
<p>Basically, what you do is:</p>
<ul>
<li>get the generated code from the wrapper FDT created</li>
<li>create a HTML-File</li>
<li>copy the generated code and insert the width and height attributes in that code</li>
<li>change the Debug-Configurations, on what to open after the compile process ( yes, the new HTML-file )</li>
</ul>
<p>The bug is filed under : <a href="http://bugs.powerflasher.com/jira/browse/FDT-2255" target="_blank">http://bugs.powerflasher.com/jira/browse/FDT-2255</a><br />
Don&#8217;t like reading? <a href="http://screencast.com/t/lylw8JVrve" target="_blank">http://screencast.com/t/lylw8JVrve</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.patricktresp.de/2011/08/fdt-external-viewer-scaling-problem-swf-shrinks/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>If this than that – ifttt</title>
		<link>http://blog.patricktresp.de/2011/05/if-this-than-that-%e2%80%93-ifttt/</link>
		<comments>http://blog.patricktresp.de/2011/05/if-this-than-that-%e2%80%93-ifttt/#comments</comments>
		<pubDate>Thu, 26 May 2011 09:13:44 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Allgemein]]></category>

		<guid isPermaLink="false">http://blog.patricktresp.de/?p=72</guid>
		<description><![CDATA[If this service is really working, it will save a lot of pushing informations through different channels and will make some peoples days. It only works by invitation currently, but i will give it a try now. http://ifttt.com/ &#160;]]></description>
			<content:encoded><![CDATA[<p>If this service is really working, it will save a lot of pushing informations through different channels and will make some peoples days.</p>
<p>It only works by invitation currently, but i will give it a try now.</p>
<p><a title="if this than that" href="http://ifttt.com/" target="_blank">http://ifttt.com/</a></p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.patricktresp.de/2011/05/if-this-than-that-%e2%80%93-ifttt/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Allow Keyboard Interactions in Fullscreen-Mode within an AIR Application</title>
		<link>http://blog.patricktresp.de/2011/05/allow-keyboard-interactions-in-fullscreen-mode-within-an-air-application/</link>
		<comments>http://blog.patricktresp.de/2011/05/allow-keyboard-interactions-in-fullscreen-mode-within-an-air-application/#comments</comments>
		<pubDate>Thu, 05 May 2011 15:23:58 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[AS3]]></category>

		<guid isPermaLink="false">http://blog.patricktresp.de/?p=64</guid>
		<description><![CDATA[While setting up an AIR Application which asks for User-Interaction by Keyboard, i was surprised, that Keyboard-Interactions are not allowed in regular Fullscreen Mode. After looking up in the documentation i found : stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE; This &#8220;Specifies that the Stage is in full-screen mode with keyboard interactivity enabled.&#8221; Something i want to keep in [...]]]></description>
			<content:encoded><![CDATA[<p>While setting up an AIR Application which asks for User-Interaction by Keyboard, i was surprised, that Keyboard-Interactions are not allowed in regular Fullscreen Mode.</p>
<p>After looking up in the documentation i found :</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">stage</span>.<span style="color: #006600;">displayState</span> = StageDisplayState.<span style="color: #006600;">FULL_SCREEN_INTERACTIVE</span>;</pre></div></div>

<p>This &#8220;Specifies that the Stage is in full-screen mode with keyboard interactivity enabled.&#8221;</p>
<p>Something i want to keep in mind, since FullScreen did not mean &#8220;no interactions by keyboard&#8221; to me!</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.patricktresp.de/2011/05/allow-keyboard-interactions-in-fullscreen-mode-within-an-air-application/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Creating a StageVideo Test in FDT with Flex 4.5 and FlashPlayer 10.2</title>
		<link>http://blog.patricktresp.de/2011/04/creating-a-stagevideo-test-in-fdt-with-flex-4-5-and-flashplayer-10-2/</link>
		<comments>http://blog.patricktresp.de/2011/04/creating-a-stagevideo-test-in-fdt-with-flex-4-5-and-flashplayer-10-2/#comments</comments>
		<pubDate>Fri, 29 Apr 2011 13:48:20 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Allgemein]]></category>

		<guid isPermaLink="false">http://blog.patricktresp.de/?p=54</guid>
		<description><![CDATA[While trying to set up a simple Example with the StageVideo in FlashPlayer 10.2 i had lots of trouble setting up the Environment. Neither could i use Flash IDE to export correctly for FP10.2 nor could i use FDT to compile a running version. I relied on the fact, that Flex Hero automatically includes FP10.2 [...]]]></description>
			<content:encoded><![CDATA[<p>While trying to set up a simple Example with the StageVideo in FlashPlayer 10.2 i had lots of trouble setting up the Environment. Neither could i use Flash IDE to export correctly for FP10.2 nor could i use FDT to compile a running version.</p>
<p>I relied on the fact, that Flex Hero automatically includes FP10.2 which turned out to be false. Therefore i downloaded the last update and finally had the playerglobal.swc for FlashPlayer 10.2 available.</p>
<p><a href="http://blog.patricktresp.de/wp-content/uploads/2011/04/Bildschirmfoto-2011-04-29-um-15.39.05.png"><img class="alignnone size-full wp-image-55" title="Bildschirmfoto 2011-04-29 um 15.39.05" src="http://blog.patricktresp.de/wp-content/uploads/2011/04/Bildschirmfoto-2011-04-29-um-15.39.05.png" alt="" width="543" height="634" /></a></p>
<p>After having this working, the Example to check the performance was a piece of cake.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package vid
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Sprite</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #0066CC;">Stage</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">StageVideoAvailabilityEvent</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">StageVideoEvent</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">geom</span>.<span style="color: #006600;">Rectangle</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">media</span>.<span style="color: #006600;">StageVideo</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">media</span>.<span style="color: #006600;">StageVideoAvailability</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">media</span>.<span style="color: #0066CC;">Video</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">net</span>.<span style="color: #0066CC;">NetConnection</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">net</span>.<span style="color: #0066CC;">NetStream</span>;
&nbsp;
	<span style="color: #808080; font-style: italic;">/**
	 * @author patricktresp
	 */</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> StageVideoTest <span style="color: #0066CC;">extends</span> Sprite
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _nc : <span style="color: #0066CC;">NetConnection</span>;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _ns : <span style="color: #0066CC;">NetStream</span>;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _stageVideo : StageVideo;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _video : <span style="color: #0066CC;">Video</span>;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> StageVideoTest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">stage</span> : <span style="color: #0066CC;">Stage</span> = Main.<span style="color: #006600;">getInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">stage</span>;
&nbsp;
			<span style="color: #0066CC;">stage</span>.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span> StageVideoAvailabilityEvent.<span style="color: #006600;">STAGE_VIDEO_AVAILABILITY</span>, onStageVideoState <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> onStageVideoState<span style="color: #66cc66;">&#40;</span> event : StageVideoAvailabilityEvent <span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> available : <span style="color: #0066CC;">Boolean</span> = <span style="color: #66cc66;">&#40;</span>event.<span style="color: #006600;">availability</span> == StageVideoAvailability.<span style="color: #006600;">AVAILABLE</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			_nc = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">NetConnection</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			_nc.<span style="color: #0066CC;">connect</span><span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">null</span> <span style="color: #66cc66;">&#41;</span>;
			_ns = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">NetStream</span><span style="color: #66cc66;">&#40;</span> _nc <span style="color: #66cc66;">&#41;</span>;
			_ns.<span style="color: #0066CC;">bufferTime</span> = <span style="color: #cc66cc;">0</span>;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> customClient : <span style="color: #0066CC;">Object</span>;
			customClient = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Object</span>;
&nbsp;
			customClient.<span style="color: #006600;">onMetaData</span> = onMetaDataHandler;
			_ns.<span style="color: #006600;">client</span> = customClient;
&nbsp;
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> available <span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				addStageVideo<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
			<span style="color: #b1b100;">else</span>
			<span style="color: #66cc66;">&#123;</span>
				addRegularVideo<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
&nbsp;
			_ns.<span style="color: #0066CC;">play</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">&quot;video/hd.f4v&quot;</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> addRegularVideo<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">stage</span> : <span style="color: #0066CC;">Stage</span> = Main.<span style="color: #006600;">getInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">stage</span>;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">video</span> : <span style="color: #0066CC;">Video</span> = _video = <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>;
&nbsp;
			<span style="color: #0066CC;">video</span>.<span style="color: #0066CC;">smoothing</span> = <span style="color: #000000; font-weight: bold;">true</span>;
&nbsp;
			<span style="color: #0066CC;">video</span>.<span style="color: #006600;">attachNetStream</span><span style="color: #66cc66;">&#40;</span> _ns <span style="color: #66cc66;">&#41;</span>;
			<span style="color: #0066CC;">stage</span>.<span style="color: #006600;">addChildAt</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">video</span>, <span style="color: #cc66cc;">0</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> addStageVideo<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">stage</span> : <span style="color: #0066CC;">Stage</span> = Main.<span style="color: #006600;">getInstance</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">stage</span>;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> v : Vector. = <span style="color: #0066CC;">stage</span>.<span style="color: #006600;">stageVideos</span>;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> sv : StageVideo;
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> v.<span style="color: #0066CC;">length</span> <span style="color: #66cc66;">&amp;</span>gt;= <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				sv = _stageVideo = v<span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#93;</span>;
				sv.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span> StageVideoEvent.<span style="color: #006600;">RENDER_STATE</span>, stageVideoStateChange <span style="color: #66cc66;">&#41;</span>;
				sv.<span style="color: #006600;">attachNetStream</span><span style="color: #66cc66;">&#40;</span> _ns <span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> stageVideoStateChange<span style="color: #66cc66;">&#40;</span> event : StageVideoEvent <span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			resize<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> resize<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			_stageVideo.<span style="color: #006600;">viewPort</span> = <span style="color: #000000; font-weight: bold;">new</span> Rectangle<span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span>, _stageVideo.<span style="color: #006600;">videoWidth</span>, _stageVideo.<span style="color: #006600;">videoHeight</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> onMetaDataHandler<span style="color: #66cc66;">&#40;</span> meta : <span style="color: #0066CC;">Object</span> <span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> _video <span style="color: #66cc66;">&#41;</span>
			<span style="color: #66cc66;">&#123;</span>
				_video.<span style="color: #0066CC;">width</span> = meta.<span style="color: #0066CC;">width</span>;
				_video.<span style="color: #0066CC;">height</span> = meta.<span style="color: #0066CC;">height</span>;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Next Step will be the test within an existing application running in Projector.</p>
<p>For Performance Testing i used a very fast Picture-Changing Movie:</p>
<p>No StageVideo:</p>
<p><a href="http://blog.patricktresp.de/wp-content/uploads/2011/04/Bildschirmfoto-2011-04-29-um-15.29.13.png"><img class="alignnone size-full wp-image-57" title="Bildschirmfoto 2011-04-29 um 15.29.13" src="http://blog.patricktresp.de/wp-content/uploads/2011/04/Bildschirmfoto-2011-04-29-um-15.29.13.png" alt="" width="788" height="37" /></a></p>
<p>Yes StageVideo:</p>
<p><a href="http://blog.patricktresp.de/wp-content/uploads/2011/04/Bildschirmfoto-2011-04-29-um-15.29.40.png"><img class="alignnone size-full wp-image-58" title="Bildschirmfoto 2011-04-29 um 15.29.40" src="http://blog.patricktresp.de/wp-content/uploads/2011/04/Bildschirmfoto-2011-04-29-um-15.29.40.png" alt="" width="796" height="40" /></a></p>
<p>Of Course the video.smoothing has a direct effect on the high CPU-usage, without smoothing:</p>
<p><a href="http://blog.patricktresp.de/wp-content/uploads/2011/04/Bildschirmfoto-2011-04-29-um-15.46.14.png"><img class="alignnone size-full wp-image-59" title="Bildschirmfoto 2011-04-29 um 15.46.14" src="http://blog.patricktresp.de/wp-content/uploads/2011/04/Bildschirmfoto-2011-04-29-um-15.46.14.png" alt="" width="804" height="36" /></a></p>
<p>Still more than 30% saved and another step closer to &#8220;green programming&#8221;.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.patricktresp.de/2011/04/creating-a-stagevideo-test-in-fdt-with-flex-4-5-and-flashplayer-10-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Shuffle a Vector in ActionScript 3</title>
		<link>http://blog.patricktresp.de/2011/04/shuffle-a-vector-in-actionscript-3/</link>
		<comments>http://blog.patricktresp.de/2011/04/shuffle-a-vector-in-actionscript-3/#comments</comments>
		<pubDate>Tue, 12 Apr 2011 14:35:10 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[AS3]]></category>

		<guid isPermaLink="false">http://blog.patricktresp.de/?p=43</guid>
		<description><![CDATA[During a Project i needed a method which shuffles a Vector. Since i could not find an implemented shuffle() function i remembered how PHP works with sort-functions and came up with this really simple comparison function: package de.patricktresp.util &#123; /** * @author patricktresp */ public class VectorUtil &#123; public static function shuffleVector&#40; a : Object, [...]]]></description>
			<content:encoded><![CDATA[<p>During a Project i needed a method which shuffles a Vector. Since i could not find an implemented shuffle() function i remembered how PHP works with sort-functions and came up with this really simple comparison function:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package de.<span style="color: #006600;">patricktresp</span>.<span style="color: #006600;">util</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #808080; font-style: italic;">/**
	 * @author patricktresp
	 */</span>
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> VectorUtil
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">function</span> shuffleVector<span style="color: #66cc66;">&#40;</span> a : <span style="color: #0066CC;">Object</span>, b : <span style="color: #0066CC;">Object</span> <span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">int</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #808080; font-style: italic;">// HIDE FDT WARNINGS</span>
			a;
			b;
&nbsp;
			<span style="color: #b1b100;">return</span> <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">floor</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">random</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">*</span> <span style="color: #cc66cc;">3</span> - <span style="color: #cc66cc;">1</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>So whenever needed i just go:</p>

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

<p>This works fine for now, but i am very sure there is some more efficient and faster methods.</p>
<p>Suggestions are appreciated.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.patricktresp.de/2011/04/shuffle-a-vector-in-actionscript-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>FFK11 / beyondtellerrand review</title>
		<link>http://blog.patricktresp.de/2011/04/ffk11-beyondtellerrand-review/</link>
		<comments>http://blog.patricktresp.de/2011/04/ffk11-beyondtellerrand-review/#comments</comments>
		<pubDate>Fri, 08 Apr 2011 10:52:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[AS3]]></category>

		<guid isPermaLink="false">http://blog.patricktresp.de/?p=33</guid>
		<description><![CDATA[Another FFK ( Flash Forum Konferenz ) / beyondtellerrand has passed and left me with new inspirations on how i want to work on and what i want to work on in the future. Find some interesting Ressources here: FDT MACHT EUER FDT MOLEHILL READY ( http://blog.powerflasher.de/macht-euer-fdt-molehill-ready/ ) Tutorial Project Types and Project Templates ( http://www.fdt.powerflasher.com/milestone-2/fdt-4-tutorial-project-types-and-project-templates/ [...]]]></description>
			<content:encoded><![CDATA[<p>Another FFK ( Flash Forum Konferenz ) / beyondtellerrand has passed and left me with new inspirations on how i want to work on and what i want to work on in the future.</p>
<p>Find some interesting Ressources here:</p>
<p><strong>FDT</strong></p>
<ul>
<li>MACHT EUER FDT MOLEHILL READY<br />
( <a href="http://blog.powerflasher.de/macht-euer-fdt-molehill-ready/" target="_blank">http://blog.powerflasher.de/macht-euer-fdt-molehill-ready/</a> )</li>
<li>Tutorial Project Types and Project Templates</li>
<li>( <a href="http://www.fdt.powerflasher.com/milestone-2/fdt-4-tutorial-project-types-and-project-templates/" target="_blank">http://www.fdt.powerflasher.com/milestone-2/fdt-4-tutorial-project-types-and-project-templates/</a> )</li>
<li>Using Project References</li>
<li>( <a href="http://fdt.powerflasher.com/docs/Project_References" target="_blank">http://fdt.powerflasher.com/docs/Project_References</a> )</li>
</ul>
<p><strong>Molehill</strong></p>
<ul>
<li>MoleHill Examples collected by Lee Brimelow @leebrimelow<br />
( <a href="http://www.tinyurl.com/molehilldemos" target="_blank">http://www.tinyurl.com/molehilldemos</a> )</li>
</ul>
<p><strong>JavaScript</strong></p>
<ul>
<li>a javascript library for working with the html5 canvas element<br />
( <a href="http://easeljs.com/" target="_blank">http://easeljs.com/</a> )</li>
<li>a tool for exporting swf animations as EaselJS sprite sheets<br />
( <a href="http://easeljs.com/zoe.html" target="_blank">http://easeljs.com/zoe.html</a> )</li>
<li>a Base Class for JavaScript Inheritance ( <a href="http://dean.edwards.name/weblog/2006/03/base/" target="_blank">http://dean.edwards.name/weblog/2006/03/base/</a> )</li>
<li>Web IDE = JavaScript / HTML Editor + JS Debugger + VCS Support!<br />
( <a href="http://www.jetbrains.com/webstorm/" target="_blank">http://www.jetbrains.com/webstorm/</a> )</li>
<li>a JavaScript validator<br />
( <a href="http://www.javascriptlint.com/index.htm" target="_blank">http://www.javascriptlint.com/index.htm</a> )</li>
<li>YUI Compressor<br />
( <a href="http://developer.yahoo.com/yui/compressor/" target="_blank">http://developer.yahoo.com/yui/compressor/</a> )</li>
<li>YUI Compressor online</li>
<li>( <a href="http://yui.2clics.net/" target="_blank">http://yui.2clics.net/</a> )</li>
</ul>
<p>The conference hat obviously more topics than listet before but these are the resources i will need to use in the future.</p>
<p>I am very curious, how molehill will affect the complete Flash importance in the web.</p>
<p>Thanks FFK11!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.patricktresp.de/2011/04/ffk11-beyondtellerrand-review/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Frame Tween force playing forward // TweenLite</title>
		<link>http://blog.patricktresp.de/2011/04/frame-tween-force-playing-forward-tweenlite/</link>
		<comments>http://blog.patricktresp.de/2011/04/frame-tween-force-playing-forward-tweenlite/#comments</comments>
		<pubDate>Mon, 04 Apr 2011 20:25:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Effects]]></category>

		<guid isPermaLink="false">http://wp.patricktresp.de/?p=28</guid>
		<description><![CDATA[When having an external SWF file which needs to be tweened in frames ( e.g. multiple buttons to control the position of swf file ) it always throws performance issues while tweening a frame which is before the current frame ( meaning: reverse tweens ). After some research i thankfully found following way to force [...]]]></description>
			<content:encoded><![CDATA[<p>When having an external SWF file which needs to be tweened in frames ( e.g. multiple buttons to control the position of swf file ) it always throws performance issues while tweening a frame which is before the current frame ( meaning: reverse tweens ).</p>
<p>After some research i thankfully found following way to force a tween to play forward and loop to reach the desired frame. ( e.g. movie with totalframes 100 is at frame 50, button action: tween to frame 10 )</p>
<p>I was really glad i found this!</p>
<p>TweenLite is downloadable at : <a href="http://www.greensock.com/">http://www.greensock.com/</a></p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">// header</span>
<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">greensock</span>.<span style="color: #006600;">TweenLite</span>;
<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">greensock</span>.<span style="color: #006600;">plugins</span>.<span style="color: #66cc66;">*</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// function</span>
TweenPlugin.<span style="color: #006600;">activate</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#91;</span> FramePlugin <span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">&#41;</span>;
TweenPlugin.<span style="color: #006600;">activate</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#91;</span> FrameForwardPlugin <span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> frameForward : uint = <span style="color: #cc66cc;">10</span>;
<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">time</span>: <span style="color: #0066CC;">Number</span> = <span style="color: #cc66cc;">1</span>;
<span style="color: #000000; font-weight: bold;">var</span> _animation : Sprite = getChildByname<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;animation&quot;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
TweenLite.<span style="color: #006600;">to</span><span style="color: #66cc66;">&#40;</span> _animation, <span style="color: #0066CC;">time</span>, <span style="color: #66cc66;">&#123;</span> frameForward:targetFrame, ease:<span style="color: #ff0000;">&quot;easeInOutExpo&quot;</span> <span style="color: #66cc66;">&#125;</span> <span style="color: #66cc66;">&#41;</span>;</pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.patricktresp.de/2011/04/frame-tween-force-playing-forward-tweenlite/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

