Friday, September 3, 2010

5 Cool Semi-Realistic Effects in Flash

Flash has definitely come a long way since its initial release in 1996. From simple tweening and drawing effects, Flash now gives designers the capability to create much, much more. Here's a short list of some articles / tutorials / sample files that demonstrate a couple of interesting semi-realistic effects created in Flash.

1. Coffee Steam Effect
This tutorial teaches you how to create a coffee steam effect using curvy lines and tweens. I have to say, this tutorial is quite long and very tedious to follow. But the author does provide a download link to the source file with the finished effect at the end of the tutorial.
[http://www.flashvault.net/tutorial.asp?ID=201]

2. Underwater Effect
This underwater effect has a very nice and subtle feel to it. It makes use of a combination of masks, gradients, AS3 and the perlinNoise() method. The effect was placed over an illustration, but you can try modifying the technique to make it suitable for a photo-realistic underwater image as well.
[http://www.andrewnprice.com/content/how-create-semi-realistic-underwater-enviroment-flash-using-perlin-noise-as3]

3. Water Ripple Effect
This is another water type effect that produces a nice, subtle water surface ripple. However, it's written in AS2. But nonetheless, it's one of the nicest effects of this type that I've seen. It uses the perlinNoise() method as well. No step-by-step guide on this one, but the source files are available for download.
[http://www.freeactionscript.com/2009/03/realistic-water-wave-effect/]


4. Lightning Effect
For this one, the author uses AS3 to create these really cool lightning / thunderbolt / electric discharge effects. The code is a little complex, and the author doesn't really explain it much, but still, the effects are pretty awesome.
[http://blog.oaxoa.com/2009/07/27/actionscript-3-as3-lightning-thunderbolt-electric-discharge-class/]

5. Waterfall Effect
This one uses a particle system to create a stunning waterfall effect. The author created a custom AS3 Waterfall class, which allows you to change the appearance and style of the waterfall by changing a few parameters. You can even set the waterfall's background to transparent and then place it over an image. This effect is quite beautiful.
[http://www.flashandmath.com/flashcs4/waterfall/index.html]

Thursday, September 2, 2010

Retreiving the Index Value of an Item in an Array in Flash AS3

In AS3, you can retrieve the index value of an item in an array by using the indexOf() method of the Array class. Let's take a look at an example:
var aPets:Array = new Array("dog", "cat" , "hamster", "turtle");
This creates an array named aPets, which is populated with 4 values: "dog", "cat" , "hamster", "turtle". Just by looking at the order in which the values were passed to the array constructor, we know that "dog" has an index of 0, "cat" has an index of 1, and so on... If we wish to retrieve an item's index value within our code, then we can use the indexOf() method of the Array class. For example:
trace(aPets.indexOf("hamster"));
To use the indexOf() method, you pass to it the array item whose index value you would like to retrieve. Flash will then go inside the array and look for that item and retrieve its index value. In the example above, "hamster" is the 3rd item in the array, so the trace statement will output a value of 2.

If an item is not found in the array, a value of -1 is returned. For example:
trace(aPets.indexOf("skunk"));
We did not put a "skunk" item inside the array so Flash won't be able to find said item. Therefore, a value of -1 will be returned.

But what if we had two identical items in the array. Let's say our aPets array had 2 "cat" items instead:
var aPets:Array = new Array("dog", "cat" , "hamster", "turtle", "cat");
Looking at the order in which the values were passed, we see that the first "cat" has an index of 1, and the next "cat" has an index of 4. If we use aPets.indexOf("cats") , Flash will return a value of 1, because that is the index value of the first "cat" that it will find in the array. What happens is that Flash will start looking from the index of 0, and then once it finds the item, it returns the index value and stops looking, regardless of whether or not there might be another identical item within the array.

So what if we wanted to skip the first "cat" and try to retrieve the index value of the other one that has a higher index?
Well, then we can tell Flash to start counting at a higher index value than that of the first "cat" (instead of starting at 0, which is the default). To do that, we simply pass a second parameter to the indexOf() method. That second parameter is called the fromIndex parameter of the indexOf() method. It tells Flash at which index number it should begin searching for the specified item. For example:
trace(aPets.indexOf("cat", 2));
Here, we've passed a value of 2 to the fromIndex parameter. This means that when Flash begins searching through the array, it will start from the index of 2, skipping the items with a lower index value. And since the first "cat" has an index value that is lower than 2, then it won't be included in the search. The "cat" that will be found, then, will be the other one that has the index value of 4.