Usage:

$(elem).roundtext( {radius:150} );

Tested on latest Opera, Safari, Chrome and Firefox (I assume it won’t work in bloody IE)

Download:

jquery.roundtext.js

Example:

I used this function here: www.retro-fanshirt.com (Turn off plugins to see html version)

Sometimes I can see strange behaviour with Safari when it wouldn’t consider space characters. Just so you know.

No related posts.

There are lots of articles written about the garbage collector and I’m not going into it any deeper. Let’s just summarize that no developer likes that kind of behaviour — it’s totally unpredictable. System.gc() would help a little, but it’s only available to debug players.

You may say: what do you care about memory handling! And I’d answer: not that much actually! :-) But what I really care about is false behaviour that can result.

Within Flash we have two ways to keep weak references to objects: Dictionary and weak listeners (weak method closures). We use weak references so that objects will be collected by the garbage collector. Now when it comes to Dictionaries, they behave as I’d expect. A “dead” object won’t be listed in a for each loop. But events events events…. they’ll be dispatched to each and every “dead” object residing in memory!! Which is such a pain in the ass really!

After a lot of testing I can give only the advice you’ve probably heard many times before:

Always remove listeners! Even the weak ones!

Otherwise you have to potentially deal with unexpected behaviour. I may gonna create some utility class for that that deals with this problem.

Here my testing code:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
	import flash.system.System;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.utils.Dictionary;
	import flash.utils.Timer;
 
	import net.hires.debug.Stats;
 
	public class MemoryLeakTest extends Sprite
	{
		public static var counter : uint;
		public static var dict:Dictionary = new Dictionary( true );
 
		private var t:TextField;
		private var makeGC:Boolean;
		private var switcher:uint;
 
		public function MemoryLeakTest()
		{
			super();
 
			t = new TextField();
			t.defaultTextFormat = new TextFormat( null, 18 , 0x999999 , true );
			t.autoSize = TextFieldAutoSize.LEFT;
			addChild(t);
 
			var timer : Timer = new Timer( 100 );
			timer.addEventListener(TimerEvent.TIMER,handleTimer);
			timer.start();
 
			stage.addEventListener(MouseEvent.CLICK,handleClick);
 
 
			stage.addChild( new Stats() );
		}
 
		public function handleTimer( event : TimerEvent ) : void {
			counter = 0;
			if ( makeGC ) System.gc();
			dispatchEvent( new Event( Event.CHANGE ) );
 
			var i:uint;
			for each ( var obj:* in dict ) {
				i++;
			}
 
			t.text = ( "Still " + counter + " dead objects living... (GC " + (makeGC?'on':'off') + ')' );
			t.appendText( '\nIn dictionary: ' + i );
			t.appendText( '\nClick to switch manual Garbage Collection aka System.gc()' );
 
			if ( switcher++ % 2 ) {
				new TestSprite( this );
				t.appendText( '\nAdded new test object (should live for 10 msec)' );
			}
		}
		public function handleClick( event : Event ) : void {
			makeGC = !makeGC;
		}
	}	
}
import flash.display.Sprite;
import flash.display.InteractiveObject;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.Event;
import flash.system.System;
 
 
 
class TestSprite extends Sprite {
 
	// the TestSprite instance should not live longer than 10 msec
 
 
	public function TestSprite( parent : Sprite ) : void {
		// add to weak dictionary
		//MemoryLeakTest.dict[ this ] = true;
 
		// temporarily add to parent
		parent.addChild( this );
		var timer : Timer = new Timer( 10 );
		timer.addEventListener(TimerEvent.TIMER,handleTimer);
		timer.start();
 
		// listen (weak!!) to parent event - this is just for control purposes
		parent.addEventListener( Event.CHANGE , handleChange , false , 0 , true );
 
		// let's have those sprites eat some memory while alive
		this.cacheAsBitmap = true;
		graphics.beginFill(0xff0000,0.1);
		graphics.drawRect(0,0,500,500);
		graphics.endFill();
	}
	public function handleTimer( event : TimerEvent ) : void {
		( event.target as Timer ).removeEventListener(TimerEvent.TIMER,handleTimer);
		parent.removeChild(this);
	}
	public function handleChange( event : Event ) : void {
		MemoryLeakTest.counter++;
	}
}

No related posts.

No related posts.

Picture by Marc Liyanage

It’s been surprisingly fun (I give credits to the beer sponsored by Nemos). People even managed to pretend they’d be interested in what I was prosing, so credit to them too!

I’d also like to mention that there’ll be the swiss flash event soon: Flash at the Lake will not only pamper you with appearances of great national and international Flash enthustiacs, it will also give anybody attending the pleasure to enjoy one of Zurich’s greatest locations with people who don’t think of you as a storm lightning adorer when you sit in the sun twittering Flash into the clear lake. And all that to a fantastic price. Check it out at fatl.ch

