e-venture

test

2009-11-19T13:53:00.002-05:00

Apple's AppStore is Bizarre

2009-05-27T10:16:00.002-04:00

I don't want to bash Apple. I'm an Apple addict! Love every one of their products and have had nothing but good things to say about their quality and attention to design and detail. But... the AppStore process is a strange animal.

Our first iPhone application for FX360 was submitted on May 15th. I declared the 'release date' to be the 18th in the submission. I checked the iTunesConnect environment 2 to 3 times a day, everyday, to see if it was approved. After the holiday weekend, Tim from the office pinged me in the morning to ask if the app was live because he was looking at it on a review site. I logged into iTunesConnect and it was approved and live! Great, but, how about a notice that it was approved? An email... a text... a message on my phone... nadda.

That seems like a strange policy to me. Apple must realize that many developers are holding their breath for their apps to be approved. I'm not sure why they are taking a no contact approach on the approval, but it doesn't seem like a very well thought through User Experience on their part. Oh well. Part of doing business with them I guess.

iPhone UX Sketch Templates

2009-05-21T15:18:00.003-04:00

After giving a presentation at 360Flex on the value and necessity of pen and paper sketching and wireframes, I thought I'd eat my own dogfood! I've created a simple wireframe document based on the sketchboards from AdaptivePath: http://www.adaptivepath.com/ideas/essays/archives/000863.php

Uploaded with plasq's Skitch!

Choose your flavor below and get to work on some iPhone UX goodness!

Omnigraffle iPhone sketchboard
PDF iPhone sketchboard
Photoshop iPhone sketchboard
EPS iPhone sketchboard
PNG iPhone sketchboard

XD with Flash Catalyst and Flex Gumbo at 360Flex Indy

2009-05-20T21:35:00.002-04:00

Well, 360Flex Indianapolis is over. It was a great conference! This was my first 360 conference that I attended. A big, giant shout of thanks to Tom and John for all their efforts on the 360 Conferences! It's really a wonderful event that any serious Flex or Flash developer should attend. Most of the sessions were quite technical but very approachable.

Joe Johnston, Francisco Inchauste (both of UniversalMind) and I spoke on Experience Design topics and were all very well received. We weren't sure if the Flex Developers attending would appreciate the topics, but it seemed that they did! Each of us had close to 50 attendees in each of our presentations! I think Joe topped the lot of us with a standing room only preso at 8:30 am on day 2... He gets the attendee award!

XD with Flash Catalyst and Gumbo

View more presentations from Erik Loehfelm.

Transparent Background on iPhone UIWebView

2009-04-16T01:50:00.002-04:00

Well, Apple has hidden a little nugget in the docs that took me quite some time to dig up. Here's the simple solution to creating a UIWebView with a transparent background:

set your background color of the UIWebView to clear
set the css for the body to background-color: transparent
here's the bugger... set the opaque property of the UIWebView to NO

The code looks something like this:

UIWebView *w = [[UIWebView alloc] initWithFrame:CGRectMake(10, 10, self.bounds.size.width-20, self.bounds.size.height-60)];
[w setBackgroundColor:[UIColor clearColor]];
[w setOpaque:NO];
[self addSubview:w];
self.myWebView = w;
[w release];

And in the HTML:

body {
margin: 0;
padding: 0;
width: 220px;
background-color: transparent;
}

Hope that helps someone!

Interaction Design Publication

2009-04-01T09:01:00.006-04:00

My friend and colleague, Joe Force, pointed me to a link this morning that considers and discusses many of the finer points of XD and Interaction Design! "Thoughts on Interaction Design" was a book published in 2007 by Brown Bear LLC. There were only 1000 copies printed and a second run is not planned. So, to continue to dialogue, the complete book has been created in a web format for consumption!

The content is very well positioned and thorough on the topic of Interaction Design. It helps to frame up many of the questions and answers we as XD professionals struggle with each day.

One of my favorite sections is authored by Chris Connors of Apple:

When I entered the marketplace as a newly-conferred graduate with a Masters in Human Computer Interaction, I can recall trying to explain to my family and friends exactly what HCI was - something I still occasionally find myself doing. Describing our discipline to potential employers was a recurring challenge: many were confused by a CS degree without production programming, a design degree that didn’t deal primarily with product form, or a cognitive psychologist who wasn’t solely focused on modeling human performance or conducting experimentally-driven usability testing.

I have felt the same lack of understanding and appreciation for what we as XD professionals bring to the table but, the times are changing! It's encouraging to hear Chris' stories and see that Interaction and Experience Design are being recognized as valuable additions to a product's life cycle.

Thank you to all the contributors for their excellent insight!

YouTube Musician Kutiman Kicking It!

2009-03-12T10:16:00.002-04:00

This is amazing! An artist from Isreal - Kutiman - took some time and 'found' YouTube videos of people performing and edited them together to create original pieces.

Uploaded with plasq's Skitch!

Please take the time to listen to these. It's an amazing collection of work! www.thru-you.com Here's his MySpace page as well: http://www.myspace.com/kutiman

Augmented Reality - 'Living' Flash 3d

2009-02-17T14:45:00.003-05:00

I think I just saw quite possibly one of the coolest things I've seen since working on the web: Augmented Reality. The use of Flashpaper3d, a webcam, and FlashPlayer 10. Check out this link for the GE Ecomagination site:

http://ge.ecomagination.com/smartgrid/#/augmented_reality

In a nutshell, the effect is created by using the Papervision3d library, a new library called FLARtoolkit http://www.libspark.org/wiki/saqoosha/FLARToolKit/en and the interaction of your webcam with a printed 'marker' page. The page has a unique pattern on it that the Flash environment is 'seeing' through the webcam and drawing the Papervision3d objects in place relative to the real paper! Very, very cool stuff!

Dashcode Browser Back Button Issue

2009-02-05T17:24:00.002-05:00

Wow. I just spent 2 days trying to hunt down a pain in the butt issue with Apple's Dashcode application. I'm creating a web app version of fx360.com for viewing on the iPhone and would like to make it as iPhone sexy as I can. I've been using the Dashcode application from XTools to create the basic framework of my 'browser' application.

All is good for the basics of the app. I've created multiple views and have used the standard list controls for usability consistancies. The struggles began when I was customizing the content for the app. I have a design here

that shows a 15px space at the top of the white background for the content to be placed on. So, when I built this page in Dashcode, (without all of my graphics for background and such) I created a div that had a 15px margin on the top to create that space. Then I filled that div with my content... Simple right? Not so fast!!

The issue was that when I clicked on my nav

the first time, my detail page would show up fine. Like the screen shot here that shows a gap at the top of the page (not the full size for the gap but you get the idea):

But, if I continue to go back and forth between the detail screen and my selection list, my content page gets pushed down the viewport! If I kept going back and forth it eventually pushed it right out of view... wtf!

After much frustration and searching the blogosphere for some help with this issue, I finally figured it out by tracing the entire DOM of the HTML generated by Dashcode as it was running. It seems that either the StackLayout component or the Browser component is adding inline styles to the DIV's that represent the pages as a user clicks on the navigation list! I also noticed that this style incremented the 'top' style for the DIV by 15 pixels each time the HTML traced out... AH HA! So, now I needed to find where in the code this was occuring.

I found a section in the StackLayout.js file that points to this here:

It is referencing a _topPosFromBody and curElement.offsetTop properties and adding them together on line 74. This is the closest thing I could find that had a 'top' sounding property in it. Unfortunately, the file in the project space within Dashcode is locked so a user can't edit it! Stupid.

So, for now, I've removed my margin from the top of my placement div so the 'offset' is zero. It functions as expected. The larger issue is the way that Apple has released this stuff. The tools seem to be nice and well organized, but there is no documentation on any of the components. No reference as to how their objects are put together. No list of methods, properties, and styles... nothing... anywhere. That's lame. All of Adobe's built in objects and components are fully documented and searchable. At the minimum, we should be able to find a reference to these packaged components to see how they are structured from a best practice point of view.

I'm Speaking at 360|Flex Indy!

2009-02-03T15:10:00.007-05:00

Well, this is pretty exciting: I just got accepted to speak at 360|Flex Indy! My session is Experience Design with Flash Catalyst and Flex Gumbo. The show is May 18-20, 2009 in Indianapolis. You can check out the other great 49 speakers on the schedule at: http://360conferences.com/360flex/downloads/schedule.pdf It's looking like it's gonna be another great 360|Flex conference. Tickets are cheaper on a first come, first serve basis! So buy your tickets asap at http://360flex.eventbrite.com to get the best possible price. Hope to see you there!

(RED) Wire Launches

2009-01-20T16:32:00.003-05:00

The subscription product from (RED) recently launched. It's a music and awareness subscription that allows users to contribute to the global fight on AIDS/HIV. It was showcased at the Adobe MAX 2008 conference in San Francisco in the Fall as it was built in Flex and distributed via AIR!

You can sign up for an account at www.redwire.com! Check it out.

