Demo

http://jsfiddle.net/leethelobster/VyH3h/
Download Files [github]

HTML

1
2
3
4
5
6

<ul>
  <li class="afroGirl"></li>
  <li class="sikh"></li>
  <li class="ninja"></li>
  <li class="afroGuy"></li>
</ul>​

SASS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

li { list-style: none; height: 150px; width: 150px; display: inline-block; }

/* icon sprite */
$humans: afroGirl, sikh, ninja, afroGuy;
$i: 0;
@each $human in $humans {
  .#{$human} {
    background: url("../humans.jpg") no-repeat $i 0;
    cursor: pointer;
    &:hover {
      background: url("../humans.jpg") no-repeat $i -150px;
    }
  }
  $i: $i - 150px;
}

CSS equivalent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

li { list-style: none; height: 150px; width: 150px; display: inline-block; }

/* icon sprite */
.afroGirl {
background: url("../humans.jpg") no-repeat 0 0;
cursor: pointer; }
.afroGirl:hover {
background: url("../humans.jpg") no-repeat 0 -150px; }

.sikh {
background: url("../humans.jpg") no-repeat -150px 0;
cursor: pointer; }
.sikh:hover {
background: url("../humans.jpg") no-repeat -150px -150px; }

.ninja {
background: url("../humans.jpg") no-repeat -300px 0;
cursor: pointer; }
.ninja:hover {
background: url("../humans.jpg") no-repeat -300px -150px; }

.afroGuy {
background: url("../humans.jpg") no-repeat -450px 0;
cursor: pointer; }
.afroGuy:hover {
background: url("../humans.jpg") no-repeat -450px -150px; }

Resources

• icons
• awesome sass resource by Brandon Mathis

• Ok, so by default, ‘FLARManagerExampleLauncher.as’ is calling ‘FLARManagerTutorial_Collada_Away3D’. We’ll comment that out and call ‘FLARManagerTutorial_Collada_PV3D instead’.

• Put your new DAE file in your Adobe Flash Builder folder. FLARManager > resources > assets. The Adobe Flash Builder folder is usually located in your ‘documents’. You can see the location at the top title bar of flash builder.
• Back to Flash Builder. On the sidebar, go to src > examples > FLARManagerTutorial_Collada_PV3D.
• On line 97, change ‘scout.dae’ to your DAE file name. In my case, ‘plane.dae’. You can change the rotation and the scale too (lines 98-100). Save.

• print out the markers located inside the FLARManager Folder – FLARManager > resources > flarToolkit > patterns > patterns01.pdf
• Now click the play button, show the marker and you’re done!

Crockford on JavaScript

Volume One: The Early Years (Monday, January 25, 2010)

“Douglas Crockford puts the JavaScript programming language in its proper historical context, tracing the language’s structure and conventions (and some of its quirks) back to their roots in the early decades of computer science.”

Chapter 2: And Then There Was JavaScript (Friday, February 5, 2010)

“Yahoo!’s JavaScript architect Douglas Crockford surveys the features of the JavaScript programming language.”

Act III: Function the Ultimate (Wednesday, February 17, 2010)

“Yahoo!’s JavaScript architect Douglas Crockford continues his lecture series on the JavaScript programming language with a discussion of functions in JavaScript. “Functions are the very best part of JavaScript,” Crockford says. “It’s where the power is, it’s where the beauty is.” Watch the video to learn why.”

Episode IV: The Metamorphosis of Ajax (Wednesday, March 3, 2010)

“Yahoo!’s JavaScript architect Douglas Crockford continues his lecture series on the JavaScript programming language with an analysis of the Document Object Model (DOM) and an exploration of Ajax.”

Part 5: The End of All Things (Wednesday, March 31, 2010)

“Yahoo!’s JavaScript architect Douglas Crockford concludes his five-part lecture series on the JavaScript programming language with a review of issues related to security and performance in JavaScript.”

Scene 6: Loopage (Friday, August 27, 2010)

“Software development is hampered by a specific set of design mistakes that were made in the first programming languages and repeated in everything that has been done since. And, somewhat miraculously, JavaScript is going to make it right, radically transforming the way we write applications. Again. In the Loop of History, it has all happened before, but it has never happened like this. This is why you should care about the emergence of server-side JavaScript and the excitement around projects like Node.js — not because they’re at the sharp end of a trend, but because they’re paving the road toward the next big revolution in software.”

Level 7: ECMAScript 5: The New Parts (Tuesday, March 29, 2011)

“In Level 7 of the Crockford on JavaScript series, Yahoo! JavaScript architect Douglas Crockford outlines the changes made to the language in the 5th edition of the ECMAScript standard.”