So here we go with the presentation (Quicktime so you can enjoy the marvelous effects):

Related posts:

1. Flash Player 10 – I love speed

Paulo Falcão ported this to Javascript using canvas.

To make the set complete I ported Paulos JS version to Actionscript, just quick’n'dirty.

Click on it to start the animation:

Here’s the code:

package test
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class JSCanvasPort extends Sprite
	{
		public function JSCanvasPort()
		{
			super();
			addChild( canvas = new Bitmap() );
			canvas.smoothing = false;
			canvas.scaleX = canvas.scaleY = 2;
			draw();
 
			addEventListener( MouseEvent.CLICK , handleClick );
		}
 
		private var playing:Boolean = false;
 
		public function handleClick( e:Event = null ) : void {
			if ( playing )
				removeEventListener( Event.ENTER_FRAME , enterframe );
			else
				addEventListener( Event.ENTER_FRAME , enterframe );
			playing = !playing;
		}
		public function enterframe( e:Event=null ) : void {
			draw();
		}
 
		public var time:Number=0;
		public var maxr:Number=64.0;
		public var canvas:Bitmap;
 
		public function distance(ax:Number,ay:Number,az:Number,bx:Number,by:Number,bz:Number):Number{
			var dx:Number=bx-ax , dy:Number=by-ay , dz:Number=bz-az;
		    return Math.sqrt( dx*dx + dy*dy + dz*dz );
		}
		public function obj(x:Number,y:Number,z:Number,t:Number):Number{
		        var f:Number=1.0;
		        f*=distance(x,y,z,Math.cos(t)+Math.sin(t*0.2),0.3,2.0+Math.cos(t*0.5)*0.5);
		        f*=distance(x,y,z,-Math.cos(t*0.7),0.3,2.0+Math.sin(t*0.5));
		        f*=distance(x,y,z,-Math.sin(t*0.2)*0.5,Math.sin(t),2.0);
		        f*=Math.cos(y)*Math.cos(x)-0.1-Math.cos(z*7.0+t*7.0)*Math.cos(x*3.0)*Math.cos(y*4.0)*0.1;
		        return f;
		}
 
		public function eval(x:Number,y:Number,t:Number):uint{
		   var vx:Number=x*2.0-1.0; var vy:Number=-y*2.0+1.0;
		   var s:Number=0.4;
		   var ox:Number=vx;var oy:Number=vy*1.25;var oz:Number=0.0;
		   var dx:Number=(vx+Math.cos(t)*0.3)/64.0;var dy:Number=vy/64.0;var dz:Number=1.0/64.0;
		   var tt:Number=0.0;
		   var g:Number=1.0;
		   while((g>s)&&(tt<375)){
		         g=obj(ox+dx*tt,oy+dy*tt,oz+dz*tt,t);
		         tt+=g*4;
		   };
		   var color:Number=0.0;
		   var dxtt:Number=ox+dx*tt;var dytt:Number=oy+dy*tt;var dztt:Number=oz+dz*tt;
		   var objd:Number=obj(dxtt,dytt,dztt,t);
		   var nx:Number=objd-obj(dxtt+0.01,dytt,dztt,t);
		   var ny:Number=objd-obj(dxtt,dytt+0.01,dztt,t);
		   var nz:Number=objd-obj(dxtt,dytt,dztt+0.01,t);
		   var d:Number=Math.sqrt(nx*nx+ny*ny+nz*nz);ny=ny/d;nz=nz/d;
		   color+=Math.max(-0.5*nz,0.0)+Math.max(-0.5*ny+0.5*nz,0.0)*0.5;
		   var r:Number=(color+0.1*tt*0.025);
		   var g:Number=(color+0.2*tt*0.025);
		   var b:Number=(color+0.5*tt*0.025);
		   return getRGB(r,g,b);
		}
 
		public function getRGB(r:Number,g:Number,b:Number):uint{
		        if (r<0) r=0; else if (r>1) r=1;
		        if (g<0) g=0; else if (g>1) g=1;
		        if (b<0) b=0; else if (b>1) b=1;
			return ((r*255)&255) << 16 | ((g*255)&255) << 8 | ((b*255)&255);
		}
 
		public function draw():void{
			if ( canvas.bitmapData == null ) {
				canvas.bitmapData = new BitmapData( maxr , maxr , false , 0xffffff );
			}
			var t:BitmapData = canvas.bitmapData;
			time+=0.1;
			t.lock();
		        for(var x:Number=0;x<maxr;x++){
		                var px:Number=x/maxr;
		                for(var y:Number=0;y<maxr;y++){
		                        var py:Number=y/maxr;
		                        t.setPixel( x , y , eval(px,py,time) );
		                }
		        }
		   t.unlock();
		};
 
	}
}

