<|start_filename|>html-template/index.template.html<|end_filename|>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">	
    <!-- 
    Smart developers always View Source. 
    // -->
    <head>
        <title>Bfxr.  Make sound effects for your games. </title>
        
        <link rel="icon" type="image/png" href="favicon.png"/>        
        <meta name="description" content="Sound-effects generation for your games in flash."/>
	<meta name="keywords" content="bfxr,Sfxr,flash,sound effects, audio,music generation,music,increpare"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- Include CSS to eliminate any default margins/padding and set the height of the html element and 
		     the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as 
			 the percentage of the height of its parent container, which has to be set explicitly.  Fix for
			 Firefox 3.6 focus border issues.  Initially, don't display flashContent div so it won't show 
			 if JavaScript disabled.
		-->
        <style type="text/css" media="screen"> 
			html, body	
			{ 
				height:100%; 
				width:630px;
				margin-top:10px;
				margin-left: auto;
  				margin-right: auto; 
			}
			h4 
			{
			margin-top:0px;
			}
			body { padding:0; overflow:auto; 
			       background-color: black;			       
			       background-image:url('bg.png');
			       background-repeat:repeat-y;
			       background-position:center;
			       
			      }
			object:focus { outline:none; }
			#flashContent { display:none; }
        </style>
	<link rel="stylesheet" href="example.css" type="text/css" media="screen" />
        
        <script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear.
*/
document.write('<style type="text/css">.tabber{display:none;}<\/style>');

var tabberOptions = {

  /* Optional: instead of letting tabber run during the onload event,
     we'll start it up manually. This can be useful because the onload
     even runs after all the images have finished loading, and we can
     run tabber at the bottom of our page to start it up faster. See the
     bottom of this page for more info. Note: this variable must be set
     BEFORE you include tabber.js.
  */
  'manualStartup':true,

  /* Optional: code to run after each tabber object has initialized */

  'onLoad': function(argsObj) {
    /* Display an alert only after tab2 */
    if (argsObj.tabber.id == 'tab2') {
      alert('Finished loading tab2!');
    }
  },

  /* Optional: code to run when the user clicks a tab. If this
     function returns boolean false then the tab will not be changed
     (the click is canceled). If you do not return a value or return
     something that is not boolean false, */

  'onClick': function(argsObj) {

    var t = argsObj.tabber; /* Tabber object */
    var id = t.id; /* ID of the main tabber DIV */
    var i = argsObj.index; /* Which tab was clicked (0 is the first tab) */
    var e = argsObj.event; /* Event object */

    if (id == 'tab2') {
      return confirm('Swtich to '+t.tabs[i].headingText+'?\nEvent type: '+e.type);
    }
  },

  /* Optional: set an ID for each tab navigation link */
  'addLinkId': true

};

</script>