Flash Catalyst Tutorial: Weather Widget, Part 4

2008-12-10T10:54:00.005-05:00

Latest files:
www.erikloehfelm.com/catalyst_tutorial/weatherWidget_4.fxp.zip

In Part 4 of our Adobe Flash Catalyst Tutorial, we'll add some data to the project so that our application can represent a real data set. We wont actually be connecting to an data service for the weather, but you can see how the data would be structured to do so.

We'll be focusing on two things in Gumbo: creating a 'model' for our data, applying and binding the information in our model to our interface elements.

We're using a very loose implementation of a design pattern in our example application called the "model, view, controller" pattern or simply MVC. You may have heard of this in regards to RIA (Rich Internet Application) development before. What this means in simple terms is that we will be separating our code into sections that represent the model (data), view (interface stuff) and controller (event handlers, functions, logic, etc). By breaking the code up into these groups and having the groups or 'packages' organized, we will be creating a structure that allows us to easily edit elements without disturbing or breaking pieces that work - ie. changing interface elements without affecting the functions behind them.

Here are the steps I've taken to get to the latest version of the project.

In Adobe Flex 'Gumbo':

Import the .fxp project
Go to File > New > ActionScript Class

Uploaded with plasq's Skitch!

fill in the appropriate information into the form

You should now have a new class document named 'WeatherDataModel'. We'll be creating a singleton - a class that has one and only one instance - for this class. We do this so that we have one point of contact for our data in the application.

The function 'getInstance()' allows us to access this class from anywhere in our application by stating:

WeatherDataModel.getInstance();

Nice! Next we'll add an actual data set to use. We'll define an XML document as our data source, but you could easily adjust this to any data type you'd like.

Now we have a data model with actual data in it. Lets move on to binding this data to our view. Open the cityComponent.mxml file. We are going to add some code to the Script tag:

Notice how simple it is to reference the model now! We bind the model's data to our visual elements toward the bottom of the page. Move down the file until you see the code for the TextGraphics in the 'current' Group. We'll adjust the parameters to the following:

When we use the curly braces in a parameter like this:

text="{ model.cityData.city[model.currentCity].name }"

we are binding the information to this view. If the information changes, the view updates. In this case, we defined 'model' as our WeatherDataModel. model.cityData points to the XML that we've defined in the model and then we traverse the XML tree to get the value we'd like to display.

Now we need to display the day and the hi and low for each day in our list below the current weather. Move down a few rows in the cityComponent.mxml document to the list of 7 component:dayComponent nodes. These represent the 7 day forecast list. We'll adjust that code to the following:

We've just bound each of the dayComponents to the same data model! If you save all your files and test the application, you should now see something like this:

Uploaded with plasq's Skitch!

Our application now has 'real' data bound to the interface elements. Stay tuned for more Adobe Flex Catalyst and Flex Gumbo goodness!

CSS Body Typography Samples

2008-12-04T14:27:00.005-05:00

I just stumbled upon a nice example of some body copy styles applied in CSS:

http://jontangerine.com/silo/typography/p/

It's interesting to see the subtle changes in readability that leading and alignment can make to a block of text. Makes me think back to my days in editorial design and how things seemed to be simpler back then :)

This was a bit of new information to me:

p + p {
text-indent: 1em;
}

The use of the 'p + p' to define a style. I hadn't used that before but will now that I know it's usage and availability! Check out the drop cap example at the bottom... sweet! Too bad that IE doesn't support it very well. What a surprise.

Flash Catalyst Tutorial: Weather Widget, Part 3

2008-12-02T21:49:00.009-05:00

Download the file for this part here:
weatherWidget_3.fxp
weather1.ai
Previous tutorial posts:
Part 2
Part 1

Skinning

In this part of our project, I will begin to skin the widget with a graphical treatment similar to the Apple iPhone application. We'll be designing our skin in Adobe Illustrator due to the supported round trip features in the beta release. Normally, I would design these type of skins in Fireworks - I'm more familiar with the drawing and creation tools in Fireworks.

In Illustrator

create a new document in Illustrator

draw a black background box on the stage 250px wide x 400px tall to match the size of our widget

draw a rounded rectangle that is slightly smaller than the background box with a dark blue color and a heavy light colored border

name this layer with an appropriate name - blueBack

copy blueBack layer and paste. change the color to a grey color for the background and for the lighter rule. this background will be for the 'back' of our widget

name this layer - greyBack

create 7 rectangles 230px wide x 30px tall for the background color of each of the days in the list

alternate the color of the seven rectangles to represent an alternating list of items

name these rectangles row1-row7

create a small white circle in the lower right corner of the interface for the 'flip button'

place the text 'i' on the white circle to represent 'info'

group the white circle and the 'i' and call the group infoButton

save your work

Uploaded with plasq's Skitch!

Rather than starting from scratch with an import of our Illustrator document, we'll be copying and pasting our design elements into our current work in the Catalyst document.

In Illustrator

select the blueBack and row1-row7 layers

copy these layers

switch to Flash Catalyst

In Flash Catalyst

click on the direct select tool - the white arrow

double click on the cityComponent to edit it in place - you should see the grey chevrons around the component and see the crumb trail in the upper left and see cityComponent as the right most item

paste the copied Illustrator items in the cityComponent

to make the items easy to move, group them and name the group graphics

move the graphics layer to the bottom of the list in the component's layers

adjust the position to your liking

Uploaded with plasq's Skitch!

At this point, you should see the background image in place with the day components laying in place over the rectangles for the alternating days. You might need to adjust the position of those layers to space them evenly. You can do that either in Illustrator or in Catalyst. Next we'll define our info button graphics.

In Flash Catalyst

select the direct select tool - white arrow

double click on the round button in the lower right of the interface

in the HUD click on the 'edit button appearance' 'up' button. this will open up the four states for the button component and list the button in the crumb trail

briefly switch to Illustrator and copy the infoButton graphics group

switch back to Catalyst and paste the graphics into the 'up' state for the button

paste the graphics in each of the button states or select the small colored box in the layers palette for each of the states to copy them over

change the colors of the background layers for each of the states by selecting the state and selecting the background layer. change it's color with the HUD

Uploaded with plasq's Skitch!

To make the rounded rectangle background stand out a bit more, we'll add a black background to the component in both states. You can either draw this layer and put it to the lowest layer in Catalyst, or draw it in Illustrator and copy and paste it like the steps above.

For the second state - chooseCity - we'll want to have a background with a rounded rectangle that has a bit of a different color to it to make the transition from the front to the back more dynamic. We created a greyBack layer in Illustrator so copy and paste that layer to the back of the choose city state. It should be placed to the bottom of the cityListGroup in Layer 1 in the layers palette.

If you test the application you'll see the blue background in place with the button graphics. Click on the button to see the transition we've previously built with the 'backside' color applied.

Flash Catalyst Tutorial: Weather Widget, Part 2

2008-11-25T22:10:00.010-05:00

Download the current .fxp file here: weatherWidget_2.fxp

To view part 1 of this tutorial, click here.

Designing the Second State

In this part of our project, the designer is planning on adding some more elements to our wireframe to begin to flesh out the experience design (XD) of the application. In the iPhone and Dashboard versions of the weather widget, the 'back side' of the application has a function to choose which cities you'd like to track the weather for. Our designer decides to begin with this part of the app.

In Flash Catalyst, our designer opens up the .fxp file and creates a new blank state by clicking on the 'New Blank Slate' button in the Pages/States panel. Interface elements are placed in the new state and a state title of 'chooseCity' is given to this second state. In the chooseCity state the user is presented with a list of current cities that are being tracked in a scrolling list. Each item in this list has the name of the city and a button to remove the city from the list. There is also a button to add a new city at the top of the interface as well as a button to go back to the previous view. All of the UI elements are placed on the stage.

Uploaded with plasq's Skitch!

Next, our designer realizes that the scrolling list will have more than one city listed for a typical user. Since the items in the list will be similar, he decides to make this a Custom Component... good call! We create the custom component in the same way we created the dayComponent in the first part - select all the items for the component (remove button, city title, surrounding box) and click on the 'Convert Artwork to Component > Custom/Generic Component' in the heads up display (HUD).

Now that our second state wireframe is complete, we'll build the transition from one state to the next. For those of you that attended MAX in San Francisco and were lucky enough to get into the hands-on lab with Catalyst, you'll recognize the transition we're going to build. It is a rotational transition that makes the application flip over like a card to show the 'back side' of the app. This is the same transition that Apple uses on the iPhone and in Dashboard.

Begin by having the Timeline panel viewable - double clicking on the tab works if it's collapsed. Because we had Auto Effects for New Transitions checked by default in Flash Catalyst (it's in the Timelines menu) you should see some standard fade transitions between the 2 states. All the way to the left in the Timeline panel you will see 2 State Transitions - View City > Choose City and Choose City > View City. These represent the names of the 2 view states we've defined so far. We added 2 actions to each state transition - Rotate 3D - by clicking on the row for the item to be transitions (city and cityListGroup) and then clicking on the 'Add Action > Rotate 3D' button. We then selected each Rotate transition and changed the values to the ones in the diagrams below in the HUD. For the second state transition (the one that goes back to the viewCity state) we just reversed the order of the transitions.

