Samuel Wan : News, Information and Resources

Expression by Proxy Source Code!

If you haven't visited my almost-award-winning project, "Expression by Proxy",
you should check it out here. Someone asked about the source code last month, and at my request, he wrote back today to remind me about posting the source code online. I'm still working on the "Tao of Actionscript" book, so I don't have much time to clean up the source file. You'll probably get access to a big zip file by the end of the week. I'm taking a break from writing about Actionscript tonight, so here's the story behind "Expression by Proxy", and why I plan to release the source code:

Back in the summer of 2000, when I'd just graduated from college, my Flash skills were pretty good, and not just in programming either :) I had started freelancing on small projects. I had just received a standing ovation at the Web World conference. I was in the middle of writing for the Flash 5 Magic book. Things looked promising!

The previous two years of college had been very difficult, and I had spent every night for 2 years learning Flash and web development on my own. The fact that I had acquired all this skill and didn't even have my own website seemed a bit ironic. But a website needs solid content, right? My photoshop mentor once told me that every successful design tells a story, but I didn't really have anything to say. Then I remembered an experience recorded in my journal...

My undergraduate degree in health information management requires a 2-month management internship at another hospital. We have to spend time under the mentorshop of a hospital administrator before we're allowed to graduate. So, three months before graduating in 2000, I spent February and March working with the Executive Director of Information Services at the Detroit Medical Center (which is actually a huge group of 8 major hospitals). Let me tell you, management is fun if you don't mind attending spending 6 hours in meetings every day. I have never sat through so many meetings in my life. Most of our time was spent debating about JCAHO compliance, medical records processing, archive management, employee conflict-resolution, medicare / medicaid policies, and more health insurance abbreviations than you can find in a 26 character alphabet!!!

At one of these meetings, I got bored and started writing down what happened at the airport, on my way to Detroit. At the Mississippi airport, I had run into an old high-school friend. She was a professional violinist, and I used to play the viola. We used to play at the same gigs to make good money during high school: professional orchestra performances, christmas chamber music, small quartet performances, church events, etc. Her dad was a music minister and my viola instructor was the head of the local musician's union. Now, Mississippi is not a popular destination for classical musicians, so you'd see the same group of performers at each job. It also helps if your instructor knows all the pros in the state :)

So anyways, I met Leanne at the Mississippi airport, and it turned out we were taking the same flight to Chicago! (I would transfer to Detroit later.) We started reminiscing about our high school days, swapping news about friends we hadn't seen for years. I told her I'd stopped playing classical music for personal reasons after high school. I told her why I allowed my viola technique to deteriorate. It was very inspiring to meet a fellow musician again, to talk about topics few people really care about unless they go through at least 10 years of classical training. For me, the conversation felt like a splash of reality, as I slipped back into a creative mindset that I had thrown away during college.

I don't think I realized how wrong a path I'd chosen until we landed in Chicago. Leanne and I stopped briefly at the Midway airport cafe to chat before she took the train to Kalamazoo. The cafe almost feels like an outdoor venue because the main terminal at Midway airport is an immense hollow structure with high ceilings and brightly-lit windows. The details of what happened are described in "Expression by Proxy", so I won't go into the whole story here. However, the significance of this event is that it woke me up. I was heading into a management career, prepped and molded to climb up the corporate ladder of the healthcare industry. Leanne's music blew away four years of uninspired choices, and I realized these things as I wrote them down during a management meeting in the basement of the Detroit Receiving Hospital.

Several months after graduation, I was working on the Flash 5 Magic book one night, similar to the way I'm working on the Object Oriented Actionscript book tonight. I needed to take a break, wanted to build a complete website for once, and looked in my journal for inspiration. I came back to the description of what had happened in Chicago, and remembered the intensity of the event. To me, the story described a moment in a person's life when a choice is made between the security of docile ambitions and the uncertainty of creative expression. It raises the question of how hard you're willing to work for a dream that doesn't mean much to anyone else, how hard you're willing to work for your own voice.

I ended up working for three days and three nights on the project. First, I asked the band called Natasha's Ghost for permission to use a song from their album (I'm a HUGE fan and became friends with the lead singer in San Diego... that's another story). Then, I found other bits of personal writing, stock photography, sheet music, and the Poetica Chancery font. The first few hours were spent in Photoshop, creating the artwork for the site. My strongest design influence at the time came from Irene Chan's projects at Eneri.net (she's disappeared from the web now), so I focused especially on rich colors and textured symbols. After the main artwork was done, I created the first narrative sequence, "Chapter 1", as an animation scene in Flash 5. Other ideas came up, and I re-engineered some code from earlier experiments to create chapters 2 and 3. By the nineteenth version, I finally had a personal website. I only posted the URL once, at the Were-Here.com forums.

It's been two years since the creation of Expression by Proxy. Again, I've graduated with a new degree and a new perspective. Again, I'm working on a book during summer vacation. Two-year cycles seem to be a recurring pattern. I'd like to build one more summer art project before I find a full-time job, something to capture the important moments during my time at the School of Information.

You are welcome to download the source code when I post it sometime before Friday, because there's no reason for me to keep it anymore. I hope you find some interesting bits of techniques in there. Please don't rip off the artwork, and don't ask for the music files because I don't have permission to distribute the originals. If you learn something from the files, or if it helps you build an interesting project, feel free to post the URL in the comments section :)

