Grio Blog

Papervision Wish List

I’ve been using Papervision 2.0 for several months now, and while I’ve been able to get it to do most of what I want it to, it has been a tedious journey. If I were to do this project over again, I’m not sure I would choose Papervision, unless they make some improvements.

I’ve put together a short wish list of things I’d like to see done to Papervision:

1. Documentation, Documentation, Documentation!
The ASDocs for Papervision are some of the worst I’ve ever seen. There is virtually no useful information there. While there are many tutorials on the web for various functions, a responsive mailing list (papervision3d@osflash.org), and a good book (Papervision3D Essentials by Paul Tondeur and Jeff Winder), the ASDocs really need to be maintained for people that want to do anything complicated.

2. Fix Z-Sorting Performance and Functionality.
I’ve been working on a room planner application where users can dynamically add products to a room, and z-sorting has been a bugaboo. I’ve been forced to use the QuadrantRenderEngine, which is a CPU hog and also disables the use of filters (like a ‘glow’ around a selected object). I’ve had to optimize this by turning rendering off when not needed and selectively using the QuadrantRenderEngine (by setting testQuad=false on DisplayObject3Ds). This renderer needs some attention to improve performance.

3. How Do I Create a Collada Object?
Should I use DAE, SkecthupCollada or the Collada class for my Collada objects (answer: DAE)? Why are there 3 classes where there should only be one? Enough said.

4. Add Height, Width and Depth to All DisplayObject3D Classes.
This seems like a no-brainer, but sadly this info is missing, even for the Cube class. I added it myself for the project I am working on. Note you can dig out the axis aligned bounding box (aabb) in the geometry property of some DisplayObject3D classes, but unfortunately not all, and not DAE (Collada) objects.

5. Can We Have a Class to Create 3D Objects from a Vertex Array, Please?
Sometimes I would just like to create a 3D object from a set of vertices. I haven’t found an easy way to do that with Papervision. It would be nice if there was a class that supported the creation of a 3D object from a vertex array passed in the constructor.

Well, that’s my list for now. Hopefully some of the Papervision developers will read this and consider these enhancements and fixes. If you have any of your own, please feel free to tag them on in a comment.

My First Facebook Development Journey: Extended Permissions, FB AS 3.0 Client Library, and Application Tabs

On a recent project, I had to create a Facebook Flash application where the application will live in a Facebook application tab on a fan page. The whole Facebook application development was very new to me. During that time, because it was a Flash application, it seemed the most sense was to use the Facebook and Adobe supported Facebook AS 3.0 client library which can be found here.

My first impression was that the AS library did a pretty good job integrating the Facebook Platform API. The Facebook API calls were pretty straightforward. However, one issue I ran into using the AS 3.0 library was the requesting extended permissions feature. From what I learned, certain Facebook calls requires “extended permissions” where the user will need to explicitly give permissions to the application to retrieve/set certain Facebook data (one example is publishing a post on a user’s stream). To ask the user to extend permissions through the AS library, the statement would be:

facebook.grantExtendedPermission(ExtendedPermissionValues.PUBLISH_STREAM);

In the example above, what the user should expect is a popup window containing a request asking the user to extend the application’s permissions to publish posts on the user’s wall. However, if a user’s browser’s popup blocker is turned on, he/she will not see this popup window. Taking a closer look, the grantExtendedPermission method executes a navigateToUrl statement.  The navigateToUrl method is known to be unfriendly with many browsers’ popup blockers. This does pose a major problem because if the user never sees the popup window that asks for extended permissions, then the Facebook application won’t work.

My next step to avoid the navigateToUrl issue was to execute some type of modal window through Javascript. And for the Flash application to communicate with the page, it will need to go through Flash’s ExternalInterface. After coding up the ExternalInterface functionality, the application spitted out a Security sandbox violation error. Facebook, at that time, did not support ExternalInterface.

I was still hopeful that there is a way. After doing some research, I found that to get around the ExternalInterface issue, Facebook does provide a flash bridge where a Flash application can communicate to the Facebook page through this bridge. More information on the bridge can be found here.

