YouTube Musician Kutiman Kicking It!

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

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

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!

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

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

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!