29 March 2011

Laser Lab - mini Flash app

Few posts ago I embedded video Tutorial Simple and quick laser effect in Flash. This interesting video tutorial, created by EyesSquared made me extend the code with some sliders and color pickers and it seems like small Flash application came out of it.

Since shareswf and swfcabin are currently unavailable I can't post live version right now. Do you know of any other free swf hosting with hotlinking?

In meantime, click on image to download Laser Lab App!



You have two color pickers, one for base color and one for glow color. Also, there are three sliders, one for base strength, one for glow strength and one for glow blur amount.

I'll post application code soon.

*_*

24 March 2011

Olympic Rings Animation Using Flint

Olympic Rings animation uses Flint particles system (by Richard Lord) and its sparkle effect in combination with AS3 orbit function to make Olympic rings more interesting. Particles colors correspond to rings colors.

[DOWNLOAD SOURCE]-115kb




Let the games begin!

*_*

22 March 2011

Using Drawing API for orbit-like shapes in AS3

Before reading this post, it would be great if you could take a look at related posts:

- How to orbit in AS3
- Making orbit trails in Flash
- AS3 drawing API examples
- Curves and fills with AS3 drawing API

Let's take a look at the completed code:

import flash.display.MovieClip;
import flash.events.Event;
import flash.display.Graphics;

function orbit(planet:MovieClip, sat:MovieClip, radius:Number, speed:Number,
trailStrength:Number, trailColor:uint):void
{
var currentDegrees:Number = 0;
var trail:MovieClip = new MovieClip();
trail.graphics.lineStyle(trailStrength, trailColor);

var setPosition:Boolean = true;

addChild(trail);

this.addEventListener(Event.ENTER_FRAME, doEveryFrame);

function doEveryFrame(event:Event):void
{
currentDegrees += speed;
var radians:Number = getRadians(currentDegrees);
var posX:Number = planet.x + Math.sin(radians) * radius;
var posY:Number = planet.y + Math.cos(radians) * radius;
sat.x = posX;
sat.y = posY;

// update trail graphics
if (setPosition) {
trail.graphics.moveTo(posX, posY);
setPosition = false;
}
trail.graphics.lineTo(sat.x, sat.y);
}

function getRadians(degrees:Number):Number
{
return degrees * Math.PI / 180;
}
}

orbit(planetMC, satMC, 220, -1, 2, 0xffff00);
orbit(planetMC, satMC2, 120, 4, 2, 0xffff00);
orbit(satMC2, moon, 20, -31, 1, 0xffffff);
orbit(satMC, moon2, 20, 12, 1, 0xffffff);
orbit(satMC, moon3, 50, 4, 1, 0xffffff);


This is part of the result image.



Orbit function is a bit different from same function in How to orbit in AS3 post. First, one more import line is added:

import flash.display.Graphics;

This is needed because we will use drawing properties of display object, in this case - MovieClip.

So, orbit function has two additional parameters: trailStrength and trailColor.

Before event listener we have 4 new lines:

var trail:MovieClip = new MovieClip();
trail.graphics.lineStyle(trailStrength, trailColor);
var setPosition:Boolean = true;
addChild(trail);


First we define new MovieClip and we set lineStyle using our two new parameters. We add that MovieClip to stage using addChild.

Now what is setPosition Boolean value? In this particular example, objects for 'planets' and 'moons' are randomly placed on Stage and when movie starts, drawing begins from those starting position, which is bad because it breaks image symmetry. That's why I use this Boolean value to move 'drawing pen' to right position in first iteration of event listener with:

trail.graphics.moveTo(posX, posY);

After this move, setPosition becomes false and move is never executed again. Only remains to draw new line with:

trail.graphics.lineTo(sat.x, sat.y);

As you can see from code above, orbit function calls now have 6 parameters and last two are trial line width and trail line color.

[DOWNLOAD SOURCE]

Here are few more images created using this technique.



Have some of your own? Let me know.

*_*

18 March 2011

Making Orbit Trails in Flash

Let's continue with previous 'orbit' tutorial. In order to create new 'planetary system' just add single orbit function call:

orbit(planetMovieClip, satelliteMovieClip, _distance, _speed);

This will make satelliteMovieClip orbit around planetMovieClip at distance _distance with speed _speed.

Further you can create another smaller satellite to orbit around satelliteMovieClip, etc ... This system doesn't have any gravity variables, just plain circular movement.

Now, to create simple trails, insert new movie clip, any image will do, but for start, make something simple, like 4 pixels radius white circle. Enter 'trailMC' as linkage name and add next code:


// create trail movie clip
var mc:trailMC = new trailMC();
mc.x = sat.x;
mc.y = sat.y;
addChild(mc);



This code should go at the bottom of doEveryFrame function. Take a look at result file image:



As you can see, if you make star, planets and moons movie clips have alpha = zero, then you get easy to use shapes generator ... or something like that.

Since trails movie clip can be anything you think of, you can see how powerful this technique can be.

If drawing shapes it's not your goal and rather you need just trails, you can make them disappear after a while. One way to do it is to use next code inside trailMC (or use Timer class):


import flash.events.Event;

this.addEventListener(Event.ENTER_FRAME, onFrame);

function onFrame(evt:Event):void
{
if (alpha > 0)
{
alpha -= 0.05;
} else {
this.removeEventListener(Event.ENTER_FRAME, onFrame);
}
}





In next post I'll show you how to use drawing API instead of movie clips for making orbit trails.

Thanks for reading.

*_*

16 March 2011

How To Orbit In AS3

Making some display object orbit around some other display object in ActionScript3.0 is easy.

Here is basic orbit function where all the magic happens:



function orbit(planet:MovieClip, sat:MovieClip, radius:Number, speed:Number):void
{
var currentDegrees:Number = 0;

this.addEventListener(Event.ENTER_FRAME, doEveryFrame);

function doEveryFrame(event:Event):void
{
currentDegrees += speed;
var radians:Number = getRadians(currentDegrees);
var posX:Number = planet.x + Math.sin(radians) * radius;
var posY:Number = planet.y + Math.cos(radians) * radius;
sat.x = posX;
sat.y = posY;
}

function getRadians(degrees:Number):Number
{
return degrees * Math.PI / 180;
}
}



Function parameters:

planet - MovieClip around which another MovieClip is orbiting
sat (satellite) - MovieClip which orbits
radius - distance from satellite to planet
speed - orbit speed (can be positive or negative value)

Orbiting direction depends on speed value. Positive speed value will move satellite in counter-clockwise direction and negative speed value will move satellite in clockwise direction.

Advanced approach can use satellites as new planets, just as in star system you can have star in a center, some planets orbiting around star and than you can add moons around those planets orbiting with different speed and on different distances from planets.

Click on image to download example.



*_*

10 March 2011

Simple and Quick Laser Effect in Flash Using ActionScript 3.0 Video

This 6 minutes video from PointClickWin will show you how to create simple but effective laser effect in Flash using AS3.



*_*

09 March 2011

Wallaby - FLA to HTML5 conversion tool

Adobe has released first early version of Wallaby, FLA to HTML5 conversion tool. Only CS5 FLA files are supported. There is no support for 3D transforms, blend modes, ActionScript, components, filters, sound, video and few more features.

Conversion result is HTML, JavaScript, CSS3 and SVG.



*_*

 

template by blogger templates