During my research, I learned that Facebook restricts pretty much any native Javascript, but the good news is that Facebook does have its own Javascript library called FBJS. Using FBJS allows me to use specialized methods. There was a specialized method to prompt user for extended permissions with optional callback functions:

Facebook.showPermissionDialog('publish_stream, read_stream', ...)

Eureka! I see the light at the end of the tunnel. After spending a couple of hours, I finally got the bridge to work. On the application canvas page (main application page), I was able to see my Flash application communicate to the Facebook page, and through the FBJS, the dialog box requesting for extending permissions appeared. Woohoo!

Now it is time to put the Flash application into a new fan page’s application tab. I went through all the required setup to set up a new tab.  I opened the new tab, and ran through the flash application to the part where the extended permission dialog box should appear. When I arrived, I saw….  nothing. No dialog box. I double and triple checked the code and everything looked correct. More research ensued, and to my frustration, I learned that there are many restrictions that a Facebook application can do on an application tab compared to the application canvas page. Scouring through the Facebook forums, I learned other developers had issues with application tabs dealing with FBJS, and how certain data is not available to a Facebook application that lived in an application tab.

In the end, my solution was notify any users that comes to the application tab that he/she will need to allow popups from Facebook in order for the application to function. I found the this solution user unfriendly.

Alas, I do feel that there must be a way, but unfortunately, I hit a brick wall. If anyone were able to solve my conundrum, then I would love to hear from you. Any constructive feedback is always greatly appreciated!

Kenmore Live Studio FaceBook Application Released

Grio, in partnership with Fluid, have released a Facebook application where fans of Kenmore can go to interact with Kenmore's Live Studio event. Kenmore's Live Studio contains a live video feed of special events, rsvp to these special events, watch past events, and chat with other Kenmore fans. 

The application was built using Adobe Flex, PHP and hooks into the Facebook API, the YouTube API (data and video) and Twitter API.

http://www.facebook.com/kenmore#!/kenmore?v=app_336201367647

Installing an ISO file from Mac OSX to a parallels Windows instance

Yesterday I attempted to install Visual Studio 2008 from a DVD onto my
mac parallels Windows 7 instance. After sitting back and admiring the
pictures of happy Microsoft programmers provided by the VS
installation software, I heard a ticking sound coming from my
computer.  After several minutes, the install crashed. Some sleuthing
proved that the disk was scratched and worthless - a typical Monday.

And yet the job needed to be done. So I proceeded to download the
3.3Gb .iso file from Microsoft's website. Being without DVD, I
wondered if there were a quick way to get Visual Studio installed from
the iso without having to download and install additional software.

There was.

Now, I could have installed WinRar or Daemon Tools in Windows 7 to
open the .iso, but mac provides support for built-in .iso mounting.

Double clicking on the .iso in Finder mounted the .iso in OSX. After
this I attempted to open the VS setup.exe file using Windows Explorer.
No luck: the Mac mount was not visible to the Windows OS, so setup
failed immediately with missing .dll exceptions.

So, I had to take this one step further and copy the mac-mounted .iso
to a separate folder. After doing this, I was able to open the
setup.exe from within the new mounted folder without a problem.

Full list of steps:

• Download your .iso
• Double click in mac finder
• Recursively copy the mounted image to another folder
• Open the setup.exe file from within the copied folder using parallels Windows Explorer

Game Developers Conference 2010 in San Francisco

The Game Developers Conference® (GDC) is the world’s largest professionals-only game industry event. Presented every spring in San Francisco, it is the essential forum for learning, inspiration, and networking for the creators of computer, console, handheld, mobile, and online games.

The GDC attracts over 17,000 attendees, and is the primary forum where programmers, artists, producers, game designers, audio professionals, business decision-makers and others involved in the development of interactive games gather to exchange ideas and shape the future of the industry. The GDC is produced by the Think Services Game Group, a division of United Business Media.

This market-defining conference features over 400 lectures, panels, tutorials and round-table discussions on a comprehensive selection of game development topics taught by leading industry experts. In addition, the GDC expo showcases all of the most relevant game development tools, platforms and services helping to drive the industry forward. The conference also features the twelfth annual Independent Games Festival, where new, unpublished games compete for the attention of the publishing community, and the tenth annual Game Developers Choice Awards, the premier accolades for peer-recognition in the digital games industry.