Update: A quickly optimized version (nothing advanced really).

(You can switch quality in this version with key up or down).

Related posts:

1. MetaTunnel with Pixel Bender
2. 3D Point Cloud with Javascript and Canvas
3. How about we go fuck instead?

There are a lot of PRO for the swffit way:

• It gives users the system scrollbar. Users are used to that, they know what it means, they know how to deal with it.
• Mouse wheels just work! It’s scrolling a standard browser window, no magic at all: great! (You have to use this otherwise)
• It’s easy to implement.

Still there is a CONTRA side:

• You’ll need javascript (well, that’s no biggy at all – as a matter of fact, you’re just pretty in the desert without javascript in todays websites)
• You have no control over scrollbar design (neither a biggy – as another matter of fact I consider that a good thing anyway, but don’t tell the brand agency ;-)
• It has performance disadvantages. Well that I consider a biggy! Because the movie will always be in its full height, it will do rerender for the entire area!! Imagine long page with animations here and there: Given Flash’s «not so fast» rendering engine, this can become a huge performance killer. Let me give you a quick’n'dirty example: Full Height compared to «Cropped» to Window Height (just resize browser window to real small size to see the big difference).

Conclusion: I’m just glad I found one good reason to not declare my internal scrollbar like in www.betabong.com as complete bullshit ;-)

No related posts.

ActionScript 3.0 enables a method closure to automatically remember its original object instance (from Adobe ActionScript 3.0 * Core language features)

Method Closure are quite a wonderful thing: They come in handy in many situations, especially when it comes to event listening and handling. And they stay kind of wonderful in terms of «hidden magic». Hidden magic is all that stuff never officially explained by Adobe. These things often are very core to the language (e.g. exact processing order, frame splitting, event handling), but Adobe decided – certainly for reasons – to only let us see and manipulate what common developers are to see and manipulate.

Still, I’d like to have to possibility to dig deeper if I want. If there is a MethodClosure Type, why is there no way to access its properties. After all it holds a reference to its owner. I may wanna know what the owner is! I admit that its not that there aren’t many obvious reasons why I would do so, but there are! For example:

public function get width() : Number {
	var caller : * = MethodClosure( arguments.callee ).owner;
	if ( isChild( caller ) ) {
		return widthValueForChild;
	} else {
		return actualWidthValue;
	}
}

May be may be there is a way.. I’m not a hardcore byte array hacker, but if I find a solution (or explanation why o why), I’ll update this post.

No related posts.

Anyway, I recently discovered somewhere a great alternative (you can call it hack too, but then everything a little fancy that’s supposed to work with IE is a hack, isn’t it?).

So while until now I’d have something like this:

.inlinebox {
	float:  left;
	width: 49%;
	min-height: 100px;
}

the new method goes like this:

.inlinebox {
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
	width: 49%;
	min-height: 100px;
	_height: 100px;
}

That’s looks quite more complex. And it certainly is. But it works like a charm on all browsers I’ve tested (IE7, Safari, FF3). _height, zoom and *display are some crappy IE hacks obviously. The zoom attribute by the way is quite interesting, as it activates the hidden (IE only) CSS attribute hasLayout.

It also has some very nice benefits, like the alignement to the bottom…

Example

View Example

	<style type="text/css" media="screen">
		.codeexample span {
			background-color: #68B6FF;
			-webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255, 255, 255, 0.8)));
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			margin-right: 10px;
			margin-bottom: 40px;
			width: 140px;
			padding: 10px;
		}
		.inlinebox1 {
			display: block;
			float:  left;
			min-height: 32px;
		}
 
		.inlinebox2 {
			display: -moz-inline-stack;
			display: inline-block;
			vertical-align: bottom;
			zoom: 1;
			*display: inline;
			min-height: 32px;
			_height: 32px;
		}
 
	</style>
 
	<div class="codeexample">
		<h3>Float: left</h3>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
 
		<h3 style="clear: both;">Inline Block</h3>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
	</div>

Related posts:

1. BBML Presentation at SFUG

No related posts.

Edel*flash, a swiss site dedicated to swiss flash excellence, got redesigned as a wordpress blog. I think it’s a real nice and wise update. Well done, Simurai!

On a side note, first award in v2 is Hugman, designed and concepted by my friend Tobi (also well done!)

No related posts.

A sweet nice canvas demo with some (pseudo?) 3D. A lot of code for a little story. But I like it. You’ll gonna need a fast computer ;)

Related posts:

1. 3D Point Cloud with Javascript and Canvas
2. Metatunnel 1k Demo: AS vs. JS

Those moves – love ‘em! (found at badana)

No related posts.

