We all scream for full-screen!

I recently developed a video player component for one of our clients. The idea was to implement a wrapper for Flex’s built-in VideoDisplay component that would include play/pause/stop buttons, a slider that would both allow scrubbing and show download progress, and a button to toggle full-screen mode. The basics came together fairly quickly, but I hit some snags when adding full-screen functionality. I had already used full-screen mode in another project (I found this post very useful in that case), but the video player’s full-screen needs posed a greater challenge. Here are some lessons learned, so you can scream for full-screen and not frustration:

  • If you want just one component (the video player, in my case) to go full-screen, rather than full-screen for the whole app, you can use:

    Application.application.stage.fullScreenSourceRect = new Rectangle( stageX, stageY, width, height );

    Only the area defined by that rectangle will be visible in fullscreen mode.

  • Stage.fullScreenSourceRect interprets its rectangle in terms of the stage’s coordinate space. The component you want to display in full-screen mode has its location defined in terms of its parent container’s coordinate space. In most cases, you’ll have to convert from one coordinate space to the other, so use something like:

    var myStageLocation:Point = fullScreenMe.localToGlobal( new Point( fullScreenMe.x, fullScreenMe.y ) );

    where fullScreenMe is the component you want to show in full-screen mode.

  • Full-screen mode wasn’t playing nice with my app’s constraint-based layout. When I switched to full-screen, it looked like the constraints were being re-evaluated to fit the new dimensions of the display area. After losing a lot of time trying different fixes, this is what solved the problem:

    Application.application.stage.scaleMode = StageScaleMode.NO_BORDER;

    With that in place, all of the layout elements stayed where they belonged when switching from normal mode to full-screen. Incidentally, I believe this step is not necessary if you’re using a fixed layout.

  • If you use StageScaleMode.NO_BORDER when switching to full-screen mode, you should undo that when switching back:

    Application.application.stage.scaleMode = StageScaleMode.NO_SCALE;

    It’s not enough to set this in the listener for your view-mode-toggle button, because the user might return to normal mode without hitting that button. You need to set scaleMode = StageScaleMode.NO_SCALE whether the user hits the toggle button, ESC, ctrl-alt-delete, or whatever other action returns the display to normal mode. Set a listener

    Application.application.stage.addEventListener( FullScreenEvent.FULL_SCREEN, handleFullScreenChange );

    And then in handleFullScreenChange() you can deal with Stage.scaleMode

  • If in full-screen mode, the aspect ratio of the rectangle you sent to Stage.fullScreenSourceRect doesn’t match the aspect ratio of your display, Flex uses colored “bars” as filler to make up the difference. If you don’t like the color of the bars, change the backgroundColor of your app.

Click the screenshot to open a demo app, including view source:



No Comments

Sean Glasheen, May 28th 2008 | Posted in ActionScript, Flex

Breaking out of the ‘page-centric’ web

I was recently forwarded a link to a “New Fandangled” Flex Web E-commerce site. After spending a few minutes of precious project time going through the site, one thought kept going through my head… ‘why did they develop this in Flex?’ With the last few projects I’ve seen, it seems that thought comes up a lot. Sure the site had nice animation, allowed you to preview rich content like music clips and cover art and in general was ’slick’ – but does that really leverage the power of Flex 3?

The navigation was page-centric – breadcrumbs abound – and transitions between ‘pages’ (although pretty) were not intuitive. Having developed web applications for the better part of a decade, I think most developers and project managers are still shackled to the limitations of HTTP and HTML. With the advent of Flex 3/AS3 there is no longer a need to suffer from ‘page-centricism’ to consider that every state change is a page change, and that user events require server call-backs. There needs to be fresh thinking – from the inception stage, throughout storyboarding and on to design and architecture. Flex 3 represents new opportunities for Information Architecture.

We were involved in a project for a large telecom that really demonstrated the departure Flex 3 could take from a traditional web application. There were complex graphs, geographic locations and tons of data being represented to the user in a very intuitive way. If I would come up with a term for the design, it would be ‘Interest-Centric’ – the user actions, displays, transitions, etc. were all driven by the user’s area of interest. The power of the AS3 event model and the state handling in Flex allowed our team to free ourselves from worrying about navigation breadcrumbs or ‘page’ transitions. Moving from one section to another rearranged the entire display, so that other sections were still available, but the area of interest was font-and-center.

We can gauge the progress of the Flex development community as a function of how far Flex apps diverge from traditional web applications. “Pages? We don’t need no stinkin’ pages!”

No Comments

Arun Saraswat, May 8th 2008 | Posted in ActionScript, Adobe, Design, Flex, RIA, Software Architecture