Flanture

First of all make sure you read previous posts about this Flash game tutorial:

1) Introducing Willy The Whale
2) Advanced Movement
3) Shooting the whale

Ok, this time just a small update. First I have new graphics for boat movie clip which I still don’t like and spear movie clip which I think is fine. Actually, my plan was to finish code first and in the end to add graphics, even maybe alternative versions or something similar, but I did some other vector work recently and this just has imposed.

Two new text fields included, static text field ‘hits’ and dynamic text field with instance name ‘hits_txt’. Code addition include just few lines, first variable to keep track of the score:

wv.hits = 0;
hits_txt.variable = wv.hits;

Later inside spear hit test with Willy code added this:

wv.hits += 1;
sp.status = false;
this._x = fishermen_mc._x - 30;
this._y = fishermen_mc._y + 10;
hits_txt.text = wv.hits;

This great new Flash menu is highly flexible and can be aligned to all sides, left, right, top or bottom.

You can have virtually unlimited number of items. All items are controlled via XML file. Single item dimensions, width and height can be changed. While images are great, items can also hold other SWFs. Every item has automatic scrolling with additional info panel.

File requires Flash 8+ version. ActionScript version is AS2. Published size is only 14 Kb. Author is Rehmatullah.

Click image to see it in action.

related posts:

_ Flash Aligned Menu V1
_ Flash Tweet Map Mashup
_ New XML Driven Flash Product Presentation
_ Advanced Flash XML Video Player
_ Flash Vector Globe Animation
_ Flashtory - Flash Photo Gallery
_ Flash Google Search - the real thing!

Let’s continue with Willy The Whale Flash game tutorial. If you don’t have a clue what I’m bubbling about, please read previous posts:

1) Introducing Willy The Whale
2) Advanced Movement

Right now I don’t like how spear is attached to the boat and it isn’t very useful. It needs to shoot the poor Willy. I will create new object, just like we did it for Willy with wv object.

var sp:Object = new Object();sp.status = false;sp.precision = 20;sp.speed = 7;

// spear status false means spear is attached to boat// spear status true means spear is moving toward the whale// precision is for making decision when to fire// speed is spear speed

Now, take a look at ‘precision’ with starting value 20. This will be difference between willy y coordinate and spear y coordinate, meaning if willy is ‘close enough’, go for the kill. Precision variable can be changed in different levels, but also speed variable too.

Here is new code for onEnterFrame function of spear movie clip.

// spear actions

spear_mc.onEnterFrame = function() {

        // check if spear is ready to fire  if((Math.abs(this._x-willy._x) < sp.precision)&&(willy._alpha > 20)) {                sp.status = true;   }

    if(sp.status == false) {            this._x = fishermen_mc._x - 30;             this._y = fishermen_mc._y - 10;     }else{              this._y += sp.speed;

            // if spear is out of stage, attach another one to boat             if(this._y > Stage.height) {                     sp.status = false;          }

            // if there is collision with Willy, play kill animation

    }}

Treadmill is the name of this new Flash stock file, XML driven product presentation and number of features it offers is really amazing.

Prefect for products presentation, Treadmill allows you to load any of jpg, png, gif or swf files. You can have unlimited number of items displayed, but this is not proven yet, nobody used it with that much items However, setup is easy via XML file and each item has it own url and target. You can even use CSS formating.

You can make numerous changes via XML like scroller colors and dimensions, animation controls, border color and dimensions, margin between items and others.

Author is from Germany, Realtimefreak. This published file is only 22 Kb, opens with Flash CS3+, code is written in ActionScript 2.0.

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.

 

With some basic ActionScript knowledge most stock Flash files are easy to adopt, modify and if required add new features. It’s always better to start from half-finished file than from scratch. Well documented stock Flash files are welcomed. If documentation is OK, methods and functions are simple to understand and extend.

When in need of creating web based casino Flash game, stock files are the right choice to go. Take a look at satya4satyanm’s ‘casino poker lotto game’, with min published size of 60kb, written in as2.0 (Flash 8+). Random spinning code is already there, no chance of hacking. Upgrade and expand the wheel if needed. Take it for a test ride. Good work there.

This is part II of Flash game tutorial ‘Willy The Whale’. Previous articles:

1) Introducing Willy The Whale

In order to make things a little more complicated I need some bad fishermen with whale soup on their mind. For now, I don’t have to illustrate some advanced design, I just need movie clip holders, which means any kind of graphics.

Fisherman’s boat consist out of two parts, rectangle movie clip and separate movie for deadly spear. At any time I want my spear to be static to the boat, so next code is used to do just that:

// spear actions

spear_mc.onEnterFrame = function() {    this._x = fishermen_mc._x - 30;     this._y = fishermen_mc._y - 10;}

// fishermen actions

fishermen_mc.onEnterFrame = function() {    if(this._x < (Stage.width + this._width /2)) {           this._x += 3;       }else{              this._x = -135;     }}

Advanced Movement

One way to control variables is to make single Object to hold different values. Our object is called wv, but can name it what ever you like, just make sure to change every appearance through entire code. Now let’s make our object:

var wv:Object = new Object();wv.speed = 0.5;wv.vx = 0;wv.vy = 0;wv.friction = 0.95;wv.maxspeed = 3;

Remember that all code is placed inside first and only main Timeline frame.

Ok, so let’s explain our object. All those values are initial values, speed initial value is 0.5, friction 0.95 and x and y components are set to 0. Maxspeed value will allow our whale not to go crazy with unlimited speed, but to keep it under value 3.

Last thing is to change our code from previous article and make it work with our newly created object. We will also include alpha changes (will become important later) and we will allow Willy to have 2 sides, one when moving to the left and one when moving to the right. Here is the code:

// whale movement

willy.onEnterFrame = function() {

    if (Key.isDown(Key.LEFT)) {         wv.vx -= wv.speed;          willy.gotoAndStop(1);       }   else if (Key.isDown(Key.RIGHT)) {           wv.vx += wv.speed;          willy.gotoAndStop(2);       }   else                wv.vx *= wv.friction;

  if (Key.isDown(Key.UP))             wv.vy -= wv.speed;  else if (Key.isDown(Key.DOWN))              wv.vy += wv.speed;  else                wv.vy *= wv.friction;

  //update whale position     if (willy._x > Stage.width)              willy._x = Stage.width;

    if (willy._x < 0)                willy._x = 0;

    if (willy._y > Stage.height)             willy._y = Stage.height;

        if (willy._y < 150)              willy._y = 150;

    willy._x += wv.vx;  willy._y += wv.vy;

     //limit speed       if (wv.vx > wv.maxspeed)         wv.vx = wv.maxspeed;        else if (wv.vx < -wv.maxspeed)           wv.vx = -wv.maxspeed;

  if (wv.vy > wv.maxspeed)         wv.vy = wv.maxspeed;        else if (wv.vy < -wv.maxspeed)           wv.vy = -wv.maxspeed;

   willy._x += wv.vx;  willy._y += wv.vy;  willy._alpha = (350 - willy._y) / 2;}

Special thanks for inspiration goes to ASGamer

Although I like to post here about Flash games, among other things, I came to realization that still none playable Flash game has come out as posting result, so I decided to change this odd situation. Process of doing this SHOULD be : 1) create game 2) write tutorial about it, but I want to do it in another way. I want to make a game while writing about it.

Since I don’t have a plan what this game will be all about, first thing I did is create my main character or game hero if you like. Introducing Willy The Whale. It is just a simple movie clip named willy and placed on Stage. Because every whale needs an ocean or at least a sea, I created one and temporary used style stroke as ocean surface.

It came to my mind how it will be OK to use gradient color to express ocean depth. And just about after this step, game scenario struck me. Willy The Whale is almost extinct and it will have to escape from those terror fishermen to survive. Willy can hide in ocean depth but he also must breath, so he can’t hide forever.

This is how movement and transparency is coded:

onEnterFrame = function() {        if(Key.isDown(Key.RIGHT)){          willy._x+=7;        }   if(Key.isDown(Key.LEFT)){           willy._x-=7;        }   if(Key.isDown(Key.DOWN)){           willy._y+=4;        }   if(Key.isDown(Key.UP)){             if(willy._y > 220){                      willy._y-=4;                }else{                      willy._y=220;               }   }   willy._alpha = 320-willy._y;}

- to be continued -

New Flash file with multiple usage, fresh and easy to manage. Interactive Flash Boy is great for products or services presentations, in educational projects, especially for teenagers, good for online quiz or different sorts of tests. It can also become part of flash games projects.

 

Flash boy animation has six different moods: very sad, crying, happy, etc. It is written in AS2.0 by greentea. File is resizable and very small, only 52 Kb.

related posts:
 _ flash vector globe animation
 _ flash google search - real thing!
 _ amazing welove 3D flash carousel
 _ flash XML flower menu
 _ animated flash calendar
 _ flash background packs and tutorials
 _ real fire flash effect
 _ flash interactive globe and world map
 _ 3D XML flash carousel

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;   }

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