FLANTURE

Wonderfl Flash Online Community

2011-05-27T09:24:00.000-07:00

This post title is not misspelled. Wonderfl is the name of online Flash / ActionScript community with a collaboration on open source projects as primary goal.

Wonderfl is actually more than just a community, it is mature online Flash IDE. You are invited to fork any existing code and continue with adding new features. You can also download to your computer your project version or start new project from scratch.

If you are more interested in game development there is special part of the community Wonderlf Flash Games where you can use Platform features to create, edit or play online Flash games.

Wonderfl is created and operated by Japan based Kayac company.

*_*

Poll Results: Favorite Flash Platform Topic

2011-05-19T16:40:00.000-07:00

Thank you all who answered previous Poll question: "What would you like to read more on Flanture?". It was multiple choice Poll. I'll make sure future posts correspond to your wishes.

Here are Poll results.

*_*

Math Quiz / Graphic Timer Example

2011-05-14T08:58:00.000-07:00

Here is small math quiz as simple illustration how Graphic Timer can be used. It will look even better within some Flash game ;)

It is required only few changes to have desired timer thickness and colors. Click on screenshots below to download example file.

*_*

ActionScript3.0 Tutorial : All Around Continual Graphic Timer

2011-05-10T08:13:00.000-07:00

This tutorial is requested by Andreas Folkesson.

First of all if you aren't familiar with my previous post Discrete versus continual graphical AS3 Timer read it so you can continue with this ActionScript 3.0 tutorial. For his specific project Andreas needed all round graphic continual timer and I thought it's interesting problem so I took the challenge.

All around timer means that timer graphic is "docked" to all four sides of scene and time is up when timer makes a whole trip around the scene. Take a look at the image.

Let's make those backgrounds.

// background elements

// timer background thickness
var thickness:int = 20;
var timerDuration:int = 20;

// background top
var bTop:Sprite = new Sprite();
bTop.graphics.beginFill(0x33cc33);
bTop.graphics.drawRect(0,0,stage.stageWidth,thickness);
addChild(bTop);

// background right
var bRight:Sprite = new Sprite();
bRight.graphics.beginFill(0x33cc33);
bRight.graphics.drawRect(stage.stageWidth-thickness,0,thickness,stage.stageHeight);
addChild(bRight);

// background bottom
var bBottom:Sprite = new Sprite();
bBottom.graphics.beginFill(0x33cc33);
bBottom.graphics.drawRect(0,stage.stageHeight-thickness,stage.stageWidth, thickness);
addChild(bBottom);

// background left
var bLeft:Sprite = new Sprite();
bLeft.graphics.beginFill(0x33cc33);
bLeft.graphics.drawRect(0,0,thickness, stage.stageHeight);
addChild(bLeft);

There are two variables you need to pay attention about. First one is "thickness" which is thickness of graphic timer, which is nice thing if you can change it according to your project needs. Second variable is timerDuration and it refers to entire timer (all four sides).

So how this problem is solved? I used four different timers. Each one starts after previous timer is finished. For this I'm using TimerEvent.TIMER_COMPLETE event listener. Here is rest of the code.

// graphic level timer

function aroundTimer(seconds:int):void
{
    seconds = seconds / 4;
    var t:Timer = new Timer(50, seconds*thickness);
    
    // graphic element
    var w:Number = stage.stageWidth;
    var h:Number = thickness;
    var g:Sprite = new Sprite();    
    addChild(g);
    
    // find percent and draw it!
    t.addEventListener(TimerEvent.TIMER, onTimer);
    function onTimer(evt:Event):void
    {
        var cc:int = evt.target.currentCount;
        var gWidth:Number = (cc * w)/(seconds * thickness);
        g.graphics.beginFill(0x339933);
        g.graphics.drawRect(0, 0, gWidth, h);
    }
    t.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);
    function onComplete(evt:Event):void
    {
        trace("top timer end.");
        timerRight(seconds);
    }
    t.start();
}