<!-- Load the tabber code -->
<script type="text/javascript" src="tabber.js"></script>
        
		
		    
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
        function thisMovie(movieName) {
	         if (navigator.appName.indexOf("Microsoft") != -1) {
	             return window[movieName];
	         } else {
	             return document[movieName];
	         }
	     }
	        
        
        function beforeunloadcallback(e) {
        	if (thisMovie("${application}").hasModifiedData()) {
			if(!e) e = window.event;
			//e.cancelBubble is supported by IE - this will kill the bubbling process.
			e.cancelBubble = true;
			e.returnValue = 'There are unapplied changes.  Are you sure you want to leave?'; //This is displayed on the dialog
		
			//e.stopPropagation works in Firefox.
			if (e.stopPropagation) {
				e.stopPropagation();
				e.preventDefault();
			}
		}
	}
        window.onbeforeunload=beforeunloadcallback;
        
        </script>
        <script type="text/javascript">
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
            var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "${expressInstallSwf}";
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.bgcolor = "${bgcolor}";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "${application}";
            attributes.name = "${application}";
            attributes.align = "middle";
            swfobject.embedSWF(
                "${swf}.swf", "flashContent", 
                "${width}", "${height}", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);
			<!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
			swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
    </head>
    <body>
        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough 
			 JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
			 when JavaScript is disabled.
		-->
        <div id="flashContent">
        	<p>
	        	To view this page ensure that Adobe Flash Player version 
				${version_major}.${version_minor}.${version_revision} or greater is installed. 
			</p>
			<script type="text/javascript"> 
				var pageHost = ((document.location.protocol == "https:") ? "https://" :	"http://"); 
				document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
								+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
			</script> 
        </div>
	   	
       	<noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="${width}" height="${height}" id="${application}">
                <param name="movie" value="${swf}.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="${bgcolor}" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="${swf}.swf" width="${width}" height="${height}">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="${bgcolor}" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                	<p> 
                		Either scripts and active content are not permitted to run or Adobe Flash Player version
                		${version_major}.${version_minor}.${version_revision} or greater is not installed.
                	</p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
	    </noscript>	
	    
	    <p/>
				<div  style="text-align: center;">
                    Download Bfxr Standalone V1.5.1 ( <a href="http://ded.increpare.com/~locus/bfxr_update/Bfxr_WIN.zip" target="_blank" >WINDOWS</a> | <a href="http://ded.increpare.com/~locus/bfxr_update/Bfxr_MAC.zip" target="_blank" >MAC</a> ) 
				</div>
    
<div class="tabber" id="tab1">

  <div class="tabbertab">
  <h2>What is this?</h2>  
       <p/>  
     Bfxr is an elaboration of the glorious <a href="http://drpetter.se/project_sfxr.html">Sfxr</a>, the program of choice for many people looking to make sound effects for computer games.
     <p/>
     Bfxr has moved in the direction of increased complexity and range of expression.  All the buttons that you know and love are here, but there are some new things as well:     
     <ul>
     <li>5 new waveforms : triangle, breaker, tan, whistle, and pink noise.</li>
     <li>3 new filters : compression, harmonics, and bitcrusher.</li>
     <li>Ability to lock parameters during mutation/randomization.</li>
     <li>Expanded pitch-jumping abilities - good for arpeggiation effects.</li>
     <li>Visualisation</li>
     <li>Mixer</li>
     <li>Keeps your sounds and mixes in persistant lists.</li>
     <li>Can reverse synths</li>
     <li>Ability to link directly to sounds</li>
     </ul>	    
     You have full rights to all sounds made with bfxr, and are free to use them for any purposes, commercial or otherwise.
     <p/>
     If you use this for anything cool, or have any suggestions for improvements, or bugs to report, please <a href="mailto:<EMAIL>">drop me a mail</a> or leave a comment.
     <p/>	    
     For what it's worth, most of the work on this version was done by me, <a href="http://www.increpare.com">increpare</a>.  If you appreciate the work I've done, consider <a href="https://www.patreon.com/increpare">supporting it on patreon</a>.
  </div>
  <div class="tabbertab">  
<h2>Secrets!</h2>
<h4>Shortcuts</h4>
<ul>
<li>Ctrl+C / Ctrl+V to copy/paste (or Cmd + C/Cmd + V if you're on a Mac).</li> 
<li>Enter/Return to play.</li>
</ul> 
<h4>Tips</h4>
<p>
<ul>
<li>If you click on the text beside one of the sliders, it moves the slider back to its default position.</li>
<li>If you right-click one of the locks, it locks/unlocks all parameters</li>
<li>you can clear out all your sound lists from by selecting "Clear All" from the Load dropdown menu</li>
<li>There's some handy info in the tooltips.</li>
<li>If you don't want to download Adobe AIR for the privilege of a standalone version, you can safely just download this webpage to your hard disk and run it locally.</li>
<li>You may find it gets slow or stutters sometimes.  If you hit play a second time it should play just fine.  A chief cause of slowness is use of the 'harmonics' parameter in the synth screen.  It's tres beautiful, but be careful with it.  </li>
<li>Running multiple copies at once is DANGEROUS, only the data from one of them will remain.  So be careful about opening lots of links to sounds that people have made all at once.  However, and this is the tip part: you can paste the URL in with the paste faculty as well (via the button, or ctrl+v).  </li>
<li>The presets only traverse a small portion of the sonic range of this program.  Try playing around with parmeters, layering them in the mixer, see what happens :)</li>
<li>If you like the sounds you've made with this, consider putting them into a game, eh? 'tis not hard nowadays to toss a game together.</li>
</ul>
</p>

  </div>

  <div class="tabbertab">

