Mobile Ui Blueprint

Mobile UI Blueprint

Last weekend i was putting together some common Mobile UI elements, and i thought it would be nice to share the result. Mobile UI Blueprint is a collection of commonly used, standard-compliant user interface elements, easy to style as you like.

Get Mobile UI Blueprint 1.3 on Dribbble

Cell: Smart Object control for Photoshop

Cell

Smart objects are becoming a vital feature of Photoshop. Cell is a set of scripts i have created to manipulate multiple Smart Objects in a quick and easy way. You can now create / break multiple smart objects in one click. The save action is also very useful, if you work with complex multi-views documents based on smart objects. Cell is also a great way to save Smart Objects directly as .png assets. (Good news – if you work with transparent bounding boxes, Cell recognize it!)

Get Cell for Photoshop here

Ink: a Photoshop documentor plugin

Ink

Handling mockups to developer teams can be tricky. As a designer, sometimes I wrongly assume that everyone knows about how photoshop shapes, effects, and typography works. Sometimes lack of specifications leads to inaccurate front-end outputs. Sometimes the final product just doesn’t look exactly as expected. Ink is a plugin that helps you providing few extra important informations about your mockups by documenting your layers, from typography to effects and shape sizes.

Get Ink for Photoshop here

Clockwork: a Photoshop Extension

Clockwork

Clockwork project has been updated and renamed!
If you are looking for a set of action to improve your Smart Objects workflow with Photoshop, you can check Cell out here:

Get Cell for Photoshop

Tiles3D. Free As3 3D Tweening engine

id="fm_showreel_764744462"
class="flashmovie"
width="960"
height="600">
data="http://www.chrometaphore.com/tiles3D/swf/showreel.swf"
name="fm_showreel_764744462"
width="960"
height="600">

Get Adobe Flash player


Few years ago, when Flash was still a big thing i was proudly riding the Actionscript 3.0 bandwagon (haha) i spent several hours developing this plugin. After years of selling it on Activeden.net, i have decided it’s time to release it for free and open source here. I think it’s still a useful tool to create flash based games or similar.

TILES is a 3D tweening engine, to create tweening animations with movieclips, images, or even textfields, sprites, displayObjects.
TILES package includes a .zxp component, and the Actionscript 3.0 source code.

Features
– 15+ tweening parameters to create unique animations.
– Fast rendering engine
– Lightweight (127kb)
– User-friendly component; just drag & drop it into the Flash stage
– Quick start guide, user manual, and as3 docs included
– 4 .fla files ready-to-use and commented included

Get Tiles 3D here

Fishbone. ultra light, html5 video player

Fishbone is a assets-free HTML5 video player. It’s composed by a minimal set of controls and it is intended to use to display short videos (Instagram, Vine..). I have just started this project so… there is really a lot of room for improvements, bug-fixing, cross-browsing support awesomeness and so on. For old browsers, i have included into the project a similar as3 video player i have developed few years ago.

Perhaps i will create a github repo for this.. in the meantime, you can get the source here. (jquery plugin + swf fallback)

Get Fishbone here

Minimo. free minimalistic patterns

Minimo

Minimo is a collection of free photoshop patterns inspired by halftone screens often used in architectural projects
(.pat file and cheat sheet included in the .zip file).

Get Minimo 1.0

randomBox: pick random numbers from defined quantity

RandomBox is a little utility class that picks, when called, random numbers from a defined quantity. Well.. the animation above should be quite self explanatory haha.

For example, this is how the javascript class works:

//randomBox.js
//2011, Lorenzo Buosi, www.chrometaphore.com

//usage: var rb = new randomBox( 100 );
//rb.pickNext(); //every time you call this function, you will get a unique random number

function randomBox ( nTotal ) 
{
    //register used numbers here
	this.slots = [];
	
	//populate array
	for ( var i = 0; i < nTotal; i++ ) 
	{
		this.slots.push( { taken:false } );
	}
	
	//PUBLIC
	//----------------------------------------------------------------------
	
	//return an available random number
	this.pickRandom = function()
	{
		var rn = -1;
		
		//search for a random position into the array
		var myRn = Math.round ( Math.random() * ( this.slots.length - 1 ) );
		
		if ( ! this.slots[myRn].taken )
		{
			//pick the random number
			rn                    = myRn;
			this.slots[rn].taken = true;
		}
		else
		{
			//pick first available number.
			rn = pickAvailable( myRn );
			if ( rn != -1 )
			{
				this.slots[rn].taken = true;
			}
			else
			{
				console.log( "randomBox.js: all numbers have been already taken!");
			}
		}
		
		return rn;
	}
	
	//PRIVATE
	//----------------------------------------------------------------------
	
	function pickAvailable ( wrongRn )
	{
		var myNewRn = -1;
		var found   = false;
		
		//scanning slots to the end of the array for an available number
		for ( var i = wrongRn; i < this.slots.length; i++ )
		{
			if ( ! this.slots[i].taken )
			{
				myNewRn = i;
				found   = true;
				break;
			}
		}
		
		//scanning slots from the beginning of the array for an available number
		if ( ! found )
		{
			for ( var i = 0; i < wrongRn; i++ )
			{
				if ( ! this.slots[i].taken )
				{
					myNewRn = i;
					break;
				}
			}
		}
		

		return myNewRn;
	}
}

Javascript, Actionscript3 and PHP classes + example included into the .zip file.

Get randomBox here