function timerRight(seconds:int):void
{
    var t:Timer = new Timer(50, seconds*thickness);
    
    // graphic element
    var w:Number = thickness;
    var h:Number = stage.stageHeight-thickness;
    var g:Sprite = new Sprite();    
    addChild(g);
    
    // find percent and draw it!
    t.addEventListener(TimerEvent.TIMER, onTimer);
    function onTimer(evt:Event):void
    {
        var cc:int = evt.target.currentCount;
        var gHeight:Number = (cc * h)/(seconds * thickness);
        g.graphics.beginFill(0x339933);
        g.graphics.drawRect(stage.stageWidth-thickness, thickness, w, gHeight);
    }
    t.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);
    function onComplete(evt:Event):void
    {
        trace("right timer end.");
        timerBottom(seconds);
    }
    t.start();    
}

function timerBottom(seconds:int):void
{
    var t:Timer = new Timer(50, seconds*thickness);
    
    // graphic element
    var w:Number = stage.stageWidth-thickness;
    var h:Number = thickness;
    var g:Sprite = new Sprite();    
    addChild(g);
    
    // find percent and draw it!
    t.addEventListener(TimerEvent.TIMER, onTimer);
    function onTimer(evt:Event):void
    {
        var cc:int = evt.target.currentCount;
        var gWidth:Number = (cc * w)/(seconds * thickness);
        g.graphics.beginFill(0x339933);
        g.graphics.drawRect(stage.stageWidth-thickness, stage.stageHeight-thickness, -gWidth, h);
    }
    t.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);
    function onComplete(evt:Event):void
    {
        trace("bottom timer end.");
        timerLeft(seconds);
    }
    t.start();    
}

function timerLeft(seconds:int):void
{
    var t:Timer = new Timer(50, seconds*thickness);
    
    // graphic element
    var w:Number = thickness;
    var h:Number = stage.stageHeight-thickness;
    var g:Sprite = new Sprite();    
    addChild(g);
    
    // find percent and draw it!
    t.addEventListener(TimerEvent.TIMER, onTimer);
    function onTimer(evt:Event):void
    {
        var cc:int = evt.target.currentCount;
        var gHeight:Number = (cc * h)/(seconds * thickness);
        g.graphics.beginFill(0x339933);
        g.graphics.drawRect(0, stage.stageHeight-thickness, w, -gHeight);
    }
    t.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);
    function onComplete(evt:Event):void
    {
        trace("time is up!");
    }
    t.start();    
}

aroundTimer(timerDuration);

Sure, trace lines can be omitted. When timerLeft finishes you can end your level and start new one.

I hope this Flash Tutorial will be useful to someone. If you have any questions feel free to ask them here or on Facebook discussions page.

*_*

FITC - Design and Technology Festival in Toronto

2011-04-27T06:18:00.000-07:00

The place to be next week is Toronto, Canada. Why? Because that's the congregation point for one of the best Flash Platform conferences out there - The Design and Technology Festival, FITC.

Number of events and presentations is huge - over 80 of them. Some of the speakers are: Grant Skinner, Jasse Warden, Robert Peters, Lisa Larson-Kelley, Joshua Noble ...

In the meantime, those of us who can't attend are spending time on FITC Vimeo videos page.

*_*

Happy 4th Blogoversary

2011-04-22T05:05:00.000-07:00

Today is 4 years since I started this blog. That's just amazing. I'm one of those people who rarely finishes something I've started (don't judge me, pls) but this blog has survived for 4 long years and not only survived, but improved over the time, contribute some value to the Blogosphere (I hope) and will continue to do so.

Every time I neglect posting comments and feedback are bringing me back to find new stuff to blog about, so thank you for that. Thank you for subscribing to my RSS feed, all 250+ of you. This number is growing steadily over the time.

Social media networks also played large part in improving Flanture, first Twitter and from recently you can connect also via Facebook page which is still new but gives us new ways to discuss Flash and web.

It is always good advice to move your blog in direction your readers need it. Flanture asked and you answered. Here is Poll result from last month:

Thank you for your answers. I have no other option but to announce that Flanture will soon open its YouTube channel with Flash / ActionScript Tutorials!

Happy 4th Blogoversary !!!

*_*

Average Flash Games Developer

2011-04-15T06:23:00.000-07:00

MochiMedia has conducted survey of Flash games market for 2010. Let me present few key points about average Flash games developer for last year.

Our average Flash games developer is 'he' in 97% of the cases and only 3% is 'she'. He is around 24 years old and he is most likely from United States.

