<?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>The Bloom Media Blog&#187; actonscript 2.0</title>
	<atom:link href="http://www.bloommedia.co.uk/blog/tag/actonscript-20/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bloommedia.co.uk/blog</link>
	<description>Bloom Media are an award winning 'full service digital agency', we provide ROI focussed digital campaigns for some of the UK's biggest brands.</description>
	<lastBuildDate>Tue, 03 Aug 2010 14:23:03 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>How to preload FLV video in flash with actionscript 2.0</title>
		<link>http://www.bloommedia.co.uk/blog/technical/preload-flv-video-in-flash-actionscript-20-2/</link>
		<comments>http://www.bloommedia.co.uk/blog/technical/preload-flv-video-in-flash-actionscript-20-2/#comments</comments>
		<pubDate>Wed, 20 Aug 2008 14:16:49 +0000</pubDate>
		<dc:creator>Dominic Kelly</dc:creator>
				<category><![CDATA[Technical]]></category>
		<category><![CDATA[actonscript 2.0]]></category>

		<guid isPermaLink="false">http://www.bloommedia.co.uk/blog/?p=40</guid>
		<description><![CDATA[
Since the introduction of Flash video (flv) in 2002, Flash Player has become the most widely installed Internet video client, running on over 96% of all Internet-connected PCs. The ubiquity of Flash Player ensures that most visitors can view Flash video without downloading additional plug-ins, so you can reach more people with lower development, testing, [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.bloommedia.co.uk/blog/wp-content/uploads/2008/08/team_vid.jpg" alt="team_vid" title="team_vid" width="518" height="178" class="alignnone size-full wp-image-142" /></p>
<p>Since the introduction of Flash video (flv) in 2002, Flash Player has become the most widely installed Internet video client, running on over 96% of all Internet-connected PCs. The ubiquity of Flash Player ensures that most visitors can view Flash video without downloading additional plug-ins, so you can reach more people with lower development, testing, and support costs.</p>
<p>Flash video can be delivered either via a streaming server, which allows for on-demand/live video, or via the more commonly used progressive download method. Progressively downloaded videos do not start until a proportion of the video has downloaded to the client, ensuring a smooth un-interupted video experience.</p>
<p>While this is fine and dandy, what happens when you want the entire video to download before it begins to play, or if you have <a href="http://www.bloommedia.co.uk/about_bloom/our_team/" target="_blank">several</a> bandwidth intensive videos as is the case of our own <a href="http://www.bloommedia.co.uk/about_bloom/our_team/">&#8220;Meet the Team&#8221;</a> page. In either case, preloading flv&#8217;s is not a documented feature, and it must therefore be simulated.</p>
<p>What follows is one method you can use to simulate preloading Flash video files, including a progress bar and percentage label.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript"><span style="color: #808080; font-style: italic;">/**
* Preloading FLVs with progressbar
*
* Actionscript developed by Bloom Media Ltd. | www.bloommedia.co.uk
* Contributors: Dominic Kelly
*/</span>
&nbsp;
<span style="color: #808080; font-style: italic;">// open a net connection</span>
<span style="color: #000000; font-weight: bold;">var</span> nc:<span style="color: #0066CC;">NetConnection</span> = <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>;
<span style="color: #808080; font-style: italic;">// null connection for progressive download</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>;
&nbsp;
<span style="color: #808080; font-style: italic;">// create a stream</span>
myNetStream = <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>;
myVideo.<span style="color: #0066CC;">attachVideo</span><span style="color: #66cc66;">&#40;</span>myNetStream<span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// load video</span>
myNetStream.<span style="color: #0066CC;">play</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;dom-kelly.flv&quot;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// pause video to hide it from the stage</span>
myNetStream.<span style="color: #0066CC;">pause</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// hide load progress</span>
percentage.<span style="color: #0066CC;">_visible</span> = <span style="color: #000000; font-weight: bold;">false</span>;
percentage.<span style="color: #0066CC;">_visible</span> = <span style="color: #000000; font-weight: bold;">false</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// resize video onload, based on meta data</span>
myNetStream.<span style="color: #006600;">onMetaData</span> = <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>obj<span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
	myVideo.<span style="color: #0066CC;">_height</span> = obj.<span style="color: #0066CC;">height</span>;
	myVideo.<span style="color: #0066CC;">_width</span> = obj.<span style="color: #0066CC;">width</span>;
	<span style="color: #808080; font-style: italic;">// show load progress</span>
	percentage.<span style="color: #0066CC;">_visible</span> = <span style="color: #000000; font-weight: bold;">true</span>;
	percentage.<span style="color: #0066CC;">_visible</span> = <span style="color: #000000; font-weight: bold;">true</span>;
<span style="color: #66cc66;">&#125;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// listen for the 'Stop' status event, and restart the video to loop it</span>
myNetStream.<span style="color: #0066CC;">onStatus</span> = <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>info<span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>info.<span style="color: #006600;">code</span> == <span style="color: #ff0000;">&quot;NetStream.Play.Stop&quot;</span><span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">this</span>.<span style="color: #0066CC;">seek</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// create a preload interval to check load progress every 1 millisecond</span>
myInterval = <span style="color: #0066CC;">setInterval</span><span style="color: #66cc66;">&#40;</span>checkBytesLoaded, <span style="color: #cc66cc;">1</span>, myNetStream<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// preload loop progress</span>
<span style="color: #000000; font-weight: bold;">function</span> checkBytesLoaded<span style="color: #66cc66;">&#40;</span>mns<span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #808080; font-style: italic;">// calculate percentage of video that has downloaded</span>
	pctLoaded = <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">round</span><span style="color: #66cc66;">&#40;</span>mns.<span style="color: #0066CC;">bytesLoaded</span> <span style="color: #66cc66;">/</span> mns.<span style="color: #0066CC;">bytesTotal</span> <span style="color: #66cc66;">*</span> <span style="color: #cc66cc;">100</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
	<span style="color: #808080; font-style: italic;">// update textfield on the stage</span>
	percentage.<span style="color: #0066CC;">text</span> = pctLoaded + <span style="color: #ff0000;">&quot;%&quot;</span>;
&nbsp;
	<span style="color: #808080; font-style: italic;">// update progress bar on the stage</span>
	progressBar.<span style="color: #0066CC;">_xscale</span> = pctLoaded;
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>pctLoaded <span style="color: #66cc66;">&amp;</span>gt;= <span style="color: #cc66cc;">100</span><span style="color: #66cc66;">&#41;</span>	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #808080; font-style: italic;">// the video has fully downloaded</span>
		<span style="color: #0066CC;">_root</span>.<span style="color: #006600;">percentage</span>.<span style="color: #0066CC;">text</span> = <span style="color: #ff0000;">&quot;loaded&quot;</span>;
		<span style="color: #808080; font-style: italic;">// play video from the beginning</span>
		mns.<span style="color: #0066CC;">seek</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
		mns.<span style="color: #0066CC;">play</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;dom-kelly.flv&quot;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #808080; font-style: italic;">// clear interval</span>
		<span style="color: #0066CC;">clearInterval</span><span style="color: #66cc66;">&#40;</span>myInterval<span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>And there you have it, a simple and effective flv preloader.</p>
<p>View the <a href="http://www.bloommedia.co.uk/flash-actionscript-preload-flv/" target="_blank">demo</a> or download the <a href="http://www.bloommedia.co.uk/flash-actionscript-preload-flv/preload-flv.fla" target="_blank">source code</a>.</p>



Share and Enjoy:


	<a rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.bloommedia.co.uk%2Fblog%2Ftechnical%2Fpreload-flv-video-in-flash-actionscript-20-2%2F&amp;title=How%20to%20preload%20FLV%20video%20in%20flash%20with%20actionscript%202.0" title="Digg"><img src="http://www.bloommedia.co.uk/blog/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.bloommedia.co.uk%2Fblog%2Ftechnical%2Fpreload-flv-video-in-flash-actionscript-20-2%2F&amp;title=How%20to%20preload%20FLV%20video%20in%20flash%20with%20actionscript%202.0" title="Sphinn"><img src="http://www.bloommedia.co.uk/blog/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.bloommedia.co.uk%2Fblog%2Ftechnical%2Fpreload-flv-video-in-flash-actionscript-20-2%2F&amp;title=How%20to%20preload%20FLV%20video%20in%20flash%20with%20actionscript%202.0" title="del.icio.us"><img src="http://www.bloommedia.co.uk/blog/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.bloommedia.co.uk%2Fblog%2Ftechnical%2Fpreload-flv-video-in-flash-actionscript-20-2%2F&amp;t=How%20to%20preload%20FLV%20video%20in%20flash%20with%20actionscript%202.0" title="Facebook"><img src="http://www.bloommedia.co.uk/blog/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow" href="http://www.mixx.com/submit?page_url=http%3A%2F%2Fwww.bloommedia.co.uk%2Fblog%2Ftechnical%2Fpreload-flv-video-in-flash-actionscript-20-2%2F&amp;title=How%20to%20preload%20FLV%20video%20in%20flash%20with%20actionscript%202.0" title="Mixx"><img src="http://www.bloommedia.co.uk/blog/wp-content/plugins/sociable/images/mixx.png" title="Mixx" alt="Mixx" class="sociable-hovers" /></a>
	<a rel="nofollow" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fwww.bloommedia.co.uk%2Fblog%2Ftechnical%2Fpreload-flv-video-in-flash-actionscript-20-2%2F&amp;title=How%20to%20preload%20FLV%20video%20in%20flash%20with%20actionscript%202.0" title="Google"><img src="http://www.bloommedia.co.uk/blog/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.bloommedia.co.uk%2Fblog%2Ftechnical%2Fpreload-flv-video-in-flash-actionscript-20-2%2F" title="Technorati"><img src="http://www.bloommedia.co.uk/blog/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow" href="http://reddit.com/submit?url=http%3A%2F%2Fwww.bloommedia.co.uk%2Fblog%2Ftechnical%2Fpreload-flv-video-in-flash-actionscript-20-2%2F&amp;title=How%20to%20preload%20FLV%20video%20in%20flash%20with%20actionscript%202.0" title="Reddit"><img src="http://www.bloommedia.co.uk/blog/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.bloommedia.co.uk%2Fblog%2Ftechnical%2Fpreload-flv-video-in-flash-actionscript-20-2%2F&amp;title=How%20to%20preload%20FLV%20video%20in%20flash%20with%20actionscript%202.0" title="StumbleUpon"><img src="http://www.bloommedia.co.uk/blog/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.bloommedia.co.uk/blog/technical/preload-flv-video-in-flash-actionscript-20-2/feed/</wfw:commentRss>
		<slash:comments>68</slash:comments>
		</item>
	</channel>
</rss>
