Alternate JS version, without classical inheritance

The original code works fine but it feels weird to be using classical inheritance in a prototypal language – “new function” inside “TIMSHAYA.Triganimation = new function()”. Below is version of the JS code that removes “new function” and replaces it with “function()”, adding a “return” statement that in turn exposes the public “init” method, while maintaining closure (inner function init()’s access to it’s external function’s private members like “numsqr”, “drawRect()” & “animate()”).

KEEP IN MIND: using the “new function” version might turn out to be faster in some cases as far as performance goes. In this case, jsPerf shows that Chrome 16 is the only browser where “new function” is faster than the inline version (unless I’m screwing up the test somehow).

Note: Don’t forget to define requestAnimFrame (see HTML file here).

var TIMSHAYA   = TIMSHAYA || {}; //create your own namespace 

(function(whichCanvas){ 

   TIMSHAYA.Triganimation = function(){     
            var numsqr = 40;
            var mShapes = [];   
            var canvas = document.getElementById(whichCanvas);
            var context = canvas.getContext("2d");    

            function drawRect(myRect)
            {            
                context.beginPath();
                context.rect(myRect.x, myRect.y, myRect.width, myRect.height);
                
                context.fillStyle = "#8ED6FF";
                context.fill();
                context.lineWidth = myRect.borderWidth;
                context.strokeStyle = "black";
                context.stroke();
            }

            function animate(lastTime, mShapes, animProp)
            {
                if (animProp.animate) 
                {            
                    var date = new Date();
                    var time = date.getTime();
                    var timeDiff = time - lastTime;

                    for(var j = 0; j < numsqr; j++)
                    {
                        mShapes[j].x = mShapes[j].centerX + Math.cos( mShapes[j].angle * Math.PI/180 ) * mShapes[j].radius;   
                        mShapes[j].y = mShapes[j].centerY + Math.sin( mShapes[j].angle * Math.PI/180 ) * mShapes[j].radius; 

                        (mShapes[j].angle < 360) ? mShapes[j].angle += 1 : mShapes[j].angle = 0;      
                    }                            
                    lastTime = time;
                    
                    // clear canvas
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    
                    // draw                    
                    for(var l = 0; l < numsqr; l++)
                       drawRect(mShapes[l]);                    
                    
                    // request new frame
                    requestAnimFrame(function(){
                        animate(lastTime,  mShapes, animProp);
                    })
                }
            }
         
            return {
                init: function() {           
                        
                         for(var i = 0; i < numsqr; i++)
                         {                     
                             mShapes[i] = {
                                angle:0,
                                width:20,
                                height:20,
                                x: 100 + i*10,
                                y: 270,
                                centerX: 290,
                                centerY: 290,      
                                radius: 250 - (1 + i * 5),            
                                borderWidth: 1
                            }
                         }
                     
                        var animProp = {
                            animate: false
                        }
                      
                        document.getElementById(whichCanvas).addEventListener("click", function(){
                            if (animProp.animate) {
                                animProp.animate = false;
                            }
                            else {
                                animProp.animate = true;
                                var date = new Date();
                                var time = date.getTime();
                                animate(time,  mShapes, animProp);
                            }
                        })
                      
                        for(var k = 0; k < numsqr; k++)
                           drawRect( mShapes[k] );                                   
                    
                }    
            };        

    }(); 
 
    TIMSHAYA.Triganimation.init();

})("myCanvas");

The HTML file:

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body { margin: 0px; padding: 0px; }            
            #myCanvas { border: 1px solid #9C9898; }
        </style>
    </head>
    <body onmousedown="return false;">

        Click the below canvas to start the animation: <br />
        <canvas id="myCanvas" width="600" height="600"></canvas>

       <script>
            window.requestAnimFrame = (function(callback){
                return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback){
                    window.setTimeout(callback, 1000 / 60);
                };
            })();            
        </script>
        <script src="js/triganimation.js"></script> 

    </body>
</html>

The Javascript file

Make sure it’s located here: “js/triganimation.js”:

var TIMSHAYA   = TIMSHAYA || {}; //create your own namespace 

