I am not naive enough to believe I originally created this effect. As with anything, there always seems to be someone somewhere that did it sometime before :). Either way, I made a version of it for my previous site in AS2 and it came with me when I updated the site.

Ever since that first site there’s been a somewhat steady flow of questions regarding it. I vaguely remember writing a AS2 tutorial for it on gotoandlearn and I get a lot of mails regarding it.

So, I figured I’d take advantage of AS3’s massive improvements and create a transition class with the same effect. It’s hard to give it a specific name, but I’ve always called it the “pixelating transition“. You’ll understand when you check it out. Go ahead tough guy. Click the header!

So, in short, this class will take two displayobjects and create a transition between the both. The DisplayObjects don’t necessarily need to be on the Display List, in fact it’s probably wiser to use the Pixelator as an intermediary. You set it up with two clips and add it to the display list. The class itself will do nothing but setup and display the first picture. You can later call a trigger that makes it transition between the first and second image/object. Simple as that.

If you later need to keep transitioning, there’s also a reconfigure command that allows you to re-setup the class while maintaining the visible appearance. In other words, It’s just really simple! :)

public function Pixelator(_source:DisplayObject, _dest:DisplayObject, _ct:int = 125)
//ct is the cutoff, or how big you want the pixels to become. Larger = bigger.

Download here (350Kb) (3537 downloads)

Here’s a snip from the release statement;

TransformManager makes it easy to add interactive scaling/rotating/moving of DisplayObjects to your Flash application. It uses an intuitive interface that’s similar to most modern drawing applications. When the user clicks on a managed DisplayObject, a selection box will be drawn around it along with 8 handles for scaling/rotating. When the mouse is placed just outside of any of the scaling handles, the cursor will change to indicate that they’re in rotation mode. Just like most other applications, the user can hold down the SHIFT key to select multiple items, to constrain scaling proportions, or to limit the rotation to 45 degree increments.

As mentioned; this class, unlike the other ones Jack released, does come at a small price. I know people go to great great GREAT lengths to not have to pay for their music, software, classes et cetera but at some point you should step back and consider the implications it has on the evolution of web products. I’ve personally always been a ‘pay for your shit’ vigilante and I strongly encourage everyone to pay for anything you’re using on a regular basis.

That preach being done, if you use TweenMax/Lite, do check out the transform manager and it’s cool features! TransformManager

CPU usage on my dual 3.2 went from 11% to 1%. Quite a difference. I would strongly encourage you to re-download it if you plan to use it. (I also updated the original link)

Download V2 (300Kb) (3903 downloads)

That’s quite a topic. “A customizable gradient circle loader / animation for AS3“. I wrote it then looked at it and couldn’t help giggling. Aaaanyway. You know the one, we’ve all seen it. From the worst sites to the best sites, every now and then you see that circle that spins with an internal gradient. Like a snake trying to eat its own tail.

Most commonly these are bitmaps. Pngs exported from PS that are rotated. The problem with that is that it becomes pretty rigid. If you need to change the width or height or whatnot, you’re quickly faced with re-exporting a new one. Actually more or less the same thing goes for those that took the time to make it with Illustrator. Once you are faced with increasing the inner radius and not the outer, or vice versa - you gotta redo it.

Soooooo, without further adieu, here’s a scripted version that uses the drawing API to construct a circle that is fairly customizable. You can use it as a loading animation or just .. just a spinning circle because how cool aren’t spinning circles? Much much cooler than fireflies, for sure!

Alright so, it’s a class. The class has three public functions. The constructor creates the initial circle with your arguments (inner and outer radius, rotation speed, color) and after that you can call a start() method to make it visible and start spinning. Alternatively, stop() shuts it down and makes it non visible, but it does NOT remove it from memory, you can restart it again. It just clears the listeners. If you want to kill it, you need to remove the instance from the displaylist.

public function SnakeCircle(_radius:int, _circleSize:int, fillColor:uint, speed:Number, direction:String = “CLOCKWISE”):void

The sliders are (top to bottom): Speed, Inner Radius, Outer Radius. Also a little cute colorpicker. Click the circle to change direction

All that remains now is the Download Link (300Kb) (3903 downloads)

(I know, 300k wtf right!?! Friggin components… not to worry though, the swf is 17 kb :P)

Well.. everyone loves transitions right? I do anyway. Even if they are utterly useless like the firefly one I posted a few days ago I still enjoy it just for the sake of the ‘ooooo‘ effect it can produce. I’ve always been a bit of a sucker for the pure visual parts of flash, which is probably why I went in the direction of ActionScript instead of C# or something else.

