Hi,
i would like to create a flash file which will have thumbnails of various images (about a 100) what i would like to do is make on image at a time (tandom sequence) glow or have an increase in alpha and then come back to normal and then another thumbnail gets the same effect, etc...
i would like to know how to get this done the easiest... if any acion scripting is needed please post the code here and it wud be of great help.
thank you
OK well, alpha is a public property of most if not all display object types in flash, so you should easily be able to write a script to randomly select a thumbnail and then modify it's alpha value.
Animating filters is quite straightforward too.
Here's an example of alpha and filter animation in pure AS3 code. (Note: I'm winging this completely...writing the AS3 code as I go, so this is a bit rushed and improvised on the spot. But the finished example files will work and will be attached at the end)
So, what I'm going to do is set up a class to draw a simple randomly coloured box..funnily enough the class is going to be called SimpleBox.as.
Here's the code:
package
{
import flash.display.Sprite;
/**
* Draws a randomly coloured 20*20 box with the registration point in the centre
* @author Jason Trunks
* Feel free to do what you like with this code!
*/
public class SimpleBox extends Sprite
{
public function SimpleBox()
{
graphics.lineStyle(2, 0);
graphics.moveTo( -10, -10);
graphics.beginFill(Math.random() * 0xffffff);
graphics.lineTo(10, -10);
graphics.lineTo(10, 10);
graphics.lineTo( -10, 10);
graphics.lineTo( -10, -10);
graphics.endFill();
}
}
}Now I'll set up a class to create a movie which will display a 10*10 grid of 100 randomly coloured boxes (see SimpleBox.as) with alphas of 50% (0.5).
The clip will randomly select one of the boxes and will animate it to 100% alpha (1.0) and then back down to 50% alpha (0.5) before selecting another random box.
The selected box will also have a glow filter applied to it, we'll be animating the alpha value of that too!
Without further ado, here's the code for MessingWithFiltersAndAlpha.as:
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.GlowFilter;
/**
* Creates a bunch of boxes, randomly selects a box and simultaneously animates the selected boxes alpha and a glow filter.
* All boxes will have an initial alpha of 50%. Selected box will animate to 100% alpha and then back down to 50%, before another box is selected.
* The glow filter does the same, it initially starts at 50%, goes up to 100% and then back down to 50%.
* @author Jason Trunks
* Feel free to do what you like with this code!
*/
[SWF(backgroundColor="0xffffff", width="400", height="400", frameRate="30")]
public class MessingWithFiltersAndAlpha extends Sprite
{
// constant values
private const NUMBOXES:Number = 100;
private const ALPHA_INCREMENT:Number = 0.02;
private const XY_INCREMENT:Number = 30; // boxes are 20*20, so we'll allow 30px (20px for box + 10px space)
// private members
private var boxArray:Array;
private var targetBox:SimpleBox;
private var filter:GlowFilter;
/**
* Constructor
*/
public function MessingWithFiltersAndAlpha()
{
init();
}
/**
* Initialisation - Creates an array of 100 randomly coloured boxes in a 10*10 grid and starts the animation process
*/
private function init():void
{
// set initial x,y coords
var xOrg:Number = 20;
var xPos:Number = xOrg;
var yPos:Number = 20;
// create an array of boxes
boxArray = new Array();
for (var index:Number = 0; index < NUMBOXES; ++index)
{
// create a new box
var box:SimpleBox = new SimpleBox();
// set x,y pos and 50% alpha
box.x = xPos;
box.y = yPos;
box.alpha = 0.5;
// add box to display list
addChild(box);
// add box to array of boxes.
boxArray.push(box);
// if next index is divisible by 10
if ( (index + 1) % 10 == 0)
{
// reset xPos and increment xPos
xPos = xOrg;
yPos += XY_INCREMENT;
}
else // increment xPos
xPos += XY_INCREMENT;
}
// initialise the glow filter we'll be using in this example
filter = new GlowFilter(0xffcc00, 0.5, 20, 20, 3);
// start the animation
initialiseAnimation();
}
/**
* This is the first stage of the Animation.
* Selects a random box to target, creates a new glow filter and then moves onto the next stage.
*/
private function initialiseAnimation():void
{
// set up our target box
var idx:Number = Math.floor(Math.random() * (NUMBOXES - 1));
targetBox = boxArray[idx];
// assign the glow filter to the selected box
targetBox.filters = [filter];
// now add the event listener for the next stage
addEventListener(Event.ENTER_FRAME, onIncreaseAlpha);
}
/**
* Second stage of the animation, increase the alpha of the target box until it is around 1.0
* When it reaches 1.0, move onto the next stage...
* @param e
*/
private function onIncreaseAlpha(e:Event):void
{
// increase alpha
targetBox.alpha += ALPHA_INCREMENT;
filter.alpha += ALPHA_INCREMENT;
targetBox.filters = [filter];
// has alpha reached 1.0 yet?
if (targetBox.alpha >= 1.0)
{
// remove this event listener
removeEventListener(Event.ENTER_FRAME, onIncreaseAlpha);
// set both alpha values to 1
targetBox.alpha = 1.0;
filter.alpha = 1.0;
// move onto the next stage
addEventListener(Event.ENTER_FRAME, onDecreaseAlpha);
}
}
/**
* Third stage of the animation, decrease the alpha of the target box until it is back to 0.5.
* When it reaches 0.5, remove the filter and then go back to the first part and select another box.
* @param e
*/
private function onDecreaseAlpha(e:Event):void
{
// decrease alpha
targetBox.alpha -= ALPHA_INCREMENT;
filter.alpha -= ALPHA_INCREMENT;
targetBox.filters = [filter];
// has alpha reached 0.5 yet?
if (targetBox.alpha <= 0.5)
{
// remove this event listener
removeEventListener(Event.ENTER_FRAME, onDecreaseAlpha);
// set both alphas to 0.5 and remove the filter from the current target.
targetBox.alpha = 0.5;
filter.alpha = 0.5;
targetBox.filters = [];
// Go back to the start and pick another target.
initialiseAnimation();
}
}
}
}To see this in effect, take a look at the attached .swf.
Note: This animation is very linear; A box is selected, the alpha and filter are animated linearly (i.e. the alpha values increase and decrease uniformly/by the same amount each frame) and as soon as one box has finished animating another is selected and animated ad nauseum. But it should give you an idea of how to achieve what you're after.
To improve on the code I've posted, you could use some kind of time based easing algorithm to control the amount that the alpha values change by on each frame.
Also the code could be modified to use a timer at the end of the animation to give a random pause between one box animation ending and the next starting.
But those are all things for you to look into. The basics of what you need are here!
Full source and a pre-compiled .swf is attached to this post, see FiltersAndAlpha.zip.
This example was written and built using FlashDevelop. So the .zip only contains the two .as files and the .swf.
Note: Before you ask, there is no .fla file because no .fla was needed to create this! But the AS3 source code should be usable in the flash IDE (CS3/CS4/Flexbuilder).
Cheers for now,
Jas.
That exhibits a curious optical illusion of gray circles when you look at the squares
That exhibits a curious optical illusion of gray circles when you look at the squares
Hey, I'd not noticed that before...But now that you mention it, woah, that really does your eyes in doesn't it?!
That was definitely an unintended side-effect. How did I not notice that before?
Suppose I'd better add a disclaimer..
"I accept no responsibility for any damage that may occur to your eyesight as a direct result of looking at this .swf!"
Or perhaps
"Abandon all eyesight, ye who look at this!"
Heh heh!
Making the borders the same colour as the bodies of the boxes might make the effect a little less noticeable (but it probably won't eliminate it entirely!).
i.e. Changing the SimpleBox.as constructor code to:
public function SimpleBox()
{
var col:Number = Math.random() * 0xffffff;
graphics.lineStyle(0,col);
graphics.moveTo( -10, -10);
graphics.beginFill(col);
graphics.lineTo(10, -10);
graphics.lineTo(10, 10);
graphics.lineTo( -10, 10);
graphics.lineTo( -10, -10);
graphics.endFill();
}hmm..Lets see..
Gah, as predicted; the effect is still there, but it's not as bad as when the boxes had the black border around them! heh heh!
Altering line 14 of MessingWithFiltersAndAlpha.as to make the background black helps to lessen the effect too:
[SWF(backgroundColor="0x000000", width="400", height="400", frameRate="30")]J.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.