Andrew Paul Simmons: Blog

Writing Requirements from a UX Perspective

2008-10-28T22:22:00.000-07:00

Here is Alan Cooper's five step cycle for requirements refinement and solidification. With some products one iteration may be enough often refinements will need to be made several times to maintain a comprehensive focus.

Create problem and vision statements
Brainstorm
Identifying persona expectations
Constructing context scenarios
Identifying requirements

One: Creating Problem and Vision Statements (an argument of purpose)

In every product there must be a central thesis or argument of purpose behind which all stake holders unite. This statement will then be used to assign value to each proposed feature during the following brainstorming sessions. It also provides a cohesive focus for the product. It is vital that the feature set be as concise and focused as possible. This statement will help reduce features which may be appealing to specific stake holders, but do not facility the user in efficiently realizing his primary goals. Finally, it is vital that usability issues, which are always critical to the success of the application, be illustrated in terms of business goals!

Two: Brainstorming
During brainstorming it is important to focus on how users will use the product. Spend more time talking about use cases and little on features and layout. Let go of preconceived ideas about how the product will look and allow new UI concepts to form around the specific needs of the user. Do not lock down UI here.

Three: Identifying User Expectations
Understand the features the users will expect to find in the product. Focus on making expected functionality as apparent as possible. Also, realize that different users will expect to accomplish the same task in different ways. Attempt to outline areas where the application needs to be permissive. (An application is said to be permissive when a user has many ways and orders in which he can accomplish the same task.) This is usually expensive so identifying key areas here will save time. Remember as these are issues of usability it is vital to tie them directly to business objectives.

Four: Constructing Context Scenarios
Context Scenarios focus on how the users will interactive with the product in their typical usage environments. Here we focus on how the user lives with the product throughout his day. From our context scenarios we will form requirements designed around how the user will accomplish his goals while driving, multitasking in a busy office, or in whatever environment he typically finds himself. It is important to focus on overall user-objectives first and then iteratively fill in the details. Context Scenarios should not describe specific UI design, but will be used as a source for discovering the priority of user's needs. Context Scenarios allow us to create novel solution. It is important to never mention specific UI interactions at this stage! An example Context Scenario can be found in The Essentials of Interaction Design 3 on pg 120.

Five: Identifying Requirements
Accept that Requirements are not to be comprised of features and tasks. It is recommended to think of requirements as consisting of the following three primary components:

Objects: The information that the user will need in order to accomplish his goals, these would be messages, comments, images, blog entries, as well as associated information publish date, file size etc.
Actions: The operations the user will need to perform on the objects. Later UI controls will be created to conduct these operations. Hence, actions will also help determine where information should appear in the UI.
Contexts: Development timelines, business models, technical limitiations, customer based limitations.

From here it should be possible to begin drawing UI diagrams and defining interactions.

(For more information on this topic view the text: The Essentials of Interaction Design 3 pg 115.)

What Robert Penner Never Told You About His 'Easing Equations'

2008-08-31T22:42:00.000-07:00

In his epic work "Programming Macromedia Flash MX" Robert Penner introduced his easing equations to the world. Of course, the equations were standard curves used in interpolation throughout animation programming. However, these curves had never before been available in Flash. (Later, Macromedia would add them to the standard Flash libraries.)

Interestingly, it turns out that these curves with the names NSAnimationEaseInOut, NSAnimationEaseIn, NSAnimationEaseOut had existed on OS X/NeXTStep computers for nearly 15 years before Penner would bring them to Flash. Of course, the developers of Flash must have used NSAnimations before they brought the term 'easing' to the mainstream through the Flash UI. (Outside of Flash/COCOA the term 'easing' is never used in formal academic circles and is always refered to as interpolation.)

It infact appears that many ActionScript classes have Object-C/COCOA ancestors such as hitTest, NSURLRequest, NSURL, and many more.

Add, Set, and Delete Cookies in UIWebView with NSHTTPCookieStorage

