— tomauger.com

Okay, my JavaScript isn’t that strong yet – that is to say, my full comprehension and usage of the characteristics and idiosyncrasies of a prototypal language. But I ran into this pattern today that I just have to write down because it’s so cool.

I run into this a lot in, for example, PHP programming, where you want to use a function multiple times, but there are some computationally-heavy operations the function has to do, the results of which won’t change for the scope of the function (usually the execution of the script).

Read More

There are a number of reasons why you might get this error, including not declaring stage instances, mis-spelling a class name, or using the wrong class when declaring stage instances.

The one I found that was stumping me had to do with Exporting for ActionScript. A MovieClip was assigned a Class corresponding to an AS3 class – eg: view.MyClip. Then, in a class corresponding to that clip’s parent MovieClip, I declared a var like this `var myClip:MyClip;`.

The very act of declaring this variable in a parent MovieClip prevented MyClip from properly instantiating. I think the ReferenceError is actually just plain wrong.

At any rate, the solution was to assign view.MyClip to the Base Class, not to the Class in the Export for ActionScript properties. Problem solved. Fuck me. 2 hours wasted.

Read More

lava_progress

See that wicked progress bar above filled with… what? Orange Crush? Let’s call it the Waponi Woo UI. This element above is created entirely using the Layer f/x using only 2 layers for the effect (+ 2 more layers to create the animated bubbles). Many techniques and tutorials that you’ll find lurking around the Interwebs totally (in my opinion) “cheat” by drawing vector shapes for highlights or reflections or other visual features needed to pull off the effect. You know what? That’s totally bogus.

This is essential when you’re creating a series of UI elements you want to only use effects that can be 100% automated and scaled so that you can apply the same f/x to all your UI elements consistently and don’t need to hand-draw, paint or otherwise create artwork to fit the individual shapes of your UI elements. If the layout requires that you resize an element, it just happens, without any fiddling or re-creating artwork. It’s just plain smart workflow.

If you’re just looking to create the effect above, I have created a series of video tutorials that recreate the exact UI above. Visit my YouTube channel (see video, below), or you can find them all right here in this post.

Okay, maybe you can’t do absolutely everything with layer f/x – there are limitations, of course. But I guarantee that you are not using Photoshop’s layer f/x to their full potential. In this series of articles, which have been a very long time coming, I’m going to focus on breaking down the preconceptions about the roles of each of the effects available in the f/x menu and hopefully throw open the lid of Pandora’s box for you so you can really start flexing some Photoshop muscle.

Read More

I’ve been using $.Deferred in a few recent things I’ve done with jQuery and it solves a lot of problems that used to be kind of a big deal.

I won’t go into details about the jQuery Deferred object because there’s a ton already out there on it. Suffice to say that everything centers around Promise objects that can fire off events as they resolve. These events only fire off once and then the Promise object is basically used up.

What’s cool about all this is the $.when() method, that takes an array of Promise objects and returns basically a “master” Promise object that only resolves when all of the Promise objects passed to it have resolved. This is an awesome way to do a whole bunch of things asynchronously (ajax calls, image.onload callbacks, animation complete callbacks) where you still would like to be notified when and only when they are ALL done.

It’s pretty easy to do, too.

Read More
yum install subversion

would be the way to go, but sadly yum only has subversion 1.6.x. So we unyum and then manually build subversion ourselves. This includes the steps for making the Apache Runtime and Apache Runtime Tools libraries required by subversion.

1. From command line (logged in as root) yum remove subversion
2. cd /usr/local/src
3. In a web browser, visit http://subversion.apache.org/download/, and find the latest version. Find the URL for the .tar.gz version. Copy that
4. Back on your command line wget [paste URL here]
5. tar -xzf subversion-1.x.x.tar.gz
6. cd subversion1-1.x.x

Before we configure subversion, we need to install the Apache Runtime library and Apache Runtime Utils.
7. In a web browser, visit http://apr.apache.org/download.cgi
8. using wget, get the best versions of APR and APR-util: wget [paste APR URL here], wget [paste APR-util URL here]
9. Untar both of them: tar -xzf apr-1.x.x and tar -xzf apr-util-1.x.x

Now we have to compile APR and APR-util
10. First, compile APR.
11. cd apr-1.x.x
12. ./configure
13. make
14. make install

Now we have to compile APR-util and give it a reference to APR
15. cd ../apr-util-1.x.x
16. ./configure --with-apr=../apr-1.x.x
17. make and make install

