Tuesday, April 7, 2009

OOS Flash Games

How many of you can say ‘I was here from the beginning’ ? This Sweden based programmer (couldn’t find his name) started with Flash version 2! so his website is small Flash museum if you like.

Check OutsideOfSociety for number examples and tutorials.

 
Posted by flanture at 11:43:26 | Permalink | No Comments »

Thursday, February 19, 2009

Windmill rotation example

note: this post is sequel to previous ‘about rotation’ post.

To use rotation in real world examples I have to combine it with other functions. Simple example would be windmill Flash animation. I have two movie clips, pillar which is static and windmill hands. Second one must be precisely centered in the middle of the central circle, so rotation can be perfect.

Hands movie clip instance is named mc_hands. First, we will set some variables:

var fcounter:Number = 0;
var wind_speed:Number = 0;

Next, we will create onEnterFrame function to perform hands rotation as function of wind_speed.

wind_speed = change_wind_speed(wind_speed);      if ((wind_speed < 40)&&(wind_speed > -40)) {          mc_hands._rotation += wind_speed;   }else {             wind_speed = 0;             mc_hands._rotation += wind_speed;   }
We use if else conditional loop to limit wind_speed to some reasonable amount, between -40 and 40. Beyond this limits wind will be too strong for windmill to operate without risk. Next, we have to deal with change_wind_speed function.
function change_wind_speed(a:Number):Number {     fcounter += 1;

    // wind direction change    if ((fcounter % 100) == 0) {                // every 100 frames wind changes its direction and speed            bd = Math.random()*50-25;           da = Math.random()*5-2.5;           a = a + bd + da;            return a;   }else{              // small, per frame change   da = Math.random()*5-2.5;   a = a + da;                return a;   }}
We have created situation where every frame wind changes its speed in very small amount, variable da. Change is between -2.5 and 2.5. That’s not all. To make things more random and interesting, we have another bigger change on every 100th frame. That’s why we use fcounter variable to count frames and bd variable (big difference) to change wind speed amount between -25 and 25.

Windmill is ready to generate some clean energy.

 download windmill

Posted by flanture at 14:13:32 | Permalink | No Comments »

Saturday, February 14, 2009

About rotation (beginners)

Actually this one is about _rotation, since AS2 is main subject. In AS3 underscore is gone. Some functions I’ll be using here are also deprecated in AS3 since they are included in built-in classes. Easiest way to use _rotation is to name your mc instance, say box1 and create this function:
onEnterFrame = function(){  box1._rotation += 10;}
On every new frame box1 will rotate 10 degrees clockwise. All values from 0 to 180 will rotate clockwise direction and negative values from 0 to -180 will rotate counterclockwise. Values out of range will also work like they are normalized to given interval. Sure, this is boring. To give it some more action, try to make rotation as function of mouse position. Use next code:
var speed:Number;

onEnterFrame = function(){  speed = _xmouse - box1._x;  box1._rotation += speed / 10;}
Variable speed is distance from mouse x position and our box1 movie clip. If mouse has grater x than box movie clip, speed variable is positive value and if mouse has smaller x value than box movie clip, speed value is negative and rotation is counterclockwise. If only one direction is needed we use Math.abs method to find distance and since it produce only non-negative values, rotation is always in clockwise direction.
var speed:Number;

onEnterFrame = function(){  speed = Math.abs(_xmouse - box1._x);  box1._rotation += speed / 10;}
We divide speed with 10 to get reasonable values for rotation. If we skip this step speed can be up to half of Stage width, 200 or more and box will rotate too fast.

download example

- to be continued -

Posted by flanture at 16:26:54 | Permalink | No Comments »

Monday, February 2, 2009

Flashtory Flash Photo Gallery

Cleverly named Flashtory (Flash factory), just like Flanture, represents one excellent Flash stock files author, with more than 20 awesome files over at MultiMedia Files directory. He offers vertical and horizontal Flash resizable galleries, scrolling news reader, vertical motion scroller and many other really good files.

One of the latest creations is flash netish resizable gallery album, two level Flash image gallery with HTML formatted description photos and unlimited number of entries via XML external file. Gallery interface is clean with smooth tweens, perfect for CD and web presentations. Here are some screenshots of gallery:

flash image gallery navigation bar

gallery look and feel

single image view with cool tween included

Posted by flanture at 20:12:13 | Permalink | No Comments »

Saturday, January 17, 2009

Sequel brings small improvements

micro menu - xml flash menu

This is sequel to last post random number generator with blur effect flash tutorial. I have single generator which displays new single digit number every time roll rectangle is released. When rectangle is pressed blur effect is visible. Off course, I can have as many of those number boxes as I like, so I changed its appearance a little bit in order to have 3 of them within 550 pixels stage.

Only copy paste is required with instances names change: num1_txt, num2_txt and num3_txt. Code is almost the same except for new text instances. I have added:

num1_txt.filters = new Array(filter);
num2_txt.filters = new Array(filter);
num3_txt.filters = new Array(filter);

inside onRelease function for roll_mc and inside onPress function for same roll_mc movie clip:

num2_txt.filters = filterArray;
var newNumber2:Number = Math.floor(Math.random()*10);
num2_txt.text = newNumber2;
num3_txt.filters = filterArray;
var newNumber3:Number = Math.floor(Math.random()*10);
num3_txt.text = newNumber3;

 

This is more like a slot machine than a previous file. Graphics can be improved. Code can be modified so blur effect lasts certain time, no until mouse is released. This will give more realistic effect, but realism wasn’t my intention when I started this one.

Posted by flanture at 19:52:21 | Permalink | No Comments »

Monday, December 15, 2008

Background Packs and Tutorials

This is another post on Flash backgrounds after cool carbon backgrounds and quick examples. Tutorial on how to create custom Flash tiled backgrounds are published in two parts. Read them here:

After you learn how to create them, I’m sure very soon you’ll become proud owner of some great backgrounds pack and if you do, drop a comment about it. Tiled Flash backgrounds are useful in many occasions, as apps backgrounds, design elements or part of game interface graphics. Take a look at this wood backgrounds pack with 20 awesome ready to use tiles.

Posted by flanture at 19:36:50 | Permalink | No Comments »

Friday, December 5, 2008

Quick Background Examples

Let’s continue with Flash backgrounds. I have two different solutions and I’ll write tutorials on them both. First solution is to use ActionScript movie clips drawing methods like moveTo, lineTo, beginFill and endFill to create single tile pattern and then to multiply this pattern as function of Stage dimensions. This solution requires some processing speed when pattern is very small (8×8 pixels) and Stage (or movie clip) is bigger.

Second solution is to draw pattern movie clip using Flash drawing tools and to use duplicate movie clip method. Single function is required for this one and only 15 lines of code. Here are some quick examples using this solution.

 

Detailed tutorials are on their way, along with free backgrounds pack.

Posted by flanture at 12:57:48 | Permalink | No Comments »

Wednesday, December 3, 2008

Cool Flash Carbon Backgrounds

How many times have you seen some cool Flash creation and wondered if you can make something similar? This was exactly my thought when I’ve seen Fiber Carbon Backgrounds file. This is great not only as apps and presentations background, but also can easily be used with various Flash games.

Notice how cool is dim blurry center align light. Every tile is under 1kb. This already gives me an idea how it can be done. Author have used here very small PNG’s under 1kb and tiled them using ActionScript, but I think it can be done without any images.

 flash fiber carbon backgrounds

In games, these type of backgrounds can be used as level backgrounds in platform games. Also, in starting splash screens or inter-level info screens. Another use author mentioned in his comments is website background, which is also cool.

Posted by flanture at 13:00:26 | Permalink | No Comments »

Thursday, November 27, 2008

Flash Christmas E-cards

It’s the right time for Christmas shopping and gifts. Here are some selected Flash e-cards and animations:

 

and more:

and many more…

Posted by flanture at 19:13:58 | Permalink | No Comments »

Thursday, November 13, 2008

Clouds Mask Flash Banner Rotator


Unusual banner rotators, unique for Flash Platform can enhance visual appeal of website or online presentation. Next Flash Banner Rotator is really original and easy to customize. Transition between images is done via interesting clouds mask which is accomplished using ‘perlinNoise’ and threshold method.

You can see on the image below how this fancy transition happens. On top left side is one image and rest of it is next one in array. Transition takes form of a cloud. Click to see it in animation mode.

Banner rotator is written in actionscript3.0 and it is completely XML driven. Everything is ready for customization: buttons, hover and text colors, button number, shape and position as well as delay time.

Posted by flanture at 14:42:05 | Permalink | No Comments »