1. Prerequisites

This tutorial will explain how to use the great DistortionEffect/CubeEffect of Alex Uhlmann within a Flickr slideshow.

This is the final example result:

What you need for running this tutorial:

• the DistortionEffects Flex2 component
• Adobe Flex2 Builder
• A PHP enabled webserver
• A Flickr API Key
• ActionScript 3.0 libs from adobe labs

 

2. Install the DistortionEffects component

Download the component and unzip into a temporary folder. Once unzipped copy the file bin/DistortionEffects.swc into your Flex2 application folder:
C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\libs\DistortionEffects.swc

3. Get the ActionScript classes

Go to the Adobe labs site and download both the corelibs and the flickr classes. (if you get the zip files, just extract them into a folder of your choice)

4. Set up the project in Flex2

Open Flex2 and setup a new Flex project.

Open the project properties and into the "Flex build path", select the "source path" tab.

Using the "Add folder" button add the path of your corelib and flickr actionscript classes you downloaded from labs.adobe.com (see the figure below as example)

Now (always in the project properties dialog) select the "Library path" tab and click on "Add SWC..." button and just select theDistortionEffects.swc file you copied in the flex folder.

 

5. Setup the Wrapper PHP file

Now we need a PHP file wich will read the external flickr image file and just display it.
This is needed because every BitmapData based effectwill fail if used on images loaded from different domains. But using the readfile function in PHP we just tell to flash to read the image from our same domain.

Create a file called read.php and place on your webserver wherever you want.

This is the content of your read.php file:

<?php
    if(isset($_GET['file']))
    {
        // just check if the file to read is from flickr
        if(preg_match("/^http:\/\/static\.flickr\.com\/[0-9]+\/[0-9a-z_]+\.jpg$/", $_GET['file']))
        {
            readfile($_GET['file']);
        }
    }
?>