Average Flash games developer doesn't create Flash games full time, it's mostly a part time activity and he develops Flash games for 2 years using ActionScript 3.0 and during that time he has developed 3-4 full games. Each of those games got about 200.000 plays during its lifetime. He is most like working by himself.

Coding and game design are best aspects of his game creation process. Average Flash games developer needs 1-2 months to create single game. He makes up to $500 for that game.

I've mentioned how our average Flash game developer comes from United States, however, there is evident raise in number of developers from non-western countries comparing to last year:

o Russia 6% (up 2%)
o Ukraine 4% (up 2%)
o India 4% (up 3%)
o Brazil 3% (up 1%)
o Indonesia 3% (up 1%)

This is reasonable raise because average $500 for a single game in US/UK maybe is not big deal and may be considered as small bonus, but in Indonesia and India this is good money. Conclusion is that Flash games market is maturing and moving fast from hobby to real business which is good news for both players and developers.

*_*

Elliptical Movement ActionScript 3.0 Flash Tutorial

2011-04-13T07:13:00.000-07:00

First let's start with something we already done here and extend our knowledge. Take a look at previous posts about circular movement in ActionScript 3.0:

How to orbit in AS
Making orbit trails in Flash
Using drawing API for orbit like shapes

Elliptic movement in AS3

Ellipse has center point C(x0,y0) and two fixed points F1 and F2. Distances from F1 and F2 are r1 and r2. You can think of circular movement as special case of ellipse movement where values a and b are equal (a=b).

Thus, based on previous examples we can write code for finding position of point moving along elliptic curve.

var posX:Number = planet.x + Math.cos(radians) * a;
var posY:Number = planet.y + Math.sin(radians) * b;

Instead of single radius parameter in orbit function, ellipse function has two parameters a and b.

function ellipse(planet:MovieClip, sat:MovieClip, a:Number, b: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.cos(radians) * a;
        var posY:Number = planet.y + Math.sin(radians) * b;
        sat.x = posX;
        sat.y = posY;
    }
    
    function getRadians(degrees:Number):Number
    {
        return degrees * Math.PI / 180;
    }    
}

That's all. You can replace orbit function with ellipse one in previous trails examples and it will work perfectly.

*_*

Flash AS3 Laser Lab Code

2011-04-05T08:17:00.000-07:00

As promised, here is the code for Laser Lab. In order to run this code successfully, you'll need to have Slider and Color Picker controls in your file library. Everything else is pretty simple, just paste the code into first frame of your FLA file and that's it.

Original document dimensions are 550x400. That is why loop function exist to avoid drawing over control elements.

If you extend this example even more, do let me know.

// laser effect playground
// author http://flanture.blogspot.com
// based on code by www.eyes-squared.co.uk
// march 2011

import flash.display.Sprite;
import flash.filters.GlowFilter;
import flash.events.MouseEvent;
import flash.events.Event;
import fl.controls.ColorPicker;
import fl.controls.Slider;
import fl.events.ColorPickerEvent;
import fl.events.SliderEvent;

// starting values
var baseColor = 0xFFFFFF;
var glowColor = 0xFF0000;
var baseStrength = 3;
var glowStrength = 4;
var glowBlur = 8;

var sprite:Sprite = new Sprite();
addChild(sprite);

function updateFilter() {
    var gf:GlowFilter = new GlowFilter(glowColor);
    gf.quality = 3;
    gf.strength = glowStrength;
    gf.blurX = gf.blurY = glowBlur;
    var fils = new Array();
    fils.push(gf);
    
    sprite.filters = fils;
}
updateFilter();

stage.addEventListener(MouseEvent.MOUSE_DOWN, startFire);
stage.addEventListener(MouseEvent.MOUSE_UP, stopFire);

function startFire(m:MouseEvent) {
    sprite.graphics.lineStyle(baseStrength, baseColor);
    sprite.graphics.moveTo(mouseX, mouseY);
    addEventListener(Event.ENTER_FRAME, loop);
}

function stopFire(m:MouseEvent) {
    removeEventListener(Event.ENTER_FRAME, loop);
}

function loop(e:Event) {
    // avoid drawing on control elements
    if (mouseX < 400) {
        sprite.graphics.lineTo(mouseX, mouseY);
    }
}

