This is intended to allow me to create and publish easily new Flash application for Wordpress and any other CMS which the Flash Media Portal will be adapted for (Joomla and Drupal will be next). But of course if you are a Flash developer and are interested in publishing your Flash application via the Flash Media Portal just contact me. The advantage is obvious, all you have to do is create the Flash application and the Flash Media Portal will provide the rest and this on every CMS the Flash Media Portal will be adapted for.

Important to notice of course, the Flash Media Portal and every application it will provide will be free of charge.

Time for some screen shots! The Flash Media Portal is really on its last stage of development.

The Flash Media Portal will be accessible via the Media tab on the Wordpress CMS:

You will be able to easily manage which user can use the Flash Media Portal, either by role or by name:

Upload new asset on the fly within the Flash Media Portal (server upload size restriction apply):

Once you selected the Flash application you want to work with you access the create screen. There you give a specific ID to your file and some usual options like size. Note that the html you’ll need to include in your post is created for you at the bottom of the create window:

you can also of course load all previously saved work:

once you created a file you can then access the manager window where you can add new assets, load, set options for each assets or for the application itself and so on. you can also preview your assets before using them:

That’s all for this little overview of the Flash Media Portal. Don’t hesitate to contact me if you are interested in this plug-in.

Many people have read the simple reflection tutorial for AS2 that I wrote a while ago. Many also had a lot of questions about how to make this more dynamic, with more objects and so on. Rather than answering case after case, I decided to write a new tutorial exploring the reflection concept deeper. I then eventually created a new easy-to-use class. Of course this tutorial is for AS3 but the basic principles that I will show are applicable to AS2 as well.

So let’s start by showing the basic principles behind a simple reflection in Flash. So let’s say we have an object that we want to add a reflection effect to:

Step number 1 is to create a copy of the object:

Step number 2 is to flip the copy. Here the reflection will be at the bottom so we flip the copy vertically:

Step number 3 is to create a gradient:

Step number 4 is to set one color of the gradient to transparent:

Finally set the gradient on top of the flipped copy and set the gradient as a mask for the flipped copy:

So to resume creating a reflection involves a few steps: Create a copy, flip the copy, create a gradient, set one color of the gradient transparent, and then set the gradient as a mask for the flipped copy. Now to translate that into code all we need to do is write a code that does all these steps for us.

It’s important also to notice that the way the reflection looks is completely dependent on the way the gradient is made. The second color of the gradient is fully transparent but what happens if I make the first one 50% transparent?

What happens if I move the gradient up?

So the gradient is the centerpiece of a nice reflection effect. We can move it, set different transparencies for its colors; we could also put the gradient at an angle to get interesting effect and so on. So now it’s time to apply what we learned and get into some coding.

previous - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - next

The ShaderExtended class allows you to easily load and access a Pixel Bender Filter. Simply create an instance of the ShaderExtended class and pass a valid path to a Pixel Bender Filter. After completion of the filter loading an event is triggered and you can then start to set, get or animate your filter property. Relevant code on how to use this class is showed in this tutorial.

A Dynamic Slide Show is quite a simple application but the more dynamic you want it, the more complex it gets. This tutorial will show you how to create a dynamic, flexible, and versatile slide show with AS3. The tutorial is divided in sections, each section covering a particular subject in the creation of a Slide Show. The sections are as follow:

1. Loading data (or why everybody uses XML?)
2. Loading Pictures (or How do I time this?)
3. Resizing and Autoresizing (or can the swf resizes itself?)
4. Adding Setup Options (or letting the user take charge)
5. Adding Effects and Create Custom Effects (or Put The BitmapData Class to Work)
6. Randomizing (or Adding Some Life)
7. Adding Texts (or The Advantage of Classes)
8. Adding Sound (or Turn That Off!)
9. Cleaning Up (or Learn How To Take The Trash Out)
10. CMS (or Live And Let Live)

