• Home
• About
• Articles
• Contact
• Downloads
• Glossary
• Links
• Projects

Science and religion

Posted on April 28, 02008
Filed Under Journal | Leave a Comment

All of our present day systems of measuring and marking time have their roots in astronomy. Ancient cultures used the motion of the heavens to determine everything from when best to sow their crops to when to attack their enemies. Over time these observations became formalised calendar systems.

Church and State
All of these calendars have been meddled with and adjusted over time by men of science and men of religion. Timekeeping is actually one of the few disciplines where science and religion have pursued a common goal: to accurately measure the movement of the heavens. Religion requires that its festivals and feast days are celebrated at a consistent point in the heavenly cycle, and science wants to understand the universe and the fundamental laws of nature.

We live our lives by these frameworks of celestial approximation but often take them for granted. What's not generally appreciated is that these systems are still changing. The modern western calendar has only been around in its present form for a little over 400 years. The highly controversial notion of Daylight Saving Time was 200 years old last year. Even in recent years we have begun adopting (and proposed dropping) leap seconds. Whole calendars are adopted and dropped; the people of Turkmenistan just recently got their old calendar back after 7 years.

A line in the sand
Science and religion continue to tinker with our systems of timekeeping. Take for example this recent report from the BBC in which Muslim clerics attending the recent "Mecca, the Centre of the Earth, Theory and Practice" conference in Qatar have called for Mecca to be adopted as the prime meridian for the earth. The fundamental flaw (no pun intended) in this proposal is that a religious body has tried to use science to make their argument. The arguments put forward as evidence were neatly demolished at BadAstronomy.com. Science is the realm of empiricism and reason and theology is the realm of faith. They both look foolish in each others territory.

A meridian is just a line. It's completely arbitrary. In most cases the meridian is a point of longitude where an astronomer happened to set up his telescope. Why not have another system with Mecca as its prime meridian? Prior to the International Meridian Conference there were competing meridians all over the world. The reason it is unlikely to be adopted globally is that agreeing on a prime meridian in the first place has provided a stable useful international standard.

Inside the Bit-101 MinimalComps

Posted on April 24, 02008
Filed Under DaVinci, Development, Flash | Leave a Comment

A few weeks ago Keith Peters posted a set of lightweight AS3 Components up on GoogleCode. They are really simple to use so I decided to take them apart to see how they are built. If you've got a minute pull down a copy so you can play along.

First unzip the contents to a folder. You'll find you have a set of Actionscript 3 classes in the com/bit101/components directory and a single font file in the assets directory. The font is an included asset for use with the text based components. These are lightweight components so the Actionscript structure is really simple. In the build I looked at I found classes for 18 components, a single base class and a single styes config class called Style.as.

The current list of MinimalComps include: CheckBox, ColorChooser, HSlider, HUISlider, IndicatorLight, InputText, Label, Meter, Panel, ProgressBar, PushButton, RadioButton, RotarySelector, Slider, Text, UISlider, VSlider, VUISlider

I'm not going to go into the specifics of each of the individual components. The key to understanding a component framework is to look at the common functionality - all the magic happens in the base class. This base class will usually extend Sprite or MovieClip and is likely to be called something like Component.as, UIComponent.as or AbstactComponent.as. In this case its...

Component.as
All the MinimalComps extend Component.as either directly or indirectly through another class. This is the base class that provides all the common functionality for the component set. Open up Component.as in your favourite editor to see how all these features have been implemented.

Feature: Shared Resources

[Embed(source="/assets/pf_ronda_seven.ttf", fontName="PF Ronda Seven", mimeType="application/x-font")]
private var Ronda:Class;

Embedding common assets in the base class make them available to all their children. Having the code at this level centralises it, making it easy to change.

Feature: Common features

protected function getShadow(dist:Number , knockout:Boolean = false)
{
...
}
 
public static function initStage(stage:Stage):void
{
  stage.align = StageAlign.TOP_LEFT;
  stage.scaleMode = StageScaleMode.NO_SCALE;
}

Sharing functionality in a base class can save code repetition in child classes. At what level each piece of functionality ahould sit can be a matter for debate. For example, Component.as has two utility classes embedded in the base class. The first creates a Drop Shadow for the component and the second one configures the stage. I'm happy enough with the drop shadow but I don't think a Component base class is the right place for stage initialisation code.

Feature: Snap To Pixel

public function move(xpos:Number, ypos:Number):void
{
  x = Math.round(xpos);
  y = Math.round(ypos);
}
 
override public function set x(value:Number):void
{
  super.x = Math.round(value);
}
 
override public function set y(value:Number):void
{
  super.y = Math.round(value);
}

