In the Youtube as3/Flex integration the hard stuff is the communication, the official Youtube player is written in as2, hence, we can’t communicate with it from as3 easily.

There’re a couple great implementation of this but all of them have some sort of drawback.

The best implementation I found is TubeLoc, which is great but it’s unstable on my mac, it totally kills it after a while.

Besides this, I had one more requirement, I’d play more than one video simultaneously.

I tried, I tried hard to use one of the implementations, but I couldn’t. So I have to write my own version.

It’s quite straightforward and I put all of the code to GitHub, http://github.com/yikulju/youtube-as3-integration/tree

Check out the YoutubePlayer.mxml file.

We came across a difference in rendering images between Firefox and Safari. The colors of the created design was fine on Firefox but it was totally different on Safari.

After a while we started to think about color schemes and that was it. The background and the tabs have different kind of color settings because the first one was created on a mac and the tabs were created on Windows XP.

Unlike Firefox (3.0), Safari is able to render colors according to the set schema, which is nice after you know this.

Here a great article about this topic.

To start with, I go back to the beginning.
One of the main advantages of using some kind of chaining is the fact that it describes asynchron method callings in a clear, and concise way. It is also helpful to describe synchron processes.

1
2
3
4
5
6
7
8
9
10

First
getFont("arial")
then
getFont("verdana")
then
getFont("myriad")
then
getResource(12)
and finally, when everything finished
getPresentation()

1
2
3
4
5
6
7

