<?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>Alekkus » Empowering social media with Flash &#187; transform</title>
	<atom:link href="http://alekkus.com/blog/tag/transform/feed/" rel="self" type="application/rss+xml" />
	<link>http://alekkus.com/blog</link>
	<description>flex consultant + social media specialist</description>
	<lastBuildDate>Wed, 17 Mar 2010 07:54:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Flex tutorial: Resizable window</title>
		<link>http://alekkus.com/blog/2009/02/flex-tutorial-resizable-window/</link>
		<comments>http://alekkus.com/blog/2009/02/flex-tutorial-resizable-window/#comments</comments>
		<pubDate>Sun, 01 Feb 2009 07:04:44 +0000</pubDate>
		<dc:creator>Alekkus</dc:creator>
				<category><![CDATA[Flex 3 (Moxie)]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[transform]]></category>

		<guid isPermaLink="false">http://alekkus.com/blog/?p=55</guid>
		<description><![CDATA[Often, a movable/draggable window is also resizable. The following will show you how to make your customized window resizable.
Demo:
Resizable Window (view source enabled)
Source Codes:


&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;mx:Application
	xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34;
	layout=&#34;absolute&#34;
	backgroundColor=&#34;#F8F8F8&#34;&#62;

&#60;mx:Script&#62;
&#60;![CDATA[
	import mx.events.FlexEvent;
	import mx.core.UIComponent;

	private var _window : UIComponent;
	private var _originalWidth : Number;
	private var _originalHeight : Number;
	private var _mouseDownPosition : Point;

	private function onResizeMouseDown( event : MouseEvent ) : void
	{
		// 1. set _window
		_window [...]]]></description>
			<content:encoded><![CDATA[<p>Often, a <a href="http://alekkus.com/blog/2009/01/flex-movable-draggable-window">movable/draggable window</a> is also resizable. The following will show you how to make your customized window resizable.</p>
<p><strong>Demo:</strong><br />
<a href="http://alekkus.com/flex3/resizable_window.html">Resizable Window</a> (view source enabled)</p>
<p><strong>Source Codes:</strong></p>
<pre name="code" class="as3">

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:Application
	xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;
	layout=&quot;absolute&quot;
	backgroundColor=&quot;#F8F8F8&quot;&gt;

&lt;mx:Script&gt;
&lt;![CDATA[
	import mx.events.FlexEvent;
	import mx.core.UIComponent;

	private var _window : UIComponent;
	private var _originalWidth : Number;
	private var _originalHeight : Number;
	private var _mouseDownPosition : Point;

	private function onResizeMouseDown( event : MouseEvent ) : void
	{
		// 1. set _window
		_window = UIComponent( UIComponent( event.currentTarget ).parent );

		// 2. add mouse move and mouse up event listeners
		this.systemManager.addEventListener( MouseEvent.MOUSE_MOVE, onResizeMouseMove, true );
		this.systemManager.addEventListener( MouseEvent.MOUSE_UP, onResizeMouseUp, true );									

		// 3. save original width, height, rotation
		_originalWidth = _window.width;
		_originalHeight = _window.height;	

		// 4. save mouse down position
		_mouseDownPosition = new Point( event.stageX, event.stageY );
	}

	private function onResizeMouseMove( event : MouseEvent ) : void
	{
		// 1. prevent any other mouse up events to happen
		event.stopImmediatePropagation();

		// 2. calculate new width, height
		var newWidth:Number = _originalWidth + ( event.stageX - _mouseDownPosition.x );
		var newHeight:Number = _originalHeight + ( event.stageY - _mouseDownPosition.y );			

		// 3. resize window
		_window.setActualSize( newWidth, newHeight );
	}

	private function onResizeMouseUp( event : MouseEvent ) : void
	{
		// 1. prevent any other mouse up events to happen
		event.stopImmediatePropagation();	

		// 2. remove event listeners
		this.systemManager.removeEventListener( MouseEvent.MOUSE_MOVE, onResizeMouseMove, true );
		this.systemManager.removeEventListener( MouseEvent.MOUSE_UP, onResizeMouseUp , true );
	}

	private function doDrawTriangle( event : FlexEvent ) : void
	{
		var uiComp : UIComponent = UIComponent( event.currentTarget );

		uiComp.graphics.clear();
		uiComp.graphics.beginFill( 0xB1DAFA );
		uiComp.graphics.moveTo( uiComp.width, 0 );
		uiComp.graphics.lineTo( uiComp.width, uiComp.height );
		uiComp.graphics.lineTo( 0, uiComp.height );
	}
]]&gt;
&lt;/mx:Script&gt;

	&lt;mx:Canvas
		id=&quot;cvsMain&quot;
		x=&quot;37&quot; y=&quot;31&quot; width=&quot;260&quot; height=&quot;160&quot;
		borderColor=&quot;#999999&quot; backgroundColor=&quot;#FFFFFF&quot; borderStyle=&quot;solid&quot; dropShadowEnabled=&quot;true&quot; borderThickness=&quot;2&quot;
		horizontalScrollPolicy=&quot;off&quot; verticalScrollPolicy=&quot;off&quot;&gt;

		&lt;!-- Resize triangle --&gt;
		&lt;mx:UIComponent
			x=&quot;{ cvsMain.width - 24 }&quot; y=&quot;{ cvsMain.height - 24 }&quot;
			width=&quot;20&quot; height=&quot;20&quot;
			creationComplete=&quot;doDrawTriangle( event )&quot;
			mouseDown=&quot;onResizeMouseDown( event )&quot; /&gt;

		&lt;!-- Instruction --&gt;
		&lt;mx:Label x=&quot;16&quot; y=&quot;59&quot; text=&quot;Drag the blue triangle to resize&quot; fontSize=&quot;14&quot;/&gt;
	&lt;/mx:Canvas&gt;
&lt;/mx:Application&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://alekkus.com/blog/2009/02/flex-tutorial-resizable-window/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flex tutorial: Movable/Draggable window</title>
		<link>http://alekkus.com/blog/2009/01/flex-tutorial-movable-draggable-window/</link>
		<comments>http://alekkus.com/blog/2009/01/flex-tutorial-movable-draggable-window/#comments</comments>
		<pubDate>Fri, 30 Jan 2009 07:35:14 +0000</pubDate>
		<dc:creator>Alekkus</dc:creator>
				<category><![CDATA[Flex 3 (Moxie)]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[transform]]></category>

		<guid isPermaLink="false">http://alekkus.com/?p=3</guid>
		<description><![CDATA[My very first assignment as a Flex developer back in 2007 was to create a UI for a web-based instant messaging application. Since a user can open multiple chat windows, I needed to make those windows movable. After Googling I can&#8217;t find any hints, but after some trial and errors, I manage to get it [...]]]></description>
			<content:encoded><![CDATA[<p>My very first assignment as a Flex developer back in 2007 was to create a UI for a web-based instant messaging application. Since a user can open multiple chat windows, I needed to make those windows movable. After Googling I can&#8217;t find any hints, but after some trial and errors, I manage to get it worked. </p>
<p>Recently, someone was asking me about similar issue, so I though I&#8217;d post it here and share with anyone that need this. </p>
<p><strong>Demo:</strong><br />
<a href="http://alekkus.com/flex3/draggable_window.html">Movable Window</a> (view source enabled)</p>
<p><strong>Source Codes:</strong></p>
<pre name="code" class="as3">

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:Application
	xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;
	layout=&quot;absolute&quot;
	backgroundColor=&quot;#F8F8F8&quot;&gt;

&lt;mx:Script&gt;
&lt;![CDATA[
	import mx.core.UIComponent;

	private var _window : UIComponent;
	private var _originalPosition : Point;
	private var _mouseDownPosition : Point;

	private function onTitleBarMouseDown( event : MouseEvent ) : void
	{
		// 1. set _window
		_window = UIComponent( UIComponent( event.currentTarget ).parent );

		// 2. add mouse move and mouse up event listeners
		this.systemManager.addEventListener( MouseEvent.MOUSE_MOVE, doMoving, true );
		this.systemManager.addEventListener( MouseEvent.MOUSE_UP, doCommitMove, true );									

		// 3. save offsets
		_originalPosition = new Point( _window.x, _window.y );
		_mouseDownPosition = new Point( event.stageX, event.stageY );
	}

	private function doMoving( event : MouseEvent ) : void
	{
		// 1. prevent any other mouse up events to happen
		event.stopImmediatePropagation();

		// 2. calculate new position
		var positionToMove : Point = new Point( _originalPosition.x + ( event.stageX - _mouseDownPosition.x ),
								  		   		_originalPosition.y + ( event.stageY - _mouseDownPosition.y ) );
		// 3. move window
		_window.move( positionToMove.x, positionToMove.y );
	}

	private function doCommitMove( event : MouseEvent ) : void
	{
		// 1. prevent any other mouse up events to happen
		event.stopImmediatePropagation();	

		// 2. remove event listeners
		this.systemManager.removeEventListener( MouseEvent.MOUSE_MOVE, doMoving, true );
		this.systemManager.removeEventListener( MouseEvent.MOUSE_UP, doCommitMove , true );
	}
]]&gt;
&lt;/mx:Script&gt;

	&lt;mx:Canvas
		x=&quot;37&quot; y=&quot;31&quot; width=&quot;245&quot; height=&quot;156&quot;
		borderColor=&quot;#999999&quot; backgroundColor=&quot;#FFFFFF&quot; borderStyle=&quot;solid&quot; dropShadowEnabled=&quot;true&quot; borderThickness=&quot;2&quot;&gt;

		&lt;!-- Title Bar--&gt;
		&lt;mx:Canvas
			x=&quot;0&quot; y=&quot;0&quot; width=&quot;100%&quot; height=&quot;35&quot;
			backgroundColor=&quot;#B1DAFA&quot;
			mouseDown=&quot;onTitleBarMouseDown( event )&quot;&gt;

			&lt;mx:Label x=&quot;10&quot; y=&quot;7&quot; text=&quot;Title&quot; fontSize=&quot;14&quot;/&gt;
		&lt;/mx:Canvas&gt;

		&lt;!-- Instruction --&gt;
		&lt;mx:Label x=&quot;27&quot; y=&quot;73&quot; text=&quot;Drag the title bar to move&quot; fontSize=&quot;14&quot;/&gt;
	&lt;/mx:Canvas&gt;
&lt;/mx:Application&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://alekkus.com/blog/2009/01/flex-tutorial-movable-draggable-window/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
