There are three main parameters to the effect:

• Pixel Size - determines the size of the square blocks used by the effect.
• Time Spread - determines the number of blocks fading at any one time (higher number means fewer blocks).
• Pattern - the pattern that determines the order in which blocks are faded.

We hope you enjoy this new addition. As always, let us know if you have any other suggestions for new features!

Bookmark It

Hide Sites

• Allowing accent characters in many text fonts
• A new service which lets us package up effects so that you can host them yourself
• Play and pause buttons for easier editing of effects
• New extra ‘Cube’ effect which lets you rotate any content on the surface of a 3d cube
• Improvements to loading speed

We hope you like the new content - let us know if you uncover any problems or have any suggestions for new features!

Bookmark It

Hide Sites

Up until now I’ve been an advocate of Flex through-and-through. This was partly, I admit, because I’ve always had the feeling that Silverlight has just been a copy of the Flex/Flash environment. But in the real world, it doesn’t matter so much who got there first, and it’s the current productivity and functionality benefits that count. And so it’s only come to dawn on me recently that there’s one big problem with Flex that Adobe has yet to face up to…if they can. And it’s potentially a killer.

The problem

At first the problem seems a like not such a big deal. In fact, for many RIAs out there today, it probably makes not once single bit of difference. But I think it really is a fairly vital feature that Microsoft offers out of the box, but Adobe has somehow managed to over-look. And I think it’s only because of the relative immaturity of RIAs, and the strong event focus of Adobe’s Flash platform that has caused it to be overlooked.

The problem comes down to one word: threading. In short, Silverlight has it, and Flash doesn’t. We’ll talk a bit about why Adobe haven’t provided this below, but first let’s examine why it’s an issue.

The scale of the problem

How important is multi-threading in the RIA space? Well, of course, that rather depends on what it is that you’re trying to build. As I have already said, I don’t think this is a problem for many of the RIAs out there today. On the other-hand, it certainly is for some. As RIA apps grow more complex and libraries become sophisticated and nested, it’s going to be more of a problem.

Synthesizers

Take the fantasic Noteflight. If you haven’t yet seen this app then you really need to check it out. This Flex RIA app lets you drag around musical notation to compose scores, which may then be played-back using a synth that overlays sounds loaded from .wav files on noteflights servers. It’s a fantastic app, and I’m pretty sure that tools like this will bring to many musicians what mp3s have brought to music listeners (i.e. mass, systematic theft of music, which has, somehow, to be properly monetized).

But ‘.wav’ files? What’s going on there? Surely nobody would notice if they noteflight used mp3s for thier sound samples, and wouldn’t the download time be a million times better? Well, as it turns out, noteflight.com used wav files because “an ActionScript3-based decoder is inevitably going to be slow (and consume development cycles too)“.

Now maybe I’m reading between the lines a little bit, but here is what I suspect is going on. If you do a method call to decode an mp3 file in ActionScript then it’s going to take quite a long time to complete. During that time, because Flash is single threaded, absolutely nothing can happen in the UI. Nothing. Progress indicators can’t update, mouse events can’t be processed, and the user will generally be left with an impression that the RIA is temporarily dead. This isn’t at all good.

For Silverlight, on the other hand, I believe it would be a doddle to spawn a worker process to sort this out, and meanwhile still remain responsive. Just like what you’d expect out of a modern-day platform.

Image processing

For a chronic example, look at the quick image resizer. This site is pretty nifty because it lets you resize a jpg, directly from your local filesystem, without once transferring an image between you and the RIA’s server.

But my-oh-my have you seen what happens when you resize a large image taken with a digital camera? Nothing….for a long while, and then…..your image. This simply won’t do.

Other apps

It’s not hard to extend this to a whole host of other applications that need threading. Doesn’t a word-processor need to spell check innocuously? Doesn’t any form of editor need to be able to process it’s content for saving, without blocking the UI? Is there any point in Flash Player 10 having support for audio processingPixelBender aside, which is kind of a cop out for certain flavours of processing, and besides, do most developers really want to have to code this stuff in a different language catered for mass parallel processing)?

Why is Flash like this?

The short answer to this is that Flash has grown organically and hasn’t always been intended for the sophisticated RIA applications that people are now starting to build with it. In fact, ActionScript was first created with much smaller ambitions: i.e. animated vector graphics. The Flash event model was ideal for this, queuing up messages for processing via a single thread. Now these original platform intentions have been hijacked to support the Flex libraries that enable such more complex embedded web content, but the underlying threading model didn’t change.

In contrast, Silverlight has been built from the ground up with more ambitious targets in mind: fully fledged applications.

How can the problem be solved?

Instead of moving in the direction of Silverlight, there are a few other steps that Flex developers can take to get around this problem. Unfortunately though, none of them are particuarly pleasant!