Section 8: Programming Style and Your Brain (Thursday, November 3, 2011)

“In this keynote talk from YUIConf 2011, Yahoo! JavaScript architect Douglas Crockford drops some science to explain why code style is important in programming — particularly in JavaScript — and how tools like JSLint can help.”

Douglas Crockford three-course sequence

Douglas Crockford: The JavaScript Programming Language

“In this 2007 presentation at Yahoo!, which is meant to be the beginning of a three-course sequence (followed by “Theory of the DOM” and then “Advanced JavaScript”), Douglas Crockford explores not only the language as it is today but also how the language came to be the way it is.”

Douglas Crockford: An Inconvenient API – The Theory of the DOM

“In an internal tech talk at Yahoo!, Douglas Crockford delves into the sordid history of the DOM: that “vast source of incompatibility, pain and misery” that frontend engineers love to hate.”

Douglas Crockford: Advanced JavaScript

“In this presentation (the third of a three-part series) Douglas Crockford looks closely at code patterns from which JavaScript programmers can choose in authoring their applications. He compares familiar constructs like the Pseudoclassical Pattern with more unique patterns like the Parasitic Pattern that (he argues) run more “with the grain” of JavaScript.”

1. Go to Camera Roll
2. Click on the icon on the upper right
3. Select Items you want to send
4. Click “Share” At the bottom left
5. Click “Email”

Tada! There you go! Hope this helps somebody. :)

Before Flash CS5.5 came out with air for iOS, we were stuck with the flash packager for the iphone. Flash packager was cool but was slow and laggy, especially for animations. A couple months ago, Adobe released CS5.5 with air for iOS! It’s supposedly 4x faster than the previous version… So I tried it out! True enough, it’s sooo much better. Kudos, Adobe!

Watch the video above for the comparison. The improvement is remarkable but I would also credit the hardware I used.

• Left: I used iPhone 4, and published the app using Flash CS5.5 and Air for iOS.
  
• Right: I used iPhone 3G, and published the app using Flash CS5 and Flash packager for the iPhone.

iPhone 3G is slow in general… really slow compared to the iPhone4. So, that definitely played a role in the speed of the app. Another thing to note is that the new air for iOS does not work with the iPhone 3G so I wasn’t able to test it out on that particular device. But, whatever, the new thing… IT’S FASTER!

Adobe Air 2.7 – 4x faster for ios

• AIR 2.7 now available for desktop, Android, iOS and Blackberry Tablet OS.
• Adobe Air 2.7 Now Available: iOS apps 4x faster!
• More informations about Flash Player 11, AIR 2.7 and above
• Adobe AIR 2.7 Developer Release Notes

Flash phone gestures

• iPhone, Mobile, and Flash Lite Tutorials
• Adobe AS3 reference – TouchEvent
• Multitouch and gesture support on the Flash Platform
• Flash CS5 Tutorial on Actionscript 3 Gesture Events for Mobile or Touch-Enabled Devices

Packaging iOS for Flash Builder 4.5 / Testing on Device

• Build iOS applications with Flex and Flash Builder 4.5.1
• Using Flash Builder 4.5 to package applications for Apple iOS devices
• Flex/AIR for iOS Development Process Explained!

Optimizing content

• Optimizing content for Apple iOS devices
• Optimizing Your Flash Content for iPhone

P.S. Flash Catalyst is awesome – it’s perfect for simple flash applications such as websites and simple games. No coding necessary!! It also gives you the flexibility to export it to Flex Builder if you wanna add code. I’ll be posting something soon about it. If you wanna learn more about it, check out Adobe video tutorials at http://tv.adobe.com/show/learn-flash-catalyst-cs5/.

The Idea – A FUN networking application

After about a month of brainstorming, we came up with a solid theme for our installation – that is, networking! Inspired by the Nokia Siemens Cloud installation photos, we came up with an idea where users can use augmented reality markers to somehow show their avatar, play with it, and interact with other people. We also wanted to include a fun photobooth installation wherein people can take their photo, manipulate and add “stuff” to it, use it as an avatar in the augmented reality game and share it on facebook. With these in mind, we came up with Snap, Heckle and Bump. Snap your photo, “talk/meet” people and “fist bump” with them!

Technologies involved

• Flash and AS3 – for photobooth interface
• Flash, AS3, FlarToolKit (nyId markers) – for markers to identify each attendee
• php, mySQL – backend database for storing attendee information, number of bumps, bumpee’s and bumper’s
• facebook API – upload pictures on facebook once photo is taken

The Game