Uploaded with plasq's Skitch!

To trigger the interactivity for the transitions, our designer selects the round button in the first state, and adds a transition to second state interaction. On the second state, the back button is selected and an interaction is set to go back to the first state. If you run the application, you will see a transition like the one below. (click image to play movie)

Handoff to the Developer

The designer is satisfied with the transitions and basic wireframe positioning of elements and saves his .fxp and hands off to the developer again. Our developer realizes that some changes have been made to our project with a warning presented to him in Gumbo on import of our updated .fxp file. He accepts the changes as none are critical to the functionality already built.

The first thing our developer does is to rename the newCustomComponent that our designer created in Catalyst - I'm hoping that Catalyst will allow you to declare class names in the future so as not to require that as part of the workflow - so that our naming conventions are consistent with one another.

Uploaded with plasq's Skitch!

After digging into the created code a bit, our developer realizes that the button component that our designer created to transition from state 1 to state 2 is just 'floating' in state 1 and not part of a group or custom component. He thinks that might not be the best way to have this button represented and decides to place it into the group on state 1. The problem is, when doing this, it becomes difficult to access the state transition that occurs 1 level up in the display list chain. There is no event that would allow us to track this user interaction so a custom event class is created: FlipEvent.

Uploaded with plasq's Skitch!

Our developer opens the cityComponent class and adds a few lines of code to include the new custom FlipEvent we've created. He ties that to the button - hmm, gotta' rename that button ;) - which triggers a function to dispatch our new event.

Uploaded with plasq's Skitch!

Because our cityComponent is now set up to dispatch our 'flip' event, we can listen for that event in our application! In the weatherWidget_2 file, we add some code to listen for the event to be triggered. Rather than setting up a function to be called to switch the states of the app, we're using a shorthand for that by using the {} with our expression embedded in it to switch the currentState property.

Uploaded with plasq's Skitch!

When we test our application now, we have the same effect as displayed in Catalyst, but we are now using a custom event to trigger our transition.

Part 3 - Let's get some skin on this sucker!

Flash Catalyst Tutorial: Weather Widget, Part 1

2008-11-24T21:26:00.007-05:00

I've been playing with Flash Catalyst for a few days now and have a pretty good handle on the basics. I was scrounging around the web trying to find a tutorial or any sample files anyone had done with the MAX release of the software, but have not been able to find one. So, I thought I'd put one together myself and share.

The idea for this sample is to try to emulate and demonstrate the capabilities of Flash Catalyst, Flex Gumbo, and the designer/developer workflow. I hope that I am accurate on my assumptions for the software and it's best practices - given that it has only been in the public eye for a week or so. Please feel free to comment on suggestions and ideas for the tools and techniques. On with the show!

Catalyst Weather Widget

The current .fxp document: weatherWidget.fxp.zip

Our client has asked us to build a weather widget application to have on their travel site. They love the iPhone and would like us to build an application that very closely emulates the functionality and design of the iPhone's built in weather application.

The first step in our process will be to create wireframes of the application. In our wireframe, we will capture all of the major sections of content and their basic placement within the constraints of the application footprint. Our designer opens up Flash Catalyst and begins to block out areas for data and imagery.

Uploaded with plasq's Skitch!

All of the sections were placed on the Catalyst canvas using the tools in the toolbar (box, text field, circle). The top section was created first with a text holder for the city, the hi and low for the day, the current temperature and an area for the current weather graphic (snow, rain, sunny, etc). This section was then grouped to make it easier to move around the stage.

Create the dayComponent
Next, the designer created 1 day section by laying down a rectangle for the surrounding box, text holders for the day, the hi and the lo, and a box to serve as a placeholder for the forecasted weather graphic. The day section contents were then converted into a custom component by selecting 'Convert Artwork to Component' > 'Custom/Generic Component' from the heads up display (HUD). Our designer duplicated the new dayComponent 6 times and spaced them evenly down the space to represent each of the days of the following week of forecasts.

Create the cityComponent
After returning to the main stage by clicking on the leftmost link (not sure what this is called exactly, but it's the crumb trail that is displayed immediately below the 'Pages/States' section in the interface), our designer selects all of the contents of the application that have been built so far. This includes the top section (in a group), the seven day components, and the little round button on the lower right. With all the items selected, we again convert into a custom component by selecting 'Convert Artwork to Component' > 'Custom/Generic Component' from the HUD. We now have a cityComponent as a custom component that is made up of a top section and seven embedded dayComponents... looking good!

When we test our application at this point, the wireframe has the correct positioning for it's components but not much else. Because the dayComponents are all the same, and Catalyst doesn't support and UI based logic statements, it's time to put our code hats on!

Handoff to Flex Gumbo #1

Our first step of our developer is to import the Flash Catalyst .fxp file. When we do, we're presented with a Flex Package Explorer that looks something like this:

Editing the dayComponent.mxml
Our first task is to add some mechanism to dynamically name the component text areas within our application. We'll do this in Flex using databinding and with some custom parameters. At the top of the dayComponent file, we'll add some <Script> tags and define 3 variables for the textfields in our component - day, hi and lo. Then, we go to each <TextGraphic> tag and find the 'text' attribute. This defines the text to be displayed in our component. We use the binding symbol of curly braces '{ }' and place the names of our variables on the appropriate TextGraphic tag.

Uploaded with plasq's Skitch!

Editing the cityComponent.mxml
Next, we open our cityComponent.mxml document and add the code required for this to be dynamic. We add another Script section to the top of our document, this time including the city, dayHi, dayLo, and currentTemp as variables to display in the top section of the interface. Down on line 37, we replace our text parameters with our curly brace friend and the appropriate variable name. You'll notice that our developer wanted to keep the 'H:' and 'L:' as prefixes to the hi and lo information in the design. The way that is done is with string concatenation which is indicated here by this code:

text="{'H: '+dayHi}"

Basically, that states - take the letters 'H', ':', and a space and then add to that string, the value of dayHi.. easy peasy!

Now then. Since we've already edited our dayComponent.mxml to include a new variable called day (check out the screen shot from above) we can add values for those names in our cityComponent file! The next blocked out section in the diagram shows the dayComponent placed on the stage and at the end of each line a 'day' variable is being defined. One of the cool things about using Flex Builder is the fact that because we've defined this variable in our dayComponent 'class', Flex Builder code hints this new variable for us to fill out... less typing = happy carpal tunnel ;)

Uploaded with plasq's Skitch!

Editing the weatherWidget.mxml
Last part of our first handoff is for our developer to open the weatherWidget.mxml document and define the variables that he has created. We define the city, currentTemp, dayHi and dayLo on our cityComponent tag.

Uploaded with plasq's Skitch!

OK. We've had our designer create a basic wireframed application - blocking out areas of content and imagery. When our designer runs the application out of Flash Catalyst, the blocked out areas are correct, but all the names of the days are the same and information is 'hard coded' into the text fields. Our developer picks up the .fxp file from our designer and he adds a few simple lines of binded variables and scripting code. When our application is run now, the names of the days are 'dynamically' placed and the application has the basic structure we'll need for further steps.

If you open the weatherWidget.fxp document in Flash Catalyst, you'll notice a strange looking thing - What is up with those long curly braced names?

Uploaded with plasq's Skitch!

Remember, our developer replaced the names of our 'hard-coded' values with binding variables. If you dig into the components in Flash Catalyst, you'll see that the text name in the HUD's are now the binding names from Flex Gumbo with the curly braces... aha! So don't change them, or our developer friend will have to change them back again. Actually, when the developer re-imports the .fxp after we do some more designing, he'll have the option to write over changes or not, so I guess that last statement is up to your normal workflow process you have at your gig.

The current .fxp document: weatherWidget.fxp.zip

Stay tuned for Part 2!

Tour de Flex: Great AIR App for Flex Developers

2008-11-24T11:45:00.004-05:00

One nice utility application that was released at the MAX conference this year was the Tour de Flex AIR application. It's a great utility for referencing Flex and AIR objects and API's. You can download it by clicking on the badge below:

Flash Catalyst in the Wild!

2008-11-21T12:45:00.004-05:00

Adobe released a 'MAX Preview' of the anxiously awaited Flash Catalyst (Thermo) this year at the MAX conference. Catalyst is a design centric application that allows a designer to work in tools they are graphically comfortable in - Photoshop, Fireworks, Illustrator - and import them into Catalyst to add expressive functionality all the while creating a working Flex application.

The preview is well executed but does have a 'raw' feel to it. The full application is not expected for a year... or at least that was the general statement from Adobe folks. There are a limited number of components available at this time but when the application reaches a public beta, I would expect quite a few more to be added.