This is such a simple one to implement but a great little safety net for working with pixel fonts. Any time the x or y coordinates are set their value is rounded to the nearest whole number. This ensures the component always snaps to a pixel boundary, which in turn ensures that the pixel font is sharp and easy to read.

Feature: Deferred Rendering

protected var _width:Number = 0;
protected var _height:Number = 0;
 
protected function init():void
{
  addChildren();
  invalidate();
}
 
public function setSize(w:Number, h:Number):void
{
  _width = w;
  _height = h;
  invalidate();
}
 
protected function invalidate():void
{
  addEventListener(Event.ENTER_FRAME, onInvalidate);
}
 
private function onInvalidate(event:Event):void
{
  removeEventListener(Event.ENTER_FRAME, onInvalidate);
  draw();
}
 
public function draw():void
{
  dispatchEvent(new Event(Component.DRAW));
}

Deferred Rendering is the key optimisation common to almost all component frameworks. The aim is to keep redraw operations to a minimum as they tend to be time consuming and processor intesive. A process known as "invalidation" ensures that no matter how often changes are made, a component is only ever redrawn once per frame.

Property changes are cached in internal variables and a redraw event is scheduled to take place at the next frame. There are two common ways of implementing the redraw request: onEnterFrame and stage.invalidate.

onEnterFrame
MinimalComps use onEnterFrame. This is the same invalidation technique used in the AS2 component sets. It's simple to implement and it's only real drawback is that the redraw happens on the frame after the update. This can cause some lag or flicker at slow frame rates.

stage.invalidate()
This is the preferred update technique in AS3 as it allows draw updates to be performed at the end of a frame. I say preferred - it would be if it wasn't buggy. Even the CS3 components don't rely on it to work as advertised. Jesse Warden has a fix for the CS3 components which replaces stage.invalidate with onEnterFrame.

Feature: Manage Children

public function Component(parent:DisplayObjectContainer = null, xpos:Number = 0, ypos:Number =  0):void
{
  move(xpos, ypos);
  if(parent != null)
  {
    parent.addChild(this);
  }
  init();
}
 
protected function init():void
{
  addChildren();
  invalidate();
}
 
protected function addChildren():void
{
}

Part of the power of a component framework is the ability to use components within other components. A simple Label can be embedded in a Button to get a LabelledButton. The LabelledButton can then be used as a ListItem inside a ListControl and so on. A unified system of child management and instantiation is the key enabler.

Choosing an AS3 component framework

Posted on April 22, 02008
Filed Under DaVinci, Development, Flash, Journal | 8 Comments

There are a small set of user interface controls that are common to almost all web applications; form elements such as checkboxes and radio buttons are typical of these. These controls can be implemented in Flash as smart reusable MovieClips called components. A component can then be dragged to the stage and configured relatively quickly.

The history of components in Flash
Flash Components have a bit of a chequered past. They were first introduced as ‘SmartClips’ back in Flash 5. Each subsequent release of the Flash IDE has had its own, largely incompatible, set of components. The types of included components, their APIs and features have all varied wildly over the years; and each set have their own inevitable bugs and workarounds.

Sometimes these bugs can be showstoppers and many developers (myself included) have resorted to building our own component sets. However frustrating this process was at the time I'd heartily recommend doing it purely as a programming exercise. The process of designing and optimising a set of re-usable user interface components will teach you everything you need to know about object-oriented design.

The most successful and stable set so far have been the Flex components. They have their own quirks but they are far and away the most feature-rich and comprehensive. They offer great functionality like charting and drag and drop that you don’t get out of the box with the Flash IDE components. On the downside they come with a heavy initial file footprint (thankfully cached in the latest player) and a requirement to develop your site as a Flex application.

Components in The Computus Engine
I need to build a quite a few unusual UI components for The Computus Engine so I thought I'd start off by taking a look at the current crop of AS3 component frameworks. I've already decided to build my app using the Flash IDE so I wont be able to take advantage of the Flex components. Part of the fun of working with Flash though is the freedom it gives you to create your own innovative user interface elements. This leaves me with the following options:

1. extend the existing Flash CS3 components
2. extend a third party component set
3. build my own component set

1. Extend the CS3 Components
Adobe outsourced the development of the Flash CS3 Components to Grant Skinner and Mettaliq. This was a smart move as Grant is well respected within the community and the pair had previously collaborated on a lightweight set of third party components for Flash 8. Initial documentation was a little sketchy but there are now some great articles on Creating Actionscript 3.0 components in Flash and creating FLA based components in Flash CS3.

PROS: A move to AS3 and the removal of data-binding has made the CS3 components lighter and faster than previous versions. Skinning is significantly easier this time round.