Each new section will build upon the preceding one. The code will be presented in a document class format running in Flash CS3/4 making it easily adaptable for Flex users (might need to import some missing classes and set some additional stage properties). So let’s already start with our first section.

Loading data (or why everybody uses XML?).

Most application must load some kind of data when they start and a Dynamic Slide Show is not different, it must load at least the path of the pictures it’s going to display and maybe additional information like timing, URL paths and so on. This first section shows you how to load data via an XML object.

Why everybody uses XML?

XML as become a standard on the web for passing information from website to website, from web application to server side and reverse, and in many other cases. The reason is simple, with XML the data is (or is supposed to be) well organized, already sorted for you. XML nodes are supposed to describe the data they enclose making the work of the programmer easier.

So let’s start building our slide show, create a new Actionscript 3 document, set its width and height to 400, its frame rate to 30 and save. Now let’s create our document class, create a new Actionscript file and save it in the same folder than the Fla file you just created, give it for example a name of “LoadingData.as”. Now back to our Fla file, set the document class as “LoadingData” and save. From now we will be working with the document class only but leave the Fla open anyway as we will need it for compiling the swf. Let’s create a simple XML that we will load in our application:

<SLIDE_SHOW>

<PICTURES>

<PICTURE_PATH></PICTURE_PATH>

<PICTURE_PATH></PICTURE_PATH>

<PICTURE_PATH></PICTURE_PATH>

<PICTURE_PATH></PICTURE_PATH>

</PICTURES>

</SLIDE_SHOW>

SLIDE_SHOW is what we call a root tag, it encloses all the other tags and is required to form a valid XML object. PICTURES is the tag that we will use to pass our picture paths to the application, this tag will enclose all the picture paths. PICTURE_PATH is our final tag and we will add paths inside these tags to point to our pictures. We still did not setup a picture folder but let’s go ahead and pretend we did and add some paths into our XML:

<SLIDE_SHOW>

<PICTURES>

<PICTURE_PATH>mypicture1.jpg</PICTURE_PATH>

<PICTURE_PATH>mypicture2.jpg</PICTURE_PATH>

<PICTURE_PATH>mypicture3.jpg</PICTURE_PATH>

<PICTURE_PATH>mypicture4.jpg</PICTURE_PATH>

</PICTURES>

</SLIDE_SHOW>

Here now there’s something in our tags, let’s save this XML as “slide_show.xml” and save it in the same folder as our Fla and as files.

Now let’s write our document class. Open the actionscript file named “LoadingData.as”. A document class in AS3 must be enclosed in a package so let’s do that first:

package{
}

Quite easy, now inside this package let’s declare our document class (its name must match the actionscript file name):

package {
public class LoadingData
{
}
}

A document class in AS3 must extend either MovieClip or Sprite, use MovieClip when you intend to use timeline based animation, use Sprite when you won’t use any timeline. We won’t use any timeline based animation here so let’s go ahead and extend Sprite. We import the Sprite class and extends it:

package {
import flash.display.Sprite;
public class LoadingData extends Sprite
{
}
}

Finaly let’s create our constructor. A constructor is a function with the same name as the class, it never returns a value and will automatically run when the document class is called (when the application starts):

package {
import flash.display.Sprite;
public class LoadingData extends Sprite
{
public function LoadingData()
{
}
}
}

I will not describe again how to create a document class in the next sections so if you forget how to do this come back to this page and review the process. Now time to write code that actually does something! Loading our XML! We need to import a couple of classes to load our data, the URLRequest class, all the events class package (we’ll need those) events.*, the TextField class that we’ll use to show our XML, and the URLLoader class. We also declare a few member variables: A variable to hold our XML data “var picture_xml:XML;”, a variable to hold our URLRequest “var url_request:URLRequest;”, and a variable to hold our URLLoader “var url_loader:URLLoader;”:

package {
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.net.URLLoader;
public class LoadingData extends Sprite
{
var picture_xml:XML
var url_request:URLRequest;
var url_loader:URLLoader;
public function LoadingData()
{
}
}
}

Now in our constructor we are going to instantiate our URLRequest, and URLLoader variables, write some code to initiate the loading and add a COMPLETE event to trigger a function when the XML data is fully loaded:

package {
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.*;
import flash.text.TextField;
public class LoadingData extends Sprite
{
var picture_xml:XML
var url_request:URLRequest;
var url_loader:URLLoader;
public function LoadingData()
{
url_request = new URLRequest("slide_show.xml");
url_loader = new URLLoader();
url_loader.addEventListener(Event.COMPLETE, completeHandler);
url_loader.load(url_request);
}
private function completeHandler(e:Event):void{
picture_xml = new XML(url_loader.data);
var txt:TextField = new TextField();
txt.width = stage.stageWidth;
txt.height = stage.stageHeight;
txt.wordWrap = true;
txt.text = picture_xml;
addChild(txt);
}
}
}

If everything went well you should like me see our XML displayed in our textfield. Now to be truly dynamic our slide show should be able to load different XMLs. For example you should be able to display two slide shows in the same html page with different pictures which means loading different XMLs. We can do so by using FlashVars. Back to our Fla file you can go ahead and hit “publish” to get an html file with the slide show embedded. Now we can modify this html and add FlashVars to pass to our slide show. Open the html file in your favorite html editor or notepad and look for this:

<script language="JavaScript" type="text/javascript">
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
'width', '400',
'height', '400',
'src', 'loading',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'loading',
'bgcolor', '#ffffff',
'name', 'loading',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'loading',
'salign', ''
); //end AC code

add between two lines this ‘FlashVars’, ‘xml=slide_show.xml’, so you should now have this:

<script language="JavaScript" type="text/javascript">
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
'width', '400',
'height', '400',
'src', 'loading',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'loading',
'bgcolor', '#ffffff',
'name', 'loading',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'FlashVars', 'xml=slide_show.xml',
'movie', 'loading',
'salign', ''
); //end AC code

Now look for this:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="400" height="400" id="loading" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="loading.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="loading.swf" quality="high" bgcolor="#ffffff" width="400" height="400"name="loading" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>

and add FlashVars at two places like this:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="400" height="400" id="loading" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="FlashVars" value="xml=slide_show.xml">
<param name="movie" value="loading.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="loading.swf" quality="high" bgcolor="#ffffff" width="400" height="400" FlashVars=”xml=slide_show.xml” name=”loading” align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.adobe.com/go/getflashplayer” />
</object>

Now let’s modify our document class to load our FlashVars prior to load our XML, we do this in the constructor:

var xml_path:String = "";
xml_path = this.loaderInfo.parameters.xml || "slide_show.xml";
url_request = new URLRequest(xml_path);

Now if you compile the application and run it in a browser you should be able to see our xml data and you should be able to pass different XMLs too. A little explanation about his line:

xml_path = this.loaderInfo.parameters.xml || "slide_show.xml";

This is a conditional that will allow us to keep developing our application in Flash CS3/4 since FlashVars is available only in a browser. The conditional first passes the FlashVars to the string variable and if the value is not available it then passes the string path which is the one we’ll use for developing. Now let’s go even further and load instead of an XML file, an XML object.

An XML object is not an XML file, an XML object is any valid XML formatted document or string that can be interpreted as XML. So another way to load XML data is to use a server side script like this PHP one called “simple.php”:

<?
$xml = "<SLIDE_SHOW><PICTURES><PICTURE_PATH>mypicture1.jpg</PICTURE_PATH><PICTURE_PATH>mypicture2.jpg</PICTURE_PATH>";
$xml .= "<PICTURE_PATH>mypicture3.jpg</PICTURE_PATH><PICTURE_PATH>mypicture4.jpg</PICTURE_PATH></PICTURES></SLIDE_SHOW>";
print($xml);
?>