So, basically, each attendee had a unique FLAR marker attached to their badge. The game could be played both ways – you can either take your photo first then bump, or you can bump first and take your photo later (or not if you choose not to). The game requires 2 players – each player should show their badge to the camera in order to identify them. Once that’s done, players’ pictures will appear together with their fist avatars bumping, showing that they’ve met or “bumped”. In the end, players will see who wins which is determined by the most amount of bumps. The idea behind this is that the more bumps you get, the higher your score will be, and technically the more people you meet. This brings us back to the “networking” idea.

Another cool thing is that by the end of the conference, we sent out an email of all the people the player “bumped” with – so it’s basically like a virtual business card, but more fun!

Here’s a video of Tyson showing how the game works:

Links

• Participant photos
• Fun group photos
• IMM official blog post
• Website
• Mobile Site

Terms

• FLAR – Flash Augmented Reality
• flarToolKit – this is the API being used for Flash Augmented Reality, made by saqoosha (Japanese)
• flarManager – an API built on top of the flarToolKit to make it easier to use, made by Eric Socolofsky
• .pat – pattern files, needs to be generated in order for the API (flarToolKit) to identify your marker
• nyId markers – new addition to flarToolKit which does not need pattern files, these are predetermined markers which cannot be modified and has numbers associated with them

Getting Started (easiest way) – you will be needing a webcam to make this work

1. Download FLARManager
2. Open flex builder (in my case, I’m using flex builder 4), then go to FILE > IMPORT FLEX PROJECT (FXP)
   
3. A window will pop up, and with FILE selected, click BROWSE, find the zip you downloaded and select that, click finish once you are done
4. You will then see the FLARManager folder on the outline panel (left hand side)
5. Select SRC > default package > FLARManagerExampleLauncher.as — the as file should pop up on the right hand side
6. You will likely see an error message saying “Cannot create HTML Wrapper, right-click….” on the “Problems” panel. To solve this, just right click and select “Recreate HTML templates”.
7. print out the markers located inside the  FLARManager Folder —  FLARManager > resources > flarToolkit > patterns > patterns01.pdf
8. cut out the markers (or not) then go back to your FLARManagerExampleLauncher.as file
9. push the play button and show the markers to the webcam!

Update

Check out part 2 (FLARManager – Changing DAE) on how to change Mario into your own DAE.

According to the Apple site, “Xcode 4 have been redesigned to be faster, easier to use, and more helpful than ever before. The Xcode IDE understands your project’s every detail, identifies mistakes in both syntax and logic, and will even fix your code for you. Quite simply, Xcode 4 will help you write better code.”

We tackled xCode last month – during the first and second week of March… As a result, we used the older version of Xcode, which was Xcode 3.2.5.

We built a simple date picker for iPhones and iPod touches. Overall, it was nice to know that there is such a coding environment that existed. Unfortunately, there are a few limitations that comes with it. For one, Xcode does not work on PCs. It only works on Mac computers – and only for operating systems higher than Snow Leopard. Again, unfortunately for me, my OLD macbook runs on Leopard so I was not able to do it hands on. Although, we, as a class, did a datepicker example.
The example we did looks a little bit like this

Here’s the code for it (using xCode 3.2.5):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

//  DateViewController.m
//  Date
//
// Created by Florence Kwok on 11-03-15.
// because you need a Mac to work on it – so I followed along with a colleague of mine, Florence.
// Copyright 2011 __MyCompanyName__. All rights reserved.
//
#import “DateViewController.h”

@implementation DateViewController
@synthesize myLabel, myPicker;

//This is where we loaded the components we were going to use – “DateViewController”.
/*
// The designated initializer. Override to perform setup that is required before the view is loaded.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
*/

/*
// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView {
}
*/

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
[super viewDidLoad];

NSLog(@”Hi from IMM”); //like trace(“”) in Flash.
}

- (IBAction)setDate: (id)sender{

//myLabel.text= myDate;

NSDate *myDate2 = myPicker.date;

myLabel.text= myDate2.description;

NSString *myDate = myDate2.description;
NSLog(@”Date Picked = %@”, myDate);

}
//Here we have some simple ‘instance’ field assignments.

/*
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
*/

//Just some error checking.
- (void)didReceiveMemoryWarning {
// Releases the view if it doesn’t have a superview.
[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren’t in use.
}

- (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}

- (void)dealloc {
[super dealloc];
}

@end

Excellent Xcode tutorial Links:

• Xcode 3.0 video tutorial
• Beginning iOS Development: Setting Up The Development Environment by MobileTuts+
• CS 193P iPhone Application Development course – podcasts from Stanford University
• iCode[blog]