(function(whichCanvas){ 

   TIMSHAYA.Triganimation = new function() 
    {     
        var numsqr = 40;
        var mShapes = [];   
        var canvas = document.getElementById(whichCanvas);
        var context = canvas.getContext("2d");    

        function drawRect(myRect)
        {            
            context.beginPath();
            context.rect(myRect.x, myRect.y, myRect.width, myRect.height);
            
            context.fillStyle = "#8ED6FF";
            context.fill();
            context.lineWidth = myRect.borderWidth;
            context.strokeStyle = "black";
            context.stroke();
        }

        function animate(lastTime, mShapes, animProp)
        {
            if (animProp.animate) 
            {            
                var date = new Date();
                var time = date.getTime();
                var timeDiff = time - lastTime;

                for(var j = 0; j < numsqr; j++)
                {
                    mShapes[j].x = mShapes[j].centerX + Math.cos( mShapes[j].angle * Math.PI/180 ) * mShapes[j].radius;   
                    mShapes[j].y = mShapes[j].centerY + Math.sin( mShapes[j].angle * Math.PI/180 ) * mShapes[j].radius; 

                    (mShapes[j].angle < 360) ? mShapes[j].angle += 1 : mShapes[j].angle = 0;      
                }                            
                lastTime = time;
                
                // clear canvas
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                // draw                    
                for(var l = 0; l < numsqr; l++)
                   drawRect(mShapes[l]);                    
                
                // request new frame
                requestAnimFrame(function(){
                    animate(lastTime,  mShapes, animProp);
                })
            }
        }

        this.init = function()
        {           
            //alert("this = " + this.name );
             for(var i = 0; i < numsqr; i++)
             {                     
                 mShapes[i] = {
                    angle:0,
                    width:20,
                    height:20,
                    x: 100 + i*10,
                    y: 250,
                    centerX: 290,
                    centerY: 290,      
                    radius: 250 - (1 + i * 5),            
                    borderWidth: 1
                }
             }
         
            var animProp = {
                animate: false
            }
          
            document.getElementById(whichCanvas).addEventListener("click", function(){
                if (animProp.animate) {
                    animProp.animate = false;
                }
                else {
                    animProp.animate = true;
                    var date = new Date();
                    var time = date.getTime();
                    animate(time,  mShapes, animProp);
                }
            });
          
            for(var k = 0; k < numsqr; k++)
               drawRect( mShapes[k] );                                   
        }
    } 
 
    TIMSHAYA.Triganimation.init();

})("myCanvas");

If the Math.sin() & Math.cos() is confusing, watch the video tutorials on Trig and Unit Circle in particular at the Khan Academy.

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
            var numsqr = 40;
            var mShapes = [];

            window.requestAnimFrame = (function(callback){
                return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback){
                    window.setTimeout(callback, 1000 / 60);
                };
            })();
            
            function drawRect(myRectangle){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                context.beginPath();
                context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
                
                context.fillStyle = "#8ED6FF";
                context.fill();
                context.lineWidth = myRectangle.borderWidth;
                context.strokeStyle = "black";
                context.stroke();
            }
            
            function animate(lastTime,  mShapes, animProp){
                if (animProp.animate) {
                    var canvas = document.getElementById("myCanvas");
                    var context = canvas.getContext("2d");
                    
                    // update
                    var date = new Date();
                    var time = date.getTime();
                    var timeDiff = time - lastTime;
        
                    for(var j = 0; j < numsqr; j++){
                        
                        //circles around a midpoint in a larger circle, specified by the radius                              
                        mShapes[j].x = mShapes[j].centerX + Math.cos( mShapes[j].angle * Math.PI/180 ) * mShapes[j].radius;   
                        mShapes[j].y = mShapes[j].centerY + Math.sin( mShapes[j].angle * Math.PI/180 ) * mShapes[j].radius; 

                        (mShapes[j].angle < 360) ? mShapes[j].angle += 1 : mShapes[j].angle = 0;      
                    }                            
                    lastTime = time;
                    
                    // clear
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    
                    // draw                    
                    for(var l = 0; l < numsqr; l++)
                       drawRect(mShapes[l]);                    
                    
                    // request new frame
                    requestAnimFrame(function(){
                        animate(lastTime,  mShapes, animProp);
                    });
                }
            }
            
            window.onload = function(){

                 for(var i = 0; i < numsqr; i++){                     
                     mShapes[i] = {
                        angle:0,
                        width:20,
                        height:20,
                        x: 100 + i*10,
                        y: 250,
                        centerX: 290,
                        centerY: 290,      
                        radius: 250 - (1 + i * 5),            
                        borderWidth: 1
                    };
                 }
                    
                /*
                 * make the animation properties an object
                 * so that it can be modified by reference
                 * from an event
                 */
                var animProp = {
                    animate: false
                };
                
                // add click listener to canvas
                document.getElementById("myCanvas").addEventListener("click", function(){
                    if (animProp.animate) {
                        animProp.animate = false;
                    }
                    else {
                        animProp.animate = true;
                        var date = new Date();
                        var time = date.getTime();
                        animate(time,  mShapes, animProp);
                    }
                });
              
                for(var k = 0; k < numsqr; k++)
                     drawRect( mShapes[k] );   
                 
            };
        </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="600" height="600"></canvas>
    </body>
