C64 Emulator for Flash Player 9

I’m happy to finally be able to let the cat out of the bag. Darron Schall and myself have been working on a low level 6502/6510 emulator and, based on that, on a Commodore C64 emulator/simulator.

The emulator is completely written in Actionscript 3 and runs on Flash Player 9. It loads the original binary C64 Kernel ROMs at runtime, and executes them just like the original hardware would do.

The sources are released under GPL, get them here:
Trac: https://mirror1.cvsdude.com/trac/osflash/fc64/
SVN: http://svn1.cvsdude.com/osflash/fc64/

Quoting Darrons blog post from today:

It’s still a work in progress, and we’re looking for hardware-nerds to step up to the plate and help us finish it. The CPU code is complete, but hasn’t been extensively tested. The memory code is a work in progress, and we haven’t had a chance to start on the display code yet. Still though, it’s a good start.

At this point, we’re just running the CPU as fast as possible without trying to get the timing completely accurate. On the debug Flash Player, it runs at ~2.5 MHz. On the release Flash Player, it runs at closer to 6 or 7 MHz. This is a good thing, as the original Commodore chip only runs at 1 MHz. So, in theory, it should be possible to emulate the games in real-time without any slow down or speed delays (holy @#!@).

DENG and OpenLaszlo

Inspired by a user i wrote a proof of concept DENG proxy today, to be used in OpenLaszlo applications.

Follow these steps:

  1. Download and install OpenLaszlo
  2. Create a folder “deng” in your my-apps folder ([openlaszlo]/Server/lps-3.1.1/my-apps)
  3. Download the DENG test application for OpenLaszlo and extract it into the folder you just created
  4. Point your browser to http://localhost:8080/lps-3.1.1/my-apps/deng/deng.lzx

You should get a minimal application with buttons to load two test documents and to set the size of the rendered documents:

OpenLaszlo & DENG test application

I must admit i’m a OpenLaszlo newbie (installed it today for the first time), and the solution smells a bit like a hack (it certainly is). I also have no idea yet how to send events from DENG to the OpenLaszlo app. Any pointers highly apprechiated!

AS3: Loading Class Libraries at Runtime

The Flash Player 8.5 features a nifty API to dynamically load assets at runtime, using the flash.display.Loader and flash.system.ApplicationDomain classes. Let’s assume we have a package, test.c1, that we want to keep in a separate SWF and only load it into the main SWF when needed.

We create a project Main that has the following structure:

  • Main.as
  • Child1.as
  • test/c1/TestClass.as

Child1.as is compiled into Child1.swf and contains test.c1.TestClass.

Main.as is our main application class that loads Child1.swf and uses test.c1.TestClass.

test/c1/TestClass.as

package test.c1
{
   public class TestClass
   {
      public function TestClass() { }

      public function method():String {
         return 'test.c1.TestClass.method()';
      }
   }
}

Child1.as

package
{
   import flash.display.Sprite;
   import test.c1.TestClass;

   public class Child1 extends Sprite
   {
      public var TestClassInst:TestClass;

      public function Child1() { }
   }
}

Main.as

package
{
   import flash.display.Sprite;
   import flash.display.Loader;
   import flash.system.ApplicationDomain;
   import flash.net.URLRequest;
   import flash.events.*;
   import flash.util.trace;

   public class Main extends Sprite
   {
      private var child1:Loader;
		
      public function Main()
      {
         var url1:URLRequest = new URLRequest('Child1.swf');
         url1.applicationDomain = new ApplicationDomain(ApplicationDomain.currentDomain);

         child1 = new Loader();
         child1.addEventListener(EventType.COMPLETE, onChild1Complete);
         child1.load(url1);
      }

      private function onChild1Complete(e:Event):Void {
         trace('onChild1Complete ' + e);
         var c:Class = child1.loadeeInfo.applicationDomain.getClass('test.c1.TestClass');
         var co:Object = new c();
         trace('test.c1.TestClass.method() returns: ' + co.method());
      }
   }
}

Using this method we could have different implementations of an API in different SWFs, and load the one we need at runtime. Naturally, we would want to use interfaces to ensure the API implements the right things, and use those interfaces for both the external modules and the main app. Note that i instantiate test.c1.TestClass as an anonymous object in the above example (var co:Object = new c();). I actually should have provided an interface definition test.ITestClass that describes the features of that external class (var co:ITestClass = new c();), however the alpha of Flex Builder has a bug that currently prevents us from doing so. Macromedia is aware of that bug so hopefully this is fixed soon.

Flash Player 8.5 Alpha and GIS

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

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!

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.

XFrames: New Working Draft published today

The W3C published a new working draft of their XFrames specification today, an XML application designed to replace HTML Frames.

XFrames solves most usability problems known from HTML Frames (Back button, bookmarking, page reloads, search engine woes, etc) by introducing a new URI reference notation:

http://example.org/home.xframes#frames(id1=uri1,id2=uri2,...)

In addition to vertically and horizontally tiled frames, XFrames introduces two new composition modes “single” (one frame visible at a time, navigation through tabs, for example) and “free” (movable, overlapping windows), making it an extremely simple but powerful tool for web application development.

DENG 1.0 already features an experimental XFrames implementation, and even better support for the latest spec is one of the priorities for DENG 2.0.

DENG 2.0 Roadmap (first draft)

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.

New DENG Build: 1.0.43

[update: New DENG Build: 1.0.44]

I just published a new DENG build, that fixes some bugs and adds some minor features:

  • fixed: Memory leaks. Some object cross references prevented the DENG component from unloading.
  • fixed: Whitespace as first character in a block element with “white-space: normal” applied. Leading whitespace is now removed.
  • fixed: _level0 references and callbacks in deng.swf made it difficult to load DENG into custom Flash projects.
  • added: Support for <ul />. Unordered lists now display a bullet as marker.
  • added: Support for <br />. The line break tag now defaults to “display: block”.

As we are slowly moving to a different hosting, the sources are currently not available from CVS.

DENG 1.0.43 sources: http://deng.com.br/deng_1_0_43_src.rar

I also published a demo showing how to use DENG with Flash projects compiled with Flash MX 2004, Flash 8 or MTASC, and how to use a standard vertical scrollbar (here: UIScrollBar v2 component) with DENG.

Demo: http://deng.com.br/mx2004/
Download: http://deng.com.br/mx2004/deng.zip

By the way, the DENG support forum moved:
http://deng.com.br/forum/

Enjoy.