Now we can modify the FlashVars to pass this “simple.php” instead of an XML file. Let’s do that and upload everything to a PHP enabled server and test it. If everything went well you should like me see our data. Now let’s go further in the server side script interaction, we could use our server side script to look inside a folder and pass as an XML object any picture we find, so let’s set up a folder with a few pictures on the server and create a new PHP script to grab any pictures it can find, this script is called “external.php” don’t forget to change the FlashVars when testing this:

<?php
$dir = opendir("assets/");
print("<SLIDE_SHOW><PICTURES>");
while($file = readdir($dir)){
if((substr(strtolower($file),-4)==".png") || (substr(strtolower($file),-4)==".jpg") || (substr(strtolower($file),-4)==".gif") ||
(substr(strtolower($file),-5)==".jpeg")){
print("<PICTURE_PATH>assets/".$file."</PICTURE_PATH>");
}
}
print("</PICTURES></SLIDE_SHOW>");
?>

When you test this you get back an XMLobject with all pictures present in a given folder. We can also apply the same principle with a database, we could create a database to save the picture paths and give each picture a type so our php script will give us the right pictures for the right slide show. For example if there’s a slide show on an index page then we could have pictures in the database with the type “index” and for another slide show on the about page we could have type ‘about’. Let’s see this in action with this new PHP script called “database.php” and let’s pass the picture type directly as a query with the PHP script name like this:

xml=database.php?type=index

and here is the script:

<?php
$db = mysql_connect("yourid", "yourusername" , "yourpassword");
mysql_select_db("yourdatabase",$db);
$query = 'select PICTURE_PATH from PICTURES where TYPE='.$_REQUEST['type'].’ ‘;
$query_result = mysql_query($query);
print(”<SLIDE_SHOW><PICTURES>”);
while ($row = mysql_fetch_array($query_result, MYSQL_ASSOC)) {
print(”<PICTURE_PATH>”.$row['PICTURE_PATH'].”</PICTURE_PATH>”);
}
print(”</PICTURES></SLIDE_SHOW>”);
?>

As you saw loading data is a bigger subject than one might think, anyway we covered the most standard situations with the database loading being the most flexible in my opinion since we’ll be able to link this easily to a CMS (sure why not?). Now it’s time to laod some pictures!

1. Open your Flash CS3 software, select “new”, “Flash File (Actionscript 3) “, click “Ok”, then go to “Modify”, “Document”, enter 300 for the width and height and enter 30 for the frame rate.

2. Open the “Actions” panel.

3. Copy and Paste this code:

var square:Sprite = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;

4. Hit “Ctrl+Enter” or go to “Control”, “Test Movie” to test our Flash movie. You should see this:

Here is what the code does:

var square:Sprite = new Sprite();

We create a sprite object which is pretty much like a MovieClip but without a timeline.

addChild(square);

We add our sprite to the display list which means we tell Flash that we want this sprite to be displayed.

square.graphics.lineStyle(3,0x00ff00);

We assign a graphics object to our sprite (If you worked with Java that might seem pretty familiar). Then we assign a line style to the graphic object.

square.graphics.beginFill(0x0000FF);

We assign a fill color to our graphic object.

square.graphics.drawRect(0,0,100,100);

We draw a rectangle using the drawRect() method.

square.graphics.endFill();

We tell Flash we are done drawing. (the other two lines of code are for positioning).

Now since there are many platforms and many ways to write AS3 code, I’m going to try to make this tutorial as versatile as possible so here is a document class version that you can use with a Flex Actionscript project or simply by using the document class box in the Flash CS3 environment. So copy and paste the following code in Notepad for example and save it as simple_shape.as:

package{
import flash.display.Sprite;
public class simple_shape extends Sprite{
var square:Sprite;
public function simple_shape(){
square = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;
}}
}