</html>

package
{
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.geom.Matrix;
	import com.greensock.TweenMax;
	import com.greensock.plugins.*;
	
	[SWF (width="500", height="500", backgroundColor="#CCCCCC", frameRate="30")]		
	public class MatrixMathTesting extends Sprite
	{
		private var mc:MovieClip = new MovieClip();
		private var wishMatrix:Matrix = new Matrix;
		
		public function MatrixMathTesting()
		{
			TweenPlugin.activate([TransformMatrixPlugin]);
			
			mc.x = 250;
			mc.y = 250;
			addChild( mc );
			
			var sq:Shape = new Shape();
			sq.graphics.beginFill( 0x000000, .5 );
			sq.graphics.drawRect( 0, 0, 100, 100 );
			sq.graphics.endFill();			
			
			mc.addChild( sq );			
			
			var ar:Array = [ [2,   0], 		//[x-scale (a), y-skew (b)]
					  		 [0.5, 1],		//[ x-skew (c), y-scale (d) ]
					   		 [mc.x, mc.y] ]; //[x-position (tx), y-position (ty)] 
			
			transformMC( wishMatrix, ar );
			
			TweenMax.delayedCall( 2, removeTransform, [wishMatrix] );
			 
		}
	
		public function transformMC( m:Matrix, arr:Array ):void 
		{
			TweenMax.to(mc, 1, {transformMatrix:{ a:arr[0][0],  b:arr[0][1], 
										          c:arr[1][0],  d:arr[1][1], 
												  tx:arr[2][0], ty:arr[2][1] }});						
		}
		
		public function transformMCSimple( m:Matrix, arr:Array ):void 
		{			
			m.a  = arr[0][0];  //	 x-scale
			m.b  = arr[0][1];  //  	 y-skew
			m.c  = arr[1][0];  //	 x-skew 
			m.d  = arr[1][1];  //		 y-scale
			m.tx = arr[2][0]; //	 x-position 
			m.ty = arr[2][1]; //	 y-position 
			
			mc.transform.matrix = wishMatrix;
		}
		
		public function removeTransform( m:Matrix ):void
		{		
			//tween back to an identity matrix		
			TweenMax.to(mc, 1, {transformMatrix:{a:1, b:0, c:0, d:1, tx:mc.x, ty:mc.y }}); 
		}
		
		public function removeTransformSimple( m:Matrix ):void
		{		
			//no anmation, back to identity matrix (removes all previous transformations)
			m.a  = 1; m.b  = 0; 
			m.c  = 0; m.d  = 1;  
			m.tx = m.tx; m.ty = m.ty;			
			
			mc.transform.matrix = m;			
		}		
		
	}
}

Here’s what I changed:

• removed each button’s dependence on 3-level deep inheritance (OverButton > DockButton > DockItem)
• removed each Library symbol’s linkage to OverButton.as
• simplified the menu a bit for the purposes of this example, so that only the X axis moves. It’s easy enough to add in the Y axis & scale variables, if/when needed. You should be able to extend DockMenu.as to add the extra features, like Y axis movement & Scaling or add those vars directly.