The one thing that Catalyst does seem to be ready for right now is it's use as a wireframing tool! In fact, Catalyst might be THE wireframing tool of choice for experience design professionals. On the flight home from San Francisco, I was able to make 5 or 6 different versions of an application that Christian, Joe, and I have been kicking around! These are fully immersive wireframe models with clickable areas and transitions from state to state. They give the very lo-fidelity prototype 'teeth' that can be evaluated and iterated upon. It's exciting to see the potential! I'll post screen shots and some samples soon.

Chrysler Didn't Win at MAX

2008-11-21T12:41:00.004-05:00

Oh well. The Chrysler application that we from Knoware worked on last year did not win the MAX award at this year's Adobe MAX conference. But, it was an honor to be involved with a project that was nominated none the less! Scrapblog.com was the winning entry in the section that the Chrysler application was up for. Congrats to Scrapblog and their excellent RIA!

Woohoo! Adobe MAX Awards Chrysler wiTech AIR app

2008-11-10T09:11:00.005-05:00

Joe Johnston of Universal Mind forwarded a link to me the other day regarding the Adobe MAX Awards for 2008. One of the finalists in the contest for the RIA category is an application that Joe, Christian Saylor, Tim Todish, Grant Carmichael, Mike Kopchick and I worked on back in the day - Chrysler's wiTech Auto Diagnostic AIR application. Our team worked with the team at Atomic Object on the original proof of concept as well as a good portion of the final build.

This application was built to display the diagnostics of a vehicle when the mechanic hooks the car up to the 'computer'. Joe, Tim, Christian, Grant, Mike and I worked on this back when we were all at Knoware. Jim Mitchell was our point person over at Chrysler when we worked on this app. Congrats to Jim and the Chrysler crew for all the hard work on the completed app!

Big props to Joe, Christian, Tim, Grant, Mike and the AO crew for all their work on the app - since the original team is nowhere to be seen in the award entry on the MAX site... bummer!

Here we go...

2008-10-02T09:17:00.005-04:00

As we all know, it's about that time again. Do we change what we're going to do as a country moving forward, or do we stay the course and weather the storm? No matter what side of the coin you're on, voice yourself with your vote.

And just because Sarah Silverman is so damn funny, try this one on for a good laugh:

Working with XML Namespaces in Flash

2008-09-22T11:37:00.001-04:00

Today I was having some issues with parsing RSS/ATOM feeds in Flash. I forgot to factor in the fact that both use namespaces in the XML. Here's a simple block of code I used to handle the namespaces and parse the XML into Value Objects:

public function xmlLoaded(event:Event):void