Regards,
-Sam

External Data From Other Domains

Sometimes people email interesting questions to me, and I sometimes forget the answers. So, I'll start posting the answer, along with relevant links to documentation, for the purpose of archiving all the interesting things I learn every day.

Today, I received an interesting question from Jim about loading XML feeds from external domains. Anyone who attempts to load external data from another domain will encounter a security barrier in the Flash player.

A Macromedia technote describes the security feature: "External data not accessible outside a Flash movie's domain."

The security feature is a good and necessary barrier to protect against trojan SWFs and abuse of data feeds. The good news is that the security feature doesn't stop the original author from creating a legitimate work-around with a server-side script. The Were-Here XML forum has several discussions on how to write server-side redirection scripts:

Were-Here discussion about elegant redirection solutions with Java and ASP
Another Were-Here discussion about PHP solutions.

Sharks and Prey

View Shark Demo
Download Source Code

This demo was first created in July, 2001. Click on the screen to feed the sharks. The source code was written in Flash 5, but I recently saved it as Flash MX format, so you'll need the Flash MX authoring tool to view the source. I don't recommend the programming style in the shark demo, since it was written during Flash 5 without the benefit of dynamically assigned event handlers. However, countless people have asked for the source code, so I'm releasing it as is, without cleaning up the code.

"Sharks and Prey" is a prototype for life-like movement and behavior in Flash. My original prototype for life-like movement was built in 1999, using Flash 4 Actionscript. In this modern version, the smooth, sinuous movements of the shark bodies are derived from a trigonometrically constrained chain of body segments.

The intelligent hunting behavior of the sharks have their origins in a 1999 paper entitled "Steering Behaviors for Autonomous Characters", written by Craig W. Reynolds at www.red3d.cwr. In this case, I have adapted the "Wander Behavior" concept from Craig Reynolds. Since I couldn't find his Java source code, I created a new Actionscript algorithm based on his original idea. I also added some of my own smoothing equations to help the sharks make curved turns instead of sharp turns, as if they were really swimming against the friction caused by water viscosity.
The minnows which appear when you click on the screen are actually simple little movieclips with a very simplified version of the wander behavior. The appearance of minnows will cause some of the sharks to switch into hunting mode, which adapts the wander algorithm to seek the minnows. Once the hunting instinct has been fulfilled, the shark falls back into wandering mode.

Updated Plans

Having survived the final week of grad school with less than 20 total hours of sleep, I'm slowly returning to the world of email, Flash, and code. First orders of business: take a shower, clean up the vast ocean of notes and books on the floor around my desk, eat something, archive all my final papers and project reports, and finish writing the Tao of Actionscript book (we'll be done before the end of May).

As promised, I'll post the occasional paper from school. These homework assignments and brief papers make many references to research papers in HCI, psychology, economics, and social science. So, each posting be accompanied by a short intro to inform you of the required reading. Most of these readings can be found on the web, or at your local university library. You're welcome to download my homework assignments without doing the background reading, but it won't make as much sense.

Some updates:

1. I'll present a session "Using Components" at Flash Forward 2002 NY in July.
   
2. I'll present two Actionscript-oriented sessions at Web World Seattle in July.
   
3. The joint project between me, Branden Hall, with contributors Nigel Pegg, Andreas Heim, and Dave Yang, is a book about Actionscript programming strategies, and is scheduled for completion on May 15. It'll take a couple of months after completion before the book hits the shelves.
   
4. SIGGRAPH has accepted a proposal by two dynamic duo (me and Branden Hall) to present a project based on upcoming Macromedia technology. The project's name is "Reality Cluster".
   

HCI book from my professors

Today's slashdot.org features a book review on "Human-Computer Interaction in the New Millenium". I was very surprised to see my professors' names listed in the book review, and realized that it provides a summary of all the interesting research going on at the School of Information. Some of the chapter headings sound like descriptions of the graduate courses I've taken :)

Putting my course work online