Now in Flex, set this file as the document class, and in Flash CS3 write “simple_shape” in the document class box. Run the example.

Now starting from a document class, it’s easy enough to create a real class out of it so I’ll leave that up to you.

We can as easily create a rounded rectangle:

var square:Sprite = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRoundRect(0,0,100,100,20);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;

Document Class (simple_rounded_shape.as):

package{
import flash.display.Sprite;
public class simple_rounded_shape extends Sprite{
var square:Sprite;
public function simple_rounded_shape(){
square = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRoundRect(0,0,100,100,20);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;
}}
}

And here is the result:

You can of course get a total control on how the shape is drawn with the good old moveTo() and lineTo() methods:

var square:Sprite = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
drawShape(square);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;
function drawShape(sprite:Sprite):void{
sprite.graphics.lineStyle(3,0x00ff00);
sprite.graphics.beginFill(0x0000FF);
sprite.graphics.moveTo(0,0);
sprite.graphics.lineTo(100,0);
sprite.graphics.lineTo(100,100);
sprite.graphics.lineTo(0,100);
sprite.graphics.lineTo(0,0);
sprite.graphics.endFill();
}

Document Class (simple_lineTo_shape.as):

package{
import flash.display.Sprite;
public class simple_lineTo_shape extends Sprite{
var square:Sprite;
public function simple_lineTo_shape(){
square = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
drawShape(square);
square.graphics.endFill();
square.x = stage.stageWidth/2-square.width/2;
square.y = stage.stageHeight/2-square.height/2;
}
private function drawShape(sprite:Sprite):void{
sprite.graphics.lineStyle(3,0x00ff00);
sprite.graphics.beginFill(0x0000FF);
sprite.graphics.moveTo(0,0);
sprite.graphics.lineTo(100,0);
sprite.graphics.lineTo(100,100);
sprite.graphics.lineTo(0,100);
sprite.graphics.lineTo(0,0);
sprite.graphics.endFill();
}}
}

MoveTo() and lineTo() methods were already part of AS2 and I covered how to use them in details in this AS2 tutorial. These are actually the methods that we will need most of the time if we want to create a dynamic shape. Let’s see that in the next page.

First if you still did not download the Pixel Bender Toolkit you should do so here. The Pixel Bender Toolkit comes with a set of Pixel Bender filters so feel free to study them to get a better understanding of Pixel Bender syntax. You can also search the web to find additional Pixel Bender filters.

In this tutorial we’ll create some simple filters with the Pixel Bender Toolkit and later on we’ll use some existing ones so let’s get started.

Start the Pixel Bender toolkit and choose “New Kernel”, a complete new working kernel file is automatically created for you. You can already run this filter, you’ll probably be prompted to load a picture and after doing so, the filter will be running. Of course the only thing this filter is doing so far is copy each pixels from the base image into the output image so that’s not that useful but let’s take a look anyway. First you have the kernel description:

kernel NewFilter
<
namespace : "Your Namespace";
vendor : "Your Vendor";
version : 1;
description : "your description";
>

You can give a name to your filter here as well as other information like the version of this filter, a description and so on. Next:

input image4 src;
output pixel4 dst;

You specify an input of type image4 (4 channels) and a name “src”. The filter will use this input as a base. You also specify an output of type pixel4 (4 channels) and a name “dst”. The filter will pass the result of its calculation to this ouput. Then:

void evaluatePixel(){
dst = sampleNearest(src,outCoord());
}

This function (evaluatePixel) will run once for each element (pixel) in your input data. The sampleNearest method is returning a pixel value and this pixel value is assigned to the “dst” output. The sampleNearest method takes a source (in our case an image4 source), and a set of coordinate (outCoord() returns the coordinates of the current element or pixel). If you pass an image4 you get back a pixel4 value, if you were to pass an image3, you would get a pixel3 and so on. The number determines how many values you get or have to set for example:

float myfloat = 1.0;//one value
float2 myotherfoat = float2(1.0,1.0);//two values
float3 mythreefoat = float3(1.0,1.0,1.0);//three values
float4 myfourfoat = float4(1.0,1.0,1.0,1.0);//four values

Casting is possible of course if type are compatible like from int to float for example. Obviously if you try to pass a pixel 3 to an image4 you’ll get yourself an error so just be aware of that. Let’s modify our code so our output looks different:

dst = pixel4(sin(float4(sampleNearest(src,outCoord()))));

You should get a slight alteration of your picture lightness. You probably know the sin method already and what it does. Here we casted our sampleNearest result into a float4 (so we did cast from pixel4 to float4) so we could apply the sin method, then of course we did cast back to pixel4 so we could assign the result into our output. Already you can experiment with the numerous math methods and see what result you get. try this one for example:

dst = pixel4(sqrt(float4(sampleNearest(src,outCoord()))));

Moreover we could separate each pixels and apply some calculation on each one of them:

pixel4 temp = sampleNearest(src,outCoord());
dst = temp;

Back to the beginning but here we have our pixels stored in a variable so we can access them individually so let’s do that now:

pixel4 temp = sampleNearest(src,outCoord());
temp.r = 0.0;
dst = temp;

Here we basically turned off the red channel so all red is gone from our picture. You could apply numerous math operation on these pixels and get some amazing result. Of course your level in math will determine your ability to create complex filters but this is for you to discover. Now it’s time to take a look at what we can do with Pixel Bender filters in Flash and as we go we’ll look at more Pixel Bender code of course.

Open your Flash software, select “new”, “Flash document”, click “Ok”, then go to “Modify”, “Document”, enter 400 for the width and heigth and enter 30 for the frame rate.
Open the “Actions” panel.

First Step:

Of course to apply a reflection we first need a picture or graphic to apply the reflection to.
In this first step we just load dynamically a picture:

this.createEmptyMovieClip("image_mc", 1);
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._x = (Stage.width/2)-(target_mc._width/2);
target_mc._y = 0;
};
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("none.jpg", image_mc);//replace this by any picture you have

Hit “Ctrl+Enter” or go to “Control”, “Test Movie” to test our Flash movie. You should see this:

That’s a nice looking picture. Here is what the code does:

this.createEmptyMovieClip("image_mc", 1);

We create a movieclip and give it a name of “image_mc” and a depth of 1.

var mclListener:Object = new Object();

We create a object that we will use to check (listening) if the picture is loaded.

mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._x = (Stage.width/2)-(target_mc._width/2);
target_mc._y = 0;
};

When the picture is fully loaded the onLoadInit function will trigger and set the referenced movieclip (image_mc) to the middle of the screen horizontally.

var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("none.jpg", image_mc);//replace this by any picture you have

We create a MovieClipLoader object, then set our listener object, then load the picture in the image_mc. Note: replace “none.jpg” by any picture you want, be aware that this code does not re size pictures.

Step Two:

To create the reflection effect we need to copy the existing movieclip, flip the image and place it below the existing movieclip. To do this, we are going to create a custom function, pass the existing movieclip as parameter and call the function from within the onLoadInit function we already used. In this new function we will use the bitmapData class to copy our existing movieclip so first we need to import the bitmapData class.

Before any other code, insert this to import the bitmapData class:

import flash.display.BitmapData;

inside the onLoadInit function insert this new line:

mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._x = (Stage.width/2)-(target_mc._width/2);
target_mc._y = 0;
reflect(target_mc);// new line used to call our new function
};

Now time to create our new function:

function reflect(target_mc:MovieClip):Void{
var myBitmapData:BitmapData = new BitmapData(target_mc._width, target_mc._height, false, 0x00CCCCCC);
var mc_1:MovieClip = this.createEmptyMovieClip("reflect_mc", 2);
mc_1.attachBitmap(myBitmapData, 3);
myBitmapData.draw(target_mc);
reflect_mc._yscale = -100;
reflect_mc._y= target_mc._y+target_mc._height*2+20;
reflect_mc._x = target_mc._x;
}