<h2>Confusing.</h2>
Nah, it's not that bad.  You can restrict yourself to using the preset buttons, or working entirely from the mixer tab.  Paying attention to the tooltips might help.
<p/>
But, you know, if you want something more easy going, try out this program's inspiration: <a href="http://www.superflashbros.net/as3sfxr/">as3sfxr</a>.  It's a direct port of the original Sfxr for flash, and it's totally great and has a whole lot less buttons and sliders than Bfxr.
</div>

<div class="tabbertab">

<h2>Code + API</h2>

I've put the code up on github
<ul>
<li><a href="https://github.com/increpare/bfxr">https://github.com/increpare/bfxr</a> release branch</li>
<li><a href="https://github.com/increpare/bfxr/tree/dev">https://github.com/increpare/bfxr/tree/dev</a> development branch (very unstable)</li>
<li><a href="https://github.com/increpare/bfxr">https://github.com/increpare/bfxr-air</a>AIR-specific code</li>
</ul>

<p/>
This is released under the <a href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache Licence 2.0</a>.  
<p/>
As with <a href="http://www.superflashbros.net/as3sfxr/">Tom's version</a>, the code is quite modular and can be easily incorporated into any as3 project.  
<p/>
<ul>
<li><a href="https://github.com/increpare/bfxr-api-example">https://github.com/increpare/bfxr-api-example</a>Bfxr API example</li>
</ul>
The idea is that you can take the strings that you get by clicking 'copy' in the editor, and pass 
them as strings to the Bfxr object.  The best usage is to pre-cache them using a cache function (with 
an optional callback, if you want it to spread the calculation over several frames).
<p/>
It also has the ability to cache several mutations of a single object at run-time.  This can be good for getting a reach-feeling environment, and cuts down on the usual repeitition of sound-effects.  While mutating, it will respect any locks applied to the parameters in the editor, to allow for an additional degree of control over the mutation.
<p/>
Let me know if you do anything cool with it!
<p/>
</div>


  <div class="tabbertab">