2008-08-27T19:41:00.000-07:00

NSHTTPCookieStorage allows you to update the cookies for every request made from your application. UIWebViews will respond to this changes in cookies at run time and NSHTTPCookieStorage allows you to listen for changes in cookies as the are normaly set in the browser.

To get the cookies for any url use:
NSHTTPCookieStorage* cookieStorage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
NSArray* theCookies = [cookieStorage cookiesForURL:[NSURL URLWithString:@"http://example.com"]];

This makes it possible to easily login or logout a user from a website presented in your UIWebView.

Checkout NSHTTPCookieStorage* for all the details.

AdMob Ads break in UIWebView

2008-08-25T16:08:00.000-07:00

AdMob ads are broken in UIWebViews (a UIWebView is an iPhone native browser control) for two reasons.

AdMob requires a user agent and when you tell AdMob you are on an iPhone AdMob will provide ads with direct links to the App Store. This would be great, but Apple servers respond with "Internal Server Error" when AdMob ads link to the appstore through UIWebView. The same links work great in iPhone Safari.
When a page containing a UIWebView loads with an AdMob ad, the page is instantly redirected to about:blank. Canceling this redirect in shouldStartLoadWithRequest causes other links on the page to become unresponsive!
If you know how to get this working please comment.

Update: after some badgering AdMob has responded here.

Simple iPhone image loader class uses NSThread and NSData dataWithContentsOfURL.

2008-08-24T00:16:00.000-07:00

This class, APSSimpleWebImageView, extends the UIImageView class with the method
- (void) loadStringURL:(NSString*)url.

loadStringURL takes the URL of the image you wish to load and loads that image asynchronously.
Download Example Code Here

Create an APSSimpleWebImageView as you would a normal UIImageView and then
invoke loadStringURL with the NSString url of the image you wish to load as follows:
APSSimpleWebImageView* myImageView = [[APSSimpleWebImageView alloc] initWithFrame:CGRectMake(0,0,100,100)];
[myImageView loadStringURL:@"http://example.com/image.jpg"];

(For the complete code listing download the example code.)

Following are a few points of interest from the sample code:

(onLoadSuccess andonLoadFailure are optional call backs that can be used to receive notification that the image has appeared.)

To load asyncrounsly we invoke NSData dataWithContentsOfURL on a new thread, using NSThread detachNewThreadSelector.

[NSThread detachNewThreadSelector:@selector(performAsyncLoadWithURL:)
toTarget:self withObject:[NSURL URLWithString:urlString]]

We must create an autrelease pool in performAsyncLoadWithURL: to prevent the new thread from leaking. (Each thread must have an autorelease pool.)

performAsyncLoadWithURL: will then block its thread as it performs the image load:
NSData* imageData = [NSData dataWithContentsOfURL:url options:NSMappedRead error:&loadError];

Finally after the image has loaded, we will invoke our load complete call back on the main thread
[self performSelectorOnMainThread:@selector(loadDidFinishWithError:)
withObject:loadError waitUntilDone:YES];

Notice waitUntilDone:YES causes our loading thread to block while the approprate loadDidFinish method is invoked on the main thread. This prevents our imageData object from getting released by the autorelease pool that will be drained in the last line of performAsyncLoadWithURL.

Download Example Code Here

Asynchronous image loading on the iPhone NSURLConnection or NSThread and NSData dataWithContentsOfURL

2008-08-23T21:09:00.000-07:00

In order to load images asyncornisly on the iPhone you must choose to use NSURLConnection or NSData dataWithContentsOfURL along with NSThread. I have decided to use threads to do my asynchronous image loading in spite of the following and rather hilarious warning from the Apple Threading Programming Guide.

"If you do not fully understand the implications of your design choices, you might encounter synchronization or timing issues, the severity of which can range from subtle behavioral changes to your application imploding gloriously and destroying user data. (Granted, it takes a lot of effort for you to cause your application to implode gloriously, but the fact that it is possible should serve as a warning not to skimp on your planning efforts.)"

