Studio moh

e-mail Dylan
dylan@studiomoh.com
Or Call
831-295-3824

findByName() for Flash AS3

I’m spoiled by jQuery. When I want to find an element and do something it’s as painless as $(element).doSomething(now);. Not so in Flash. God help you if the sprite you want is nestled inside a dynamically loaded SWF inside of a movieClip in a different layer. That’s, like, getChildAt()*10200.

This little guy has saved me so much time traversing Flash’s DisplayList. It’s not quite as functional as the CSS selectors in jQuery, but selecting something by name without having to chain node-by-node is suuuuch a time saver. Enjoy:

import flash.utils.getQualifiedClassName;
 
function getClassName(obj:Object):String {
	if (obj is Class) {
		var s:String = obj.toString();	// "[class SoAndSo]
		return s.substring(7, s.length - 1);
	} else {
		var fullClassName:String = getQualifiedClassName(obj);
		return fullClassName;//.slice(fullClassName.lastIndexOf('::') + 2);
	}
}
 
function findByName(container:*, objName:String):* {
	/**
		findByName takes a container and a name and returns the object if found.
		Because Flash is so annoying with it's displaylist.
	**/
 
	var child:Object;
	for (var i:uint=0; i < container.numChildren; i++) {
		child=container.getChildAt(i);
 
		if(getClassName(child) == objName || child.name == objName) {
			trace('Found: ' + objName);
			return container.getChildAt(i);
			break;
		} else if (container.getChildAt(i) is DisplayObjectContainer) {
			child=findByName(DisplayObjectContainer(child), objName);
		}
	}
 
	return child;
}

Elements of Design

ArtPiles

ArtPiles is going to be a little bit more visual than FAP. I’m especially happy with the touches of leather and chrome. I think it’ll give the interface a sexy look without distracting from the content.

Almost but not quite

Why is it so difficult to graph a timeline? I always end up with something hideous like this. There has got to be a prettier way.

On Modal Alerts

I like asking you guys for input, it saves a lot of development time :D

SO. How about this? RPG-style modal alerts!

RPG style modal alert box wow
(I’d make them prettier, I promise)

Instead of a boring, lame-o modal alert “Are you sure you want to delete this?” you get this fun RPG styled alert box. And then I can use the mascots of the site as, like, personable guides.

Like that jumping bird!

Jumping bird!

He could tell you to…uh…

Okay, now this idea is stupid.

Edit: Okay, you know, the more I think about this, the more I like it! The modal has become a dialog balloon for a character. He can have different emotions for different actions as represented through his icon. Like, in this example, he’s frowning a little bit. People will subconsciously pick up on his emotion.

Giving the modal a face like this changes it from a machine interaction into an emotional one. The dialog has personality, there is a character asking you this question.

Okay. I love it.

Piles and Piles of Art

I can’t wait for Art Piles to go live.

There are so many wonderful ideas in this project. New interfaces, ways to sustain the community, privacy…

Okay! :DDD! I can’t help myself! I love solving difficult community problems through interface–it gives me the biggest design hard-on ever. Like, just before FAP closed, there was a huge surge of users…which directly affected the quality of comments on the site.

It always seems like the more popular something becomes the more noise there is to wade through.

Current solutions around the web are comment rating systems for comments (eg, this is a 5-star comment), authority systems for users making comments (like, the more comments you make the higher your rank)…but, these all seem pretty arbitrary. One of my biggest goals was to promote a commentary-rich community through the interface. Commenting was painless, and the resulting comments were laid out to prevent lame comments (my favourite: newest comments on top prevents that stupid “FIRST” comment).

ANYWAY.

One of my favourite new features to improve the quality of comments is inspired by XKCD’s ROBOT3000:

Every comment is unique.

That means there would only be one “FIRST!” one “Thanks for the watch!” one “+fav”. The comments would still post, but they’re ranked lower. More “complex” comments (calculated by length, reading difficulty, emoticon use, spelling, etc) are ranked higher.

Suddenly, good comments aren’t just something you do when you’re bored at 2AM and can’t sleep. If you want to be noticed on the site, you have to articulate. Thoughtful commentators are rewarded. They’re ranked on the leader board as a reward for their contribution to the community.

Competition and attention are the most compelling forces in a community.

Can anyone imagine what would happen if fChan implemented this? Or Youtube?

Taste Captcha

Here is my idea.

Instead of using lame word CAPTCHAs, I want to build a CAPTCHA that pulls the aggregate most funny and least funny images from http://thefunniest.info/

The CAPTCHA will present the user with 3 images. Only one of them is funny.

I used to be against using CAPTCHA that could discriminate against taste or mentally retarded people, but if you don’t think this is funny, you must be a robot.

I wish http://thefunniest.info/ had an API so I could whip this up right now :(

Logo work: Boy Country

I feel like every movie uses this font. The trick was to make it elegant and modern to stand out from other Collegiate-branded films.

I’m a big fan of the star motif and look forward to using them throughout the DVD packaging design.

Design Dilemma

studiomoh.com is going through some serious re-designs. I keep waffling on a fluid layout, fixed layout, vertical column VS horizontal, single-page VS segmented content…ugh.

Design dilemma.

Please excuse the current iteration of studio moh while I rest on the design.

Pure CSS LightBox, no Javascript (now supports IE5+)

Click here to preview the CSS LightBox

Finally, a lightbox that doesn’t require Javascript! And now it support IE5+!

The core of Multi-state CSS is the :target pseudo selector. When a user clicks a page-anchor the :target pseudo selector is activated, revealing the lightbox element.

IE5+ doesn’t support the :target pseudo selector, but it does support CSS expressions. With this in mind, we can write a carefully crafted expression that mimicks :target.

Here’s the code:

div.lb {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
text-align: center;
background: url('screen.png');
}
div.lb:target {
display: block;
}
 
/** IE doesn't support :target, so we use CSS expressions **/
div.lb {
display: expression((document.location.toString().split('#').slice(1) == this.id)?'block':'none');
}

Click here to preview the CSS LightBox