I'm thinking of putting some of my graduate course work online. The material would include projects, papers and assignments from the School of Information Master's degree program in human computer interaction (HCI) and information science. If I do put my work online, my goal would be to promote appreciation for HCI-related topics, including but not limited to usability engineering. For professionals in other disciplines, posting my course work online might also provide some insights into the skills, knowledge, and formal training that HCI graduates receive, both in the class / lab and in real-world environments.

Some of my courses include:
Evaluation of Systems and Services (including usability engineering)
Information Visualization
Search and Retrieval
Choice and Learning (cognitive science and economics)
Cognitive / Behavioral Psychology and Information Systems
Programming I & II in Java
Design of Database Applications
Design of Complex Websites
User Interface Design
Digital Music Production
Information Architecture
Use of Information
Social Systems and Organizations

What do you think? Would this be a good idea?

Movable Type xml template

I've been getting email about my movable type xml template for the flash interface. It's not an RSS format, just a custom format I came up with:

http://www.samuelwan.com/information/flashindex.tmpl
To download this file, right-click on the link, or command-click for Mac users, then save as target. You can't view it directly on a browser due to the XML header, so you have to save it on the hard drive and view with a text editor such as Notepad.

Hope that helps someone out there.

-Sam

Flash-based Blog: Read Me!

This entry provides background information for all the folks who are visiting from Chris MacGregor's website, Flazoom. For those who don't know the whole story, I created a Flash MX interface to the movable type weblog, available at www.samuelwan.com/mainmenu.swf. It takes advantage of the fact that you can create templates in Movable Type to generate XML feeds, such as the RSS specification. Actually, the prototype was built as a proof of concept during one afternoon, and I hadn't intended on making it publicly available until I had time to build a complete interface to Movable Type, including an XML-RPC administration panel and public comments.

The prototype you see here doesn't accomodate public comments, and I haven't done any usability testing to streamline the navigation. So, if you'd like to see the REAL website and post comments, you should visit http://www.samuelwan.com/information. In the meantime, thanks to Flazoom for the link! I'll post a notice when I build the real Movable Type interface this summer... for now, must focus on finishing graduate school.

By the way, did I mention that you can download the source code here? You can use the source code if you can't wait to play with the final build, but like I mentioned, it's really just a prototype... source code for the final, complete system should be available this summer.

If you decide to install Movable Type on your system and you find it useful, consider donating some money to its creators for maintaining free software :) Please note that I'm not involved with the movable type software, and that the Flash source code is not part of the movable type system.

Best Regards,
Sam

Crunch Time: Semester Finals

For the next two weeks, this site will not receive updates. However, take a look at ALL the source code I've uploaded, that's good stuff, man :) Primo material for the Actionscript afficionados!

Between now and April 19, I must accomplish the following projects for graduation:

1. SI688 Behavioral/Cognitive Psychology and Information Systems, Final paper: "Interface Design Environments For Non-Programmers, a literature review and study on the cognitive and computational/mathematical issues in developing user-interface design tools for non-programmers."

2. SI622 Evaluation of Systems and Services, Final Project: "Applying the following usability engineering methodologies to the evaluation of a voice-activated portable music device:

