Tuesday, October 1, 2013

Remove Faint Lines from Bootstrap .navbar

Bootstrap includes some very subtle shadow/glow effects on the menu. If you have tried to create a design with transparent nav, they might still be visible. Kill those shadows:
.navbar-default { outline: none; border:none !important; box-shadow:none !important; }

Sunday, August 11, 2013

Different @media Breakpoints for Twitter Bootstrap

What you see below is the actual CSS in action, resize the window to display each size breakpoint. (source) This CSS is exactly the same as Twitter Bootstrap. Useful to use in your own CSS in addition to Bootstrap, or as a standalone to detect different devices. Using the pixel density is generally a bad idea as laptops move into the higher densities.

type A (Mobile)

type B (Tablet/Mobile)

type C (Small Desktop)

type D (Desktop)

Monday, October 1, 2012

Change Font Size to Fit TextField AS3


public function Autosize(txt:TextField):void {
var maxTextWidth:int = 200;
var maxTextHeight:int = 200;
txt.width = maxTextWidth;
txt.height = maxTextHeight;
var maxTextHeight:int = 200;
var f:TextFormat = txt.getTextFormat();
//decrease font size until the text fits
while (txt.textWidth > maxTextWidth || txt.textHeight > maxTextHeight) {
f.size = int(f.size) - 1;
txt.setTextFormat(f);
}
}

Wednesday, September 19, 2012

Camel Case to Spaces AS3

// using regex

var camelCase:String = "CamelCaseIsSexy";
function camelCase2human(s:String):String {
     var myRegExp:RegExp = /(^[a-z]|[A-Z0-9])[a-z]*/g;
     var catches:Object = s.match(myRegExp);
     var humanReadable:String = "";
     for( var j:String in catches ) {
          humanReadable += catches[j] + " ";
     }
     return humanReadable;
}

trace( camelCase2human(camelCase);

Saturday, February 25, 2012

How to copy a Mac OS icon with alpha transparency

Old school mac users might be frustrated trying to copy an icon from the finder info window when they paste it into photoshop, because the transparency is not respected. It usually appears on a white background.

Why Adobe can't sort this out is beyond me, but there is an easy fix.

Right click on the application with the icon you want to copy and choose "Show Package Contents".

In the "Resources" folder you will find a bunch of .icns files, one for the app, and one for each of the documents that are associated with the app. You can open these in preview, and from there, export them as a PNG with transparency.

Thursday, October 6, 2011

Updated Youtube ID retrieval...

// get the youtube ID from a link, look ma, no REGEX!
// to accomodate the new short URL format

function getVideoId(url){
if(url.indexOf('?') != -1 ) {
var query = decodeURI(url).split('?')[1];
var params = query.split('&');
for(var i=0,l = params.length;i if(params[i].indexOf('v=') === 0)
return params[i].replace('v=','');
} else if (url.indexOf('youtu.be') != -1) {
return decodeURI(url).split('youtu.be/')[1];
}
return null;
}
var urlOLD = "http://www.youtube.com/watch?v=UF8uR6Z6KLc&feature=feedlik";
var urlNEW = "http://youtu.be/UF8uR6Z6KLc";
trace(getVideoId(urlOLD));
trace(getVideoId(urlNEW));

Monday, August 1, 2011

Animating perspectiveProjection AS3 (CS5)

I use TweenMax a lot, but sometimes you need to animate a complex object or 3D object.

In this case, it's the perspectiveProjection class of the native 3D features of flash player 10, in particular it's fieldOfView and focalLength properties.

Why bother with this at all? Well, although you probably can't do mesh, the native 3D features can be much faster than libraries like Away3D for simple 3D effects.

View demo. Download example.

And below is the code, just in case you want to jump right in... (sorry for the procedural code!)

import com.greensock.TweenMax;
import com.jibjub.quickZsort;

TweenMax.to(cube_test, 10, {rotationX:700, rotationZ:400, rotationY:500, repeat:-1, yoyo:true});

//new PerspectiveProjection
var pers:PerspectiveProjection = new PerspectiveProjection();
//set the field of view - doesn't really do much
pers.fieldOfView = 1;//Default: 55, Range: 1 - 180
//set the focal length
pers.focalLength = 1000;//Default: 663
//set the projection center to stage center for a straight view
pers.projectionCenter = new Point(stage.stageWidth * 0.5, stage.stageHeight * 0.5);

// tween the perspective projection
TweenMax.to(pers, 1, {fieldOfView:179, repeat:-1, yoyo:true});

// apply the perspective each frame (and also z-sort out clips)
addEventListener(Event.ENTER_FRAME, function(){
    quickZsort.sort(cube_test);
    //assign to target/DisplayObject
    cube_test.transform.perspectiveProjection = pers;
});

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
            
addEventListener(Event.RESIZE, onResize);
stage.addEventListener(Event.RESIZE, onResize);

function onResize(e:Event) {
    // keep our vanishing point centred
    pers.projectionCenter = new Point(stage.stageWidth * 0.5, stage.stageHeight * 0.5);
    // keep our cube centred
    cube_test.x = stage.stageWidth * 0.5;
    cube_test.y = stage.stageHeight * 0.5;
}