June 27, 2008 at 3:21 pm · Filed under Portfolio, Tutorials
I was not satisfied with the previous release of the scrollbar. It was too difficult to adapt and use, and it left very little space for upgrading.
So i made a new scrollbar class, with advanced features, with the precious help of Jack Kalish. Please stop by his site at www.kalicious.com, he was very helpful for this new version of the Scrollbar Class. Thanks Kali!
By the way. These are some of the new features.
- It is now possible to use every movieclip on the stage as the components of the scrollbar. You are not forced anymore to give your object defined instance names. They can be whatever you want.
- The class is now instantiated using the New Scrollbar constructor, that takes several parameters, leaves you more freedom and gives you the possibility to choose if you want the dragged movieclip to be blurred on dragging and the velocity of the movement.
- The class now releases errors on init() if you did not declare the right components and tells you what components are missing.
- The ruler (handler) length is now proportional to the length of the object dragged, as well as mousewheel velocity.
You do not need to instantiate the class by rightclick -> linkage, anymore.
The right way to use the class is now:
import Scrollbar;
var sc:Scrollbar = new Scrollbar(text, maskmc, scrollbar.ruler, scrollbar.background, area, true, 6);
sc.addEventListener(Event.ADDED, scInit);
addChild(sc);
function scInit(e:Event):void {
sc.init();
}
This is the example i made. As suggested by Kalish, i used a Input text to change runtime the length of the text box (to check for the change in the length of the scrollbar ruler)
And here you can download the class zip package, with an example inside.
Enjoy! And as usual, any comment is welcome!
June 26, 2008 at 10:50 am · Filed under Portfolio
Hi all,
i release today a simple class that will make it easy to generate parallax systems. You won’t have to bother about managing the various levels, anymore.
The thing is just easy as saying “wow”.
Just declare a movieclip on your stage as an instance of ParallaxContainer (you will find the ParallaxContainer.as file in the zip), and then add to the render list the object you want to be moved as you move your mouse. It is a good practise to clean the render list every time you create it :)
Then you have to choose if you want the parallax to move horizontally, vertically or both.
However, as long as you have added every movieclip you need, use the start method and go!
This is the code used in the example. Very easy indeed as you can see.
this.clean();
this.addItem(l3, 10);
this.addItem(l2, 30);
this.addItem(l1, 100);
this.set_mode("H");
this.start();
Just a quick reference to the method addItem. The first paramter is the object to move, the second one is the “wing”. The wing is the quantity of pixels the object will move at the maximum limit of the stage (i.e. extreme left / extreme right)
This is the example.
And this, of course, is the zip package to download. Click here.
Have fun!
June 12, 2008 at 3:26 pm · Filed under Portfolio
I was in need of a subclass of MovieClip that could rewind and forward with a simple method call. That is the result. You can specify a callback function to call after the timeline playhead cease moving. It is very raw at the moment, i am still learning. Any suggestion or modification to the code is greatly appreciated.
package
{
import flash.display.MovieClip;
import flash.events.Event;
public class AdvancedMovieClip extends MovieClip {
var dir:String = null;
var _targetframe:Number;
var _callback:Function = new Function();
var _params:Object = null;
var _numberOfFrames:Number;
public function AdvancedMovieClip():void {
super();
_numberOfFrames = this.totalFrames;
}
public function block() {
removeEventListener(Event.ENTER_FRAME, enterframeHandler);
}
public function forward(targetframe:Number = 25, callback:Function = null, params:Object = null):void {
dir = "forward";
_callback = callback;
_params = params;
_targetframe = (targetframe == 25) ? this.totalFrames : targetframe;
addEventListener(Event.ENTER_FRAME, enterframeHandler);
}
public function backward(targetframe:Number = 1, callback:Function = null, params:Object = null):void {
dir = "backward";
_callback = callback;
_params = params;
_targetframe = (targetframe == 1) ? 1 : targetframe;
addEventListener(Event.ENTER_FRAME, enterframeHandler);
}
private function enterframeHandler(e:Event):void {
switch(dir) {
case "forward":
((this.currentFrame == this.totalFrames) || (this.currentFrame == _targetframe)) ? (stopMovement()) : this.nextFrame();
break;
case "backward":
((this.currentFrame == 1) || (this.currentFrame == _targetframe)) ? (stopMovement()) : this.prevFrame();
break;
}
}
private function stopMovement() {
removeEventListener(Event.ENTER_FRAME, enterframeHandler);
if (_callback != null) {
_callback(_params);
}
}
}
}
May 26, 2008 at 3:25 pm · Filed under Portfolio
Welcome back!
We are going on in programming a simple money money clone, here. It is very simple. If you lost the previous lesson, please read it in the previous posts. Anyway, shortly it is a game in which you control a character in the lower part of the screen with your mouse to catch objects falling from the ceiling (or to avoid objects, of course).
I left you with some main concept about the object dispatcher. Now we are going to make it in actionscript.
Up to now, we have in our library two objects exported via the linkage name of “coin” and “hammer”. We only have to attach them dynamically to the stage and let them fall.
We have to decide where to attach movies from the library. For this example, we are going to attach them to the root timeline, but in some cases it is useful to attach them to a container movieclip.
At the same moment we start playing this game, the objects must be started to fall down too. So we are going to add something similar to the code below to the main action layer.
nint = setInterval(crObject, 1000, this);
curr++;
score_txt.text = String(score
energy_txt.text = String(energy);
This lines will be useful to initialize the event dispatcher (1), increasing the number of the current object, and displaying initialized values for score and energy.
The setInterval function takes three parameters, the function to be called at the specified interval, the interval and one or more parameters to pass to the variable. So we are telling the actionscript compiler to call the crObject function each 1000 milliseconds (1 second), passing the address of the current timeline as a parameter (for reference).
Of course, we have to initialize some variables in the context of our game. We can add at the very beginning of the code, this code that initializes the variables needed in the game.
var curr:Number = 0;
var energy:Number = 100;
var score:Number = 0;
var nint:Number;
This code initializes the variables for object number (curr), energy and score and a variable (nint) that represents the interval at which calling the function to create objects.
Now we need the last function to make it all work. I will leave the architecture open, so you are going to use this code for games like this one. I prefer to comment in the code, hoping this will be more clear.
function crObject(root:MovieClip) {
// casual object, the number will be interpreted later
tipo = Math.round(Math.random()*1);
// increase the current object number,
// so objects will not replace themselves at any creation.
curr++;
// this will decide if coin or hammer from the tipo number.
tipo_mc = (tipo == 0) ? "coin" : "hammer";
// the object is now created, attached to the root timeline,
// and it get the name of objectN where N is curr and placed
// at level 1024 + curr.
objmc = root.attachMovie(tipo_mc, "object"+curr, 1024+curr);
// defines the starting position of objects.
objmc._x = Math.round(Math.random()*340)+30;
objmc._y = -20;
// defines falling rate of the object
objmc.fstep = 2;
// stores the type of the object in the object.
objmc.tipo = tipo;
// randomize the scale of the object
objmc._xscale = objmc._yscale=Math.round(Math.random()*50)+50;
// this code is executed during the fall of the object
objmc.onEnterFrame = function() {
// falling
this._y += this.fstep;
// increase falling rate
this.fstep += 0.2;
// increase rotation of the object
this._rotation += 5;
// when the object collides with the main char
if (this.hitTest(root.char) == true) {
// depending on tipo acts in a different way
switch (this.tipo) {
case 0 :
// if type is coin, increase the score
score += 10;
break;
case 1 :
// if type is hammer, lose energy.
// If energy falls under 0, go to GameOver frame.
energy -= 10;
if (energy <= 0) {
clearInterval(nint);
root.gotoAndStop("gameover");
}
break;
}
// updates score and energy
score_txt.text = String(score);
energy_txt.text = String(energy);
// remove this clip
this.removeMovieClip();
}
// if, instead, objects falls under
// the lower limit of the stage, simply remove it.
if (this._y>450) {
this.removeMovieClip();
}
};
}
The game is done. You should test it and try to understand each single piece of code. This is very simple, next time we are going to see how to develop a more complex game. This was just to put you in the right mood.
Now create a home for your game, a game over frame and you are ready to go online.
If something went wrong, please download the complete fla from here.
See you soon!
Next entries »