{

trace("done loading");

theXML = XML(myLoader.data);

var ns:Namespace = theXML.namespace();

for each (var property:XML in theXML..item)

{

var atom:Namespace = property.namespace("atom");

var fVO:FeatureVO = new FeatureVO();

fVO.pubDate = property.pubDate;

fVO.updated = property.atom::updated;

fVO.category = property.category;

fVO.title = property.title;

fVO.summary = property.atom::summary;

fVO.link = property.link;

fVO.enclosure = property.enclosure.@url;

fVO.xmlData = property;

model.featuresArray.push(fVO);

trace("creating featureVO "+fVO.enclosure);

}

This is what the sample xml looked like from Blogger's RSS/ATOM feed:

<rss xmlns:atom='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearch/1.1/' version='2.0'>

<channel>

<atom:id>tag:blogger.com,1999:blog-</atom:id>

<lastBuildDate>Wed, 10 Sep 2008 19:07:53 +0000</lastBuildDate>

<title></title>

<description></description>

<link>asdfasdf.com/</link>

<managingEditor>noreply@blogger.com (Erik Loehfelm)</managingEditor>

<generator>Blogger</generator>

<openSearch:totalResults>9</openSearch:totalResults>

<openSearch:startIndex>1</openSearch:startIndex>

<openSearch:itemsPerPage>25</openSearch:itemsPerPage>

<item>

<guid isPermaLink='false'>tag:blogger.com,1999:blog-</guid>

<pubDate>Wed, 10 Sep 2008 19:07:00 +0000</pubDate>

<atom:updated>2008-09-10T15:07:53.696-04:00</atom:updated>

<category domain='http://www.blogger.com/atom/ns#'>feature</category>

<title>People Singing</title>

<atom:summary>This is going to be a feature for the portal.v/atom:summary>

<link>asdfasdfasdf.html</link>

<enclosure type='image/jpeg' url='http://msnbcmedia.msn.com/j/msnbc/Components/Slideshows/_production/ss-080522-idolfinale/ss-080522-idolfinale-09.hmedium.jpg' length='0'/>

<author>noreply@blogger.com (Erik Loehfelm)</author>

</item>

</channel>

</rss>

You can see the syntax to be used on the 2 lines highlighted in bold above. The first defines the namespace (atom) and the second shows how you access elements in the xml that have the atom namespace applied to them.

Photoshop Tip: Creating a dotted line

2008-09-09T11:16:00.001-04:00

Here's another handy tip for Photoshop CS3. To create a dotted line in Photoshop:

Select the Pencil or Brush tool from the tool menu
Open the Brushes Palette from the Window menu
Click on the 'Brush Tip Shape' item in the list on the left
Adjust the 'Spacing' slider on the bottom of the right list

This will give you a dotted line while drawing with that particular pen/brush! Save it as a new brush if you'd like to use it again in the future. Adjust the 'Spacing' slider to give you the spread between the dots that you'd like. Playing with the adjustments on the other settings will allow you to create dashes, or other shapes along the same pattern. Easy peasy!

Photoshop Tip: Switching between open documents

2008-09-09T11:00:00.001-04:00

As basic as this might seem, I always seem to forgot this little key combination to switch between open documents on the Mac.

Hold down Control:Shift and press Tab to cycle through the open documents in Photoshop.

Photoshop Tip: Color picking from anywhere

2008-09-08T13:59:00.003-04:00

Here's a quick Photoshop CS3 tip to sample colors from applications other than Photoshop:

With a Photoshop document open, click on the color swatch/color chooser in the tools pallette to open up the color picker.
Mouse over the Photoshop document so that the eyedropper tool becomes visible.
Left-click your mouse in the Photoshop document and continue to hold the mouse button down.
You can now move your mouse outside of the Photoshop document and sample colors from anywhere on your computer screen!
Release your mouse button when you have found the color you desire.
The sampled color is now the selected color in your color picker! Be sure to have the "Only Web Colors" checkbox unchecked to allow a wider gamut of colors to be sampled.

Note: This will only sample colors from what is visible on your screen. It will not allow you to move windows to find colors on a 'buried' screen. Be sure to set up your workspace so that the open Photoshop document and whatever your color sample source will be are both visible.

Flash Heat Mapping

2008-08-28T14:44:00.001-04:00

I've been working on a widget-like application at the office for about a month now, creating an application that collects data from users and displays it as a heat map.

We're expecting this to be a part of a great portal we're currently designing. This will be one of the 'sticky' parts of the portal contents that allows our readers to take a stab at where the market is going to be in the future. It displays the current Foreign Exchange pair pricing and will allow you to guess what tomorrow's high and low will be. Then, it will map the answers as a heat map on the interface to display the accuracy.

Here's some preliminary screen shots:

Uploaded with plasq's Skitch!

MarsEdit

2008-08-28T11:38:00.001-04:00

I'm testing a few blog publishing platforms these days. The first on the list is MarsEdit - a Mac specific platform for publishing, editing, and overall management of blogs.

So far, the experience has been pretty good in my tests. I'll be interested to see the flexibility of it as I move forward. We have a need at GFT to blog on a daily basis and we are evaluating software to help us accomplish that.

AIRFare AIR Application

2008-06-18T22:35:00.003-04:00

My old friends Joe Jonston and Christian Saylor - both of Universal Mind - have been working on an AIR application called AIRFare that is a flight and hotel lookup app using data services from Kayak. Joe has been knee deep into the Experience design of the application and created a couple of videos of his progress:

You can also follow Joe's progress at his blog at www.merhl.com

DemographicMapping

2008-05-16T15:55:00.005-04:00

I've been working on a very cool little application at work over the past few days. It is a mapping application leveraging the Yahoo! AS3 mapping API in Flex 3. We needed an application to be able to view a regional snapshot of our account activity over a given time period. We new the following data:

account address
account value
age
gender

First had to get the geocodes for all the addresses but found plenty of places to do that. So, here we are with a spreadsheet of almost 5,000 people and couldn't find an easy to use online application to display them.

Enter Flex.

I built the application in Flex 3 using Yahoo!'s api. It was a fairly easy workflow with the Yahoo! classes. Although, I would have liked to have seen the code for the classes from Yahoo! to see how some things were put together that I was extending. The plotting of the points was straightforward but kind of cluttered when you have so many of them in a small area.

Enter filtering.

I created a way to filter by general region of the globe, gender, age, and account value. This helped to narrow down the field of view quite a bit, but there was no way to direct focus on a particular are of the map - no way to see all of the accounts in Chicago for example.

Enter Zones.

At any time you can drop a 'zone' on the map. What the zone does is aggregate the data in a given geographical radius from the center of the zone. This way, you can explore the details of an area and have a summary of what's going on in the area. The zone becomes active after it is dropped and moved or it's size adjusted.

After the completion of the web based app, I decided it would be valuable to create an AIR version. This way, the data could be swapped out for a new data set by simply selecting a new document. I used a tab deliminated text file for the data source but that could easily be swapped out for another format later. I was considering releasing it as a public application at some point and adding customization features like:

select a data file and choose what columns to plot data against
customize the filtering based on the data
customize the zone details based on the date
save the 'file settings' as a favorite for recall later or to use with multiple files of the same format

Anyway, fun stuff and very valuable for what we needed!

Cool Design Publication

2008-03-17T10:46:00.004-04:00

I've stumbled upon a very cool publication on web design and development. Its called WebDesigner and its published in England. It has some really great articles on how to execute the latest and greatest in web techniques. Most of the technology how-to's focus on Adobe products - Flash, Flex, Photoshop - but they also cover some Silverlight projects.

They have some great portfolio sections as well, showcasing some great designs across the web. You can check them out online at www.webdesignermag.co.uk I've been able to pick up copies on the newsstand at Barnes & Noble in the computer or art sections.

Another Chapter...

2008-02-20T11:19:00.002-05:00

Well, another phase of my professional career is coming to an end - I resigned from Haworth on Monday. I'm currently working out my required 2 weeks notice and plan to start at my new job in March at Global Forex Trading (www.gftforex.com). I'll be heading up a sort of web R&D practice within the company doing what I like to do best - building cool shit! I'm very excited and plan to share more of my work here for anyone that cares.

Onward and upward!

WebKit News from the Mother Ship

2008-02-08T12:38:00.000-05:00

I was fortunate enough to meet with Apple this past week on a trip to the Bay Area. In my visit I learned of the web application team and specifically the WebKit team within Apple. This is a dedicated team to developing and furthering the progress of the WebKit technology that forms the backbone of Apple's Safari browser, Mail client, and Apple's iPhone and iPod Touch browsers, among others.

One of the unique features of this group is the fact that it is one of the few open source teams within the Apple umbrella. They are working in the code base with developers from around the world driving the next versions of the products and technologies to be included in the WebKit open source project. Any of us can go to webkit.org to contribute to the project, download source code, or play with nightly builds. This is one place where we can actually see a 'product roadmap' for what Apple will be including in their products in the future.

Some of the cool features that we should be able to see in an early phase from the nightly builds are things like:

Embedded browser database for occasionally connected data access

Expressiveness in transitions - basically browser based Flash-like transitions

Downloadable fonts

Inline CSS editing

Full support for SVG

Very cool stuff! You can also follow the threads at two blogs related to WebKit development at http://webkit.org/blog/ aka SurfinSafari.

Experience Design, Where to Start and End

2008-01-29T15:55:00.000-05:00

Joe Johnston (merhl.com), Christian Saylor (Mighty), Grant Carmichael (knoware) and I have been having some great conversations around the concept of Experience Design (XD) lately. Late last year, pretty much during the MAX 2007 conference in Chicago, I latched on to the XD conversation in full force. I hadn't realized it, or labeled it as such, but XD is what I've been doing for a couple of years now... nice to actually have a name for it - I've gotten sick of saying "oh, I do web stuff" when someone asks what I do :) The idea of interaction design or web architect always flies over the non-web person's noodle.

One of the struggles I've been having in wrapping my arms around the discipline, is where does it end? In print, once the piece comes off the press, your done. But in XD, the conversations continue to get more and more lofty. Initially, XD is focused on the user's interaction with the site/application/widget/etc. But this easily begins to transcend this easy to define 'web physical' realm into the oh-so-fuzzy realm of brand, consumer relationships, trust.

The building blocks of XD for the web - in my opinion - are founded on the physical and emotional touchpoints a person has with a web solution. This can manifest itself in the things that a normal rich internet development/design process would undertake:

clearly articulated objectives

measurable success criteria

simplicity and focus

content is king

provide personalization

minimize the chrome

just enough is more

respond to actions

motion has meaning

preserve context

design with consistency

But lately, I've been struggling on where to put the cap on the conversation. A great blog I follow at Adaptive Path pointed out how experience design is not about brand. In my reflection though, brand is the culmination of experience design. Brand, from the perspective of an organization is inside-out - where the organization is attempting to shape public perception based on it's messaging and externally facing tools. Brand, from the perspective of a consumer is outside-in - where my perception of what a company represents and how it engages its customers is based on the experience you've had with an organizations products and services. These 2 perspectives do not necessarily end at the same point - a cohesive brand - but they do end at the same general point - brand.

This is where I'm stuck. I'm not sure how to tie the loose ends together or if they should be tied at all. The conversation of experience design can be capped at the physical elements of the experience - graphic design, motion design, interface design, etc. Or, it can elevate to the level of the entirety of a brand.

The fact that I bought Apple stock at $19 (and sold it at $50 before the split... DAMMIT!) points to the value I held in Apple back in the day - my 'experience' with Apple products and services formed a personal brand experience with me that was valuable and made me purchase the stock. That experience was rooted all the way down to the icons and sounds in the OS and the little smiley face on start-up. Did the designers at Apple consider my perception and acceptance of this experience at this low level so many years ago? Was it a conscious effort to engage me to that degree or was it just creating something cool for coolness sake?

So my question is, where does an experience designer start and stop?

Laughing Hard

2008-01-10T11:45:00.000-05:00

So, I listen to Opie and Anthony on my commute into work in the morning and there have been 2 episodes that I laughed so loud and hard at that I was crying while driving! Not safe, but a definite pick me up in the morning.

This morning, they were busting on a friend in studio who plays a WWII video game with the team name of Gaays. The guy is a bit overweight and they were throwing out really funny names of war movies he 'starred' in:

Fridge Over the River Qui
Apocalypse Cow

And my favorite, which took me 10 minutes to come up with but a caller called in with it a bit after:

The Guns of Provalone

LOL! Really funny stuff. Check out oandaradio.com. They might have the clips up there.

A New Chapter...

2007-09-12T09:21:00.000-04:00

The cat is out of the bag. I'm leaving my position at Knoware to begin a new career at Haworth! I'll be filling the role of Web Development and Support Manager there and am very excited for the opportunity.

Things have been, and will continue to be, crazy for the next few weeks, but I'll try to post a bit more once things are settled. Onward and upward!

Adobe MAX 2007 Sessions

2007-06-26T09:19:00.000-04:00

Adobe has posted it's session list for this year's MAX conference. Overall, it looks like a good lineup! There are quite a few intermediate to advanced Rich-Internet Application sessions aligned with Flex and AIR. Hopefully, the speakers will be an improvement over last years.

I had a nice conversation with Ted Patrick regarding the speakers from last year. I voiced our concerns over the quality and professionalism of non-Adobe presenters. He assured me that this year was going to be different. It sounds like most of the speakers will be Adobe employees or very qualified partners.

We're excited for the new products coming out of Adobe. Hopefully, this years MAX will inspire us like it did 2 years ago in California. We changed our corporate focus based on the knowledge we took from MAX in Anaheim.

New Knoware Website

2007-06-26T09:07:00.000-04:00

We've launched a new version of the Knoware website at www.knowarefast.com. This new design showcases some of the fantastic work that the team has been cranking on. We wanted to take a story telling approach in this version of the site. Christian has always been an advocate of digital story telling and it certainly shows from his work on this launch.

There are still some sections of information that we'd like to include on the site, case studies for example, but those will come in due time. Cheers to everyone involved! It looks great.

New Blog Launched: MyPhoneWidgets.com

2007-06-19T09:45:00.000-04:00

With the much anticipated launch of the iPhone less than 2 weeks away, I've created a place for 3rd party developers to showcase their applications. It's a blog called MyPhoneWidgets at http://www.myphonewidgets.com. If anyone would like their application added to the list and reviewed, please forward an email to submissions@myphonewidgets.com and I'll do my best to get them up on the site in a timely manor.

Adobe MAX 2007 Site Live

2007-06-14T15:53:00.000-04:00

Adobe has made live it's MAX 07 site for the public to consume. We're excited and hopeful that this years MAX conference will be an improvement over last years. I'm not sure if it was the venue or the speakers but we here at Knoware didn't get a lot out of it. It's unfortunate because we really enjoyed and were energized by MAX 05 in Anaheim. That's the year that Flex made it's big splash and we were giddy with new ideas and inspiration.

The common opinion from the Knoware team for last year's event in Vegas was that it was rather weak. The speakers who were not Adobe or Macromedia personnel seemed to be giving sales pitches for their respective companies instead of giving us insight into the technology.

Ted Patrick is on the case though. He writes in his blog that he will be taking on a new role in promoting the conference. So I guess we can all blame Ted if things don't meet our expectations ;) We're looking forward to seeing you in Chicago Ted!

'Widget' Article in the Wall Street Journal Relating to SeeSpotSlide

2007-06-13T10:35:00.001-04:00

Today's edition of the Wall Street Journal has an interesting article on the pervasiveness of 'widgets' in social networking sites. They define 'widgets' as a snippet of code (for us that's the Flash embed code) that is created on these aggregating sites and posted to social networking sites. It specifically points to Slide, RockYou and a few others we built SeeSpotSlide to 'compete' with. The article goes on to describe the inability for these services to publish advertising to the widgets, based on rules that have been put in place by MySpace and others.

