Category Archives: Flash

Flash Player 8.5 Alpha and GIS

Posted on by

This weekend i continued to play with Flash Player 8.5 alpha, and did something kinda crazy (at least i thought so when i started).. I tried to render high resolution GIS data purely clientside with Flash.

In the beginning, i was just searching for detailed, free, redistributable map data of the world, with political country boundaries, and maybe state boundaries too, to write a simple world map component. I was scanning through a lot of link lists, and almost all material i found was either incomplete, not detailed enough or expensive. Except the “Vector Smart Map Level 0 Library”, a huge (1.8GB), free and redistributable collection of all sorts of high detailed geographic data, published by the National Imagery and Mapping Agency (NIMA).

“Published by the National Imagery and Mapping Agency (NIMA) on CD-ROM, the VMap0 database is designed to provide vector-based geospatial data at low resolution. The content of the database is similar to the previously published Digital Chart of the World, augmented with low resolution bathymetry for global coverage. A reference library with general information to orient the user and an index of geographic names to aid in locating areas of interest are provided. Data are separated into thematic layers: boundaries, elevation, hydrography, industry, physiography, population, transportation, utilities, and vegetation.

VMap0’s world coverage is divided into four libraries based on geographic areas. The geographic areas and library names, by disc, are:

* Disc 1 – North America (NOAMER)
* Disc 2 – Europe and North Asia (EURNASIA)
* Disc 3 – South America, Africa, and Antarctic (SOAMAFR)
* Disc 4 – South Asia and Australia (SASAUS)

The primary source for the database is the 1:1,000,000-scale Operation Navigation Chart (ONC) series co-produced by the military mapping authorities of Australia, Canada, United Kingdom, and the United States. Data gaps may exist where source information is not available.”

But how to get this data into the Flash Player? The format they use is VPF (Vector Product Format, [PDF]), a heavily cross linked, binary format. I started reading through the spec, and thought that with the capabilities of the new Flash Player 8.5 alpha (highly increased VM performance), it could actually work to just load the data as is and render it. Said and done.

Here’s a proof of concept application i threw together over the weekend, that loads the “Library Reference” coverage (3MB, binary, as is, using the new URLStream class), deserializes the data into Arrays, and renders the data on screen while loading. What we get is a quite detailed map of the world with country-level political boundaries.

http://codeazur.com.br/stuff/flex2/vmap0/
Note: Flash Player 8.5 alpha required! (Get it here)

For those of you who don’t have the alpha player installed, here is a screenshot:
Vector map of the world, global view

And here’s another, fully zoomed in to Japan:
Vector map of the world, Japan (zoomed)

The Flash Player renders the whole map in around 5 seconds (delayed with enterframe events) on my machine, drawing 250.000 lines in more than 2.000 shapes.

The only drawback: it takes a while until the data is loaded (depends on your connectivity of course).

FP 8.5: Tooltips over links in HTML enabled TextFields

Posted on by

If you move your mouse pointer over a hyperlink in an HTML webpage, your browser typically displays the URL in it’s status bar. In addition, if the hyperlink has a title attribute set, a tooltip is shown with a human readable description of the linked resource.

Unfortunately, with rich text used in Flash websites/applications this is not the case. Your mouse pointer will change to a “hand-cursor”, indicating you’re hovering a hyperlink, but the status bar will stay empty, and the title attribute is ignored by Flash, making it impossible for you to find out where the hyperlink will take you without actually clicking it.

With Flash Player 8.5 alpha, the behaviour of hyperlinks in rich text controls hasn’t changed (yet?), but luckily Macromedia implemented some nifty API extensions making it possible to actually find out if the user is hovering a hyperlink in a HTML enabled TextField.

Here’s how it works:

FP 8.5 introduces the TextField.getCharIndexAtPoint(x, y) method, returning the index of the character in a TextField at the point (x, y).

You can then get the TextFormat of the character at that index, using TextField.getTextFormat(i, i+1), and check it’s url property. If set, display it in a Tooltip, or send it to Javascript via ExternalInterface to show it in the browser’s status bar. Done.

Demo:

http://codeazur.com.br/stuff/flex2/OnHoverApp.html (FP 8.5 required)
http://codeazur.com.br/stuff/flex2/OnHoverApp.zip (Sources)

In this demo i subclassed the Flex 2 component mx.controls.Text and use it via MXML, however you can as well use this method with normal TextFields in your Actionscript 3 projects.

Flash Player 8.5 – SPEED!

Posted on by

You heard the news already, Macromedia launched their Labs site today, along with public alphas of Flash Player 8.5, Flex Builder 2 and the Flex Framework 2.

Among the first things i did with those alpha goodies was porting the DENG CSS 3 parser to Actionscript 3.

Results of first benchmark (Parsing a 20kb CSS file into an object DOM):

  • AS2, Flash Player 8: around 1000ms
  • AS3, Flash Player 8.5: around 80ms

