Tuesday, February 17, 2009

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


ecomagination

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!

Thursday, February 05, 2009

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

concept
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

fx360_iphone_1

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):

fx360_iphone_3

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!

fx360_iphone_4

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:

fx360_iphone_5.dcproj (Running)

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.

Tuesday, February 03, 2009

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!