Live Blogging Overnight Website Challenge

Time is of the essence so this will be a quick post.

Summary:
Twelve teams of web professionals donating 24 hours of their time to build complete web solutions for non-profit organizations: Overnight Website Challenge.

Our Team:
The Mighty Polymorphin Power Rangers: Extra Awesome – link

Our Non-Profit:
The non-profit assigned to our team is YEA Corps. YEA Corps mission is to empower young people with financial literacy, as well as positive environmental and healthy practices through service learning / social networking skills to sustain a healthy prosperous life.

YEA Corps does not currently have a web page so we are starting from scratch with a team of eight developers and two designers. After an hour of reviewing requirements with the client we decided to go with WordPress for our implementation. We will be integrating various WordPress Plugins, Flash Components, Google Apps, Analytics, Mailing Lists, Social Networking, and Donations on the site.

Tools:
We are using sticky notes for the site map, marker boards for requirements, and activeColab for project management. Current milestones are set for 6:00PM, 12:00AM, and 6:00AM. Stay tuned for our final product!

Visit the YEA Corps website here.

Display TwitPic Images in Flex & AIR

Problem:
The TwitPic API does not currently support outgoing requests and the image source from amazon aws contains an AWS AccessKeyId, expiration time stamp, and signature. This would normally require a regular expression to rip the source JPG path out of the HTML. Ripping the source out of the HTML is a bit of a pain and is not a long term solution. It is possible to use the following shortened url to gain access to the full image path using the TwitPic image id.

Solution:
Use this url to gain access to the full http://twitpic.com/show/full/s0z4.jpg and thumbnail http://twitpic.com/show/thumb/s0z4.jpg images (replace the s0z4 with your image id). Notice that this shortened path returns the longer url that would normally have to be ripped out of the HTML to gain access to the image.

<mx:HTTPService
	id="rssParse"
	url="php/twitpic.php"
	result="processResult(event)"
	resultFormat="e4x" />
<?php
  $twitter_feed = 'http://twitpic.com/photos/chrisjblack/feed.rss';
  $rawfeed = @file_get_contents($twitter_feed);
  print $rawfeed;  
?>
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
  
[Bindable]
private var _rssResults:ArrayCollection;

// Define and use atom namespace.
private namespace atom = "http://www.w3.org/2005/Atom";
use namespace atom;

private function processResult(event:ResultEvent):void
{
	var xmlList:XMLList = event.result.channel.item as XMLList;
	for each(var item:XML in xmlList){
		// Formatt the date
		var myDate:String = item.pubDate;
		myDate = myDate.slice(0,22);
		
		// Pull the image id out of the link url
		var imageId:String = item.link;
		imageId = imageId.replace("http://twitpic.com/", "");
		
		// Push the results into our data array
		_rssResults.addItem({title: item.title, date: myDate, id: imageId});
	}
}

private function init():void
{
	_rssResults = new ArrayCollection();
	rssParse.send();
}
<mx:VBox width="900" height="500" horizontalAlign="center">	
	<mx:Label styleName="subTitleText" text="Twitter Feed:" fontWeight="bold" fontSize="16"/>
	<mx:VBox height="450" width="800" verticalScrollPolicy="auto" horizontalScrollPolicy="off" horizontalAlign="center">
		<mx:Repeater id="twitter" dataProvider="{_rssResults}">
			<mx:Text textAlign="center" width="300" text="{twitter.currentItem.date}"/>
			<mx:Text textAlign="center" width="300" text="{twitter.currentItem.title}"/>
			<mx:Image source="http://twitpic.com/show/thumb/{twitter.currentItem.id}.jpg" />
			<mx:Image source="http://twitpic.com/show/full/{twitter.currentItem.id}.jpg" />
		</mx:Repeater>			
	</mx:VBox>	
</mx:VBox>	

This allows for Adobe AIR applications to post to (Post to TwitPic from Adobe AIR) and retrieve images from TwitPic.

View Sample / Source Files

Links:
TwitPic Previewer

Error Loading Project – Missing Project Files