CONS: There are fewer components in this set so if you can't find what you're looking for then I'd recommend checking out the ASTRA components from Yahoo! The CS3 components have a known issue with styles amongst other things but on the whole they are pretty good. Although Grant reckons they were "built to be hacked", Keith Peters has hit a few gotchas while trying to build components that play nice with the Flash CS3 IDE. If you are going to go this route then be sure to read: Custom Parameter UIs for Components in Flash CS3, CS3 Component Parameters - defaultValues and CS3 Component Glitch #3.

2. Extend 3rd Party Components
Although there are a few commercial component sets out there (see DigiCrafts Flash Components and Advanced Flash Components) they are not much use to me. I want this project to be as open as possible so extending these isn't really an option. Of the free components, my favourite set are from Keith Peters. His MinimalComps are really lightweight and there are loads of them. You can see examples of these on his site or pick up the code for them from Google Code.

3. Build my own components
This route is the most time consuming but ultimately the most flexible. I don't want to re-invent the wheel but this route will give me just the functionality I want without any licensing issues. The real advantage of going this route would be the opportunity to document the process as I introduce new concepts and features to the component set.

And the winner is..
I like the new CS3 components but they are still a little heavy for what I need. There is a lot of code in there related to skinning and themes that I'd prefer to do without. I also love Keith's lightweight MinimalComps, and these are probably a little closer to what I'm after. Thinking about it, I reckon a few posts about building a component framework from the ground up would make interesting reading. Still not sure which way to go, but I think I might start by taking a look inside the MinimalComps to see how they work.

Lumiere Technology

Posted on April 16, 02008
Filed Under Journal | Leave a Comment

High Resolution Photos Of Classic Art

Paris based Lumiere Technology are using innovative scanning technology to bring fascinating new insights into the history of art. They use high resolution multi-spectral scanning to digitally restore the colour of classic artwork. The video is part of a talk that CEO Jean Penicaut gave to Google about the technology.

Inside the AS3 Date class: Properties and methods

Posted on April 10, 02008
Filed Under Development, Flash, Latham | Leave a Comment

I've left properties and methods to the end because they are already well documented in the official docs. They are really just here for completeness. If you have worked with the Date object in a previous version of Actionscript then there is one point worth mentioning. You are probably used to working with methods like this:

var hours = d.getHours()
// and
d.setHours(5)

Although all these legacy methods are still available to you, you might want to consider moving over to the property syntax. This is new in AS3 and much cleaner to use. The property equivalents of the above methods look like this:

var hours:Number = d.hours
// and
d.hours = 5

These new properties make the get() methods largely redundant but the set() methods can be still be useful as most of them take multiple parameters; for example the full setHours() syntax looks like this:

setHours( hour:Number, minute:Number, second:Number, millisecond:Number ):Number 

Properties and methods
At the risk of stating the obvious, any property or method marked as UTC will return or set a value in UTC; anything else is in local time.

Milliseconds: the number of Milliseconds as an integer between 0 - 999

milliseconds:Number
millisecondsUTC:Number
setMilliseconds( millisecond:Number ):Number
setUTCMilliseconds( millisecond:Number ):Number 

Seconds: the number of Seconds as an integer between 0 - 59

seconds:Number
secondsUTC:Number
setSeconds( second:Number, millisecond:Number ):Number
setUTCSeconds( second:Number, millisecond:Number ):Number 

Minutes: the number of Minutes as an integer between 0 - 59

minutes:Number
minutesUTC:Number
setMinutes( minute:Number, second:Number, millisecond:Number ):Number
setUTCMinutes( minute:Number, second:Number, millisecond:Number ):Number 

Hours: returns the number of Hours as an integer between 0 - 23

hours:Number
hoursUTC:Number
setHours( hour:Number, minute:Number, second:Number, millisecond:Number ):Number
setUTCHours( hour:Number, minute:Number, second:Number, millisecond:Number ):Number 

Day of week: returns the day of the week as an integer between 0 - 6
(0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday)

day:Number
dayUTC:Number 

Day of month: returns the day of the month as an integer between 1 - 31

date:Number
dateUTC:Number
setDate( day:Number ):Number
setUTCDate( day:Number ):Number 

Month: returns the number of Months as an integer between 0 - 11
(0 = January, 1 = February, 2 = March, 11 = December)

month:Number
monthUTC:Number
setMonth( month:Number, day:Number ):Number
setUTCMonth( month:Number, day:Number ):Number 

Year: returns the Year in the Gregorian calendar as a 4 digit integer

fullYear:Number
fullYearUTC:Number
setFullYear( year:Number, month:Number, day:Number ):Number
setUTCFullYear( year:Number, month:Number, day:Number ):Number 

Strings:

toDateString():String
toLocaleDateString():String

toString():String
toLocaleString():String
toUTCString():String

toTimeString():String
toLocaleTimeString():String

keep looking »