This year, the conference will take place from March 9-13, 2010 in Moscone Center, San Francisco, CA. Grio has been selected to develop Schedule Builder and Vault for GDC.

Maintain Image Aspect Ratio Programmatically

The aspect ratio of an image is the ratio of its width to height, and all images have an inherent aspect ratio. By default, the <mx:Image> tag property maintainAspectRatio is set to true. This setting preserves the aspect ratio so that an image does not appear distorted.

<mx:Image maintainAspectRatio="true" />

So, if an <mx:Image> tag has defined an explicit width and/or height, the control will preserve the aspect ratio accordingly.

ie. <mx:Image width="100" height="100" />

However, there is a catch to the maintainAspectRatio property. Documented in the Adobe Livedocs, it states that when maintaining aspect ratio, there is a possibility there there will be "empty" pixels. For example, if an image is 100x100 pixels, and the <mx:Image> tag is defined as:

<mx:Image source="example.jpg" height="150" width="200" />

Then Flex sizes the image to 150 by 150 pxiels, the largest posible image that maintains the aspect ratio and conforms to the size constraints. The other 50 by 150 pixels remain empty. However, the <mx:Image> tag reserves the empty pixels and makes them unavailable to other controls and layout elements.

This can be an issue when when the <mx:Image> tag is wrapped in a defined "center" horizontal-aligned, "middle" vertically-aligned container, and the images can be of varying dimensions. In the example below, the original image is 380x169 pixels:

<mx:Box width="400" height="400" backgroundColor="#FFFFFF" horizontalAlign="center" verticalAlign="middle">
<mx:Image source="example1.jpg" height="25" maintainAspectRatio="true" />
</mx:Box>

Here, the <mx:Image> tag preserves the aspect ratio where the height is 25 pixels. However, the image is now not centered horizontally and vertically.

Image using the maintainAspectRatio

 

To go about this, one solution is to not rely on the <mx:Image> tag maintainAspectRatio property, and to programmatically determined the explicit width and height.

<mx:Box width="400" height="400" backgroundColor="#FFFFFF" horizontalAlign="center" verticalAlign="middle">
<mx:Image source="example1.jpg" height="25" maintainAspectRatio="false" complete="handleComplete(event)" />
</mx:Box>

Here, set the maintainAspectRatio to false so the <mx:Image> tag will not be handling the aspect ratio maintenance. Add a complete event handler so that when the image is loaded, we can calculate the aspect ratio:

private function handleComplete(event:Event):void
{
var target:Image = event.target as Image;
// Formula: The product of ratio and a known dimension.
target.width = (target.contentWidth * target.height) / target.contentHeight;
} 

The width is defined as the product of the ratio and the known height. And as you can see, the image preserved its aspect ratio and is horizontally and vertically centered.

Image's dimensions determined programmatically

 

This is a simple example. There may be occasions where an <mx:Image> tag has both a defined explicit width and height. If that is the case, then we will need to add logic inside the complete event handler to determine what the explicit width and height is suppose to be in order to maintain aspect ratio.

Happy coding!

Building a Better TileList: A Custom Scrollable TileList using Flex

I use a TileList component quite often when building Flex applications. Recently, I was asked to create a nice, smooth, horizontal scrolling effect for a TileList containing a 3x3 page grid of 40 or so images. After many unsuccessful attempts to cajole the TileList into the proper behavior, I decided to roll my own.

It seems the fundamental problem with the TileList, which extends from the ListBase class, is its management of item renderers. It gets confused when attempting an animation to change the horizontal scroll position using an AnimateProperty effect. It seems that item renderers get confused when moving items into view using an effect.

After futzing around with the offscreenExtraColumns and other properties, I still could not get the behavior I desired out of the standard TileList. So I built my own.

Now, I must state that the ScrollableTileList class that I created does have some limitations; it pre-loads an item renderer for each element in the dataProvider. This means that it isn't suited for very large lists or lists of unknown size which could grow large. But it works very well for lists that are of a known, somewhat small (~100 items) size. It is also left up to the item renderer to implement a selected property, which is used to highlight the selected item in the list. The current implementation does not have a default item renderer; you must supply one.

