Interactive Spaces in Indianapolis (using Flash + others)

I think May's Flash Indianapolis meeting was the most interesting meeting to date. We visited the Pervasive Technology Lab at Indiana University Purdue University Indianapolis and got to check out what was in the lab as well as interact with four of the pieces.

The first piece that was shown was an interactive space created by Tony Dewan and Chris Basham, called Waterwall. The video explains it better than I can in words, but I will still give it a shot. Picture an open space in with a large video projection on the wall displaying the ocean and a buoy who types messages to you. You step into the space and the level of the ocean rises. Moving around in the space creates waves and more turbulence for the buoy, who will promptly complain about it. The more people that enter the space, the higher the water and the more waves that are created. It was a very cool experience to see everyone moving about in different ways trying to see how the levels, buoy, and waves would react.

Behind the screens is a camera overhead which is taking screenshots at 5 fps. ActionScript 3 is comparing each screenshot and looking for differences in mass and movement using Threshhold calculations. Mass is calculated by how much space is covered by people/objects. Movement is calculated by comparing the current frame to the previous. Mass raises the water level. Movement creates the waves in the save X position that the movement occurred. Both the capturing of data and the visual display was done in AS3.


The second piece we visited was a multi-touch screen. Currently it is in an early experimentation form and just displays different types of interactions that could occur. Such as playing a guitar or moving multiple windows across the screen while interacting with the contents of the windows. Java was the language of choice for this project.

The third piece displayed was an explorable environment created by Todd Shelton using both Papervision3d and WiiFlash. It was very cool to be able to control the environment with a wii remote instead of a mouse, it seemed very natural. We just passed the wiiRemote around the audience and let everyone take a stab. The outdoor environment has grassy hills (created by a bump map), a small pond, trees (using 2D planes), and a flying bird (also 2D Plane using the MovieClip Material). This framework would allow the environment to be easily changed and altered. If you wanted a mountain in the middle, you would just have to change the bump map. The ultimate goal of this project is to create an environment for students to explore and learn. One idea is for the students to use different tools and take water samples for pollution. The experiment could then alter the environment (ex. adding Cows next to the water) and seeing how this would effect the water samples.

The final piece we experienced was a touch table that had been created for the Indianapolis Museum of Arts. Dr. Polly Baker, who is in charge of the lab, presented the piece. The table displayed images of items found throughout the museum. As you interacted with the images, your actions would change the 3 projection screens around the piece. You could interact with the items using a couple different markers. One marker was used to select an individual image. The selected image would then be projected on the wall so that you could learn more about that particular time. Another marker was used to find out where in the museum it's selected image could be found (using a second projection screen). The third marker grouped the images on the screen in ways that you would not normally associate the items. So if you clicked on an image of an artifact, it might cluster the images in groups by pieces in the museum created during the same time period, by people of the same culture, or artifacts made by the same material, etc etc. It was a very cool and educational way to explore the items in the museum.

After we got to see the four interactive pieces, we then explored the rest of the lab. Some very cool pieces including an 8 screen display, a virtual reality cave, a force feedback arcade gun, plus many more.

A great thanks to PTL, the speakers, and Dr. Polly Baker for hosting us and letting us explore their interactive spaces. If you get a chance to check out the lab, I would highly recommend it.

Flash HTMLText Jumps on RollOver (a: css, hover, bug, as3)

This is one of those posts meant for a Google search... hence the title (I tried to include things I searched for when debugging this issue).

Scenario: You have a TextField that has a style sheet applied to it. It is being dynamically updated with HTMLText. The text that is being inserted contains "a" tags for links.

Problem: When you mouse over the TextField the links move. Some would call it a jump, others a wiggle. Regardless, they move and your client does not think its funny that you call it a feature.

Failed Solutions: Remove Hover tag, doesn't help. Use a style class instead of applying it to all "a" tags... nothing. Use an external stylesheet instead of an AS class... nope. Baseball bat to monitor??? probably not going to help, but worth a shot.

Proper Solution: Stan here at the basement noticed that the AntiAlias on the Textfield was set to Advanced and concluded that maybe the text was changing due to the antialias. DING DING DING! Stan nailed it. He changed it to Normal and we no longer had jumpy/wiggly text links.