And here is the complete code:

import flash.display.BitmapData;
this.createEmptyMovieClip("image_mc", 1);
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._x = (Stage.width/2)-(target_mc._width/2);
target_mc._y = 0;
reflect(target_mc);
};
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("none.jpg", image_mc);
function reflect(target_mc:MovieClip):Void{
var myBitmapData:BitmapData = new BitmapData(target_mc._width, target_mc._height, false, 0x00CCCCCC);
var mc_1:MovieClip = this.createEmptyMovieClip("reflect_mc", 2);
mc_1.attachBitmap(myBitmapData, 3);
myBitmapData.draw(target_mc);
reflect_mc._yscale = -100;
reflect_mc._y= target_mc._y+target_mc._height*2+20;
reflect_mc._x = target_mc._x; }

Hit “Ctrl+Enter” or go to “Control”, “Test Movie” to test our Flash movie. You should see this:

Now there’s a flipped copy of our picture below. Here is what the code does:

var myBitmapData:BitmapData = new BitmapData(target_mc._width, target_mc._height, false, 0x00CCCCCC);

We create a new instance of the BitmapData class and pass it the image_mc size as parameters which determines the size of the bitmap.

var mc_1:MovieClip = this.createEmptyMovieClip("reflect_mc", 2);

We create an empty movieClip.

mc_1.attachBitmap(myBitmapData, 3);

We attach the bitmap to the empty movieclip.

myBitmapData.draw(target_mc);

We draw the image_mc to the bitmap.

reflect_mc._yscale = -100;
reflect_mc._y= target_mc._y+target_mc._height*2+20;
reflect_mc._x = target_mc._x;

Then we flip the newly created movieclip and position it below the image_mc.

Still two steps to go, we are almost there.

var Xtween:Tween = new Tween(square,"x",Back.easeIn,square.x,square.x+100,1,true);

