e-venture

test

noreply@blogger.com (Erik Loehfelm) — Thu, 19 Nov 2009 18:53:00 +0000

Apple's AppStore is Bizarre

noreply@blogger.com (Erik Loehfelm) — Wed, 27 May 2009 14:16:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Thu, 21 May 2009 19:18:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Thu, 21 May 2009 01:35:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Thu, 16 Apr 2009 05:50:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Wed, 01 Apr 2009 13:01:00 +0000

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!

noreply@blogger.com (Erik Loehfelm) — Thu, 12 Mar 2009 14:16:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Tue, 17 Feb 2009 19:45:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Thu, 05 Feb 2009 22:24:00 +0000

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!

noreply@blogger.com (Erik Loehfelm) — Tue, 03 Feb 2009 20:10:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Tue, 20 Jan 2009 21:32:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Wed, 10 Dec 2008 15:54:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Thu, 04 Dec 2008 19:27:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Wed, 03 Dec 2008 02:49:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Wed, 26 Nov 2008 03:10:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Tue, 25 Nov 2008 02:26:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Mon, 24 Nov 2008 16:45:00 +0000

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!

noreply@blogger.com (Erik Loehfelm) — Fri, 21 Nov 2008 17:45:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Fri, 21 Nov 2008 17:41:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Mon, 10 Nov 2008 14:11:00 +0000

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...

noreply@blogger.com (Erik Loehfelm) — Thu, 02 Oct 2008 13:17:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Mon, 22 Sep 2008 15:37:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Tue, 09 Sep 2008 15:16:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Tue, 09 Sep 2008 15:00:00 +0000

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

noreply@blogger.com (Erik Loehfelm) — Mon, 08 Sep 2008 17:59:00 +0000

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.