This class will take any content you give to it (A displayobject is required though) and distort it with the help of Perlin Noise, DisplacementMapFilter and a Blurfilter. The end result is something that looks like its ‘rippling out‘. (lack of better words! haha)

It dispatches an event when the content is completely gone, and you can choose what to do before starting the ‘road back’ so to speak. The last event it dispatches triggers a reset of the parameters so you can do it all over again! Click the ducky to try it! Download the class inside…

As always, if you like it, it’d be cool if you left a digg or a comment! I’ll answer any questions you might have in the means of time or whatnot ;)

Download here (20Kb) (4297 downloads)

What it basically does is to generate either a random position in the array, or return the value at that position, but keeps it unique (ie: no value will appear twice). It’s super lightweight and has close to no commenting whatsoever! haha!

Quick syntax:

import com.utils.shuffler;
shuffler.addSource(array_with_values);
trace(shuffler.getUniqueValue());

Or, if you just want the position in the array returned (better performance wise)

import com.utils.shuffler;
shuffler.addSource(array_with_values);
trace(shuffler.getUniquePosition());

You can download the class files and example FLA by clicking here (8Kb) (771 downloads)

Inside you can find a quick experiment + source to a AS3 class that breaks up vectors/bitmaps into particles and then moves them around in a semi-random firefly pattern. It’s a little bit CPU intense so I added a fps meter (fpsbox, courtesy of Schell Scivally). On lesser computers I’m sure it can choke a little bit due to the 2000-ish bitmap particles swarming around with filters but all it all it should be fairly okay.

I guess it’s fairly useless, usability wise, but it looks friggin cool and it can handle any shape or size. The larger, the slower however….

You can revert back (animates back) and that jazz as well. Please note that the in/out motion is done with TweenMax, so if you don’t have it you might want to download it first. Thanks Greensock ;) His collection of tween libraries are lightning speed fast! :P

Download here (20Kb) (5012 downloads)

One of the most irritating aspects of the web is that you so often find (almost) exactly what you’re looking for, but seldom just exactly. There’s bits and pieces out there and it can be terribly frustrating to combine information from multiple sources since they don’t always merge well or are compatible. Enough talk. Here’s the free stuff! : mysqlTuner!

I’ve written and compiled a script that will automatically keep your MySQL database in tip-top condition, and tried my best to keep the installation process to a bare minimum…

How it works, and why you should care

To cut to the chase, databases delete, add and update data so often that eventually a lot of redundant data is created. This data does not only take up space, it also makes your queries run slower. For a more in-depth view on MySQL, please do read my entry on it. You can get rid of this by doing something called “table optimization”. This can be done in a few different ways, phpMyAdmin among other things.

mysqlTuner relies on one of two things. It can either be called through a PHP script which you can bookmark for easy access, or set up through a server scheduler. (Cron is the most common one). There’s also no need to worry about your database information to be compromised since it is accessed with arguments instead of storing data somewhere. If you have access to cron, there’s actually not even any need to put the file that is accessible from the web whatsoever.

How do I use it?!

mysqlOptimizer is a shell script that runs on your linux server with command line arguments. To optimize the table my_blog, you need the username and password of a user that has access to that database. After you fetch that, you can run the shell script from the command line as;

sh mysqlOptimizer.sh username password databasename

Logging in to run it every time can get old fast however, so I advice you’d do one of these two:

Option 1: You have access to Cron either through a control panel or SSH

Easy peasy. Put the file in a directory of your choice and password protect it or block web access through .htaccess. Schedule the file to run through cron at an interval you see fit (here is a tutorial on how to use cron):

30 2 * * * sh /path/mysqlOptimizer.sh user password database

The example above will run at 2.30 AM (02.30 for Euros :D) every day, optimizing your stuff for you! ;)