We create an instance of the Tween class: var Xtween:Tween = new Tween();
We pass a reference to an object: var Xtween:Tween = new Tween(square,
We tell which property of the object we want to tween: var Xtween:Tween = new Tween(square,"x",
We pass an easing function: var Xtween:Tween = new Tween(square,"x",Back.easeIn,
We pass a starting value: var Xtween:Tween = new Tween(square,"x",Back.easeIn,square.x,
We pass an ending value: var Xtween:Tween = new Tween(square,"x",Back.easeIn,square.x,square.x+100,
We pass a duration: var Xtween:Tween = new Tween(square,"x",Back.easeIn,square.x,square.x+100,1,
And finaly we tell if the duration will be expressed in seconds or in frames: var Xtween:Tween = new Tween(square,"x",Back.easeIn,square.x,square.x+100,1,true);

So already one word about the two last parameters, duration and type (seconds/frames), no matter what you choose, the tween will still use frames as a basis for its calculations. You can check that out easily by setting a frame rate to 1 and then run a Tween using seconds … not pretty right? So the frame rate matters even if you use seconds.
The Tween takes all the parameters and calculates how many frames it will need to go from the initial value (here square.x) to the final value (square.x+100), it then call the easing function this exact number of frames. So if the tween needs 30 frames to reach the final value, it will call the easing function 30 times. The Tween will call the easing
function with 4 parameters: First: The initial time (starting at zero of course) , second: The initial value of the property being tweened (in our example square.x) , third: The final value needed (100) , fourth: The total duration of the tween. The Tween expects to receive a number from the easing function each time it calls it. Fairly simple, let’s create our own easing function to see this in action:

var Ytween:Tween = new Tween(square,"y",crazyTween,square.y,square.y+100,1,true);
function crazyTween(TimeOrigin:Number,InitialValue:Number,FinalValue:Number,FinalTime:Number):Number{
if(TimeOrigin/FinalTime<1){
return FinalValue+Math.random()*200;
}else{return InitialValue+FinalValue;}
}

That’s right, we can pass our own easing function as long as we return a number! Try this awesome easing function and see, the tween uses it! If you trace all this you’ll see that the only value changng from call to call is the first one, the initial time. On a 30 frames tween, the initial time will go from 0 to 30, 30 being the duration time. Now you see why the useless crazyTween function was still able to end up at the right place. Now if we want to apply a linear motion, all we need is to divide the amount needed (in our example 100) by the number of frames needed and add that to the initial value:
var Ytween:Tween = new Tween(square,"y",normalTween,square.y,square.y+100,1,true);
var increase:Number = 100/30;
function normalTween(TimeOrigin:Number,InitialValue:Number,FinalValue:Number,FinalTime:Number):Number{
increase += 100/30;
return InitialValue+increase;
}

A perfect linear tween if you have a framerate of 30, now how do we translate so that no matter the number of frames needed it will always end up right?

Remember, the only value changing in the call to the easing function is the initial time. It’s gonna start with zero and end up being exactly the duration time so if we divide it by the duration time we get a ratio that we can use to calculate the amount we need to add to the initial value:
TimeOrigin/FinalTime this is our ratio. So FinalValue*(TimeOrigin/FinalTime) will give us the right amount we need to add each time but of course we need to add it to the initial value so the final formula is: InitialValue+FinalValue*(TimeOrigin/FinalTime) let’s try:

var Ytween:Tween = new Tween(square,"y",normalTween,square.y,square.y+100,1,true);
function normalTween(TimeOrigin:Number,InitialValue:Number,FinalValue:Number,FinalTime:Number):Number{
return InitialValue+FinalValue*(TimeOrigin/FinalTime)
}

Of course we always think about moving objects with tweens but look at this:

var theNumber:Number = 0;
var Ytween:Tween = new Tween(this,"theNumber",normalTween,0,300,1,true);
function normalTween(TimeOrigin:Number,InitialValue:Number,FinalValue:Number,FinalTime:Number):Number{
trace(InitialValue+FinalValue*(TimeOrigin/FinalTime))
return InitialValue+FinalValue*(TimeOrigin/FinalTime)
}

That’s right, we are tweening a simple variable!

Now before we move deeper into easing functions I want to point out the default easing method that can be found in the tween class. This default easing method is a linear easing exactly like the one we created and the tween class will run it if no easing function is provided so :

var Ytween:Tween = new Tween(this,"theNumber",null,0,300,1,true);

Will force the tween class to run its internal easing method. Note that this internal easing method is equivalent to the None easing class with AS2 and the Linear easing class with AS3.

We use the GlobalTimer Class in all our projects. The GlobalTimer Class makes the creation of timers and the registration of functions/methods with the timer very easy. We’ll show you here some key features.

import GlobalTimer;
var my_timer:GlobalTimer = new GlobalTimer();
my_timer.register(my_function);
function my_function():void{
trace("hello");
}

As soon as you register a function with the GlobalTimer, the GlobalTimer starts (or not if you pass false as argument) with default values (10 milliseconds). You can of course pass other values at instantiation time or by accessing the timer regular properties (Timer class). Unregister the function and the timer stops:

my_timer.unregister(my_function);

You can register as many function as you want:

my_timer.register(my_function);
my_timer.register(my_function2);

This will cause the GlobalTimer to run the two functions. By default, passing the same function twice is prevented:

my_timer.register(my_function);
my_timer.register(my_function);//no results

Unregistering a function will not stop the timer if other functions are still registered. You can of course stop the timer anytime using normal Timer properties and methods (Timer class). There’s many other useful methods that you can discover on your own. Enjoy and leave us a comment.

Aswebcreations.com team.