Almost two months ago I did this little thing. I was looking at some CSS3 animations and I wanted to try something out so I did this iPhone simulation. It’s basically a bunch of icons in a grid just like on the iPhone and you can click and hold and the icons starts wiggle and you can move them around and delete them. This is made with very little jQuery and some CSS3. Works best in Chrome, as always.

http://nyc-kids.com/iphone/

Dont have time reading all this? Download source here

For your fullscreen flash website to look as you want in every resolution you need to use dynamic positioning of your movieclips. I and Henrik Porseland put together this yesterday, most for our own sake but also to share with others. It’s a simple class where you can place object just by typing “left” and “top” och “middle” and “bottom”. Let me show you some examples of what you can do!

First of all you need to import the class into your project and set some stage properties. Do that by this code:

import com.blacksmiths.DynamicPositioning;
var position:DynamicPositioning = new DynamicPositioning();
var setPosition = position.setPos;

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

Now you need a resize handler for your object to change position when window is resized. Add this to the bottom your code:

function resizeHandler(e:Event){
	// Nothing yet
}
stage.addEventListener(Event.RESIZE, resizeHandler);
stage.dispatchEvent(new Event(Event.RESIZE));

To position your objects just add this in your resizeHandler function:

position.setStageSize(stage.stageWidth,stage.stageHeight);

setPosition(box1, "left", "top");
setPosition(box2, "right", "top");
setPosition(box3, "left", "bottom");
setPosition(box4, "right", "bottom");
setPosition(box5, "middle", "middle");

This code will place the objects exactly like the image on top of this post. One in every corner and one i the middle. Just like the code saids!
You can tweak it how you want it. Place by number or word or both. Here is some examples how you can use the Class:

setPosition(box, "middle", "bottom-20"); // center and 20px from bottom
setPosition(box, "right-100", 20); // 100px from right and 20px down
setPosition(box, "right", "top"); // in the top right corner

For this to work you need to download the class, for an example just download the source.
It’s very easy and quick to use. Please try it out and we’ll be happy for some feedback.

Download source for DynamicPositioning

Thank you!

Check out the demo here: http://theodesign.se/examples/microphone-as3/

This is a very simple example of how to get activity level of the microphone in Flash, Actionscript 3.
Using the microphone on the web is a simple way of doing the experience for the user a lot more fun. We used this for ledighetdeluxe.se where we blowed confetti online using the microphone. It’s cool and simple!

Here is the code I used for the example above, as you can see it’s not much!

var myMic:Microphone = Microphone.getMicrophone(); // detect microphone
myMic.soundTransform = new SoundTransform(0, 0); // removes the sound from mic
myMic.setLoopBack(true); 

stage.addEventListener(Event.ENTER_FRAME, getMicrophone);
function getMicrophone(e:Event){
	bar.width = myMic.activityLevel*6.8; // get the activity level (0-100) and set width
	percent.text = "Activity: " + String(myMic.activityLevel) + "%";
}

Simple huh?
Download source file here

I am very interested of what jQuery can do and the plugins there is keeps impressing me. I saw the world cup site Twitter did and at the top they were using some kind of dock with the flags of the teams. When I and Henrik Porseland were coding whatisxv.com we wanted a dock with students but the time ran out and we forgot about it.

But now I found jqDock! It’s very easy to use and i will show a very simple example here. You can do both horizontal and vertical dock menus and custom the looks of it very very easy. As I said before I wanted a dock menu with all the students in my class.

Take a look a the Demo I did

This is how I did it:
First of all to use this wonderful plugin you need jQuery v1.2.3 or later. And then you can download the plugin here.

Start with link the files in your <head> tag. Link in the jqDock source (full or compressed) after jQuery itself as in the example below:

<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='jquery.jqDock.js'></script>

Create a div and put an ID or Class on it. Then fill it with images that you want in your dock menu. In my example:

<div id="dockmenu">
...
<a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a>
<a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a>
<a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a>
...
</div>

To convert your HTML into a Dock, simply call the jqDock function.

<script type="text/javascript">
$(document).ready(function($)  {
	$('#dockmenu').jqDock({align:'bottom', size:65, labels:true});
});
</script>

This code will make the menu expand from the bottom and up and every picture will have a label on it. You can see it in my example.

It’s very easy to style your dock menu as well. Here is the CSS for my menu:

div.jqDockWrap{margin:0 auto;}

div.jqDockLabel {color:#fff;background:#000; font-family:Myriad Pro; padding:4px;
font-size:11px;font-weight:normal;margin-top:-25px!important;white-space:nowrap;}

div.jqDockLabel a, a:hover, a:visited{color:#FFF; text-decoration:none;}

#dockmenu{clear:both;display:block;width:100%;position:absolute;text-align:center;
left:0; bottom:0px;}

#dockmenu img{padding:1px;float:left;display:block;}

Good Luck creating your own dock menu with jqDock!