Splitting tasks up

One approach is to simply split up big processing tasks into small blocks so that other events can be processed between each block. If this is possible then it’s certainly an approach, albeit an awkward one. It goes without saying, however, that it is a complete pain to manually divide up sequential composition into Flash’s event model.

Spawning another VM

Another approach is to get all your work done in a completely seperate Flash virtual machine. Flash’s LocalConnection interface is probably the best way to communicate with such a seperate process. Despite again being an obvious pain to code, this method is also likely to be pretty slow at transferring large amounts of data between the VMs, and there are all sorts of synchronization problems when you cater for the user having the same app open in multiple browser windows etc.

Adobe extending the Flash Player and ActionScript

It should be possible for Adobe to cater for multi-threading in a single virtual machine, but it’s likely to be a lot of work for them. Obviously, many of the libraries (including the Flex ones) would need to be rewritten to add thread-safety. Events would still have to be processed one at a time by a single thread to maintain backwards compatibility, since existing apps will depend on this.

Adobe’s stance on this is a little disappointing, as Alex from Adobe explains on his very useful blog:

As we hear more from our users about the importance of threading, the higher its priority will be.

While it’s very nice that Adobe is taking our concerns into account, I can’t help thinking that this isn’t the best way for them to do business. Wouldn’t it be better if problems could be anticipated, rather than waiting until developers are upset about them? In this case, Microsoft seems to have managed this pretty well.

Bookmark It

Hide Sites

The result is that the entire Flash API becomes accessible from regular script tags. Owing to the simlarities between the two languages, coding Flash in Javascript is actually incredibly natural, and what’s more, it also seems to have pretty nice performance!

A Simple Example

Here’s a simple example at work. I suggest you take a look at the source code to see how the Javascript is constructed.

You first have to create yourself a Flash player object:

var player = new
  AS3Wrapper.Player("content",100,100,false);

This replaces the div in your html page with id ‘content’ to be a 100×100 Flash player instance. The false parameter prevents transparency. The player might take a few moments to load, so assign a callback to setup your Flash scene:

player.onload = function(){
  // Do the meat of your Flash work here
}

Once the player has loaded, it’s javascript object will contain the complete class hierarchy of the internal Flash API. For example, player.flash.display.Sprite will be the constructor for the flash class flash.display.Sprite inside player ‘player’. Here’s a screenshot from Firebug:

To write Javascript for a particular player, use with. With blocks are also the equivalent of the ActionScript import statements. Apart from this, there is pretty much a direct correspondance between the two languages. For example:

with(playerInstance)
with(flash.display)
with(flash.net){
	var image = new Loader();
	image.load(new URLRequest(url));
	addChild(image);
}

is the Javascript equivalent of

import flash.display.*;
import flash.net.*;
... {
	var image:Loader = new Loader();
	image.load(new URLRequest(url));
	addChild(image);
}

Pretty similar, huh?

Some things to note: Javascript doesn’t have type annotations (obviously), and because IE doesn’t support getters and setters, I’ve created methods instead - getWidth() for getting a Flash ‘width’ property and setWidth(v) for setting it.

What next?

One impact of this might be that it opens up Flash programming to a wider audience. Even though Flash compilers are free, having the code right there in HTML eliminates the extra step of installing extra tools. What’s more, any code generated in this way is naturally open.

By using the Papervision3d module (see this example), you can now program quick-rendered 3d in Javascript. You can also use a Javascript console for interactive Flash programming and debugging. Maybe one day Flash grease-monkey scripts will exist? Who knows.

There are, of course, also many disadvantages: losing a richer programming environment, type checking and performance. But still, hopefully you’ll find playing with it a little bit of fun!

Download

You can download AS3Wrapper here.

Bookmark It

Hide Sites

Example

Code Generator

To get the code for your movie, find your movie on YouTube and copy and paste your URL here:

Creating Your Own Effects

This old-style movie effect was created online using The Effect Generator. You can edit the effect directly, by right-clicking on it and selecting ‘Edit’.

In The Effect Generator, you can search for and add YouTube videos, photos, clipart and mp3s, then select from a wide range of transitions and effects to add to them. See here for more examples.

Bookmark It

Hide Sites

An Example

You’re probably used to the old blog standard YouTube embedded player, that looks like this:

But now you can have content embedded and running more directly in your site. Here’s an example that autoplays and repeats two different YouTube videos in sequence:

Notice that the new Chromeless style doesn’t really have a defined border, so it feels much more like content that’s integrated with your page, rather than just an embedded widget.

Goo-Tube have recently released Javascript and ActionScript 2.0 APIs (rather poorly excluding ActionScript 3.0) for this player, but all these require programming skills to use. I’ll show you a quick and easy way to make use of the player without any programming and embed it in your site in no time. You can either use an XML description of your video playlist, or else use my graphical editor.