"New data on viewing photos, videos and music on the Web may have an impact on the way advertisers and social networking sites perceive firms that help create this content. Nearly 177.8 million people world-wide viewed Web content in April made with online tools from companies that let people post photos, videos and music on other Web sites, according to data that Web-tracking firm comScore Inc. plans to release today."

'Widgets' May Snag More Ads - WSJ.com

ComScore has released new service today that tracks widget use across the web. In it, they report on the penetration numbers of widgets, where they originate, and where their audience is located. It demonstrates the importance of widgets to the advertiser community and can provide widget creators a means to promote the value of their services.

It seems then, that our concept was at least somewhat on target - create a service to generate slideshow widgets where an advertiser could have their ads placed and distributed. Now if we could just get a few more million people using it and get a couple of big advertisers on board...

technorati tags:seespotslide, flash, flex, comscore, advertising

Blogged with Flock

Adobe's OnAIR Bus Tour

2007-06-13T09:56:00.000-04:00

Adobe's AIR team has announced a summer bus tour to promote the AIR platform. They will be travelling across the country and providing camp-like activities to push the new technology. It looks like it will be finishing up in Chicago for the 2007 MAX conference. Check out the details at the AIR Bus Tour site.

Holy Etch-A-Sketch Skills Batman!

2007-06-13T09:36:00.001-04:00

From the 'everybody-has-to-be-good-at-something' camp, comes this video of George Viosich showing off his amazing skills on the Etch-A-Sketch. The Cavaliers contracted George to create this image of Lebron to celebrate the team making it to the finals. Pretty amazing stuff!

No Flash on the iPhone

2007-06-12T14:52:00.001-04:00

Uh oh. If this post on TUAW is true, then we're only left with AJAX for the time being for developing applications on the iPhone. Kind of a bummer. If Apple had left a way for Widgets to be implemented onto the iPhone, I wouldn't mind as much. But, not having the ability to write Flash applications kind of sucks. It closes the door to a lot of potential... at least in the short term.

"Our sources at WWDC are reporting that, for now, there is officially no Flash support on the iPhone."

It's official: No Flash support on the iPhone (yet) - The Unofficial Apple Weblog (TUAW)

technorati tags:flash, iphone, plugin, developer, ajax

Blogged with Flock

Spout.com Viral Campaign for Four Eyed Monsters

2007-06-12T09:36:00.001-04:00

Wow! Our friends over at Spout.com have come up with a great viral campaign to promote an idie film titled Four Eyed Monsters. The film makers are releasing the full length film online and you can view it on YouTube here. Spout.com is giving the start-up film makers $1 for every person that signs up on Spout's site. You can click here for the sign-up page. Very cool idea! Congratulations Spout team!! We hope you do well with it.

"Join now from this page (spout.com/foureyedmonsters) and Spout will give $1 to Susan & Arin to make another movie. It's that simple. It costs you nothing. "

Spout – Sign up with our online film & video community

technorati tags:spout, viral, Four Eyed Monsters, spout.com

Blogged with Flock

iPhone Application Development

2007-06-11T23:45:00.000-04:00

Today was the opening day of the WWDC (worldwide developer's conference) for Apple and Stevie boy announced that 3rd party application development would be supported on the iPhone in the form of Web 2.0/AJAX applications running in Safari. They also announced the release of Safari for Windows.

All that I have heard in response to this news is how badly it sucks. I don't get it? May be I'm biased since that's mostly what we build - rich-internet applications and web 2.0 stuff - but I think this is a great step! What exactly do the nay sayers plan on creating for a phone anyway? Halo 5 mobile? Let's be real for a second. Probably the most valuable applications that you'll find on a phone are going to be data mashup type applications that a user can get a bit of info on, make a quick - and small - reaction to and get out. I never thought I would want to be editing excel spreadsheets on my phone. Anyone that does, I've got an idea for your portable spreadsheet work, it's called a laptop.

The form factor of a phone sized device must be strongly considered in the type of application that you build. I've had a Palm for as long as they've been around and I think I opened a Word document all of once on it. Never edited it. I think I was just seeing if it worked, actually. Same goes for my Blackberry. Can I open and edit documents - yes. Have I ever, no. May be I'm in the minority, but I don't think I am. The ability to send and receive email and attachments that are images and sound files seems to be more important for a phone device.

Lets make a few assumptions for a moment. Let's assume that it truly is a full version of Safari that is running on the iPhone. It has been stated that the OS is a FULL version of OS X on the device. Obviously, the interface elements that are in the desktop version are not on the phone nor are they required but the core kernel is - at least, that's what Steve Jobs said at the D:All things digital conference a few weeks ago. So, if it's a full version of Safari running on the Apple WebKit, then it should support plug-ins. If it supports plug-ins, it should support Flash. If that's the case, we can develop applications in Flash and Flex and deploy them to the iPhone! That's all we needed to hear. To extend that a bit, I read a lot of complaints about developing games for the phone. If it supports Flash, your golden. There's plenty of game content developed in Flash. If it truly supports all types of plug-ins, you could develop a game in Director or Unity and deploy it to those plug-ins as well.

Now, it would be nice to have a little icon on the phone like the other applications, but that's not going to keep us from developing for it. If a user has to bookmark my app to get to it, so be it. Maybe Apple can extend the concept they're starting with by embracing their own Widget model of development. The existing apps that come on the phone look as though they are identical to the Widget versions of applications on the desktop OS so it doesn't seem like it would be too far off to support that. Again, it would be leveraging AJAX and the Safari WebKit to do so.

This morning there was a lot of buzz on the announcements from Adobe and Apple. The Adobe boards were buzzing with 'wait till you hear the news from Apple' chatter. We were kind of thinking that the iPhone would somehow support installed applications with Adobe's new AIR (Apollo). It seemed like the timing on it was right and knowing how the .air files install into the AIR framework, it seemed like a possibility. There was no announcement from either Apple or Adobe though, so I guess that's not going to happen. But, it seems like if the assumptions from above hold true, it could possibly happen in the future. Now that would be cool! They could keep the iPhone system hooks to a minimum for security reasons and have an installation option for applications on the phone. That would probably be a really nice way to satisfy a decent amount of people and protect the phone's stability. We'll have to see I guess.

So, if the assumptions above hold true, and developing an application in Flex (or AJAX or Flash) and deploying it to an iPhone through Safari on the phone is possible, it sounds like it's time to scheme up a few nice little apps for the end of June!

Adobe Releases 'Apollo' Beta, Now Titled AIR

2007-06-11T09:41:00.001-04:00

Ted Patrick once again drops the news on us regarding some great releases from Adobe last night. Adobe has launched the Beta of the Apollo project, now titled Adobe AIR - Adobe Integrated Runtime. Joe Johnston pointed out an interesting little fact - Rich Internet Application: RIA is AIR backwards... discuss.

"'Apollo' codename has been replaced by Adobe Integrated Runtime, Adobe AIR.

Ted On Flex: Adobe AIR Raid!

You can download the goods direct from the horses mouth at Adobe Labs.

technorati tags:adobe, AIR, flex, flash, apollo

Blogged with Flock

Twitterrific is Twitter-awesome!

2007-06-08T16:51:00.001-04:00

I just downloaded a little application from the boys and girls at the IconFactory called Twitterrific. It's an OS X app that allows you to post Twitter postings from the desktop without launching the browser. To be honest, I though it was going to be a Dashboard Widget application, but I'm cool with it being a stand-along app.

Twitterrific on the Mac

It's a great little application! Nice, clean, no-nonsence interface with the ability to post 'twits' (if that's the correct word) to your Twitter account as well as view your friends messages. Overall, nice execution, good features, clean design, easy to use - 2 thumbs up!

Taking a Moment to Dream...

2007-06-07T23:56:00.000-04:00

I'll be 40 in a couple of years and I've already dropped a few hints, well, not really hints but 'formal requests' with the misses for a BMW Bike. I've always loved the styling and sophistication of the RT series from BMW and this years is no exception. The only thing I'm struggling with is the safety issue. I'm not a crazy rider - I had a bike in college and got the speed demons out of me - but I just don't trust the drivers here in Grand Rapids.

My R1200RT slideshow was made with SeeSpotSlide... of course