(new Chain(this)
  .begin
    .getFont({ fontName: "arial", fontURL: "/fonts/arial.otf" })
    .getFont({ fontName: "verdana", fontURL: "/fonts/verdana.otf" })
    .getFont({ fontName: "myriad", fontURL: "/fonts/myriad.otf" })
    .getResource({ id: 12 })
  .end(getPresentation)

1
2
3
4
5
6
7
8
9

(new Chain(this)
 .begin
   .forEach([{ fontName: "arial", fontURL: "/fonts/arial.otf" }, 
                 { fontName: "verdana", fontURL: "/fonts/verdana.otf" }, 
                 { fontName: "myriad", fontURL: "/fonts/myriad.otf" } ])
	.loadFont()
   .end
   .getResource({ id: 12 })
  .end(getPresentation)

To have the big picture, let’s presume we have a class which has 4 methods.

init() loads the fonts, the resources and finally the presentation
getFont() loads one particular font
getResource() loads a resource
getPresentation() loads one presentation

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

public function init():void
{			
  (new Chain(this)
    .begin
	.forEach([{ fontName: "arial", fontURL: "/fonts/arial.otf" }, 
                      { fontName: "verdana", fontURL: "/fonts/verdana.otf" }, 
                      { fontName: "myriad", fontURL: "/fonts/myriad.otf" } ])
	        .loadFont()
	.end
	.getResource({ id: 12 })
    .end(getPresentation)
}
 
private function getFont(parameters:Object):void
{
	var fontName:String = parameters.fontName;
	var fontURL:String = parameters.fontURL;
 
	var callback:Function = parameters.completeHandler;
 
	...
 
	callback();
}
 
 
private function getResources(parameters:Object):void
{
	var resourceId:String = parameters.id;
 
	var callback:Function = parameters.completeHandler;
 
	...
 
	callback();
}
 
private function getPresentation(parameters:Object):void
{
	var preziId:String = parameters.id;
 
	var callback:Function = parameters.completeHandler;
 
	...
 
	callback();
}

The Chain has only one parameter which is the context (from which some methods will be invoked).

The methods get an object as a parameter from which they can access the parameters they require. For instance, the getFont gets a fontName and a fontURL parameters.

The completeHandler is kind of a special parameter, it filled by the Chain and should be invoked when the method finishes.

It starts to look like a DSL, what do you think?

I hope, soon I put the code and it’s documentation to the google code.

You can download the code from here

Recently, I’ve been working on the ZuiPrezi client side backend and there are loads of asynchronous requests for resources, which are, to be precise, a pain in the arse.

For instance, if I need “Arial” and then “Verdana” and then a presentation in this order, I would write something like this:

1
2
3
4
5
6
7
8

backend.getFont("arial", function(data:Font):void
{
 
	backend.getFont("verdana", function(data:Font):void
	{
		backend.loadPresentation(12)
	})
})

Pseudo solution

The way I would describe it in pseudocode could be like this:

1
2
3
4
5

getFont("arial")
then
getFont("verdana")
then
getPresentation(12)

AS3 solution

Let’s make it more AS3 like:

1
2
3
4

new Chain( { arg: "arial", command: getFont }, 
                 { arg: "verdana", command: getFont }, 
                 { arg: 12, command: getPresentation }
);

Although it works, I don’t like the syntax very much. We can make it better.

1
2
3
4
5

(new Chain()
		.execute("arial", loadFont)
		.execute("verdana", loadFont)
		.execute(12, getPresentation)
);

Parallelism

One more thing, does it support parallelism, It does.

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

(new Chain()
	.begin
		.execute("arial", loadFont)
		.execute("verdana", loadFont)
		.execute(12, getPresentation)
	.end
	.begin
		.execute("helvetica", loadFont)
		.execute("futura", loadFont)
		.execute(1, getPresentation)
	.end
);

Here you can download the sourecode.

Finally, If I want to sum up how it works, here is an overall figure:
Everything within begin - end happens synchronously, one by one,
and every begin - end pair runs simultaneously.

What do you think?

Finally, there is an interesting article by John Resig about Chaining with JQuery.

It was in 2006 when I discovered podcasting and found Paul Boag’s web design podcast. Since then I’ve listened to loads of audio and video podcasts and now I’ll try to sum up and share my experiences of the past two years Here is my fave list.

• Boagworld is the longest running web design podcast hosted by Paul Boag and Marcus Lillington. The show is a mixture of web design news, features and interviews with prominent figures within the web design community.
• The Java Posse Java News, interviews and fun.
• RIA Weekly is a podcast with Michael Coté from Redmonk and Ryan Stewart, Platform Evangelist at Adobe, and the occasional guest.
• Audible Ajax Ben and Dion of Ajaxian.com discuss topics around AJAX and JavaScript.
• YUI theatre Great presentations on JavaScript and web development in general, hosted by Yahoo.
• The Google Developer Podcast features interesting news in the developer world from a Google perspective.
• The Flex Show is a podcast about Adobe Flex and Adobe AIR through expert interviews.
• Hanselminutes is a weekly audio discussion on ASP.NET and Windows issues and workarounds.
• Herding code Herding Code is a weekly podcast on software development. Featured topics were Silverlight, AJAX Frameworks and browsers.
• In the Open Web Podcast Dion Almaer of Ajaxian.com, John Resig of Mozilla, and Alex Russell of Dojo discuss news and events coming in from the Open Web community.
• Read/WriteTalk is a weekly show that interviews thought leaders from across the web.
• The Boxes and Arrows Podcast interviews authors from the site as well as other professionals in the field of Information Architecture, Interaction Design, and User Experience from around the world.
• Citizen Garden is a podcast covering identity, social networks, standards, and the web in general.
• Voices that matter is a video podcast with web professionals.
• UIE Brain Sparks covers the latest insights from User Interface Engineering on the world of design.
• UXPod is a free-ranging set of discussions on matters of interest to people involved in user experience design, web design, and usability in general.
• Pixel8 is a kind of Microsoft podcast on user experience.

• Designing minds is an enhanced podcast series showcasing the creative leaders of the design industry.
• Gestalten.tv offers video podcasts on all areas of contemporary visual culture, including graphic design and typography, product and furniture design, architecture, photography, art and more.
• Voices of design is a series of audio and video interviews with creative professionals who discuss their work, inspiration and influences
• Advanced Beauties is an ongoing exploration of digital artworks born and influenced by sound, an ever-growing collaboration between programmers, artists, musicians, animators and architects.

There is also an interesting article at Smashing magazine about podcasts which is worth checking out.

• Iminlikewithyou is a platform that enables the creation and distribution of fun, arcade style, multi-player games. iminlikewithyou’s games are match-based, approachable, and very social.
• Red Bull Flight Lab lets you create an airplane in 3D and fly it in a flight simulator. You can share your creations in a community and modify existing planes done by other users.
• Market Replay Market Replay is an extremely powerful replay and analysis tool, allowing users to view the consolidated order book and trade data at any point in time. Market Replay provides access to quote and trade detail unmatched in the industry today. The Market Replay application enables users to replay the market in simulated real-time or at an accelerated/decelerated speed and zoom down to the millisecond level. Investors can validate the quality of their trades.
• The newly designed www.schematic.com signifies an important advancement in Web development and navigation. Built entirely in Flash and Flex, and challenging the traditional means of navigation, the site gives users an exceptional amount of control over their individual experiences.
• DirectgovKids has been developed to explain the crucial role that government plays in children’s lives. Developed in collaboration with the Department for Children, Schools and Families, it represents a child’s eye view of the world, helping children understand how central government services impact their lives, community and environment at a local level. The site operates as the government’s main communication channel with children from 5 – 11 years old, helping government deliver key messages to this age group.
• The “D&G Fashion Channel” project represents a new direct communication channel between the company and its customers: it has the aim to realize a new way of interaction and contact with the Dolce&Gabbana audience, using mobile devices in order to follow the users in their real life. “The D&G Fashion Channel” provides a new mobile Flash based fashion experience combining a very fashion oriented interface with a great selection of D&G branded contents.
• Blablaland is a “Massive Multiplayer Online Tchat based Game”, a new concept of entertainment for teenagers, playable on Internet via the Flash Player. Blablaland is a huge universe, attractive and colorful. There is no specific aim, which allows the user to do whatever he wants: he can simply talk with is friends, or have fun using lot of magical objects, discovering the world that always changes depending on seasons, weather, and time of the day.
• EarthBrowser is a virtual globe available as a desktop AIR application and an embeddable Flash component.
• ChessCube is a free-to-join social network (160,000 users to date) for chess players to play chess (28,000 games per day to date), chat, form clubs, and analyze live games or stored games.
• The Hobnox AudioTool is a virtual online music studio. Artists can create songs, remix others or share them with the community - all without the requirement of an installation.
• The purpose of TweetDeck is to turn the Twitter feed into something more manageable. By breaking the “fire-hose” into smaller elements, defined by the user, you can now efficiently follow many twitter friends and now miss that important tweet.
• Creativity Express is an interactive visual literacy software for students in grades 2-8. The program is a blend of animated storytelling and interactive activities that teach the principles of art, and provide the tools for creative self expression.
• TrainingPeaks is a training and nutrition log used by everyone from elite Tour d’ France cyclists and Ironman athletes to general users interested in health and fitness. The application is used by both fitness professionals and self coached users to monitor, analyze and plan all sorts of physiological data. The system supports data upload from heart rate monitors, gps systems, power meters and UPC bar code scanners.
• http://www.monsterlabthegame.com/ is a promo site of a new EIDOS game Monsterlab. The target market being 8-12 year olds.

• Mingoville is the world’s most comprehensive online English course for children aged 5-12. The program was developed with the intention of giving children all over the world a superb learning experience.
• Mondiso is an online math e-learning product. It is aimed children in the first three years of primary school – children aged 6 – 10 years.
• Pitropolis is an online math e-learning product. It is aimed children in the last three years of primary school – children aged 12 – 16 years.
• The Color Chart site was created in conjunction with the exhibition Color Chart: Rethinking Color, 1950 to Today at The Museum of Modern Art, New York. The site captures the playful spirit of the works in the exhibition while providing useful information for visitors to the exhibition prior to and after visiting the museum. The goal was to make a site that would engage visitors of all ages.
• SmallWorlds is a new browser-based, free-to-play virtual world aimed at teens and adults. It sits at the intersection of web2.0, social networking, and entertainment, and wraps them all into a virtual world environment that breaks significant new ground in accessibility.
• Website redesign for NJ REBEL, a statewide, youth-led, anti-tobacco movement dedicated to educating peers and the community about the dangers of smoking. NJREBEL.com features everything from video tour guides, a Facebook game, student-led blogs, rankings for smoking facts and video parodies. However, the technology in this case was not an end onto itself, but a method by which teens would to relate to REBEL’s anti-smoking message.
• Scrapblog is an online digital scrapbooking application that allows anyone to quickly and easily share their stories in a creative way. Scrapblog aims to make it easier to do creative things with your photos and video.
• Sherwood Dungeon is a free 3D massive multiplayer online role playing game you play in your web browser with no registration or download required.
• Floorplanner.com is online application to create and share interactive floor plans both 2D as 3D. With a simple but powerful online toolset anyone can create an accurate, architectural floor plan of their room, house or office within minutes and rearrange furniture without breaking a sweat.
  
  The latest version of Floorplanner can be found at http://beta.floorplanner.com/demo