The ScrollableTileList is geared to swap directly in for a 'normal' TileList, so you'll see familiar properties like columnCount and rowCount. Another nice feature is more precise control over horizontal and vertical gaps between tiles, which is not well supported by the native TileList component.

I've provided a sample application that uses the ScrollableTileList here. The source code is included: Just right click on the demo and choose 'View Source' from the Flash menu.

Enjoy!

Grio partners with Clientshow

Grio is helping to develop applications for ClientShow that will allow creative professionals to manage their clients and pitch their work. Launch of the system is targeted for early 2010.

Grio to develop systems for Teachscape

Grio has signed an agreement with Teachscape to develop education-related software that enhances the learning experience. Teachscape was founded in 1999 and is the leader in providing solutions that drive increasing levels of student achievement. 

Riot Games launches League of Legends

Grio helped to develop many aspects of the platform for this MMO - initial reviews point to LOL becoming a huge success.

Wrangling Flex Labels: Auto-sizing Text

I am currently working on a project where we have a fixed-width dialog box, and need to fit the title text in a label. The problem is, the text is too long. What to do? Well, the basic Flex Label provides you a couple of options: show an ellipsis (…) at the end of the label or cut the text off. Neither of these solutions was viable. 

This is a common problem that occurs in UI development: fitting text in a limited space. My solution to this was to create a LabelUtil class that automatically adjusts the font size of the text to fit the width of the label.

Here is the meat of the code:

import flash.text.AntiAliasType;
import flash.text.Font;
import flash.text.GridFitType;
import flash.text.TextLineMetrics;
import mx.controls.Label;
import mx.core.Application;
import mx.core.UITextFormat;
import mx.styles.CSSStyleDeclaration;
import mx.styles.StyleManager;

      
public class LabelUtil
{
      public function LabelUtil()
      {
      }
             
      static public function constrainTextToWidth( label : Label, htmlText : String ) : void
       {
             var  style : CSSStyleDeclaration = StyleManager.getStyleDeclaration("." + label.styleName);

       var fontSize : Number = style.getStyle( "fontSize" ) as Number;
       label.setStyle( "fontSize", fontSize );
       label.htmlText = htmlText;
       label.invalidateSize();
       label.validateNow();

                    
             while ( getTextWidth( label.text, fontSize, style ) > label.width )
             {
                   fontSize = fontSize - 0.5;
                   label.setStyle( "fontSize", fontSize );
             }
      }
             
      static public function getTextWidth( text : String, fontSize : Number, style : CSSStyleDeclaration ) : Number
      {
             var textFormat : UITextFormat =
             new UITextFormat(
                   Application.application.systemManager,
                   style.getStyle( "fontFamily" ),
                   fontSize,
                   null,
                   style.getStyle( "fontWeight" ) == "bold",
                   style.getStyle( "fontStyle" ) == "italic",
                   null,
                   null,
                   null,
                   null,
                   style.getStyle( "paddingLeft" ),
                   style.getStyle( "paddingRight" ),
                   style.getStyle( "textIndent" ) );
             textFormat.antiAliasType = flash.text.AntiAliasType.ADVANCED;
             textFormat.gridFitType = flash.text.GridFitType.PIXEL;
             var textMetrics : TextLineMetrics = textFormat.measureText( text );
             return textMetrics.width;                    
       }
}

OK, so what’s going on here? First we pass in the label in question and the html text to be displayed (note the function will also work for plain text).  Then, we measure the width of the text and compare it to the width of the label. If the text is narrower that the label, we’re done. Otherwise, we reduce the font size by a half-point until the text width is less than the label width.

There are a couple of things to consider using this method: First, you must specify the width of your label in pixels (this shouldn’t be a problem as this solution applies to a fixed width label). Also, you’ll need to make sure to define a CSS style for the label (you could modify the method to use the label’s inherent style properties, but I didn’t need to).

Notice that I am using a UITextFormat object to measure the text width. Why is that, when the label provides a textWidth property? The answer is that textWidth is unreliable in the label control. This method is rock solid.

Hope this helps your labeling needs. Happy Coding!