var cp1:ColorPicker = new ColorPicker();
cp1.width = 100;
cp1.height = 25;
cp1.x = 420;
cp1.y = 30;
addChild(cp1);

var cp2:ColorPicker = new ColorPicker();
cp2.width = 100;
cp2.height = 25;
cp2.x = 420;
cp2.y = 200;
addChild(cp2);

var sl1:Slider = new Slider();
sl1.x = 430;
sl1.y = 100;
sl1.liveDragging = true;
sl1.minimum = 1;
sl1.maximum = 10;
sl1.tickInterval = 1;
addChild(sl1);

var sl2:Slider = new Slider();
sl2.x = 430;
sl2.y = 280;
sl2.liveDragging = true;
sl2.minimum = 1;
sl2.maximum = 10;
sl2.tickInterval = 1;
addChild(sl2);

var sl3:Slider = new Slider();
sl3.x = 430;
sl3.y = 350;
sl3.liveDragging = true;
sl3.minimum = 1;
sl3.maximum = 7;
sl3.tickInterval = 1;
addChild(sl3);

cp1.addEventListener(ColorPickerEvent.CHANGE, changeHandler1);
function changeHandler1(event:ColorPickerEvent):void {
    sprite.graphics.clear();
    baseColor = event.target.selectedColor;
}
cp2.addEventListener(ColorPickerEvent.CHANGE, changeHandler2);
function changeHandler2(event:ColorPickerEvent):void {
    glowColor = event.target.selectedColor;
    sprite.graphics.clear();
    updateFilter();
}
sl1.addEventListener(SliderEvent.CHANGE, changeSlider1);
function changeSlider1(event:SliderEvent):void
{
    baseStrength = event.target.value;
    sprite.graphics.clear();
}
sl2.addEventListener(SliderEvent.CHANGE, changeSlider2);
function changeSlider2(event:SliderEvent):void
{
    glowStrength = event.target.value;
    sprite.graphics.clear();
    updateFilter();
}
sl3.addEventListener(SliderEvent.CHANGE, changeSlider3);
function changeSlider3(event:SliderEvent):void
{
    var temp = 1;
    for(var i=0; i<event.target.value; i++){
        temp = 2 * temp;
    }
    glowStrength = temp;
    sprite.graphics.clear();
    updateFilter();
}

*_*

Laser Lab - mini Flash app

2011-03-29T03:28:00.000-07:00

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.

*_*

Olympic Rings Animation Using Flint

2011-03-24T09:20:00.000-07:00

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!

*_*

Using Drawing API for orbit-like shapes in AS3

2011-03-22T04:18:00.000-07:00

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.

*_*

Making Orbit Trails in Flash

2011-03-18T08:58:00.000-07:00

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.

*_*

How To Orbit In AS3

2011-03-16T05:24:00.000-07:00

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.

*_*

Simple and Quick Laser Effect in Flash Using ActionScript 3.0 Video

2011-03-10T07:57:00.000-08:00

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

*_*

Wallaby - FLA to HTML5 conversion tool

2011-03-09T04:19:00.000-08:00

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.

*_*

Flint Particles v3.0 actions cheatsheet

2011-02-28T06:55:00.000-08:00

Single PDF page of Flint Particles v3.0 actions. Black color for both 2D and 3D actions, blue color for only 2D actions and parameters and green color for only 3D actions and parameters.

(click on image to download)

*_*

Quick update on select tool

2011-02-19T02:55:00.000-08:00

Just a quick update on 'select tool'. You can now use some keyboard keys to perform additional actions. After selection is made use arrow keys to move selected objects around, 10 px per click. Also backspace and delete keys can be used to remove objects from stage.

Plans. Some kind of generalization will be done, so assets can be loaded via XML. Application will have 3 panels: main panel for displaying purposes, items panel for choosing display objects with drag and drop ability and command panel where actions are defined like save as jpg, export as something, update view and similar.

Purpose. Unknown.

*_*

Dissecting Flint 2D Grass Example

2011-02-09T06:40:00.000-08:00

