22 June 2009

Flash gravity example (black hole simulation)

Have you ever wondered how it looks like when black hole or some other massive gravity object bends space-time fabric? Me too. I don't know why, maybe I watch Discovery too much.

Anyway, here is small Flash example (experiment) which allows you to see gravity in action. You can do 2 things here, move gravity object around the Stage (grey circle) and turn gravity on /off.

Here is actionscript code for single line. Just add more lines and that's it.


onLoad = function() {
var gravity = false;
g_txt.text = "gravity: OFF";
}
onEnterFrame = function() {
createEmptyMovieClip("line0", 0);
line0.lineStyle(0, 0xFFFFFF);
line0.moveTo(100, 50);

if(gravity) {
line0.curveTo(point1._x, point1._y, 500, 50);
g_txt.text = "gravity: ON";
} else {
line0.curveTo(100, 50, 500, 50);
g_txt.text = "gravity: OFF";
}
}
switch_mc.onRelease = function() {
if(gravity) {
gravity = false;
} else {
gravity = true;
}
}


movie example






*_*

16 June 2009

Create Flash Banner Using FuseKit Simple Tutorial

Animating multiple objects in AS2.0 projects can be real pain. To make things ease, many open source libraries exists out there. One of them (and probably most popular one) is The Fuse Kit.

In order to finish this Flash banner tutorial, you need to download FuseKit code and add new classpath if you use Flash Authoring Tool. From main menu choose Edit _ Preferences _ ActionScript _ ActionScript2.0 setting. Than click + sign and enter path to FuseKit code. When done, you are ready to make your banner.

step 1

Create new document with dimensions 468 px width and 60 px height, which is full banner dimensions. I have background color set to #333333 and 18 fps.

step 2

You will create 3 new movie clips: problem_mc, solution_mc and company_mc. Graphic isn't that important, you can draw what ever you want, but just as reference here are dimensions for my graphics (shown below): problem_mc (75px width and 25px height), solution_mc (200px width and 18px height) and company_mc (383px width and 26px height). Place instances of movie clips like on image below and name them: 'problem1' lower left, 'problem2' lower middle, 'problem3' lower right, 'problem4' upper left and upper right instance should be named 'problem5'. Another two instances are 'solution' and 'company'.


fuse flash banner tutorial preview

step 3

Open Actions panel for Frame 1 and enter single line of code:
#include "banner_code.as"
Save your document.

step 4

When done, create new ActionScript file 'banner_code.as' and enter next code:


import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup( Shortcuts, PennerEasing, Fuse );

var f:Fuse = Fuse.open();
f.label = "animation";

Fuse.openGroup();
problem1.tween("_y, _rotation", [45, "-360"], 0.5, "easeInExpo");
problem2.tween("_y, _rotation", [45, "-360"], 0.75, "easeInExpo");
problem3.tween("_y, _rotation", [45, "-360"], 1, "easeInExpo");
problem4.tween("_y, _rotation", [17, "360"], 1.5, "easeInExpo");
problem5.tween("_y, _rotation", [17, "360"], 2, "easeInExpo");
Fuse.closeGroup();

Fuse.addCommand("delay", 2);

Fuse.openGroup();
solution.tween("_x", 345, 1.5, "easeOutBack");
solution.tween("_y", 25, 1.5, "easeOutBack");
Fuse.closeGroup();

Fuse.addCommand("delay", 2);

Fuse.openGroup();
company.tween("_x", 234, 0.75, "easeOutQuint");
company.tween("_y", 25, 0.75, "easeOutQuint");
problem1.tween("_y", 100, 0.5, "easeInExpo");
problem2.tween("_y", 100, 0.5, "easeInExpo");
problem3.tween("_y", 100, 0.5, "easeInExpo");
problem4.tween("_y", 100, 0.5, "easeInExpo");
problem5.tween("_y", 100, 0.5, "easeInExpo");
solution.tween("_x", 700, 0.5, "easeInExpo");
Fuse.closeGroup();

Fuse.close();

f.start();

Test your movie.

Here is what code does. First two lines we set FuseKit to be available. Fuse open and close lines are start and end code for fuse sequence. Labeling the fuse isn't necessary here. We have 3 groups of tweens and small delays between them. First group is for problem_mc instances. We change their y position and rotation in different time intervals and in that way instances are 'falling' one after another. Second group changes solution_mc position and finally third group moves all instances so in the end we have only company_mc on Stage.

This is very simple tutorial on how to create flash banner using FuseKit in only 4 easy steps. To further improve this technique, take a look at FuseKit documentation to see what is available.



*_*