Problem:
An SVN conflict caused the .flexProperites and .asProperties files to be deleted. This caused Flex Builder to prompt “Error Loading Project” with the message “A problem occurred when opening project “Your Project”. Try quitting and restarting the application. If the problem persists, you might be using an unsupported project version, or your project files might be corrupt.

Put simply, a developer checked in their .properties files, which cause an error when doing an SVN update, and was resolved by removing these files from SVN. The next time anybody did an update on the root directory of the project after the files were removed the local copies where removed.

Error Loading Project

Error Loading Project

Solution:
Add the missing files back to your root directory and use SVN ignore on the .flexProperties and .asProperties files. Best practice would be to set up SVN to ignore these project specific files. It is also important to rename and keep a ‘copy’ of your .asProperties file (for example asProperties, without the dot). This allows new team members to download the project, add the dot and have the project correctly set up.

Has anyone else come across this same prompt using Flex Builder 3 and found a different cause / solution? Please post a comment with any other insight on this error.

I would like to give credit to Clayton (file_cabinet) for coming up with the solution to this problem. Thanks Clayton!

Links:
Subclipse
Tortoisesvn

Flash Player 10: 48KHz Sound Playback Bug

Update (2/25/2008): This bug has been fixed as of Flash Player version 10.0.22.87. Download the new version from Adobe: http://get.adobe.com/flashplayer/

Problem:
Flash Player 10 distorts sounds sampled higher than 44KHz when using the loadSound function within ActionScript 2.0. This is a problem since many of the Flash mp3 players that exist today are written with AS 2.0 using this function: soundContainer.loadSound(urltoplay, true);

Solution:
There are three solutions to this problem. One is to re-sample all of your audio down to 44KHz, which very few people are willing to do. Adobe’s official fix is to set the stream property on the loadSound method to false, however, with this fix users must wait until the sound is completely loaded before they will hear anything.

That brings us to the third and in most cases, the best solution: re-write the audio player in AS 3.0. To start lets take a look at how AS 2.0 handles mp3 playback…

var my_sound:Sound;

var song = "demo.mp3";

function playMusic ()
{
    my_sound = new Sound();
    my_sound.loadSound(song, true);
}

function stopMusic ()
{
    my_sound.stop();
}

Simple enough. The problem is that if a user has Flash Player 10 and tries to play a 48KHz sampling rate the sound is distorted and has popping and clicking sounds.

If you are interested in implementing Adobe’s official fix of setting the stream property to false you would have this:

function playMusic ()
{
    my_sound = new Sound();
    my_sound.onLoad = function(success:Boolean) {
        if (success) {
            my_sound.start();
        }
    };
    my_sound.loadSound(song, false);
}

You can try this fix out to see if it will work for your needs. If you prefer to allow your users to continue to stream the audio files as they load, your code would look like this:

import flash.media.Sound;
import flash.media.SoundChannel;
import flash.net.URLRequest;

var song = "demo.mp3";
var snd:Sound = new Sound();
var channel:SoundChannel = new SoundChannel();

function playMusic(songSource:String){
    var req:URLRequest = new URLRequest(song);
    snd = new Sound();
    snd.load(req);
    channel = new SoundChannel();
    channel = snd.play();
}

function stopMusic()
{
    channel.stop();
}

If you are concerned about having to re-write a whole mp3 player UI just to fix the audio playback code you may want to consider using javascript to bridge AS 2.0 and AS 3.0. This would allow you to play 48KHz audio files without having to re-write a whole flash mp3 player.

Here is a link to Adobe’s official bug site:
Adobe

ActionScript 3.0 Sound API
LiveDocs

And a couple of people that have implemented this fix:

Mike Breidegam
Noel Webb

Feel free to contact me or leave a comment if you have any questions about this implementation of the Sound class in ActionScript.

A little more information about 44.1 vs 48 KHz audio:
“There is relatively little difference in audible quality between 44.1KHz and 48KHz, since the slight increase in frequency response is outside the range of human hearing.” And, “the improvement from 44.1 to 48 is marginal at best.” However, “It also happens to be fairly difficult to do a good conversion from 48KHz to 44.1KHz…”

Why 44.1KHz? Why not 48KHz?