Flint particles system is pretty awesome, but for beginners it's very hard to understand entire library and use it easily. This is why I decided to dissect one of the examples, 2D Grass example. Take a look at Flash version of the code. There is only 25 lines of code and 9 of them are import statements. Make sure you have downloaded and extracted Flint source code, I'll make reference to it later during this tutorial.

First, we place 2D emitter on stage with position x = 250 and y = 400. You can first move this emitter slightly up with:

emitter.y = 200;

Instead of 100 particles, we will add 200 with:

emitter.counter = new Blast( 200 );

Instead of Blast counter, you can try another one like KeyDownCounter, Pulse, SineCounter or TimePeriod which uses easing equations for emitting particles in predefined period of time. Check docs for full list at org\flintparticles\common\counters.

Next we have four Initializers. First one is 2D Position Initializer with DiskZone in point (0,0) and radius 40. DiskZone is circular shape which can have third parameter inner radius, so DiskZone can place particles in doughnut shape also, but if third parameter is omitted, particles are placed inside circle like in this example.

Second used Initializer is Velocity. This one defines velocity for all particles. As its parameter it uses one of Flint zones. There are several zone definitions you can use like DiscZone, LineZone, Zone2D. Check entire list in docs: org\flintparticles\twoD\zones.

Grass example uses DiscSectorZone with definition:

DiscSectorZone( center:Point = null, outerRadius:Number = 0, innerRadius:Number = 0, minAngle:Number = 0, maxAngle:Number = 0 )

Parameter are pretty straightforward. Change those parameters to:

new DiscSectorZone( new Point( 0, 50 ), 80, 75, -9 * Math.PI / 16, -7 * Math.PI / 16 )

Next image shows result:

Third Initializer is color. I wanted to change current situation and start with different colors. Changed line is:

emitter.addInitializer( new ColorInit( 0x66666600, 0x99999900 ) );

Fourth Initializer is easy to understand, it is particles Lifetime. If you increase it to 8, you'll get:

Flint power and diversity is in its actions. Library has almost 40 different actions in 2D space. Some of them are: Accelerate, CollisionZone, MouseGravity, RandomDrift and ones used in Grass example Move, Age and ScaleImage. Check entire list at org\flintparticles\twoD\actions. We will change two actions.

emitter.addAction( new ScaleImage( 3, 1 ) );
emitter.addAction( new Accelerate( 0, 6 ) );

Next image shows result:

By now you have good insight into how Flint works. You should probably use some other examples both 2D and 3D and change few parameters to get used to library before you are brave enough to try to write your own particles code using Flint.

Flint library is released under MIT license by Richard Lord.

*_*

Getting Started With Flint AS3 Particle System

2011-02-04T14:35:00.000-08:00

Flint is very mature particle system written in AS3. Project has started back in 2008 by Richard Lord. Few days ago on 20th January, version 3.0.0 is released. Big change is that new version targets only Flash Player 10 and beyond.

You can start by downloading source code from project website. There are few options: source code for Flash or Flex, swc for Flash or Flex, documentation and excellent examples files.

In order to include library code to your project you have two options. First one is to modify classpath of specific document you are working on or global classpath.

I'm using second approach. Create working folder somewhere on your hard drive and name it MyFlintExamles. Unzip Flint_3_0_0_src.zip file you've already downloaded from project website and extract 'org' folder inside MyFlintExamles folder.

I'll show you how to change existing example to suit your needs and just get started with Flint. Open Flint_3_0_0_examples.zip file and browse to examples2D\LogoTween\Flash where you will find two files you will need to extract in MyFlintExamples Frame1.as and LogoTween.fla.

Now open LogoTween file and check Library (CTRL+L) and you will find two png files flint.png and particles.png. These two files you will have to create with your favorite graphics editing software. Make sure you save your files in png format 320x80.

Here are my two files.

Inside LogoTween file, open Library and right-click on flint.png first and choose Properties to open Bitmap Properties. Click on Import... and select your first image. Leave everything else as it is.

Do the same thing for other Library item particles.png and import your second (tween destination) file.

You can modify number of particles used for tweening effect by opening Frame1.as and change number 5000 to something else on line 48:

startEmitter.counter = new Blast( 5000 );

Flash Player 10 is required to see this example.

View on ShareSWF

*_*

Facebook Desktop Application built with Adobe AIR