package 
{	
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import com.greensock.TweenMax;
	import flash.display.DisplayObjectContainer;
	
	public class DockMenu extends MovieClip
	{					
		protected var maxXDistance:Number = 50;
		protected var menuXes:Array = []; 
		protected var menuBtns:Array = []; 
		
		public function DockMenu():void 
		{
			addEventListener( Event.ADDED_TO_STAGE, init );			
		}					
	
		public function init(e:Event=null):void
		{			
			removeEventListener( Event.ADDED_TO_STAGE, init );						
			
			//uncheck "Export for Actionscript" for each of 
            //the button mc's in the Library			
			menuBtns = [star, config, apple, photo, shop, cont ]; 
			
			for( var f:uint=0; f < 6; f++ )
			{
				menuXes[f] = menuBtns[f].x; 
				menuBtns[f].buttonMode = true;
				menuBtns[f].mouseChildren = false; 
				var bounds:Rectangle = getBounds( menuBtns[f] );
				var hit:Sprite = new Sprite();
				hit.graphics.beginFill( 0,0 );
				hit.graphics.drawRect( bounds.x, bounds.y, bounds.width, bounds.height );		
				menuBtns[f].addChild( hit );
			}
			
			stage.addEventListener( MouseEvent.MOUSE_MOVE, mouseMove );
			stage.addEventListener( Event.MOUSE_LEAVE, mouseLeave );			
		}
		
		public function mouseMove(e:MouseEvent):void
		{								
			for( var g:uint=0; g < 6; g++ )
			{
				var xDistance:Number = mouseX - menuXes[g]; 
				xDistance = xDistance > maxXDistance ? maxXDistance : xDistance; 			
				xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance;
				var posX:Number = menuXes[g] - xDistance * 0.2; 
				TweenMax.to( menuBtns[g], .2, { x:posX } );		
			}		
		}
				
		public function mouseLeave(e:Event):void
		{			
			for( var h:uint=0; h < 6; h++ )
				TweenMax.to( menuBtns[h], .3, { x:menuXes[h] } );
		}
	}	
}

After installing the .mxp everything appeared to work ok, but as soon as you tried to select the component and edit any of it’s settings in the Component Inspector, the radio buttons, check boxes & text fields in the inspector turned out to be totally unclickable.

The only solution that worked for us was to completely uninstall Flashbug add-on from Firefox. Disabling it didn’t work, we had to totally uninstall. It’s annoying, yes.

Followed the instructions on webdevotion.be and cultcreative.com.

When it came time to do “Run As > Ant Build” I kept getting this error:

Buildfile: /your_path_to_example_folder/apparat-ant-example/build/build.xml
clean:
compile:

BUILD FAILED
/your_path_to_example_folder/apparat-ant-example/build/build.xml:64:
Execute failed: java.io.IOException: Cannot run program "/Applications/Adobe%20Flash%20Builder%204.5/sdks/4.5.0/bin/mxmlc"
(in directory "/your_path_to_example_folder/apparat-ant-example"): error=2, No such file or directory

Total time: 860 milliseconds

After trying a bunch of things, it turned out it was a permissions problem.

To fix it, I swapped Flex SDK to one outside of /Applications/ folder. Inside the project’s build.properties I updated FLEX_HOME line to:

FLEX_HOME=/your_path_to_sdk/Flex_SDKs/4.1.0

FLEX_HOME=/Applications/Flash%20Builder%204.5/sdks/4.5.0