Side Note: This same issue will have a tendency to crash your browser if you have Flash player 10.0.12 and are running Firefox or Safari (maybe IE... not tested). It was very strange, the browser would not crash in the latest Flash 9 and it also worked in 10.0.22. It just really hated page changes in 10.0.12. When I went to test Stan's fix to the text bug, we realized that it also fixed our browser crashing bug.

Sooo, long story short, if you are using HTML text and your browser is randomly crashing or text is randomly jumping then you may want to turn off Advanced AntiAlias.

Hope that helps to whoever is unlucky enough to follow our in our footsteps.

Japanese Flash Experts: Stepping into the Limelight

Ted Patrick recently "tweeted" about a new Japanese ActionScript Blog... I apologize for using the word tweeted but there really isn't another word for it...

I've always been impressed, yet frustrated by the Flash work coming out of Japan. Impressed by the quality of work and ground breaking achievements... and frustrated by the fact that I can not read Japanese to figure out what was going on behind the scenes. The language barrier in Japan seemed to isolate their work from the rest of the Flash community, more so than any other language.

In previous posts I've linked to AIR SANPO, FlartToolKit, as well as the amazing work done by "Roxik" including The Eco Zoo, which uses his own personal 3d engine called Sharikura. All of which are truly inspiring projects. And they are just a drop in the bucket... just check out the Spark project for more examples. Speaking of the Spark project... when did that get an english version??? I had only seen the Japanese blog and hoped to stumble across examples/movies ;).

Anyways, the fact that the Spark project has an English version helps verify the point of this blog... and yes, there is a point to my ramblings. Finally, we have a place where the Japan Flash community can strut its stuff to the other communities... and that place is JActionScripters.

I look forward to learning from their expertise.

Latest Site: What can we learn about Flash and HTML/CSS? (Knozone)

The Basement recently released a new site... Knozone: Clean Air Matters.

I mainly played the roll of Technical Director on this project. Todd Shelton did most of the heavy development lifting. It was his first project with the basement team and he did an excellent job... altho I am biased.

The biggest technical challenge that we faced during this project was making sure all of the content was editable. We usually try to do that for every site so it shouldn't have been that big of deal. You either drop the content into XML or you setup a template and receive the content from some sort of CMS. We chose the latter path, but instead of setting up a template (such as 1 picture, title, body of text), we needed to make each page fully dynamic and editable with a WYSIWYG editor.

I figured, no problem, we will implement a Cascading Style Sheet and drop in some HTML text and we will be all set. In theory, sure. In practice, however, there were so many nuances and finicky things that came up it turned out to be quite a ride.

First of all, images and swfs loaded into HTML text is a tricky beast. I realize with Flash 10 they added Glyphs and all kinds of fun stuff that may have been helpful, but we were stuck with Flash 9. And in Flash 9, images/swfs that are dropped into HTML text do not effect the height of the text box (which is awesome for when you are setting up scrolling). Also, you can't do a "clear" on a <span> or <p> to force the next paragraph to drop below the image. The only two ways that we could get the text from wrapping around an image was to either A. make the image the width of the text field or B. add enough <br /> tags that the text appeared below the image.

Speaking of <br /> tags. It seems that on most computers and browsers that all white space carriage returns were treated similar to
tags. Macs using Flash 9 (10 was fine), however, decided to ignore these white space carriage returns. Awesome.

Here is another one. Firefox in Flash 9 on both Macs and PCs could not click in the input boxes of the swf forms that were being dynamically loaded into the html text field. You could still click on the submit button, but you could never get your cursor in an input box or type anything. This bug didn't seem to come up in Flash 10 or in IE. We ended up getting around it by making the 2 pages that required swf forms to use Movieclips instead of dynamic swfs. (A little hack-tastic, I'll admit... but necessary).

There were a couple other gems... but those were the biggies. The ones that had Todd and I hitting our heads against the wall. Its always painful when it works on one computer and not another without a clear explanation... hell, even with a clear explanation it would still be painful.

After this experience I would recommend setting up a more custom and rigid WYSIWYG than just passing straight HTML into Flash. If you do go the HTML route, I would definitely require Flash 10 and be ready for some interesting bugs, or "features" as some call them.