<h2>Credits</h2>
<h4>Archaeology</h4>	
I don't know if it's related, but I believe that _why made a program called sound foley (which I haven't been able to get to work) which looks quite similar to Sfxr in design based on what I've seen of his _why's presentation of it.<p/>	The darling DrPetter made the program this is based on, Sfxr:
<ul>
	<li>	<a href="http://drpetter.se/">http://drpetter.se/</a></li>		
	<li>	<a href="http://drpetter.se/article_sound.html">http://drpetter.se/article_sound.html</a></li>		
	<li>	<a href="http://drpetter.se/project_sfxr.html">http://drpetter.se/project_sfxr.html</a></li>	
</ul>		
		
		The fabulous Tom Vian did a flash port of this, called as3sfxr<br />		
<ul>		
	<li>	<a href="http://www.tomvian.com/">http://www.tomvian.com/</a></li>		
	<li>	<a href="http://www.superflashbros.net/as3sfxr/">http://www.superflashbros.net/as3sfxr/</a></li>	
</ul>		
		
There's also a port of Sfxr to OS X that's quite loved by people (and was a little influential) called cfxr:
<ul>
	<li>	<a href="http://thirdcog.eu/apps/cfxr">http://thirdcog.eu/apps/cfxr</a></li>
</ul>		
			I did a mod of as3sfxr that introduced some new features, and called it as3sfxr-b:
<ul>		
	<li>	<a href="http://ded.increpare.com/~locus/as3sfxr-b/">http://ded.increpare.com/~locus/as3sfxr-b/</a></li>
</ul>
After asking for feedback, I spent some time adding and changing more things, making something new.  Which is Bfxr.  Which is what you see on this page.</p>
<p/>
<h4>Code from</h4>	
Bulk of coding of this version done by <a href="http://www.increpare.com">poor little me</a>.  
<p/> 
In addition to code from Tom/DrPetter, code snippits taken from 
<ul>		
	<li>	<a href="http://blog.flexexamples.com">http://blog.flexexamples.com</a> for a bunch of custom ui stuff</li>		
	<li>	<a href="http://www.firstpr.com.au/dsp/pink-noise/#Filtering">http://www.firstpr.com.au/dsp/pink-noise/#Filtering</a>  for pink-noise related synthesis </li>
</ul>  
<p/>
<h4>Thanks + Acknolwedgements</h4>	
<ul>
<li><a href="http://drpetter.se/">DrPetter</a>, for Sfxr.</li>
<li><a href="http://www.tomvian.com/"><NAME></a>, for his elegantly constructed as3sfxr port.</li>
<li><a href="http://www.twitter.com/docky">@docky</a>, <a href="http://www.twitter.com/Draknek">@Draknek</a>, <a href="http://www.twitter.com/KommanderKlobb">@KommanderKlobb</a>, <a href="http://www.twitter.com/eigenbo">@eigenbo</a>, <a href="http://www.twitter.com/GrimFang4">@GrimFang4</a>, <a href="http://www.twitter.com/nyarla">@nyarla</a>, <a href="http://www.twitter.com/bfod">@bfod</a>, <a href="http://www.twitter.com/jasperbyrne">@jasperbyrne</a>, <a href="http://www.twitter.com/draknek">@draknek</a>, <a href="http://www.twitter.com/hybridmind">@hybridmind</a>, <a href="http://www.twitter.com/RinkuHero">@RinkuHero</a>, DustinGunn, <a href="http://runhello.com/">mcc</a>, and <a href="http://blog.agj.cl/">agj</a> for feedback + suggestions.  And <a href="http://www.twitter.com/mossmouth">Derek</a> for some early encouragement.</li>
<li>The people from the #flex irc room on freenode for technical help in my hour of need, especially <a href="http://www.michelboudreau.<EMAIL>/">J_A_X</a>.</li>
</ul>
<p/>
<h4>Other software that can be software for making sounds:</h4>
<ul>	
<li>Audacity - <a href="http://audacity.sourceforge.net/">http://audacity.sourceforge.net/</a></li>	
<li>HighC - <a href="http://highc.org/">http://highc.org/</a>	</li>	
<li>PXTone - <a href="http://buzinkai.net/PXTone/tutorial/">http://buzinkai.net/PXTone/tutorial/</a></li>	
<li>Sound Effects Generator - <a href="http://www.windowsgames.co.uk/effects.html">http://www.windowsgames.co.uk/effects.html</a> (windows only.  I nicked a couple of things from this.  )</li>
<li>Freesound - <a href="http://www.freesound.org">http://www.freesound.org</a> - Okay, not sound software, but a really amazing resource.
</ul>
</div>
  
  
  <div class="tabbertab">
  <h2>Comments</h2>

<script script type='text/javascript'>
var idcomments_acct = 'e0848438b269358c7cadd2626957454a';
var idcomments_post_id;
var idcomments_post_url;
</script>
<span id="IDCommentsPostTitle" style="display:none"></span>
<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>



  </div>
</div>
	    
<script type="text/javascript">

/* Since we specified manualStartup=true, tabber will not run after
   the onload event. Instead let's run it now, to prevent any delay
   while images load.
*/

tabberAutomatic(tabberOptions);

</script>
<p/>
<center>
        <a href="mailto:<EMAIL>"><EMAIL></a> | <a href="https://www.increpare.com">increpare.com</a> | <a href="https://www.patreon.com/increpare">patreon</a>
	</center>    	
	<p/>
   </body>
</html>