When we tried to load videos stored in via a Facebook account (in mp4 format) on an Akamai (or competitor’s) CDN server (with server url similar to http://video.ak.fbcdn.net) into our custom progressive download video player kept giving us the “NetStream.Play.StreamNotFound” error.

We tried everything from looking at HTTP Headers, to finding an Adobe Employee’s post on Adobe forums that said this might not be possible (with Strobe Media Player & Facebook CDN video) to considering alternative hosting. Googling didn’t reveal too many results on this specific issue. This one was perhaps the most informative.

In the end, the .NET / Javascript developer I was working with decided to try URL encoding the string that was passed to the video player via a FlashVar. That fixed the problem!

The best part is that now, we can meet our needs AND avoid having to figure out an alternative hosting solution.

After lots of back & forth, it looks like the reason this install failed is because I tried to install Python 2.6 manually while using MacPorts to install the Python Image Library. The recommended way is to use Macports (or similar) to install both with all necessary components.

1. Sign up for their website account & they’ll email you a login/pass
2. To install on OS X 10.5.8, you need:

• JDK 1.6 (64-bit)
• Python 2.6
• – Python Imaging Library (PIL) 1.1.7 or newer
• – Eclipse 3.4+ (64-bit)

3. Check if you have JDK 1.6 installed:

• go to Applications/Utilities/Java Preferences
• if you see Java SE 1.6 under the General tab, drag it up to the top of the list
• then open Terminal, type “java -version” at the prompt, you should see something like ‘java version “1.6.0_24″‘

4. Check if you have Python 2.6 installed

• in Terminal type “python -h”
• you should see a path like: /System/Library/Frameworks/Python.framework/Versions/2.5/…. (Mac OS X 10.5 comes with Python 2.5)

“/2.5/” in that path means you have to install Python 2.6 [1]:

http://www.python.org/download/releases/2.6.6/

After you run the installer, entering “python – h” in Terminal should show “/2.6/” as your default Python version: /Library/Frameworks/Python.framework/Versions/2.6/

5. Download the Python Image Library 1.1.7

• it should auto unzip into a folder on you desktop, open it
• There’re manual ways to install it that take a bunch of steps & possible manual installs
  of additional components required; look for a file named README in the PIL folder
• there’re 2 tools that are supposed to simplify installing PIL: MacPorts & Fink, both require Xcode to be installed on your machine.
• Main advantage of MacPorts in general: “Installs automatically any required support software, known as dependencies, for a given port.” http://guide.macports.org/
• I installed MacPorts for Leppard from here: http://www.macports.org/install.php
• run “sudo port -v selfupdate” to make sure MacPorts is up to date

I ran “sudo port install py26-pil” and got a whopping list of dependencies to be installed for PIL (which MacPorts did for me):

—> Computing dependencies for py26-pil
—> Dependencies to be installed: freetype zlib jpeg lcms tiff py26-tkinter python26 bzip2 db46 gdbm gettext expat libiconv gperf ncurses ncursesw openssl python_select readline sqlite3 tk Xft2 fontconfig pkgconfig xrender xorg-libX11 xorg-bigreqsproto xorg-inputproto xorg-kbproto xorg-libXau xorg-xproto xorg-libXdmcp xorg-libxcb python27 xorg-libpthread-stubs xorg-xcb-proto libxml2 xorg-util-macros xorg-xcmiscproto xorg-xextproto xorg-xf86bigfontproto xorg-xtrans xorg-renderproto tcl xorg-libXScrnSaver xorg-libXext xorg-scrnsaverproto…

This took a little while… wait until you see this line: [Process completed]…

NOTE: MacPorts may try to make Python 2.7 or later your default version of Python.
Since ParticleCode doesn’t work with Python 2.7 or 3.x, you might need to manually switch to 2.6:
“To make python 2.6 the default (i.e. the version you get when you run ‘python’), please run: sudo port select –set python python26″

6. Install Eclipse, if you need to.

I already have Eclipse 3.6 installed, so the only thing that needs doing is the memory allocation part specified on ParticleCode.com’s download page.

7. Install ParticleCode plugin for Eclipse….

NOTES:
========
1. “The Particle Platform will not work with Python 2.7 or Python 3 distributions.”

http://www.particlecode.com/account/download/#python

PROPFIND request failed on ‘/my/repo/path’
PROPFIND of ‘/my/repo/path’: authorization failed (http://subversion_host_path.com)

I’ve tried getting someone else to log me in but then still got this error when I tried to Commit files:

Commit failed (details follow):
OPTIONS request failed on ‘/my/repo/path/my_specific_files_directory’
OPTIONS of ‘/my/repo/path/my_specific_files_directory’: authorization failed (‘http://subversion_host_path.com’)

This series of steps finally fixed it:

1. deleted all Repository Bookmarks in Versions svn client
2. deleted Versions’ preferences in myusername/Library/Preferences/
3. deleted the http://subversion_host_path.com keychain entry in Keychain Access
4. tried to creat a New Repository Bookmark – it worked AFTER i added a “/” at the end of the repo path: ‘http://subversion_host_path.com/my/repo/path’