I'd love to commute on a bicycle but we live a bit too far from downtown and there are no 'good' roads to ride on. I think I'd be in trouble if I attempted that. So, my other option could be to ride a motorcycle to work, but like I said the drivers here are by far the worst drivers I have ever been exposed to. I'm from New York and didn't have nearly the number of incidents that I've had out here.

Do I just continue to dream, or really try to pull the trigger on one of these bad boys in a few years and be happy with a nice Sunday morning ride while all the knuckleheads are still asleep? Decisions, decisions.

Sorting Dates in a Flex Datagrid

2007-06-07T16:47:00.000-04:00

So, file this under "I can't believe it took me that long to figure this out" catagory, but I just spent the past 2 hours trying to work through a solution for sorting a date column in a datagrid. By default, the datagrid sorting sorts by alphabetic or numeric order. If a date is in your dataprovider, it probably rendered it in the grid as a string. So, if you have a list of dates, the first ones showing up are probably every date with a Friday as a day. If you resort, all the Wednesdays are on top... GRRRR!

I did some searching and found some pointers on what to do. Most of them pointed to resorting the array (not an array collection) or ordering them on the server prior to getting them in Flex/Flash. The solution is much easier than working through a bunch of code for either of these. In your datagrid, define the columns with <mx:DataGridColumn> tags. In the date column define a 'sortCompareFunction' property to be a function like this:

private function compareDates(d1:Object, d2:Object):int
{

var d1ms:Number = new Date(d1.DATE FIELD NAME).getTime();
var d2ms:Number = new Date(d2.DATE FIELD NAME).getTime();

if(d1ms > d2ms)
{
return -1;
}
else if(d1ms < d2ms)
{
return 1;
}
else
{
return 0;
}
}

Replace your date field name from the dataprovider where indicated. That's it. Two hours for that... Boy, do I miss just working in Photoshop ;)

More Sneak Peeks at Flex 3

2007-06-07T14:46:00.001-04:00

Ted Patrick enlightens us again to the upcoming Flex 3 release with today's sneak peek. He describes a fantastic feature of the new Flash Player 9 where the Framework libraries for Flex can be cached in the player. What this means for us is deploying unbelievably small applications - footprint wise - without having to embed the Framework in our swf's! Very cool.

"Flex 3 and 'FrogStar', codename release of Flash Player 9, adds support for caching the Flex Framework within the Flash Player. This feature is nothing short of a revolution for Flex applications deployed to Flash Player. Moving forward the Flex Framework will be cached within the Flash Player dramatically reducing the size of the output SWF files."

Ted On Flex: Flex 3 - Thursday: Dramatically Smaller Flex SWF Files

technorati tags:flex, flex 3, swf

Blogged with Flock

New iPhone Ads on SeeSpotSlide

2007-06-07T10:18:00.000-04:00

Apple has release 4 new iPhone ads to the world for the iPhone release on June 29th. I really wish I wasn't locked in with Verizon at this time but the service is good and my Blackberry is OK... But, DAMMIT! I'm going to be really bummed when that phone comes out! I think we might get one at Knoware just to have it in house and play with the interface. That's one of the benefits to working at our company - these new solutions are part of our DNA. We need to see them for the GUI (graphic user interface), hold them for the TUI (tactile user interface), and hear or speak with them for the VUI (voice/sound user interface) so that we can understand, appreciate and debate the validity of the solution. I know, I know. You're thinking Huey, Dewey, and Lewy but that's what we call 'em and we're sticking to it ;)

So, we have 3 of the 4 ads currently available in SeeSpotSlide's advertising section. Until we're told by Apple to remove them - which I don't think we're doing anything wrong by having them available - have at it! We'll get the 4th one up there today.

technorati tags:apple, iphone, knoware, seespotslide

Blogger Linking Widgets

2007-06-06T23:56:00.000-04:00

I spent a few hours today figuring out how to add a few linking widgets to my posts. At first I thought I'd have to do it manually, but the 'new' widget architecture for Blogger is pretty cool and easy to use!

I wanted to create links to Digg, del.icio.us, and Technorati on each of my posts and have the links be generated automatically for me. It seemed like a straightforward thing to do, but as usual, syntax issues caused me to take a bit more time than I planned.

So, rather than have someone go through the crap I went through getting this little bit of code right, I'll post it for you here:

<span class='item-action'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' title='Digg This!'>
<img alt='Digg!' height='16' src='http://digg.com/img/badges/16x16-digg-guy.png' width='16'/>
</a>
</span>


<span class='item-action'>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' title='Bookmark This to del.icio.us'><img src='http://images.del.icio.us/static/img/delicious.med.gif'/>
</a>
</span>


<span class='item-action'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' title='Add to Technorati Favorites'><img alt='Technorati' height='16' src='[ PUT THE SOURCE TO A TECHNORATI LOGO IN HERE ]' width='16'/>
</a>
</span>

You can place this bit of code in your template in Blogger wherever you feel it suits you. Please note that you'll need to find a Technorati logo and point to it. Be sure to check the "expand widget templates" checkbox in the template > edit html tab. This will give you more visibility to where you can place this code. I placed it immediately after the <div class='post-footer'> tag - about half way down the page. You can see that placing it there will cause the link buttons to show up at the 'top' of my footers for each post. Enjoy!

Component and SDK Enhancements to Flex 3

2007-06-06T14:29:00.001-04:00

Ted Patrick enlightens us to another day of sneak peeks within Flex 3 today. His focus: Components and SDK Enhancements. Some really nice stuff with an Advanced DataGrid component - I've already got some uses for that one - and the Deep Linking API. I'm not sure how the Deep Linking thing will be used but I have an idea or two on some test I'd like to try out.

Jump over to www.onflex.org and check out the details.

"There are some wide ranging changes within the Flex SDK and components within Flex. These new classes/components/features include AdvancedDataGrid, new Collection classes, Deep Linking API (BrowserManager), Resource Bundles, Runtime Localization, and Container support in Flex Component Kit for Flash CS3. These features broaden the capabilities of Flex in providing deeper integration with AJAX, advanced visualization, and support for complex resource management/localization."

Ted On Flex: Flex 3 - Wednesday: Components and SDK Enhancements

technorati tags:flex, components, datagrid

Blogged with Flock

New SeeSpotSlide Players Release!

2007-06-05T16:44:00.000-04:00

I've updated the players for SeeSpotSlide today to include a volume on/off button on mouse over. This makes it significantly less annoying to place video into your slideshows. Before the update, a looping slideshow would keep playing the audio of the slideshow over and over again. This way, you can click on the volume icon in the upper right and turn it on or off.

The volume has a default state of off when the slideshow loads.

There was also a small issue with the resizing of videos in the players. That issue has been addressed and resized video seems to be working fine. Please let me know if anyone is experiencing any issues with video playback.

technorati tags: seespotslide, video, slideshow, flex

Code Enahancements upcoming in Flex 3

2007-06-05T16:40:00.001-04:00

Ted Patrick has released the second day of peeks into the upcoming Flex 3 build. He gives samples of the code enhancements with details at his blog. These enhancements look like a fantastic inclusion! It will take Flex into a much more serious enterprise application realm with these features. I can't wait to see them in action!

"The code enhancements in Flex 3 are a standout in this release. The features include faster compilation, compiler class caching, deeper language intelligence for AS3/MXML/CSS, Code Search, Refactoring (Renaming: Method,Class,Variable), Code Outline, Memory Profiling, Performance Profiling, Profiling Live Memory Data, Enhanced Module support, and Multiple SDK support."

Ted On Flex: Flex 3 - Tuesday: Code Enhancements

technorati tags: flex, enterprise, scalability

Blogged with Flock

What the Flock is this thing?

2007-06-05T09:55:00.001-04:00

Hmm?! This Flock browser is kind of interesting. I downloaded the app this morning and am currently running it to post to this blog. It seems like the tool set is based on Mozilla browser and it has some really nice features for enabling blogging and sharing. The browser feature of the app seems to be just a bit slower than Firefox. Could be due to the overhead of some of the tools.

There's a couple of buggy issues in the Mac version of the blogging entry form, but other than that 2 thumbs up from me! Check it out at the link below.

Flock — the social web browser

technorati tags: flock, browser, blogging, blog

Blogged with Flock

Quick update on Flex3 feature

2007-06-05T09:46:00.001-04:00

Ted Patrick accidentally missed a nice feature in his sneak peeks yesterday - CSS Design View.

"CSS editing has been enhanced with a design view. CSS files now support design view and property editing."

You can see some screenshots and further descriptions on his blog

Ted On Flex: Flex 3 - Monday: Designer/Developer Workflow (CSS Design View)

technorati tags: flex

Blogged with Flock

New Flex3 features

2007-06-04T12:10:00.000-04:00

Ted Patrick is releasing some info on the upcoming Flex3 release on his blog this week. The first covers some of the integration points for graphic skinning in Flex using Photoshop, Flash, Illustrator, ect.

I was just telling Joe this morning (www.merhl.com) about what a pain in the ass it is sometimes to have to compile Flex apps to see the exact positioning of dynamic elements... Someones ears must have been ringing at Adobe :)