2011-01-28T04:58:00.000-08:00

When I read about Facebook Desktop my first thoughts were, this is like TweetDeck, but for Facebook!

Facebook Desktop application is developed by Charles Bihis and it is written in Adobe AIR, which means if you want to install it, you need to have AIR on your computer version 1.5 at least. However, installation process is painless and quick.

Application current version is 0.83, so I guess you can't expect much from it. After you install the alication and allow it to connect with every aspect of your Facebook profile, you will get nice little blue square in your system tray. Great! Even beter, every once and a while, square will pop up notifications from your Facebook stream. This means no more boring logins via browser? Not quite. For now you will only be notified about new stories, but in order to read them you will still have to go there and do it 'manually'.

If you have missed something while paying pizza delivery boy you have option to replay last five notifications in any time. No more excuses to do your job! However, you are not completely blind with Facebook Desktop, because you can update your status with it.

It will be interesting to see future developments of this useful application and I hope many more improvements.

p.s. while on FB check/like our page(just created)::Flanture on Facebook.

*_*

Snowfall Flash Animation Effect Example

2010-12-14T17:16:00.000-08:00

This simple example is based on two previous posts:

1) Simple Flash Snowflake Generator and
2) Flash Tutorial : Rain Effect

Instead of using AS2 as in Rain Effect Tutorial, this is pure AS3 code.

hosted on ShareSWF

You can expect more complex examples later. Ask if you need further explanation.

*_*

Simple Flash Snowflake Generator

2010-12-12T23:24:00.000-08:00

Just like every year, few weeks before holidays there is plethora of animations which includes Santa, snow, various gift boxes, evergreen trees etc. Many of them are quite good as Christmas and New Year Flash cards, but almost all of them has one small shortage - snowflakes are made from same single MovieClip. Now if objects are small and distant that's fine, but to imitate depth some animations display bigger graphics and defect is visible.

They say in real life there isn't two exact the same snowflakes, so I decided to solve this problem and create simple Snowflake Generator which will randomly create slightly different snowflake every time object is created.

I don't have to generate entire snowflake at once, because snowflake is symmetric object in two ways.

Take a look at a blue shape above. Points A, B and C are randomly generated, but they must be placed inside appropriate rectangles. After the shape is drawn, we copy the same shape and place it in mirrored position. Combined object is then copied 5 times and rotated for 60 degrees per object. In this way we will get 6 movie clips which forms single randomly created snowflake! Every time we call new snowflake() we get just a little bit of different shape. Nice.

ActionScript 3.0 doesn't have duplicateMovieClip() method (this has been discussed widely on forums and some workarounds have been made) and in this case I will just create 6 different MovieClips and draw same graphic shape inside them. Six clips act as single snowflake which can be further animated to simulate falling snow Flash animation.

We create new MovieClip and inside we place next code:

x = stage.stageWidth/2;
y = stage.stageHeight/2;

var field1:MovieClip = new MovieClip();
var field2:MovieClip = new MovieClip();
var field3:MovieClip = new MovieClip();
var field4:MovieClip = new MovieClip();
var field5:MovieClip = new MovieClip();
var field6:MovieClip = new MovieClip();

function drawFlake(mc:MovieClip):void
{
mc.graphics.beginFill(0xffffff);
mc.graphics.lineTo(0, 80);
mc.graphics.lineTo(aX, aY);
mc.graphics.lineTo(bX, bY);
mc.graphics.lineTo(cX, cY);
mc.graphics.lineTo(0, 0);
mc.graphics.lineTo(0, 80);
mc.graphics.lineTo(-aX, aY);
mc.graphics.lineTo(-bX, bY);
mc.graphics.lineTo(-cX, cY);
mc.graphics.lineTo(0, 0);
mc.graphics.endFill();
}

var aX = Math.random()*10+10; // (10-20)
var aY = Math.random()*20+60; // (60-80)
var bX = Math.random()*10; // (0-10)
var bY = Math.random()*20+40; // (40-60)
var cX = Math.random()*10+10; // (10-20)
var cY = Math.random()*20+20; // (20-40)

drawFlake(field1);
addChild(field1);

drawFlake(field2);
field2.rotation = 60;
addChild(field2);

