<?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>Turtlebite&#039;s Blog &#187; scrollbar</title>
	<atom:link href="http://blog.turtlebite.com/tag/scrollbar/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.turtlebite.com</link>
	<description>Flash CMS Framework, Fleb Framework, Global Navigation and other ActionScript Stuff</description>
	<lastBuildDate>Thu, 17 Nov 2011 06:01:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>In love with UIScrollbar</title>
		<link>http://blog.turtlebite.com/in-love-with-uiscrollbar/</link>
		<comments>http://blog.turtlebite.com/in-love-with-uiscrollbar/#comments</comments>
		<pubDate>Mon, 05 Oct 2009 19:40:25 +0000</pubDate>
		<dc:creator>Christian</dc:creator>
				<category><![CDATA[Utilities & Tips]]></category>
		<category><![CDATA[scrollbar]]></category>

		<guid isPermaLink="false">http://blog.flashcmsframework.com/?p=808</guid>
		<description><![CDATA[This post is all about scrolling. I&#8217;m not talking about scrolling text, but scrolling movieclips. Or more precise: scrolling a whole flash website. If you want to do this you have a few choices. If you have read the title of this post you know which is my favoured method&#8230; Use the browser scrollbar This [...]]]></description>
			<content:encoded><![CDATA[<p>This post is all about scrolling. I&#8217;m not talking about scrolling text, but scrolling movieclips. Or more precise: scrolling a whole flash website. If you want to do this you have a few choices. If you have read the title of this post you know which is my favoured method&#8230; <img src='http://blog.turtlebite.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p><strong>Use the browser scrollbar</strong><br />
This seems to be the obvious choice. I do this sometimes, and if I do I use <a href="http://swffit.millermedeiros.com/">SWFFIT</a>. This is a really good solution, but there is a drawback when you use this method: you can only scroll the flash movie as a whole. This is a problem if you want to keep a background image in your flash movie in place and only scroll part of your site.</p>
<p><strong>Use a scrollpane</strong><br />
Because I prefer to have more control, I used to do the scrolling by using  a scrollpane: I just put the whole flash site into a scrollpane. This works fine, I did this in many sites: <a href="http://www.dlog.ch">dlog.ch</a>, <a href="http://www.marviva.net">marviva.net</a> etc. But it also has drawbacks: I cannot click on anything which is behind the scollpane, and, more annoying: I cannot take control over the scroll amount (at least until today I have not found out how to do it). If the content loaded into the scrollpane contains for example movieclips placed at the far bottom (masks, movieclips placed &#8220;off stage&#8221; as starting positions of animations etc.), this will make the movieclip too big (height). And you are limited to the frame of the scrollpane: The content is always &#8220;inside&#8221; (and therefor masked by) the scrollpane which is not always desired.</p>
<p><strong>Use a third party scrollbar<br />
</strong>Every now and then I like to use the <a href="http://www.flashtuning.net/components/Advanced-Scroll-Bar-AS-3.0_15.html">Advanced Scrollbar</a> from <a href="http://flashtuning.net/">flashtuning.net</a> or the <a href="http://www.flashloaded.com/flashcomponents/ultimatescrollerpro/">Ultimate Scroller Pro</a> from <a href="http://www.flashloaded.com">flashloaded.com</a>, but only to scroll &#8220;small things&#8221;.</p>
<p><strong>Take full control with the UIScrollbar!</strong><br />
I always thought that the UIScrollbar was for scrolling text only. How wrong I was! <img src='http://blog.turtlebite.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />  Today I do all my scrolling with the UIScrollbar, because you can not only scroll textfields, but movieclips as well. And the best thing is: I can precisly control the scroll amounts. Have a look at the SWF below. <a href="http://www.flashcmsframework.com/downloads/uiscrollbar/">Click here to test the mousewheel</a>.</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_scroll_611696581"
			class="flashmovie"
			width="595"
			height="400">
	<param name="movie" value="/wp-content/uploads/2009/10/scroll.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/wp-content/uploads/2009/10/scroll.swf"
			name="fm_scroll_611696581"
			width="595"
			height="400">
	<!--<![endif]-->
		<a href="http://adobe.com/go/getflashplayer"><img class="alignnone size-full wp-image-826" title="flash_as3_scrolling_movieclips_uiscrollbar" src="http://blog.flashcmsframework.com/wp-content/uploads/2009/10/flash_as3_scrolling_movieclips_uiscrollbar.jpg" alt="flash_as3_scrolling_movieclips_uiscrollbar" width="190" height="140" /></a></p>

	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p>The simple trick is to not assign a scroll target to the scrollbar, but a scroll amount only. Then just listen to the scroll events and scroll whatever you like:</p>
<pre class="brush: php;">
// setScrollProperties(pageSize:Number, minScrollPosition:Number, maxScrollPosition:Number, pageScrollSize:Number = 0):void
var scrollbar_height:uint = 200;
var extra_height:uint = 10;
sb_vertical.setScrollProperties(200, 0, scroll_target.height - scrollbar_height + extra_height, scrollbar_height);
sb_vertical.addEventListener(ScrollEvent.SCROLL, onVerticalScrollHandler);
//
function onVerticalScrollHandler(event:ScrollEvent):void{
scroll_target.y = -event.position + sb_vertical.y + 5;
}
</pre>
<p><a href="http://www.turtlebite.com/downloads/uiscrollbar/uiscrollbar.zip">Download the source files here</a>. I have also included the files needed to enable <a href="http://blog.pixelbreaker.com/flash/as30-mousewheel-on-mac-os-x/">mouse wheel scrolling on the mac</a>.</p>
<p><em><strong>Update 2009/12/01</strong></em>: <a href="http://www.turbohomepage.ch">Here is a real example</a> of a website using the UI Scrollbar for full site scrolling.</p>
<p>Happy scrolling!<br />
Christian</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-knowledge">
<ul class="socials">
		<li class="shr-comfeed">
			<a href="http://blog.turtlebite.com/in-love-with-uiscrollbar/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://blog.turtlebite.com/in-love-with-uiscrollbar/&amp;title=In+love+with+UIScrollbar" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://blog.turtlebite.com/in-love-with-uiscrollbar/&amp;title=In+love+with+UIScrollbar" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-diigo">
			<a href="http://www.diigo.com/post?url=http://blog.turtlebite.com/in-love-with-uiscrollbar/&amp;title=In+love+with+UIScrollbar&amp;desc=This%20post%20is%20all%20about%20scrolling.%20I%27m%20not%20talking%20about%20scrolling%20text%2C%20but%20scrolling%20movieclips.%20Or%20more%20precise%3A%20scrolling%20a%20whole%20flash%20website.%20If%20you%20want%20to%20do%20this%20you%20have%20a%20few%20choices.%20If%20you%20have%20read%20the%20title%20of%20this%20post%20you%20know%20which%20is%20my%20favoured%20method...%20%3A-%29%0D%0A%0D%0AUse%20the%20browser%20sc" rel="nofollow" class="external" title="Post this on Diigo">Post this on Diigo</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://blog.turtlebite.com/in-love-with-uiscrollbar/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-misterwong">
			<a href="http://www.mister-wong.com/addurl/?bm_url=http://blog.turtlebite.com/in-love-with-uiscrollbar/&amp;bm_description=In+love+with+UIScrollbar&amp;plugin=sexybookmarks" rel="nofollow" class="external" title="Add this to Mister Wong">Add this to Mister Wong</a>
		</li>
		<li class="shr-mixx">
			<a href="http://www.mixx.com/submit?page_url=http://blog.turtlebite.com/in-love-with-uiscrollbar/&amp;title=In+love+with+UIScrollbar" rel="nofollow" class="external" title="Share this on Mixx">Share this on Mixx</a>
		</li>
		<li class="shr-reddit">
			<a href="http://reddit.com/submit?url=http://blog.turtlebite.com/in-love-with-uiscrollbar/&amp;title=In+love+with+UIScrollbar" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://blog.turtlebite.com/in-love-with-uiscrollbar/&amp;title=In+love+with+UIScrollbar" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://technorati.com/faves?add=http://blog.turtlebite.com/in-love-with-uiscrollbar/" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=In+love+with+UIScrollbar+-+http://b2l.me/afq663&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></content:encoded>
			<wfw:commentRss>http://blog.turtlebite.com/in-love-with-uiscrollbar/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