technorati tags: flex

SeeSpotSlide and Google Searching

2007-06-01T16:18:00.000-04:00

Interesting how quickly the internet world works. This morning, I searched google for SeeSpotSlide and got 2 items returned. This afternoon, I did the same search. This time, it returned 75 items on 3 pages. Most are links to news aggregators for Joe Johnston's blog (www.mehrl.com). Interesting, none the less.

technorati tags: seespotslide, google, merhl

RIApedia Story on SeeSpotSlide

2007-05-31T13:59:00.000-04:00

Mike Potter from Adobe did a nice write up on the Rich Internet Application site RIApedia. He mentions the main features of the app as well as a few hints at what's to come. Overall, a positive review of the app in my opinion!

Mike did have a few small point incorrectly documented, like the ability to retrieve saved slideshows and the inclusion of video as a future element - it's in there now. Mike fixed the saved slideshow feature error quickly - thanks Mike! Hopefully, this will be the first of many mentions in the tech world!

Microsoft's Surface

2007-05-30T17:36:00.000-04:00

Hmm. Very interesting stuff. Seems as though Microsoft has hired a few people away from Apple to scheme up this one. Overall, the execution looks fantastic! Kudos to MSFT for that. But, we were talking about it over lunch and it seems that the model has only one point of distribution - restaurants. Where else are you going to be sitting down to use a table for any length of time? You couldn't use it for an extended period - sitting looking down all day will kill your neck I would think. And, you couldn't mount it on a wall. You'll loose half of the functionality of placing things on it like they do in the demo.

A photography studio could benefit from it by using it for a client presentation. But, I couldn't see working all day at one. I would expect that only the largest studio's would be able to afford it until the price point comes down.

We're currently doing some work in the gaming industry and this seems like it would be a nice application for use there. Again, the table top is a bit awkward unless your at a bar or restaurant though... Very nicely done, none the less. I can't wait to see how it gets used in the real world.

technorati tags: microsoft, surface, ui, gui

Slideshow section over there >>

2007-05-30T17:25:00.000-04:00

I added a little slideshows section to the right side of the interface. I'll keep that updated with a few new slideshows from time to time. I'll have to use the small size in SeeSpotSlide for the slideshows though. Not enough room on the sidebar for the medium.

Flex/Cairngorm Tips: #1

2007-05-30T16:27:00.000-04:00

So I thought it might be cool to pass along some tips/tricks that got me through the development on SeeSpotSlide. I'll be posting these as I run across them in my head or through updates to the application.

Using a Model to Control the View
I started doing this about half way through the development of the application after seeing it done in some sample apps on a Cairngorm message board. The gist of it is that you tie a component's view to a model. You change the model from anywhere in the application and the view changes. Simple right?!

Here's some sample from the SeeSpotSlide codebase:
In my model classes I have one called ViewModel.as. It is a singleton class (only one instance can exist at a time) and has the following structure.

package com.model
{
import com.adobe.cairngorm.model.ModelLocator;
import com.model.ViewModel;

public class ViewModel implements ModelLocator
{
private static var model:ViewModel;

[Bindable]
public var viewStateReports:Number = VIEW_GRAPHS;
public static var VIEW_GRAPHS:Number = 0;
public static var VIEW_GRID:Number = 1;

public function ViewModel()
{
if (model != null)
throw new Error("only one ViewModel instance should exist");
}

public static function getInstance():ViewModel
{
if (model == null)
{
model = new ViewModel();
}

return model;
}
}
}

Then, in my view class I bind to 'viewStateReports' on say an accordion component like this:

<mx:accordion id="myStuff_acc"
width="560" x="10" bottom="125" top="53"
selectedIndex="{ ViewModel.getInstance().viewStateReports }" />

Now, from any class file I can instantiate the instance of the ViewModel class and change the state of 'viewStateReports' like this:

ViewModel.getInstance().viewStateReports = ViewModel.VIEW_GRID

My accordion component updates due to it's binding to the model. No crazy paths to follow to point back to the component and no custom events that need to be built and fired to trigger the change. The binding mechanism on the accordion sets up it's built in event listeners to make the change. It's probably a good idea to come up with a naming convention that is really obvious here on the 'states' you'll be changing to. When you have a bunch of states of components and views changing in this way, things can get a bit hairy without a solid naming strategy.

The girls!

2007-05-30T16:24:00.000-04:00

Here's an example from SeeSpotSlide. I made this in the application with the images being served up from SmugMug.

SeeSpotSlide - under the hood

2007-05-30T16:06:00.000-04:00

Now that SeeSpotSlide is up and running, I thought I'd document what's under the hood.

The main application is built in Flex 2.01. We used FlexBuilder 2 for all of the development. This was the second large scale deployment application where we used the Cairngorm framework within Flex. Cairngorm has been fantastic! It's provided a way for us to create and organize our projects so that extending and maintaining them is not only possible, it's pretty easy. In fact, the integration of SmugMug functionality was completed in a day and a half with unit testing and deployment!

It took 2 view classes (the main view and the thumbnail holder), one model class, one event class, 3 command classes and a delegate class. Most of these were 'save as' documents from other functionality with customizations inserted where appropriate. The structure of a Cairngorm framework project at first seems to be a bit bloated, but the organization of the classes and the ease at which they can be extended and managed far outweighs the number of files. I think the project has over 100 class files at this time but each one is probably averages 40 or 50 lines of code. To me, it's much easier to browse through the project tree in FlexBuilder to find/remember where a chunk of code is by filename, than it is browsing through a few very long class files. I guess that's a personal preference, but it seems easier to hand off to another developer when constructed in this manner.

So, thanks Cairngorm guys! The name is a pain in the ass to spell, but the value is over the top!

Slideshow application is born!

2007-05-30T16:00:00.000-04:00

It's alive! The first lab initiative to be completed under the new - although undocumented - rules of the lab:

conceptualize an idea
create a business model around it
build a functioning prototype
launch in 90 days or less

SeeSpotSlide officially launched on Tuesday of last week exactly 90 days to the day from it's inception date. It was challenging and sometimes frustrating, but the end result is a pretty nice alpha if I do say so myself. All of the functional requirements created for the alpha have been documented in Basecamp as well as time tracking. I'll be checking into some metrix on timing for an analysis at a later date.

Busy for awhile

2007-05-30T15:57:00.000-04:00

It's been quite some time since I posted. Crazy busy at work. Trying to figure out how I am to manage the KnowareLab initiative I've been assigned to. So far, the work is great but a bit quiet - 'on a deserted island' would be a good description. I'll document the progress of the application here.

4 Months Just Passed?!!

2004-11-07T21:50:00.000-05:00

Huh... Almost 4 complete months have past since the last time I posted to this. Obviously, things have been hectic. The Cancer Portal has been back burnered for immediate deliverable work. But, I do plan on getting something going on this before the end of the year. It's not going to be easy, but I've got to try.

Working hard in Central 1.5 for some clients now. Two projects are currently under way. I've had to bag the idea of using the Agent on one of them. It became too confusing with the way data was being managed. Decided to use a dataMgr class and a dataProviderMgr Class instead. I was able to get stuff to work that way. I've noticed that the performance of 1.5 on a 'real' machine - not the dog I have at the office - seems to be acceptable... I'm judging on the 933 G4 at home... It looks good! Even snappy I'd say!

Through the end of the month I'll be focused on this stuff. Hopefully, by December, I'll have started to carve together the plan for the Portal. Sounds stupid, but I just watched the latest edition of Extreme Makeover Home Edition and the good that those people do has again inspired me to regain focus... whatever it takes right?

2nd test of Ecto

2004-07-22T13:30:00.000-04:00

Eric and I are checking this thing out again.

testing ectoBlogger

2004-07-20T15:51:00.000-04:00

This is a test of the installed ectoblogger software on OSX

Blogging Software Comparison

2004-07-20T15:13:00.000-04:00

Found some interesting stuff yesterday on software for blogging. Server side stuff that we might be able to leverage as the engine behind the interface. I'm going to start to get together some diagrams of the flow of the app this week.

Central or no?

2004-07-19T15:00:00.000-04:00

We're working on using Central as the platform for myJourney. I need to work through the details on how and where the data get stored offline when using the app. I think Central can manage the stuff in the app, but I want to make it easy for the user to connect and publish stuff. 1.5 should be off beta and into full release soon... may be by the end of July or so. I'll start to get on the development around that time frame.

What's in a name?

2004-07-19T14:58:00.000-04:00

I've been kicking around ideas for the name on the app. My favorite so far is "myJourney". I think it ties in well with the idea behind the applications as well as the results of the person, whether they be positive or negative. I thought that would be important.

myJourney... I like it.

And so it begins...

2004-07-16T16:07:00.000-04:00

All good things must start somewhere. So, here we go. I'll be journaling the progress of the application for Cancer patients here. I hope this provides for some value later on. I think it probably will. I can at least keep my thought straight.