Option 2: No Cron Access! :(

Don’t despair! You can create a php file to run the shell file through exec(). I have included some information regarding this in the README.TXT, but you need to at least have some basic PHP knowledge. Also, if your server has safe_mode on, you need to make sure you are running the file in a dir defined by safe_mode_exec_dir.

Can it mess up my data??

Short answer is no. The OPTIMIZE command is non destructive and can’t mess anything up by itself. As long as you read the docs, you are fine. /hug

I don’t know how to do this :(

Feel free to ask, but most importantly, google is your friend! Usually your host support techs will be happy to help you set up a cron job too. After all, you are paying them for it! :D There’s a few additional pointers in the README.TXT.

Share, steal, copy, improve, break. I really don’t care! If you like it, let me know!

Download here (4Kb) (601 downloads)

You can download the class file and an example FLA+Document class here (8Kb) (1613 downloads)

Modify, break, sell, copy, steal or improve. If you like it, tell me!

There are (of course! :D) a number of things you can do to improve your mySQL performance however, and here they are, in all their glory! :p

MySQL tuning:

One of the most surprising aspects of MySQLd is that it so often comes served with little to no cache in the main config. No query cache is especially devastating for servers that run applications with constant small database accesses (much like WordPress). To elaborate; Query-Cache is a buffer where MySQLd stores Query Results. When an incoming query comes from Apache, MySQLd checks its cache for matches before parsing. The query cache (obviously) has a timeout and never lives long enough to cause problems for rapidly updating content. For for example, if these two queries come in, subsequently:

SELECT tbl.posts FROM db.posts LIMIT 20
SELECT tbl.posts FROM db.posts LIMIT 20

Only the first one will actually be parsed and run through the database. The second one matches byte by byte and will hence get fetched from the cache (which is significantly faster). So, cache is good. There’s a couple of other types of cache, apart from Query cache which all can benefit your blog.. or… eCommerce site or whatever you want to improve :)

Start by grabbing a backup of your current configuration. Again, if you need a brush up with the text editor Vi, there’s a good one here:

cp /etc/my.cnf /etc/my.bak
vi /etc/my.cnf

Navigate your way to this section (normally is at the top)

[mysqld]

Without going in too deep on the subject, below follows a list of key settings for a well performing database server (note that some of these might be omitted from your configuration by default.):

• query-cache-type: (controls whether Qcache is on/off. Default is off)
• query-cache-size: (Specifies the size of your Qcache)
• key_buffer_size: (A cache mechanism to keep the most frequently accessed table blocks in memory)
• read_buffer_size: (Each request that performs a sequential scan of a table allocates a read buffer.)
• table_cache: (A combination of read buffer and key buffer, but only keeps critical data)
• wait_timeout: (The number of seconds the server waits for activity on a non-interactive connection before closing it)
• interactive_timeout: (I’ll let you take a stab at what this means ;))
• connect_timeout: (The number of seconds that the MySQLd server waits for a connect packet before sending a kill signal)
• skip-innodb: (Sets whether innodb is allowed or not. More on this below)

You could discuss the optimal setting for these indefinitely, so I’m just going to leave it with this: MySQLd is programmed to run in very low memory environments. If it is allowed more memory, it will run better. Memory also means cache, cache generally means improved speed. Most servers have well beyond the default memory cap that MySQLd takes up out of the box, and unless you are on a server with 128MB or less available memory, these following settings should results in a major performance boost for your database applications. Do note that if the setting doesn’t exist at all in your config file, you can just add it:

max_connections = 400
key_buffer = 16M
sort_buffer_size = 2M
read_buffer_size = 1M
table_cache = 1024
interactive_timeout = 15
connect_timeout = 10
query_cache_limit = 1M
query_cache_size = 16M
query_cache_type = 1
skip-innodb

It’s VERY IMPORTANT to notice that if you run innodb applications you need to take out that last line (for Plesk users: Plesk uses innodb for user management!) otherwise they will cease to function! Save and restart MySQLd;

/etc/init.d/mysqld stop
/etc/init.d/mysqld start

Table optimization:

Apart from configuration, another key issue to smooth SQL sailing is keeping your tables repaired and optimized. You can do this regularly through phpmyadmin, or you can set up a script to do it for you. Optimizing a table is most beneficial if you have deleted a large part of a table or if you have made many changes to a table with variable-length rows (tables that have VARCHAR, VARBINARY, BLOB, or TEXT columns, which is most of them). Deleted rows are maintained in a linked list and new INSERT queries reuse old row positions. This causes a slowdown in response time as the list grows larger. You can Optimize the table to kill the dead positions and to defragment the data file. This process will also free up storage space. On eCommerce sites or community sites or active blogs, Optimizing the tables will have a significant impact in the response time of your MySQLd.

Misc performance tips

Lastly, let me just touch briefly on table design. There’s an excellent article on database partitioning, something every MySQL developer should read. You can find it here. Here are a couple of quick hints on how to design and query your database for maximum performance;

• Don’t use DISTINCT when you could use GROUP BY
• Make similar queries identical/very similar so Qcache is used
• Avoid wildcards at the start of LIKE queries
• Don’t avoid table joins, they are faster than denormalization
• Use LOAD DATA instead of INSERT

In closing, don’t forget to optimize!