Flanture

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

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

Here is another improvement of previously discussed random number generator with blur effect. Required posts for reading are:

Random Number Flash Generator and
Small Improvements

In order to have more slot-machine like behavior timer controlled slots are needed, which means slots (boxes) need to stop in different time intervals. There is actually nothing to stop here, but when blur effect vanishes, we simulate end of rotation.

Few things are changed. First, we don’t need onRelease function for roll_mc. I will use counting frames technique to simulate Timer, because it’s easier to code. onLoad function goes like this:

This function is straightforward. When timer is started within onPress function, counter adds 1 on every enterFrame. We remove blur effect on first slot after firstDigitStop frames (in this case 8), on second slot after 16th frames and on third slot after 24th frame. Experiment with different numbers if you will.

We have 3 function to remove blur effect: restoreBlur1, restoreBlur2, restoreBlur3, slightly changed onPress function and onEnterFrame frame. I will not write and explain entire code here, just download source file and explore a little bit for yourself. Feel free to ask if you have any questions, I’ll be happy to answer.

 

Main media type files can be used like images, videos or even SWFs in full or thumbnails view. Because XML is used, carousel can contain infinite number of items. You don’t have to worry about it, just your video or image and carousel makes it work. Since FLVPlayback component is used you can customize skins and player colors for any individual video. Text style is provided from external css file, which is much easier for customization.

Carousel comes in 3 versions: full source, compiled component and standalone page. Component parameters can be set via component panel but also (which is really great) via external XML file. Some of the parameters are 3D distortion, carousel offset and radius, thumb size, photos border parameters, reflection and shadow options.

Another great thing about 3D XML Carousel is that 3D engine behind carousel is original, so you don’t need any extra code package to learn or install.

Digital Photo Gallery v2.0 by nhstudio comes with many unlimited number of categories, each category will call a separate Gallery folder via a XML, so you can easily add new or remove older galleries with no trouble at all. It also have Flow Thumb Slider which brings you the maximum comfort for photos browsing. Slide show function is included with loop and delay features, controlled also via XML file. Another great feature is that photos description are in HTML format, so you can easily use all text styles or put your reference URL links on description text.

 

Digital Photo Gallery v2.0 is written in ActionScript2.0, resolution is 800×600 and source file opens with Flash8+. Published size is only 34kb.

You have already seen basic page flip effect on various occasions, but this one, created by robwes19 is more advanced and sofisticated page flip. This is version 4 which includes flv video playback and loading external swfs with ease, all pages already have an preloader. You can have as many pages as you like and all graphics are skinnable.

File is only 399kb, with resolution 900×700, written in ActionScript2.0. File is well documented, fullscreen preview available.

Also check authors rich portfolio with exclusive flash templates, page flip books, preloaders, MP3 and FLV players, slideshows and misc utilities.

In order to understand this short tutorial first read Character Elastic Movement and Adding mc speed using Numeric Stepper component posts. Next step is to create simple enemy and to animate that enemy.

We have new movie clip (green rectangle) that represents enemy in our game. Instance of enemy movie clip is on stage and that instance is named mc_enemy. First we want to create very basic enemy movement in single horizontal line. When enemy reaches stage end it changes direction. Before we define function for movement we want to give our new movie clip starting direction. Let’s make a deal : if direction has value 1, enemy goes left and if direction has value 2, enemy goes right.

Starting direction is determent by variable dir like this:

This will force our movie clip to start moving left when we define function onEnterFrame for movie clip mc_enemy. Function is simple, has 4 if conditional statement and they define simple enemy movement. We have modified coordinates where enemy movie clip changes direction for 15 pixels, which is half of movie clip’s width. In this way border bounce is better.

In previous example, our hero has constant speed set to 2. Speed is defined inside doTween function, as 6th parameter for xT and yT tweens. Off course, this speed doesn’t have to be constant at all. We will use Numeric Stepper component just to show how to change speed parameter. Instance of Numeric Stepper is “step”. We change mentioned parameter from “2″ to “step.value”.

download hero_v2 source file.

Flash game characters doesn’t have to move only in standard way, press left arrow key to move left, right arrow key to move right, space to jump etc. In this new flash game, main character (hero) will move differently. Hero will be dragable and on click, he will perform elastic move. Start position and destination position will be symmetrical in relation to Stage center. Enemy can be destroyed only if mouse is not pressed, otherwise, hero health will decrease.

import mx.transitions.Tween;
import mx.transitions.easing.*;

We need to define simple onPress, onReleaseOutside and onRelease methods for movie clip of our hero, mcHero. Method onRelease has two functions, findSimPoint() and doTween(). It is obvious that findSimPoint() calculates symmetrical point of hero x and y in relation to Stage center. DoTween(), well, performs the tween! Code comes with comments.

Download hero.fla