Finally, we can compile subversion
18. cd ../
19. ./configure --with-apr=apr-1.x.x --with-apr-util=apr-util-1.x.x
20. make (grab a coffee) and make install

Verify our version
21. svn --version

Read More

Don’t ask, but I started to get paranoid about my usual way of calculating a random number range (e.g.: -20..+20) of negative to positive numbers in JavaScript.

I use:

let x be the range on both sides ( -x .. x )

Math.random() x * 2 – x;

Anyway, I just wanted to prove that this was not weighted more on 1 side than the other, so I learned about mean (average) and median (the middle number) and wrote this little test:

	var nums = [],
		max = 0,
		min = 1000,
		sum = 0;
	for ( var i = 0; i < 1000000; ++i ){
		var n = Math.random()* 2 - 1;
		nums.push( n )
		max = Math.max(n, max );
		min = Math.min(n, min);
		sum += n;
	}
	console.log( "max: " + max );
	console.log( "min: " + min );
	console.log( "i: " + i );
	console.log( "mean: " + sum / i );
	var mid = nums.sort( function( a, b){ return a - b } ).length / 2;
	var med = mid % 2 ? nums[mid] : (nums[mid-1] + nums[mid] / 2 );
	console.log( "median: " + med );

 

Read More

It’s pretty cool that whenever you’re writing on your (or someone else’s) timeline in Facebook, Facebook goes off and fetches a (usually) appropriate thumbnail image to use that adds a splash of colour to your post, and also visually identifies the site in question.

If that site is your site, however, you may want a greater degree of control over what image Facebook chooses. By default, Facebook trolls your site’s home page for IMG tags and background-images in your CSS and pulls them out, offering them each as options to the person posting the link.

To see what images facebook will offer up for your site, use the following link:

http://developers.facebook.com/tools/debug

Read More

blending_opts_1Yeah, these suckers here. You know, there’s not a lot that I don’t know in Adobe Photoshop, but every so often I come across something that I’ve been, well, avoiding to have to learn properly. Something I’ve always been able to muddle through without really understanding the why and the wherefore. Not often. And I hate when it happens. The layer Advanced Blending Options has been one such thorn, and in a recent UI experiment that I document with some video tutorials, I hit the wall and had to mess around randomly with these options until I found the magic combination and permutation that actually worked. I was content. Until I had to do said video tutorials. That’s where I look like a fool if I can’t explain something properly. “Don’t be an ass,” I said to myself. “You either know or you don’t. Don’t fake it.”

So I turned to Google. And you know what? no-one (least of all Adobe) had a satisfactory explanation for the phenomenon I was experiencing. Was it a bug? Unlikely. So I had to figure it out the hard way. I’m documenting my findings here, to create the definitive record on the web for how this shit works. I can only hope that my SEO + your Google-fu gets you to this article when you’re in need of enlightenment.

Read More

Just posted a bunch of new videos to my YouTube tutorial channel, so why don’t you check ‘em out and give your Photoshop skillz a mad boost?

(more after the break, or just subscribe to my YouTube channel for updates!)

Read More

FlashDevelop_glossySo you’ve done your research and based on your use cases you think Flash development is the way to go. Flash is by no means a dead horse: sure, you can’t develop web-based Flash content and expect it to display (at all) on iOS mobile devices; sure HTML5 + JavaScript + Canvas seems like a pretty good idea (some time in the future); but you know what? Being able to easily, rapidly and often visually develop and deploy apps and games to the web (SWF), desktop (Air) and all major mobile platforms (Air for Mobile) sounds like a pretty good deal to me.

Okay, so you’re cheap. Don’t be shy: admit it. The price tag of Adobe Suite is a little daunting and you don’t have some $500 to get in the game and try it out. This is precisely why God invented the Open Source movement. Welcome: FlashDevelop.

In this short tutorial, written (and I’m not even kidding) with my mother as the intended target audience, we’re going to cover the very very (very) basics of doing some (extremely simple) stuff in Flash using all Open Source stuff, and not a single piece of Adobe software. (Well, you may want to do some Photoshop to create the graphics – go get yourself Photoshop CS2 for free from Adobe.)

Read More

Get Adobe Flash player

Read More

Get Adobe Flash player

 

 

Copying bitmap data in ActionScript is pretty easy, but there are a few gotchas, and the Adobe documentation for BitmapData.draw() contains a pretty significant error that can leave you chasing wild geese for some time.

To help me better get at the root of how the BitmapData.draw() actually works, I put together a little sandbox (above) where you can punch in the numbers and see what it does.

I’ll walk through the code after the jump and attempt to explain what’s going on.

Read More