XML-based Playlists

Here’s the XML playlist for the example video sequence above:

<Effect height="240" width="320" bgcolor="#ffffff">
 <SlideShow autoAdvance="false" gap="0">
  <YouTubeVideo videoId="FB2WUSvQStg"/>
  <YouTubeVideo videoId="fxu5CUPRU-U"/>
 </SlideShow>
</Effect>

The root ‘Effect’ tag lets you define the width and height of your videos, and also the background colour to display during loading. The ‘Slideshow’ tag represents a container that displays each of it’s children in turn, then repeats. You can simply add or replace videos by adding or removing ‘YouTubeVideo’ children elements.

Here the children are the two YouTube videos with ids ‘FB2WUSvQStg’ and ‘FB2WUSvQStg’. The easiest way to find the YouTube id of the video you want is to look at the URL of the You Tube page for the video. The string of letters and numbers after “v=” in the URL is the id code. So for the URL:

http://www.youtube.com/watch?v=CCz1kmfqL7g

the id is ‘CCz1kmfqL7g’. Once you have the XML video playlist you want, simply surround with HTML code so that it looks like this:

<!--Video PLAYER: http://www.effectgenerator.com/ -->
<script class="fxml" type="text/xml">

<Effect height="240" width="320" bgcolor="#ffffff">
 <SlideShow autoAdvance="false" gap="0">
  <YouTubeVideo videoId="FB2WUSvQStg"/>
  <YouTubeVideo videoId="fxu5CUPRU-U"/>
 </SlideShow>
</Effect>

</script><script
src="http://www.effectgenerator.com/1.0.6/fxml.js"
type="text/javascript"></script>
<!--    ____ END Video PLAYER ___ -->

You can now put it directly in to your website. Since this uses JavaScript, it won’t work on sites like MySpace, but you copy the XML code into The Effect Generator (see below) to create Flash EMBED code for the video.

Using the GUI

You can also edit video sequences graphically inside my site The Effect Generator. Try right clicking on the video player above and selecting ‘edit’.

Start a new blank effect, and add the Slideshow component from the ‘Component Library’ on the right of the screen. Click the slideshow component and set it’s configuration not to auto advance (otherwise you will only see the first n seconds of each movie!). Then go to the ‘Public Media’ tab on the right and search for the YouTube videos you’d like to include.

Click ‘Publish’ and you can instantly add your video playlist to social networks, blogs, or get the Flash code to embed it.

Adding Lyrics and Other Effects

The XML description is actually an example of FXML - The Effect Generator’s internal language for describing Flash effects. This means that you can actually do a whole lot more than just sequence video using The Effect Generator. For example, you can add transitions between videos, text or graphic slides between them, overlay graphics or text, and more.

Here’s an example that uses the ‘Ticker’ component to move text across any video, adding lyrics for music. It also scales and rotates the video and adds a colour cycle effect. Right click on it to remix it into your own!

Bookmark It

Hide Sites

To create your own:

Enjoy!

Bookmark It

Hide Sites

In this tutorial, I’ll show you how to use the png and jpeg capture tool in The Effect Generator to add web-2.0-style reflection to any jpg, gif or png image in seconds.

The Six Steps

Step 1 Load The Effect Generator, choosing ‘Empty Effect’ instead of a Flash template.

Step 2 Click ‘Image’ from the component library on the left-hand side of the window.

Step 3 Click ‘Upload’ from the configuration panel that appears at the bottom of the screen, and select your source jpeg, gif or png file.

Step 4 Select the ‘Decoration’ tab from underneath the component library on the left-hand side of the screen, and pick ‘Reflection’.

Step 5 Change the background color, transparency, height and width of your effect by seleting the root ‘Effect’ node from the Component Tree at the bottom middle of the screen.

Step 6 Click the ‘Download Screenshot’ camera icon at the top of the screen, third from left.

Configuring the Reflection

You can configure the reflection effect into other forms than standard vertical type. To do this, click on the ‘Image’ component in the component tree, and then click on the ‘Reflection’ effect in the ‘Effects’ box next door. This will bring up the reflection component settings:

The ‘Amount’ parameter specifies the height of the Reflection:

The ‘Angle’ parameter specifies the angle of the reflected image:

Finally, the ‘Alpha’ parameter controls the transparency of the reflection:

Other Image Manipulations

Reflection is only the first of a large number of image processing effects that you can use this tool for. Here are some others you might like to try:

Rounding corners

Fading edges

Overlaying clipart

Setting brightness, saturation, hue, etc.

Adding glows

Adding shadows

Plus, of course, you can use The Effect Generator to create great Flash effects like this one.

Bookmark It

Hide Sites

What is a nested class?

