The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area. This book explains the process of working with PHP in Flash, while creating real world examples that you can actually learn something from.
The Flash and PHP Bible has a dedicated forum for support and comments.
Create an image rollover using ActionScript 3. This effect is popular in galleries to demonstrate before/after views.
A common technique used in photo galleries is to allow a before and after preview of an image. This is achieved by preloading both images and when the user rolls over the affter, the before is displayed.
In this tutorial you will learn how to create this effect very simply using ActionScript, but the overall concept can be adapted to previous versions.
Start off by creating a new Flash file (FLA) and saving that. Then find two images to load, which in this case will be named "before.jpg" and "after.jpg" for simplicity.
Once the new file is created and the images are ready to be loaded, open the Actions panel and begin creating the code for this effect.
Create an array which will hold the image references, this is done so you can expand the example, but if you prefer you can skip the array and enter the image paths directly within the URLRequest.
var images:Array = ["before.jpg", "after.jpg"]
The next step is to create the image loaders for each image. These will simply be Loader instances
// image 1 var image1:Loader = new Loader(); image1.load(new URLRequest(images[0])); addChild(image1); // image 2 var image2:Loader = new Loader(); image2.load(new URLRequest(images[1])); image2.alpha = 0; addChild(image2);
As you can see, those blocks of code are very similar and could be converted into a function which would be easier to duplicate. Feel free to do that, but its certainly not required.
The next step is to attach the Event handlers for the mouse movements on the stage. In this case, you will assign a roll over and roll out event.
stage.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); stage.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
The final bit of code is the creation of the event handlers. These functions are responsible for changing the alpha property on each of the image boxes, depending on whether the mouse is rolling over or off the image.
function mouseOverHandler(e:MouseEvent):void
{
image1.alpha = 0;
image2.alpha = 1.0;
}
function mouseOutHandler(e:MouseEvent):void
{
image2.alpha = 0;
image1.alpha = 1.0;
}
The last step is to save and test the file. You should see the image load in, and when you mouse over, the other image should appear. Mouse off and the original should re-appear. This example was basic, but should explain the overall concept. A good way to expand this would be to using the Tween class and create a subtle fade, rather than a sharp alpha change.
I hope you enjoyed this tutorial, here is the completed code for easy copying/pasting. Enjoy!
var images:Array = ["before.jpg", "after.jpg"]
// image 1
var image1:Loader = new Loader();
image1.load(new URLRequest(images[0]));
addChild(image1);
// image 2
var image2:Loader = new Loader();
image2.load(new URLRequest(images[1]));
image2.alpha = 0;
addChild(image2);
stage.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
stage.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
function mouseOverHandler(e:MouseEvent):void
{
image1.alpha = 0;
image2.alpha = 1.0;
}
function mouseOutHandler(e:MouseEvent):void
{
image2.alpha = 0;
image1.alpha = 1.0;
}
|
michael Mon May 19, 2008 5:34 am
plz give source file
|
|
Omar Tue May 20, 2008 12:20 pm
Thanks for tutorial :)
i learned something new :) i am still learning ActionScript 3 i hope we can see another tutorial :) |
|
mkeefe Wed May 28, 2008 9:13 pm
@michael - I will be uploading the source once I get a second.
@Omar - I will certainly be posting more tutorials :) |
©2004 - 2008 scriptplayground | Privacy Policy | Legal
Validate Site: XHTML CSS | Designed by: mkeefeDESIGN |