That’s a 12.5x performance boost, without FP8.5 specific optimizations.
Flash is fun again!

I’m going to prepare a live demo of the parser in the next days for you to play with it.

DENG 2.0 Roadmap (first draft)

Posted on by

Macromedia announced the Flash Player 8.5 today, featuring a completely new virtual machine (AVM2), E4X, RegExp, Binary Sockets and W3C DOM Events.

Flash Player 8.5 (along with the Flex 2 Framework and Flex Builder 2) will be released as public alpha on October 17th.

This marks the beginning of the development of DENG 2.0, a completely refactored DENG version targeted for Flash Player 8.5 and above.

Features i plan for DENG 2.0 (incomplete, vague, and subject to change, just to give you a rough overview):

  • Improved performance
  • Flex 2.0 Integration, targeted for AVM2
  • 100% compliant CSS 3 parser
  • Compliant implementations of SVG-T, XForms 1.1
  • Better support for XHTML, SMIL, XFrames etc.
  • Support for subsets of XUL
  • Support for W3C DOM
  • Better CSS box model implementation (DENG currently doesn’t support absolute/relative positioning and inline-boxes, the tables implementation is not perfect, etc.)
  • Better CSS line box model implementation (DENG uses the native TextField object of the Flash Player to render inline text. This won’t change, but improvements in the Flash Player since version 6 allow some more sophisticated features (e.g. a:hover, left/right floats).
  • GIF, PNG and SVG images (DENG currently supports JPEG only), background images

CSS 3 modules and envisioned compliance:

  • Syntax/Grammar (full)
  • Selectors (full)
  • Values and Units (full)
  • Value Assignment, Cascade, Inheritance (full)
  • Box Model, Vertical (as full as possible)
  • Positioning (as full as possible)
  • Color, Gamma, Color Profiles (partial)
  • Colors and Backgrounds (full)
  • Line Box Model (partial)
  • Text (partial)
  • Fonts (partial)
  • Ruby (none)
  • Generated Content, Markers (as full as possible)
  • Replaced Content (as full as possible)
  • Paged media (as full as possible)
  • User interface (as full as possible)
  • WebFonts (partial)
  • ACSS (none)
  • SMIL (as full as possible)
  • Tables (partial)
  • Columns (partial)
  • SVG (as full as possible)
  • Math (partial)
  • BECSS (none)
  • Media queries (as full as possible)

Stay tuned.

Display SVG in 97% of all Web Browsers

Posted on by

Inspired by a blog post by John Dowdell, who was raising the question if it would be possible to trigger a SVG rendering SWF to do the work in case the user’s browser is not SVG enabled, i sat down last night to figure out if this could be solved using mod_rewrite on the serverside in combination with DENG.

It actually is possible, with a few constraints. Check out these SVGs (and make sure you have at least the Flash Player 6 installed and enabled):

You should notice that although the SVGs are physically located in /stuff/svg/ on my server, your browser loads the DENG engine (75kb, and only the first time, as then it is cached), which then loads the original SVG and renders it.

To get the SVG without the redirect, append ?raw to the URLs above.

I am using mod_rewrite to redirect requests for SVGs to DENG:

<ifmodule mod_rewrite.c>
RewriteEngine On
Options FollowSymLinks
RewriteBase /stuff/svg/
RewriteCond %{QUERY_STRING} !(raw) [NC]
RewriteCond %{HTTP_ACCEPT} !(image/svg\+xml) [NC]
RewriteRule ([A-Za-z0-9-]+).svg$ deng/index.php?filename=/stuff/svg/$1.svg.orig [L,T=text/html]
RewriteRule ([A-Za-z0-9-]+).svg.orig$ $1.svg?raw [L]
</ifmodule>

I am in no way a mod_rewrite/Apache/whatever expert, so the rules may be simplified yet, i don’t know. Comments on that are welcome.

The constraints are:

  • I am checking the HTTP_ACCEPT header field for image/svg+xml and do not redirect in case it is set. Unfortunately, neither Opera 8 nor IE6 with the Adobe SVG control set this mime type, that’s why DENG is always triggered in those browsers. I don’t know how Firefox 1.1 is going to behave, but my guess is that this is actually going to work in Firefox.
  • This method obviously does not work if you want to embed SVG inline (like via <img src="flashenabled.svg"> or <object>
  • DENG1 is still somewhat limited, so if you want to have full SVG-T compliance, you’d have to wait for DENG2

DENG 2.0

Posted on by

DENG 1.0 has been around for a long time now (almost three years), and there hasn’t been any new code release for quite a while, so some of you might wonder what we’ve been up to, and what the plans are.

We started developing DENG in difficult times. DotCom had just crashed hard, and demand for XForms renderers was low (the W3C XForms WG was still working on it). It was very hard to find contributors as most Flash developers generally disliked everything the W3C produced, and the proprietary nature of Macromedia products made it hard for people outside of the Macromedia world to join such a project. Also, it was nearly impossible to get funding. Nevertheless, we worked hard to make DENG a reality, found a few contributors who saw the potential, and even had a bit of funding (well, at least enough to pay the rent for a while).

A big up goes to Stefano Debenedetti, who was working on a Flash XHTML/CSS renderer for Benetton at the same time i was working on DENG. He quit his day job just a few weeks after we made first contact to come from Italy to Germany for a few months to join the core team and work on DENG fulltime. He eventually implemented the DENG XForms module, as well as an experimental SMIL module.

After we got DENG 1.0 out the door, open source, and with a lot of features (significant subsets of CSS3, XHTML, XForms, SVG, XFrames, etc), we started an open discussion about the future of DENG. The Flash Player 7 was released by Macromedia, introducing Actionscript 2 (an ECMAScript 4 implementation), but not much more that would be relevant for DENG. We thought about porting DENG to Actionscript 2, even wrote some proof of concept modules (Jim Cheng did a DOM implementation, i ported the DENG CSS parser etc).

The UGO initiative was given birth, at first as an attempt to develop an open source framework for the Flash Player. UGO was drawing the attention of quite some developers (both Flash and non-Flash), and some very interesting discussions were going on. The UGO initiative today focuses on providing reliable standards support on ECMAScript-like platforms and is an ongoing project. Current results are a deployment system, a module loader and a non-Flash, ECMAScript XForms implementation for current browsers, developed by Stefano, who luckily found a new employer (Dreamlab) being very pro open source and open standards and actually made all this possible.

I was very busy the last year, working on commercial Flash projects (and I still am). I also moved to Brazil some months ago, and currently am in progress of setting up a company here, so time was very limited thus far to work on DENG or UGO. I feel very bad for that, but unfortunately this was necessary.

With the Flash Player 8 on the horizon, i am now going to catch up with the development of DENG, and push it to version 2.0.

DENG 2.0 will be targeted for Flash Player 8. That means that the current code base will be completely refactored and DENG will leverage all the new features that are going to be introduced by the new Player (many of the new features are not yet published by Macromedia, but some are, like big improvements in drawing API and performance) – along with features developed in the UGO initiative (standards compliant API).

I have high expectations. I am working towards 100% compliance of XForms, SVG Tiny and CSS3 and as much of XHTML compliance as possible, with a strong focus on CSS3 and XForms.

Please contact me at claus at codeazur.com.br in case you want to contribute code (although it will take some time yet for code contributors to be able to join as the Flash Player 8 is not released yet) or in case you are looking for an open source, zero install, pure clientside, lightweight, modular renderer of XForms, XHTML, SVG etc (you name it) with CSS3. I also haven’t given up hope to get decent funding for that project, in order to make this a fulltime job again, either for me, or for other contributors. Thanks.

My Search Engine Friendly Flash Site

Posted on by

I am currently working on a unobtrusive method to deploy Flash on top of XHTML websites. The method is based on a simplified version of the sIFR (Scalable Inman Flash Replacement) JavaScript code. It solves several problems Flash developers have to deal with when deploying Flash:

  • Search Engine friendly
  • Permalink friendly
  • Unobtrusive Flash detection/integration
  • <embed> issue in XHTML
  • 100% height issue in XHTML

The main idea is to show a Flash version of the site if and only if the user has JavaScript, CSS and Flash enabled in her browser, and show the original XHTML document otherwise. If the user’s browser qualifies for showing Flash content, the XHTML document is loaded back from the Flash movie and serves as the data provider.

A beta version of this method is available here:
http://codeazur.com.br/stuff/fugsp/

The code is tested in the following browsers so far:

  • Firefox (Windows, Linux, OSX)
  • IE 6 (Windows)
  • Opera 7.* (Windows)

I know the code is still with problems on Safari. If you’re on a Mac and have some minutes, could you be so kind and debug the JavaScript on Safari? I have no Mac here to test, and it would help me a lot as i want the code to be fully crossbrowser. Thanks a lot!

UGO and DENG on InfoWorld

Posted on by

InfoWorld has a five-page article online today, featuring a review of three XForms engines (DENG, Orbeon Integration Suite and PureEdge 8x Suite 2.6)

DENG is a marvelously clever client-side implementation of XForms — clever because it’s crafted largely in Flash, with a touch of ECMAScript. This means virtually any browser that supports Flash Player 6 (or better) can run DENG.

The article also includes a summary on UGO, a project devoted to help provide reliable standards support on all ECMAScript-like platforms like current web browsers or the Flash Player:

The beneficiary of this effort will be the user community. UGO is entirely open source. In addition, UGO will retain DENG’s wide deployment capability. For example, not only will you be able to deploy UGO in any browser implementing ECMAScript 3, but UGO will also run atop Macromedia’s Flash Player.