15 years ago Markus and Daniel Freitag created their first Freitag bag, made of used truck tarpaulins and some other recycled stuff. So today’s the big party, and I’ll be there of course. The party will be public starting from 11 pm @ F-abric in the Maag Areal (Zurich, of course). I sure will already be in quite a good shape at that time ;-) Give me a hoorraaaa!!

Update: Party-Pics here

No related posts.

No related posts.

It’s very cool and interesting to see that kind of things. Much progress has been made with this kind of multitouch interface, both from a technical and a user interface view. Things got much more responsive and start to make sense.. with that kind of data (especially data that’s hard to manage with keyboard). So, in my opinion, it’s a great replacement for most things that we do with the mouse… but hey, in a productive environement, we deal a lot with language input, don’t we?

And while a virtual keyboard on an iPhone makes sense (switching languages, improving functionality via sw update, not taking any space where not much space is), i’m less than sure that this would work on a desktop device. Sure, writing on a keyboard is nothing easy to learn, but once you have it, you can write much faster than by hand, and everybody who has to write a lot knows about the importance of some good tactile feedback.

Anyway, I’m more than interested where this will lead to. I’m pretty sure we’ll first see this kind of things in (productive) environments that have to deal with (3D) imagery (like in medicine). Hmm hmm.

No related posts.

So what’s the deal? When you press the headset button twice while listening to music, it will skip to the next song. That’s it. Isn’t that just awesome?! I think so :-)

No related posts.

A quotation I really like because it’s to the point of how I think about and how I try to do my work. And… who said it? Yes, God almighty, Mr. Steve Jobs, 2003.

I’ve also found some others I like:

«The ability to simplify means to eliminate the unnecessary so that the necessary may speak.»

Hans Hofmann

«The greatest challenge to any thinker is stating the problem in a way that will allow a solution.»

Bertrand Russell

«A picture is worth a thousand words. An interface is worth a thousand pictures.»

Ben Shneiderman, 2003

«I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.»

Jeffery Veen, 2000

«Making the simple complicated is commonplace; making the complicated simple, awesomely simple, that’s creativity.»

Charles Mingus

«Form follows function-that has been misunderstood. Form and function should be one, joined in a spiritual union.»

Frank Lloyd Wright

«The details are not the details. They make the design.»

Charles Eames

The following one is a good one for many of my customers ;-)

«A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.»

Antoine De Saint-Exupery

And another one from the almighty – I may not agree 100%, but it’s certainly a funny one:

«It’s really hard to design products by focus groups. A lot of times, people don’t know what they want until you show it to them.»

Steve Jobs, 1998

No related posts.

Love you too :-)

No related posts.

Especially WPhone is cool IMHO. WPtouch is cool too, but I think the iPhone renders most web pages pretty pretty anyway, and also.. it seems a bit slow too me. Still: very cool!

(see: it’s not a freakin’ beta! ha! watch my claim!)

No related posts.

Still you can struggle over unexpected behaviour. First of all there is no guarantee that objects are garbaged (well it’s probably not a memory thing.. more about unreferencing, what the heck do I know?!) as soon as there aren’t any references left. But, in my experience, weak references work quite good.. I didn’t have to worry about them living for some more seconds or so. But. But! They’ll live on at least until next rendering step, meaning until actionscript execution is done.

I struggled over this with a validation manager, that keeps tracks of unvalidated objects in a weak dictionary. So when object unvalidates, it tells so to the validator who will validate before rendering update. Now let’s assume the object shall be destroyed in the mean time – it will unlisten to dispatchers, it will unlink sprites and so on.. but may be it’s already registered in the validator. So it’ll stay alive to fullfill next validation processing. (Which led into uncaught errors due to null references in the destroyed object in my example.)

I could of course unregister at the validator at destroy. But.. hmm.. I want my engine to be as fast and robust as possible and unregistering can be difficult and time consuming (especially when 1000 objects will be destroyed). So what I’ve done is, I set a flag ‘destroyed’ when destruction is complete, and on each validation I’ll check for that flag:

public function validateDisplay() : void {
  if ( _render_dirty && !destroyed ) {
    render();
  }
}

Checking against a boolean flag is fast as hell, so that’s cool. And also, it won’t happen often (it was really a rare exceptional case actually). So besides weak references in AS3 we still have to be careful as hell about memory leaks. By the way, the profiler in Flex Pro is just fucking great :-)

On a side note: Any one any info on MethodClosure objects lying around in memory?? I know what they are used for, but it seems they live and live and live….

Related posts:

1. Nested inner functions can be evil
2. Weak Method Closure
3. E4X String Parser

http://code.google.com/creative/radiohead/viewer.html (Flash)

http://code.google.com/creative/radiohead/ (see video in better quality, making of and more…)

No related posts.

Yeah, i’m learning the cyrillic alphabet!

No related posts.