Technical hurdles aside, this was a fun project and I enjoy the end result. I loved Amy's and Brian's design. Especially the balloon/clouds, wisps, building load in, and birds... if you can find them.

TV Show exclusively for the XBox

Jacob recently pointed out an article title Xbox makes Primetime play.

The article states that Microsoft is offering an interactive game show that will allow the audience to partake in the game and win prize, such as XBox Live Points.

'Its all happening.' TV, Computers, Gaming Systems... when will they officially be one unit?

The Basement Produces Broadcast Commercial: Conner Prairie

The Basement recently produced a broadcast commercial that will air tonight... er I guess its 12:30am... so it will air last night! Doh. I'm sure it will be on plenty more for those of you living in Indy. For everyone else, you can check it out here.

Congrats to the Basement Mo-Graph team!

Great Flash Work Doesn't Have to be Done on the Coasts (or Overseas)

Indy.com recently posted a very kind article about tech companies in Indy and they featured The Basement.

You can read the article here.

Flash News Mashup - May 1, 2009

I am going to pay homage to my good friends at 8BitRocket by doing a little mashup of my own (basically I don't have time to write my own content right now, but have stumbled across a lot of good content from other people lately). If you haven't checked out 8Bit, you need to buzz over there. They have a vast amount of tutorials, games, and news about Gaming... Flash and Silverlight. My favorite tho, is their weekly mashup... I always find a few gems in there I normally wouldn't stumble across.

So here goes my take in the order of when I found it...

Windosill: I stumbled across this gem on Jayisgames... which is an excellent site and a must view for any aspiring game dev. But anyways, back to WindoSill. It is part art, part game, part toy. As a whole it is an extremely polished and enjoyable experience. That in its own merit is worthy of a plug, but I would also like to touch on how they are trying to monetize it. They strayed from the typical game portal/sponsorship/ad model and went with a free demo that can be upgraded to the full version for 3 bucks. I wasn't planning on paying three, but after the first few levels I was more than happy to shell out the money. Obviously not everyone will feel the same way as me and they will have many people play it for no return. I would be interested to know how this model will work for them compared to tossing it on kongregate and the rest. I think the trick will be getting the number of hits without the portal's help. If they could get the million hits a portal might provide then I think they would blow away the money they could have made from ads. But if they just get hits from word of mouth and low PR then I am not sure they will do as well as hoped.

PlayMegaPhone: digital signage and touch screen displays are becoming extremely popular in the commercial sector. You'll be seeing them in Wal-Mart, Kroger, Bus-Stops, ext. This is great in its own right, but PlayMegaPhone has taken it to a new level. Without installing anything on your phone you can interact with these screens via your phone. Not only that, you can do so along side people around you. You got to check out the videos to see what I am talking about, but the possibilities this opens up are extremely exciting. Especially for game enthusiasts like myself. As a side note, Colin Moock announced his new company at FITC which has an exclusive partnership with Play MegaPhone...

BitchWhoCodes recently wrote a letter to her student which is a must read. As with most of her writing, it is funny, insightful, and to the point.

Amy from DrawingsInMotion sent me some hilarious code comments via stackoverflow. My favorite: "// drunk, fix later". Brilliant.

With my recent join to Twitter, I found Rands's post on the Art of the Tweet to be very insightful. He has a talent for obtaining a deeper understanding of trivial actions and then explaining them in a way that comes across as common sense. I tend to end his articles with "Why did I not think of that?". In hindsight its because I didn't think... I just went through the act of Twittering and didn't sit back and look at what makes Twitter valuable to the people who get tricked into following me.

And finally, I found this one on 8Bit's mashup. Nonoba is offering a new service called GameRise which seems to be the is the Ning of Game Portals. Very interesting. I'm a big fan of Ning. I first joined Seth Godin's Triiibes, then started Flash Indianapolis, and finally found myself on SmallerIndiana. I am looking forward to seeing a bunch of game portals pop up. Specifically ones that are targeted towards specific demographics and genres... Such as a Retro-8Bit-Arcade... wonder who would do that? ;)