Formal User Testing
Heuristic Evaluation (Nielsen's 10 Heuristics)
Generalized Transition Network
Object-Action Analysis
Cognitive Walkthrough (not in draft yet)
Literature Review (not in draft yet)
Competitive Analysis
Vocabulary
GOMS Keystroke Analysis
Survey / Questionnaire

All of the usability methods have been finished, and we finished analyzing all of our raw data this morning at 3 a.m. We've compiled a report of findings and recommendations, then ranked them by priority and severity. Last phase is to write the formal usability report and present our findings at the school.

3. SI503 Search and Retrieval, Final exam

4. SI502 Choice and Learning, Final exam and finish assignments on Nash Equilibrium / Game Theory.

I'm looking forward to meeting the challenge of the next 14 days.

Flash MX HTML Tables

Render HTML Table in Flash. I posted this unfinished code for the actionscript hackers on the Flashcoders mailing list to play with. This code is not documented, and incomplete. I'm posting it because I'm too busy finishing graduate school to spend time on this table renderer, but wanted to contribute my current work to the community. No documentation is provided, use at your own risk. GPL license. Note that it reads rgb values as hex values, not as #ffffff format.

IMPORTANT: My code is loosely based on the HTML specifications for the two-pass autolayout algorithm that renders HTML tables. You can read that RFC online (I think it's RFC 1942).

Download here

Real-Time XML Visualizer

View demo
Download Source

Xilhouette 1.0 : XML Editor
Multiple real-time visualizations of the XML editing process
Copyright 2001 by Samuel Wan, All Rights Reserved.
Dept. Human Computer Interaction, School of Information, University of Michigan

Try typing in well-formed XML, or simply cut and paste a large xml document (such as the included filmfestival.xml file) into the editor, and the radial graph representation of the tree structure will adapt to the new data. Based on prior work by Graham Wills at Bell Labs.

Local Connection Technote

Mike Chambers posted news on Flashcoders about a new Macromedia technote: local connections. I don't know much about local connections, and don't see much use for them, aside from providing a novelty effect in getting browser windows to communicate. Perhaps it'll become useful in some way with the upcoming Macromedia technologies... I'm not sure...?

http://www.macromedia.com/support/flash/ts/documents/localconnection.htm

Shared Objects Technote

Mike Chambers posted news about a new Macromedia Technote: Local Shared Objects. I highly recommend that you learn more about shared objects. They're the key to some important Flash technologies.

http://www.macromedia.com/support/flash/ts/documents/local_so.htm

Dial Component

View demo
Download source

Author: Samuel Wan
Language: Flash 6 ActionScript
Dependancies: none
Developed: November 2001

Purpose:
Create a Dial component for Flash 6 beta. Dials are more space efficient than sliders in some situations, and allow users to specify ranges of the dial. The Dial Component can interact with its environment, either by specifying the TargetProperty parameter, or by registering a listener with its addListener() method and onDialChange() callback.

The interaction model for this dial comes from Propellerhead's REASON software, which simulates MIDI rack hardware. Dials are turned by clicking on the dial and dragging up and down.

Personal Notes:
The objective was to build a usable component within 10 hours. I had to reverse-engineer Nigel's scrollbar, in order to learn out how to detect drop-target instances in the editing environment. However, I didn't use any of Macromedia's FUIComponent classes because I wanted to keep things simple during my first attempt.

The strategy of defining functions within objects, rather than prototypes, comes from working with Branden Hall on his Java-like implementation of inheritance and centralized event handling for Flash 5 (ACK - Actionscript Component Kit).

Range Slider Component

Download source
View demo

Purpose:
Sometimes user-input asks for a range of values, rather than a specific value. This component has two sliders which allow the user to physically define left and right bounds within a range of possible values. The component has a "Decimal Places" parameter which allows the user to specify the significant digits for the accuracy of the slider. The sliders will snap to values of corresponding significant digits along the value range. For example, choosing 2 decimal places for a component from 0 to 1 will snap sliders at intervals of 0.01, so that the sliders will snap to 100 possible positions on the bar. Choosing 1 decimal places from 0 to 1 will cause the sliders to snap to 10 possible positions along the bar. Registered listeners will receive a callback to a function named "onRangeSliderChanged" in the listener while the sliders are being dragged. For computationally expensive algorithms that can't execute fast enough for real-time movement, registered listeners can also handle a callback named "onRangeSliderReleased", which is called when the slider is released.

Personal Notes:
This component was originally finished in two hours, but I spent another 12 hours iteratively improving its look and feel to meet certain standards of usability. I hope the robustness and scientifically valid accuracy of this component will prove the worthiness of using Flash technology for complex information visualization and other data-intensive tasks. If the Flash community upholds standards of usefulness and usability, then components will gain enough popularity to push interface design to new levels of innovation. Thoughtfully built components will also provide web developers with fresh justifications to break away from the conservative principles of usability iconoclasts such as Jakob Nielsen, who threaten to stifle innovation in the field of human computer interaction on the web.

Background:
The concept of range sliders rather than single-value sliders comes from research on user-interface design for dynamic queries, by Ben Schneiderman. My advisor for the graduate course in information visualization is Professor Barbara Mirel at the U. of Michigan College of Engineering and formerly of Lucent Technologies.

Mysterons Demo

View demo
Download source

I wrote this back during the first weeks of Flash MX beta testing. Here's what I wrote in my email when I first posted this demo: "There's a description when you click on the question mark. This demonstrates the speed of lineTo and the Actionscript engine in general. Source file's included, applies multiple forces upon a self-propelled object."

Flash Forward 2002 Components Source Code

http://www.samuelwan.com/flashforward/sanfrancisco2002/

Thanks to everyone who came to the OOP and Components sessions at Flash Forward 2002! I hope you found our presentations both informative and helpful. The zip file in this directory contains all of the source code from the presentation, broken down into step-by-step versions. However, the zip file only contains one mp3 from the playlist in order to avoid posting commercial mp3's online (I wrote and produced the LaoTzueTrance track). I will soon have session notes available, either on this website, or as a more complete tutorial at Macromedia.com/desdev sometime soon. Email me if you have any questions: method@method.org, or look for me on Branden's flashcoders mailing list at chattyfig.figleaf.com.

Cheers,
-Sam