12 June 2009

Flash Platform Books

Every once and a while when I come across some Flash Platform related book I have this habit to post about it, just as a self reference thing, but as time passes I realized how there were lots of this reviews on my blog.

However, I also noticed how learning from a book can be hard sometimes. This doesn't have to apply to everyone, off course, it is probably an individual thing, but quality of the book is also important. There are many 'reference-kinda' books out there with lists of thing you can do, basic programming techniques descriptions within 800+ pages you can read for days or even weeks and not learn much.

For me personally, best ones are real life examples tutorials, concrete knowledge which you can implement and expand right away. This kind of books I would buy any day.


Here is the list of Flash Platform books related reviews or mentions including Adobe AIR and Flex:



*_*

05 June 2009

Using ActionScript Point class distance method for constant speed moving in roadMap function

This have to be longest post title ever, at least it is in my blogging history, but it precisely explains post subject and I was so tempted to use it, I couldn't resist.

Ok, first of all if you are not familiar with roadMap function, don't worry, it's a custom function which enables movie clip movement along given points on Stage. Read about it in this post and download example.

Code works just fine, but there is one thing missing. Object speed between different points is inside arrs Array and has to be added manually, thus it is very hard to achieve same speed along entire path without a lot of calculations. To address this issue some basic math knowledge is required.

If we accept that speed = distance / time, to achieve constant speed we have to know distances between different points. Lets say path consist of two parts, first one is 10 pixels and second is 100 pixels. We want our object to move with speed 10 pixels per frame on entire path. In that case v1, speed on part one should be 10 pixels / frame same as v2, speed on second part. All we have to do is to push value of (distance / 10) to arrs Array and constant speed is there, because actually we are pushing values for object speed.

Changes we have to make are inside onMouseUp function where instead

arrs.push(someValue);

we have next code:


if(arrx.length > 1) {
var point_1:Point = new Point(arrx[arrx.length-1], arry[arry.length-1]);
var point_2:Point = new Point(arrx[arrx.length-2], arry[arry.length-2]);
var distanceBetween:Number = Point.distance(point_1, point_2);
arrs.push(distanceBetween/10);
}else{
var point_1:Point = new Point(arrx[arrx.length-1], arry[arry.length-1]);
var point_2:Point = new Point(obj_mc._x, obj_mc._y);
var distanceBetween:Number = Point.distance(point_1, point_2);
arrs.push(distanceBetween/10);
}


Don't forget to add import flash.geom.Point; at the beginning of code. There is nothing to explain here, we just use Point class distance method to calculate speeds and push those values into arrs Array. That's how we achieve constant speed moving in roadMap function, just as title says.

Live example:


download code : :







*_*

01 June 2009

Maui Flash Zoom Tool

Previously made Flash Zoom Tool have several restrictions and one obvious is not-continuously zooming since you have only few scaling steps. Let's update that feature.

This time I'm using Maui island map by Mike Johnston. It will be even better and it is recommended to use vector maps instead of bitmaps, but this time that's not important.

Moving around the map is the same. Only new things are dragging functions and scaling. Here is entire code:


var rpoint = line._y - (line._height / 2); // reference point

onLoad = function() {
stool._x = line._x;
stool._y = line._y;
}

onEnterFrame = function() {
if (Key.isDown(Key.RIGHT)) {
map_mc._x -= 5;
}
else if (Key.isDown(Key.LEFT)) {
map_mc._x += 5;
}
else if (Key.isDown(Key.UP)) {
map_mc._y += 5;
}
else if (Key.isDown(Key.DOWN)) {
map_mc._y -= 5;
}
}

stool.onEnterFrame = function () {

// restrictions for stool mc movement

if (this._y < rpoint) {
this._y = rpoint;
}
if (this._y > (rpoint+line._height)) {
this._y = (rpoint+line._height);
}
this._x = line._x;

// scale amount

var ypos = Math.abs(stool._y-rpoint);
map_mc._xscale = map_mc._yscale = ypos*2 + 50;
}

stool.onPress = function () {
this.startDrag();
}
stool.onRelease = function () {
this.stopDrag();
}
stool.onDragOut = function () {
this.stopDrag();
}


ypos value range is between 0 and 50 and accordingly scaling is between 50 and 150. I'm using formula ypos*2+50 but you can use whatever numbers suits you. If you let's say use ypos*4+20 you will have scaling in range from 20 to 220 because :

ypos = 0 : ypos*4+20 = 0*4+20 = 20
ypos = 50 : ypos*4+20 = 50*4+20 = 220 etc.





*_*

 

template by blogger templates