Pixelate Effect

July 4th, 2009

We’ve just added a new ‘pixelate’ effect to the collection. The effect is displayed under the ‘Animations’ heading, and allows you to use it to fade in and out components, as well as to react to mouse events. Here’s an example of it used as a slideshow transition:

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!

Posted in Uncategorized | No Comments »

Accent characters and self-hosting

May 25th, 2009

We’ve just released an updated version of The Effect Generator based on feedback that we’ve had from our users. New features with this version include:

  • 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!

Posted in Uncategorized | No Comments »

Flex vs. Silverlight: The Elephant in the Room

February 21st, 2009

The battle for making riches out of RIA platforms is now really heating up between Adobe’s Flash/Flex platform and Microsoft’s Silverlight. This is an important area for the future of web applications, and is bound to give the winner a critical flow of developer bucks.

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.

Posted in Uncategorized | 35 Comments »

AS3Wrapper: Pulling Flash objects into Javascript

May 26th, 2008

I’m very excited about a new tool that I’ve written this weekend called AS3Wrapper. It’s a Javascript library, compatible with IE and Firefox, that can pull the contents of the Flash virtual machine into Javascript.

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.

Posted in Actionscript, Air, Announcements, Flash, Flex, Tutorials | 6 Comments »

FlicksTube: Turning YouTube Old-Style

April 3rd, 2008
Transport your YouTube movies back in time with this bleached, jerky, flickery effect script!

Example

Code Generator

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

Video Width:

Video Height:

Background Color:

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.

Tags: , , , , , , , , , , ,
Posted in EffectGenerator, FXML, Flash, Generators, Tutorials | No Comments »

Sequencing Embedded YouTube Videos

April 3rd, 2008

In this tutorial, I’ll show you how to make use of the new YouTube Chromeless player without any programming required, to create video content that fits in better with the style of your site, using video playlists, and even extra video effects like color cycling.

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!

Tags: , , , , , , ,
Posted in EffectGenerator, FXML, Flash, Tutorials | No Comments »

Adding a Flash Ripple Effect to Images on Mouse Over

March 29th, 2008

This week I’ve added a mouse ripple effect to The Effect Generator. This is a Flash adaptation of the classic Java applet animation. Try moving your mouse over the example below:

To create your own:

  • Load up The Effect Generator here
  • Select ‘Image’ from the Component Library on the left-hand side
  • Enter your image URL, or click ‘Upload’ to upload your image
  • Select the ‘Extras’ tab on the left-hand side and click ‘Mouse Ripple’
  • Change the effect size by click on the root ‘Effect’ node in the Component Tree (bottom) and adjusting it’s width and height
  • Press Publish to get HTML code or post to your blog or social network

    • Enjoy!

    Tags: , , , , , , , ,
    Posted in EffectGenerator, Flash, Tutorials | 1 Comment »

    Add Reflection to Images in 6 Easy Steps, Online

    March 8th, 2008

    Arrow without reflectionArrow with reflection

    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.

    Image Icon

    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.

    Upload Image Selection

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

    Reflection Icon

    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.

    Effect Settings

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

    Camera Icon

    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:

    Reflection Settings

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

    Arrow with reflectionAmount Reflection

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

    Amount ReflectionAngle Reflection45 Degrees

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

    Amount ReflectionAlpha 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.

    Tags: , , , , , , , , , ,
    Posted in EffectGenerator, Tutorials | No Comments »

    Emulating Nested Classes in ActionScript

    March 4th, 2008

    Although nested classes are not supported by ActionScript 3.0, I’m going to describe a rather deviant means to achieve pretty much the same effect. The syntax doesn’t work out too great, but hopefully you might still get some use out of it!

    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.

    Tags: , , , ,
    Posted in Actionscript, Air, Flash, Flex | No Comments »

    A Hole in ActionScript, and a Way Around It

    February 29th, 2008

    In my previous post, I put forward several reasons why functional programmers might feel at home with Adobe’s rather terrific ActionScript 3.0 programming language that’s the basis of Flash, Flex and AIR. Today I’m going to describe one reason why they just might not want to. Some people will call this behaviour a stylistic feature. Others will call it a semantic irregularity. Personally, I think it’s a bug, and suspect that those coming from functional programming will feel the same.

    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.

    Tags: , , , , ,
    Posted in Actionscript, Air, Flash, Flex | 4 Comments »

    « Older Entries