A nested (or inner) class is a class inside a class, which has access to the members of its parent, even if they are declared private. In Java, they are declared by literally nesting the class definitions:

class OuterClass {
    ...
    class NestedClass {
        ...
    }
}

Nested classes are useful because they allow a way of logically grouping classes that are only used in one place. For instance, if only a class is used by only a single other, then the class can be declared as a nested (helper) class, and furthermore, declared private.

Another use is the case where only one class needs to access the member variables of another. By nesting the class, the member variables can be kept private, increasing encapsulation.

Closures as Objects

Nested classes cannot be declared directly in ActionScript. However, as Ely Greenfield pointed out to me earlier, it turns out that closures for function calls in ActionScript are quite a lot like objects:

"...parameters, local variables, even member
references of ‘this’ are all accessible in the
closure, whenever it’s called, however often
it’s called, for as long as the closure exists."

As a result, it must be that the local variables of function definitions are quite a lot like the member variables of classes.

What’s the Hack?

So, we can define a nested class by defining a function (it’s constructor) with local variables and functions corresponding to the members of the class. By default, each of these is private, but we can selectively expose them by returning an appropriate object.

An Example

First the class as a top-level class:

class A {
   private var x;

   public function A(a){x = a;}

   public function inc(){x++;print();}
   private function print(){trace(x);}
}

var c = new A(4);

and now the class as a nested class:

public function new_A(a){  // constructor
  var x;                     // members

  x = a;

  function inc(){x++;print();}
  function print(){trace(x);}

  // public members
  return {inc:inc};
}

var c = new_A(4);

As you can see, the syntax actually ends up looking quite similar in both cases, the same encapsulation rules exist for both and the usage rules are the same. What’s more, the methods in the ‘nested class’ can still access the member variables of its enclosing class, just like in Java.

Of course, this isnt going to work so well if you need to use more advanced techniques (like inheritance, type-checking…etc!). You might still find it useful.

Bookmark It

Hide Sites

What!? Closures take references?

The problem concerns ActionScript’s behaviour when local variables are used in function definitions. Let’s take a look at an example:

// Create an empty array to hold our functions
var functions:Array = [];

// Add functions to array that print out x
for(var x:Number = 0;x<10;x++)
  functions.push( function(){ trace(x); } )

// Execute functions
for each(var f:Function in functions)
  f();

First we create an empty array (or list). Then we add 10 functions that print out x for a range from 0 to 9. Finally, we iterate through the array and execute each function. The result?

10 10 10 10 10 10 10 10 10 10

So what went wrong? Well. I feel that many programmers would expect the functions to display the value that x held during the definition of the function. However, in fact what was used was the value of x during the execution of the function.

Style?…or Bug?

On the face of it, whether x should be determined at function definition or function execution sounds like it might be a language design choice. Maybe this is just the way they chose it to be?

But dig a little deeper and you realise that things seem a bit wrong. For starters, in our example, is the variable x even defined at the time of function execution? Is it right that a fuction’s local variables should still be accessible after the function has completed execution?

Ways Around It

For anonymous classes in Java, the same problem is dealt with by enforcing variables to be declared final (unassignable) before they can be used within a delayed piece of code. I think it’s a shame that the ActionScript compiler doesn’t require a similar convention.

Still, I have found a stylistic way to hack around the problem, and I suggest that all ActionScript users do the same. The method involves allocating a fresh persistent reference on the stack for any local variables that you would like to use inside a function definition. You can do this by wrapping your function in yet another anonymous function. Here’s the modification in place for the code above:

// Add functions to array that print out x
for(var x:Number = 0;x<10;x++)
    functions.push( (function(x){
      return function(){ trace(x); }
     })(x) )

And now, success!

0 1 2 3 4 5 6 7 8 9

It works because the outer x is evaluated at the same time as the function definition. As a rather interesting aside, it demonstrates that

E    is not   (function(x){return E})(x)

Surely not the best of features? Or am I molded by the over-use of functional programming?

The Pass-by-Reference Hack

Things get much stranger than that. It turns out that not only can you read variables that have seemingly ceased to exist, but you can also write to them. This can lead to some usages that seem really odd coming from a Java background. For example, here’s an example I created of emulated integer pass-by-reference call:

// Receives reference to x, and doubles x
function twice(xRef){
  xRef(xRef()*2);
}

function test() {
  var x = 1;

  // Create reference to x
  var xRef = function(value=null){
    if(value!=null)
      x=value;
    return x;
  };

  // Call-by-reference
  twice(xRef);
  twice(xRef);

  trace(x);
  // result is 4
}

Sweet. Did I really call ActionScript terrific at the start of the article? Actually, I still think it rather kicks arse, just needs a little tweak. Afterall, I just made this.

Bookmark It

Hide Sites