When I am done, I shall publish my asynchronous web image loader in hopes that it may be helpful.

Load web image into iphone native applicaiton UIImage with no NSURLConnection code required

2008-08-23T18:13:00.000-07:00

It turns out it is trivial to load images into iPhone native applications.
This simple function will do all of the work. No UIWebView required no NSURLConnection required. Just dataWithContentsOfURL.

-(UIImage*) newUIImageWithURLString:(NSString*)urlString
{
return [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:urlString]]];
}

Usage:

UIImage* myUIImage = [self newUIImageWithURLString:@"http://example.com/images/myimage.jpg"];

That's it!

It is important to note that +(NSData*) dataWithContentsOfURL:(NSURL*)url blocks. This will not do an asynchronous load. :( I am looking into another more involved solution that will load images on a separate thread.

@property and assign, retain, copy

2008-08-23T15:41:00.000-07:00

From The Objective-C 2.0 Programming Language here is how assign retain and copy will be effectively implemented by @synthesize and how they should be functionally implemented by you if not synthesized.

property = newValue;
// retain
if (property != newValue)
{
[property release];
property = [newValue retain];
}
// copy
if (property != newValue)
{
[property release];
property = [newValue copy];
}

warning: initialization from distinct Objective-c type (iPhone Development)

2008-07-25T21:05:00.000-07:00

This warning is raised by Xcode whenever an implicit or INCORRECT type cast is occurring.
(The AS3 equivilant is the error: Error # 1067: Implicit coercion of a value of type * to an unrelated type *.)

"Distinct Objective-C type" is the type id. Apple docs say, "In Objective-C, object identifiers are a distinct data type: id. This type is defined as a pointer to an object..."

Example Causes:
NSMutableArray* myArraySorted = [myArray sortedArrayUsingSelector:@selector(compare:)];

The above will raise "warning: initialization from distinct Objective-c type" because sortedArrayUsingSelector returns an object of type id. We can correct this by simply casting the return value to the type NSMutableArray* as follows.

NSMutableArray* myArraySorted = (NSMutableArray*)[myArray sortedArrayUsingSelector:@selector(compare:)];

Finally notice that the incorrect cast that follows will also raise this warning:
NSMutableArray* myArraySorted = (NSString*)[myArray sortedArrayUsingSelector:@selector(compare:)];
Hence, whenever you see: "warning: initialization from distinct Objective-c type" you are performing an implicit cast.

MD5 hash on iPhone with cocoa and Objective-C

2008-07-22T23:51:00.000-07:00

In beta 7 OpenSSL has been removed from the iPhone SDK. However, MD5 is still available.

Simply import CommonCrypto as follows:
#import < CommonCrypto/CommonDigest.h >

Then add this C function to your objective-c class between the @implementation and @end statements (if you like).

NSString* md5( NSString *str )
{
const char *cStr = [str UTF8String];
unsigned char result[CC_MD5_DIGEST_LENGTH];
CC_MD5( cStr, strlen(cStr), result );
return [NSString stringWithFormat:
@"%02X%02X%02X%02X%02X%02X%02X%02X%02X%02X%02X%02X%02X%02X%02X%02X",
result[0], result[1], result[2], result[3], result[4], result[5], result[6], result[7],
result[8], result[9], result[10], result[11], result[12], result[13], result[14], result[15]
];
}

I am sure you can just use NSData for this but this is the way an example was posted on apple forums. Please feel free to add an NSData based solution.

Read the post here "http://discussions.apple.com/thread.jspa?threadID=1509152&tstart=96"

Maximum AS3 (FileReference) file upload size 100MB or more?

2008-05-25T22:04:00.000-07:00

From the adobe docs we can can not be sure that flash supports file uploads larger than 100MB. In my testing I have found no limit. I would be very interested in hearing about the client os/flash version, and server used by anyone who has found a file so large that it would not upload.

Here is what Adobe docs say:
"Although Flash Player has no restriction on the size of files you can upload or download, the player officially supports uploads or downloads of up to 100 MB. You must call the FileReference.browse() or FileReferenceList.browse() method before you call this method. "

However, in another area on the same page adobe points out the following:

"Note: In the initial version of ActionScript 3.0, the [file] size property was defined as a uint object, which supported files with sizes up to about 4 GB. It is now implimented as a Number object to support larger files. "

So it appears that Adobe also believes uploads larger than 4GB are possible but will not stand behind it.

Both quotes are from this page: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/FileReference.html

Killing Flash CS3 / AIR Processes and avoiding the "debugger launch failed" message

2008-04-13T18:15:00.000-07:00

To kill an AIR application launched for testing from Flash CS3 open the task manager and kill the process idl.exe.

When working within the Flash CS3 development environment, lightweight or utility windows spawned from an AIR application are not killed when the primary AIR application window is exited. In fact, they are not even killed when Flash CS3 is closed.

Further, as long as these lightweight/utility windows are open you will not be able to to test your application. There simply will be no result from pressing ctrl+enter. Launching the debugger will only offer the message, "debugger launch failed!" If any part of the AIR application is still running you simply will not be able to test your application. Hence, you must go to the task manager and kill idl.exe!

Google Provides COLLADA Models (for Papervision 3D)

2007-12-17T07:34:00.000-08:00

Have you ever just wanted to throw some models into Papervision3D (2.0) and get started? I always find myself in my 3D graphics app creating models when I really want to be writing code. Now I have discovered the solution. Google's 3DWarehouse has a large store of free models and now offers every model in COLLADA format which is for your use with Papervision3D!

http://sketchup.google.com/3dwarehouse

MediaWalls a PaperVision3D Application

2007-11-26T21:19:00.000-08:00

This application is designed to allow users to explore videos and images in a three dimensional environment.

The viewer flies through a world of media walls with his viewport (the camera) smoothly gliding on hermite curves. Hermite curves are much like bezier curves. Given an initial position P1 and viewing direction P1', with a final position P2 and final viewing direction P2', a 3rd degree polynomial can be formed to provide smooth curving interpolation between camera transformations. P1' and P2' are like the control handles of a bezier curve and can be lengthened or shortened to add or reduce curvature. Try out MediaWalls...

Video Cube PaperVision3D

2007-10-30T22:36:00.000-07:00

The other day I was given an opportunity to create an interactive piece to be used in a Treemo platform demo. The result was this spinning video cube with acceleration driven motion blur.

Spin the cube by dragging up, down, and from side to side. Try it...

My Channel Player for Treemo.com

2007-09-10T00:43:00.000-07:00

Users can upload images and videos directly from their phones to this embeddable widget.

Clicking on the gears button (mouse over player to see buttons) offers viewers embed html, designed to induce viral sharing. The above player is showing the Super Bad channel. Currently, Treemo.com is running a contest for this film involving my player(above). Go to http://superbad.treemo.com/ to view the contest. This url can also be found in the December issue of Rolling Stone Magazine.

Embedding Font in CS3 Components (Avoiding Disappearing Button Labels)

2007-08-12T00:33:00.000-07:00

When a CS3 Component (i.e. a Button) appears under a mask the text disappears.
To fix this we simply embed the font in the Component. Unfortunately, this isn't like embedding font in a normal programatically generated TextField instance.

How To Embed Font in CS3 Components
(I will use the Button component for this example.)

First, we must embed the font in the swf. There are 2 ways to do this:
- If you wish, you may simply create a TextField off stage and embed the font in that TextField.
- Or if you have taste, you will open the library and select “new Font” from the library panel menu. Now, create a font symbol in the library. I chose Arial and set the linkage identifier for the font symbol to “ArialFont” exporting it for ActionScript.
With the font embedded in the swf, we now need to embed it in our component.
There is only one way to do this. Assuming that our button is named button_btn your ActionScript will look like this:

// you may replace new ArialFont().fontName with the string “Arial” if you prefer. (If you did not create a Font Symbol you must use the string “Arial”)

var tf:TextFormat = new TextFormat(new ArialFont().fontName);
button_btn.setStyle("embedFonts", true);
button_btn.setStyle("textFormat", tf);
button_btn.label = "fox";
That's it. The Font is now embedded in the CS3 Component.

A Note about things that don't work: components do not have a “fontFamily” style. The only way to control the style of text in components is to create an instance of TextFormat and set the Button's “textFormat” style to that instance of TextFormat. Also, you cannot set a style directly on the TextField object in the button component. (The CS3 Button Component's TextField can be retrieved through it's textField property.) Setting the style directly on the textField causes a runtime error. Also, setting the textField's defaultTextFormat object does not have an effect, as it is overwritten by the components default styles. Finally setting the textField.embedFonts property to true does not have any effect.

ReferenceError: Error #1056: Caused by Declaring Stage Instances Private

2007-07-04T16:52:00.000-07:00

If you declare a stage instance private you get the message: "ReferenceError #1056 Cannot create property my_mc on StageIntanceDeclarationsClass"

This error occurs when you uncheck the "Declare Stage Instances Automatically" checkbox in the "ActionScript 3.0 Settings" dialogbox and proceed to declare stage instances as private variables in the class associated with the containing MovieClip.

A Note on Inheritances and Declaring Stage Instances:
You cannot choose to simply always declare stage instances automatically without forging the use of inheritance in classes linked to MovieClip Symbols. If you have a class APrime which is derived from class A and APrime is linked to a MovieClip Symbol, all stage instances used in the base class A must be manually declared in class A. "Declare Stage Instances Automatically" only declares instances in the class linked to the MovieClip Symbol and does NOT make those references available to any base classes.

Example:
Assume that the class StageIntanceDeclarations is set as the class associated with a MovieClip which c0ntains the MovieClip my_mc. Then the following code will cause ReferenceError #1056 at runtime.

package
{
        import flash.display.MovieClip;
        public class StageIntanceDeclarations extends MovieClip
        {
                //Private Causes ReferenceError #1056
                private var my_mc:MovieClip;
                function StageIntanceDeclarations()
                {
                }
        }
}

The output is as follows:
ReferenceError: Error #1056: Cannot create property my_mc on StageIntanceDeclarations.
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()
at TestStageIntanceDeclarationsBase$iinit()
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()

To avoid this error simply declare my_mc as public:
public var my_mc:MovieClip;

Sound and NetStream bytesTotal is zero until the entire file is loaded in IE

2007-06-30T12:13:00.000-07:00

The bytesTotal property only returns the total number of bytes after the sound or video file has completely loaded in both IE and Safari. However, in Firefox bytesTotal will return the total number of bytes in a sound or video file as soon as the file begins to load. Further the loadProgress, ProgressEvent.PROGRESS, event of the sound object does not fire as it should in Internet Explorer and Safari. Adobe makes no mention of this in their documentation! To show load progress in browsers other than Firefox the bytesTotal/getBytesTotal properties cannot always be used. You may need to have the total bytes loaded from XML or elsewhere.

Magna Cum Laude Complete!

2007-06-14T13:58:00.000-07:00

Today, final grades posted assuring that I will graduate Magna Cum Laude with a Bachelors of Science in Computer Science.
(Suma Cum Laude is not offered by Western Washington University, making Magna Cum Laude the highest academic honor awarded.)

Its has been 3 years since I graduated from junior college with a Presidents Medal across degrees in digital media communications and an associate of arts. During the years at WWU, I spent my time delving into advanced physics, mathematics, and computer science exploring the underlying academics on which our interactive arts are founded.

flash.media.Microphone.rate What are the acceptable bit rates (bitrates)?

2007-06-12T04:18:00.001-07:00

Adobe appears to have forgotten to publish the acceptable values for the flash.media.Microphone.rate property in the ActionScript 3.0 edition of their documentation.

The Adobe documentation on the rate (bitrate) property is limited to the following,
“The rate at which the microphone is capturing sound, in kHz. The default value is 8 kHz if your sound capture device supports this value. Otherwise, the default value is the next available capture level above 8 kHz that your sound capture device supports, usually 11 kHz. “

But, what If you want a rate (bitrate) other than 8 or 11 kHz ? If you are looking for the acceptable bit rates look no further. I dug this out of a tech note.

Sampling rate

Approximate data rate

5.512 kHz

1378 bytes/sec, or 11.025 K bits/sec

8.000 kHz

2,000 bytes/sec, or 16 K bits/sec

11.025 kHz

2756 bytes/sec, or 22.05 K bits/sec

22.050 kHz

5,513 bytes/sec, or 44.1 K bits/sec

44.100 kHz

11,025 bytes/sec, or 88.2 K bits/sec

Adobe Flash Player Settings Dialog Box Does Not Appear

2007-06-11T23:47:00.000-07:00

I was creating a flash mp3 recorder application today and the Adobe Flash Player Settings dialog box, which gives the user the option to allow his microphone to be streamed back to the server, would not appear. It turns out that my SWF was too small for the settings box to show up. A SWF size of no less than 214 x 137 pixels is required for the settings dialog box to appear.

I got no warning and no error. It would be nice if the window would show up at any size. A warning would also have been fine. Even just shading the window as normal would have indicated that the setting dialog box was just off screen. Instead I got nothing.

Slow SWF Publishing Due To Embedded Fonts

2007-06-08T02:43:00.001-07:00

Quick Note:
Don't Embed too much font in an FLA file until you are done developing the Flash Application. Embedding fonts can cause extremely long compile times. (Embedding under 75 characters shouldn't cause too much of a slow down.)

Can’t convert FLV to MP3 due to a vcen.dll error?

2007-06-07T00:09:00.000-07:00

When using Total Video Converter on a web server to convert Nellymoser FLV (but not MP3 FLV), you may encounter an error in vcen.dll. You cannot usually invoke the command line version of Total Video Converter directly from your web application. You must make a Windows Service that performs the conversion. We made a service that converted all Nellymoser FLV files written to a specific folder to MP3 files. We were able to do large number simulations conversions this way.

For more information on Total Video Converter see my tutorial on using the Total Video Command line application to convert Nellymoser FLV files to mp3 or wav files.

I will post an example application with tutorial, that walks you through the entire process of doing the Nellymoser FLV to MP3 conversion with Total Video Convert and setting up the Windows Service as soon as possible.

ReferenceError: Error #1065: Variable SimpleMP3Player is not defined.

2007-06-06T20:20:00.000-07:00

I needed to make a simple flash mp3 player in about two hours today. I quickly setup my classes, launched my application, and this is the error that I got:

ReferenceError: Error #1065: Variable SimpleMP3Player is not defined.

I had set the linkage, in the linkage properties, of a symbol to point to the class SimpleMP3Player.

The class was written as follows:

package
{
    import flash.display.*;
    class SimpleMP3Player extends MovieClip
    {
        
            function SimpleMP3Player()
            {
                    trace("MP3 Player instantiated");
            }
    }
}

I checked the adobe live docs and read:

1065 Variable _ is not defined. You are using an undefined lexical reference. For example, in the following statements, the statement trace(x) generates an error because x is undefined. However, the statement trace(y) doesn't generate an error because y is defined:

trace("hello world")
trace(x) // x is undefined
var y
trace(y) // No error, y is defined.

It didn't take too long to see that I had simply forgotten to declare the class SimpleMP3Player as public. Nevertheless, there could have been a much better error for this. When you take your compiler classes, they always teach you to include common errors in your parser so you can provide useful error messages. Apparently the Adobe AS3 developers weren't paying attention.