I’ve worked with Javascript in the past, but always felt the visual experience you can create in Flash surpassed it. Maybe it’s time to revisit that, and see what’s capable. To that end, I’ve started following the current blog posts at Bit101.com on Javascript. Keith Peters is one of the heavyweights in the Flash communities, I have his books, have seen him talk at conferences, so when he starts blogging about Javascript, you listen. For the month of March, Javascript is the topic of conversation. If you want to follow along, the posts begin here. I’m going to do my best to follow along, but I definitely don’t have the blogging stamina to post about it every day.

I decided to focused in on a simple example, creating a circle. On Day 2 and Day 3, Keith expands on the wireframes objects he initially sets up by adding strokes and line weights. Nothing drastic, a good start. For my example, I focussed my efforts on controlling this minor experience. 3 rings rotating with varying degress of line weights and segments. You can see the end result here.

The addCircle method basically takes an x, y, z positions, the circle’s radius, and the number of segments. The main thing I noticed was how it was rendering these three circles when I started adding weight to the circles. The first circle was a solid color, the default line width, and 10 segments. Once I added, a line width of 5 and 10, I started to see a streak or some artifact that shoots out at the top and bottom of the lines. Event when I crank up the line segments to 1000, that little notch appears. Of course, by ratcheting the numer of lines up, the performance takes a bit of a hit. Better quality versus browser performance rears its head. My variation of the javascript of the circles can be viewed here.

Keith isn’t the first in the Flash community to be exploring javascript, but I’m glad he is. If you want a really good example of Flash gurus experimenting with the potential of Javascript and HTML5, take a look at Grant Skinner’s tower defense game http://www.pirateslovedaisies.com/, it’s pretty impressive. Or even better, poke around the Javascript library he’s developing EaselJS, which is currently in alpha testing.

Keith Peters is speaking at a couple conferences coming up, geekybynature in NY, March 31st and April 1st, and then again June 9th-12th in NY at Flash and the City.

About half way down there’s a check box that needs to be set, next to “XML-RPC: Enable the WordPress, Movable Type, MetaWeblog and Blogger XML-RPC publishing protocols.” It wasn’t checked, but once I checked, I was able to proceed through the process.

Key Points:

• A printed work which cannot be read becomes a product without purpose.
• Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance.
• Information design is not about the use of good typefaces, it is about the use of good typography. Which is a huge difference. Anyone can use typefaces, some can choose good typefaces, but only few master typography.
• It is annoying how different browsers and platforms render fonts, But, well, it is part of a web designer’s job to make sure that texts are easy and nice to read on all major browsers and platforms. Correct leading, word and letter spacing, active white space, and dosed use of color help readability.
• “text as a user interface”. Have a look at Khoi Vinh’s website,

Read the full article

This is a simple setup using a query string to let the Flash player know where the data is. It only works if the url to the page has this appended to the end, for example: some-page.html?ofc=data-files/bar-2.txt If it’s not included, it won’t load the data. The open-flash-chart.swf automatically looks for certain things, in order to load the data. In this case, it’s “ofc” and the path to the data. No attributes needs to be specified, like an id or name, within the embeded player for it to know what “ofc” is. If you don’t want to the page to have the query string visible, then you would have to set up a separate page with the chart, and use an iFrame to insert it into the designated page. With the object/embed method, no javascript libraries are needed.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
			swflash.cab#version=8,0,0,0"
   width="500" height="250" id="graph-2" align="middle">
 	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="open-flash-chart.swf" />
	<param name="quality" value="high" />
	<embed src="open-flash-chart.swf"
	   quality="high"
	   bgcolor="#FFFFFF"
	   width="500"
	   height="250"
	   name="open-flash-chart"
	   align="middle"
	   allowscriptaccess="sameDomain"
	   type="application/x-shockwave-flash"
	   pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

This method uses SWFobject to insert the open-flash-chart.swf on the page

Using a query string and SWFobject works the same way as using the object//embed method. SWFobject is a light weight unobtrusive javascript file that simplifies the insertion of the file onto the page. It allows you to use alternate content in the case that the user doesn’t have javascript or flash installed. In this case, using a screenshot of the chart would be the simplest. It depends on the data being presented. If you want to go the long route for accessibility and SEO purposes, having the equivalent data in an html table would work.

CODE:

<script type="text/javascript" src="scripts/swfobject2.js"></script>
<script type="text/javascript">
	var flashvars = {};
	var params = {allowScriptAccess:"sameDomain"};
	var attributes = {name:"open-flash-chart"};
	attributes.id = "my-graph";
	swfobject.embedSWF("open-flash-chart.swf", "my-chart",
				"500", "250", "8.0.0", "/expressinstall.swf",
				flashvars, params, attributes);
	</script>
   <div id="my-chart">
	<p>Alternate data or chart image goes here if flash not found, 	or if javascript turned off</p>
	</div>

• The mooWalkthrough
• 30 Days of Mootools 1.2
• Increasing User Experience With Javascript

Three key points that were emphasized:

• Clarity over persuasion or spin, is the reason to move on to the next line.
• Relevance to the audience, communicate it. Connect the value proposition between elements, from headline to sub-header to paragraph to the call to action.
• Credibility is key when a person is inundated with emails.

Watch the full presentation.

• The application interface should be fast and non-blocking.
• The application interface should be consistent.
• Don’t interrupt users in the middle of common, nondestructive tasks.
• Avoid notifying users of success.
• Avoid giving users information that they cannot use.
• Rare, destructive actions should be harder to complete than nondestructive ones, but always possible.
• Give users the chance to ask for forgiveness rather than forcing them to confirm.
• Deal with application failure gracefully.
• Preserve state, mode, and user input for as long as it is relevant, until users save or discard it.
• Provide multiple, complete navigation paradigms.
• Design the interface before starting to code.
• If the application violates one of these rules because its design makes implementation of a better interface too complex or too difficult, then the application needs to be refactored until it supports a better interface.

An old article from 2001 I came across on Scientific American by Tim Berners-Lee, James Hendler and Ora Lassila about the semantic web.