drawFlake(field3);
field3.rotation = 120;
addChild(field3);

drawFlake(field4);
field4.rotation = 180;
addChild(field4);

drawFlake(field5);
field5.rotation = 240;
addChild(field5);

drawFlake(field6);
field6.rotation = 300;
addChild(field6);

DrawFlake function actually draws two symmetric shapes based on three Points with randomly chosen position. On main timeline we only have to call our snowflake like it:

var flake:snowflake = new snowflake();
addChild(flake);

*_*

Free Flash + AS3 + Flex Tutorials e-book

2010-10-29T13:17:00.000-07:00

About two months ago I published my first e-book on Lulu. At first, idea was to create collection of better tutorials from this blog, which I'm writing for the past 3 and a half years. Initially, there was a small price under 5 bucks, but two months later I sold only 1 copy, so I decided to give it away for free. Actually, I wasn't selling the book, it was more like a small-donation-model to keep my blog running.

Right now, you can download the book from LULU pages or from Scribd.

As previously planned I'll update my e-book every 3-4 months with new tutorials and maybe few not available on this blog :)

*_*

Custom Flex 4 HornLayout variation

2010-10-19T10:42:00.000-07:00

Few days ago I presented custom Flex 4 TriangleLayout. Another variation of this layout would be when individual items are ordered from left to right, unlike in TrinagleLayout where items are placed top to bottom.

Code is almost the same, just a minor differences.

HornLayout.as


package com.flash2nd.layout {
    
    // author: http://flanture.blogspot.com - www.flash2nd.com
    // license: http://creativecommons.org/licenses/by/3.0/
    // October 2010
    
    import mx.core.ILayoutElement;
    import mx.utils.ObjectUtil;
    
    import spark.layouts.supportClasses.LayoutBase;
    
    public class HornLayout extends LayoutBase {
        
        public function HornLayout() {
            super();
        }
        
        override public function measure():void {
            super.measure();
        }
        
        override public function updateDisplayList(width:Number, height:Number):void {
            super.updateDisplayList(width,height);
            
            if(target){
                var count:int = target.numElements;
                var layoutElement:ILayoutElement;
                var startX:Number = 0;
                var startY:Number = target.height/2;
                var shift:int = 1;
                                
                for(var i:int = 1; i < count+1; i++){
                    // find current level
                    var level:int = findLevel(i);
                    
                    layoutElement = target.getElementAt(i-1);
                    layoutElement.setLayoutBoundsSize(NaN,NaN);
                    
                    var elWidth:Number = layoutElement.getLayoutBoundsWidth();
                    var elHeight:Number = layoutElement.getLayoutBoundsHeight();

                    if (level !== findLevel(i-1)) {
                        shift = i;
                    }
                    
                    var x:Number = startX + elWidth * (level - 1) * 2;
                    var y:Number = startY - elHeight * (level - 1) + (i % shift) * elHeight * 2;
                    
                    layoutElement.setLayoutBoundsPosition(x,y);
                }                
            }
            
        }
        
        private function findLevel(index:int):int {
            var levelCounter:int = 1;
            var sum:int = 1;
            while (sum < index) {
                sum += levelCounter;
                if (sum <= index) {
                    levelCounter += 1;
                }
            }
            return levelCounter;
        }        
        
    }
}

HornLayoutTest.mxml


<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:layout="com.flash2nd.layout.*"
    width="100%" height="100%">

        
        <s:layout>
            <layout:HornLayout/>
        </s:layout>
        
        <s:Button label="Button A"/>
        <s:Button label="Button B"/>
        <s:Button label="Button C"/>
        <s:Button label="Button D"/>
        <s:Button label="Button E"/>
        <s:Button label="Button F"/>
        <s:Button label="Button G"/>
        <s:Button label="Button H"/>
        <s:Button label="Button I"/>
        <s:Button label="Button J"/>
        <s:Button label="Button K"/>
        <s:Button label="Button L"/>
        <s:Button label="Button M"/>
        <s:Button label="Button N"/>
        <s:Button label="Button O"/>
        <s:Button label="Button P"/>
        <s:Button label="Button Q"/>
        <s:Button label="Button R"/>    
    
</s:Application>

sharing is caring :)
thanx.

*_*