FLANTURE

Random Array AS3 function

2013-03-15T09:47:00.000-07:00

For my upcoming Memory variation game I needed a function to generate known length Array of random numbers out of given 0-n integers Array. For example when we call this function with this call:

randomArray(3, 10)

result is array with 3 random numbers from range 0-10, so it can be [0, 6, 3] or [9, 3, 2] or [0, 2, 1] but numbers cannot repeat. We can also call randomArray(n, n) in which case [0, 1, ..., n] is returned, but first function parameter must be less or equal to second parameter.

Here is how function might look like, comments are for testing purposes:

function randomArray(number:uint, total:uint):Array {

    var omega:Array = new Array();

    if (number <= total) {
        var alfa:Array = new Array();
        var pick:uint;
        var index:uint;
        for (var i:uint = 0; i<total; i++) {
            alfa.push(i);
        }
        // trace("alfa = "+alfa);
        while (omega.length < number) {
            index = Math.floor(Math.random()*alfa.length);
            // trace("index = "+index);
            pick = alfa[index];
            // trace("pick = "+pick);
            omega.push(pick);
            // trace("omega = "+omega);
            alfa.splice(index,1);
            // trace("alfa = "+alfa);
        }
    }
    return omega;
}

// function test
var om:Array = randomArray(5, 10);
trace(om);

If you are interested to read more about generating random stuff with ActionScript check these articles:
- Fastest Random Array Generator
- Simple Flash Snowflake Generator
- ActionScript Random Number Generator With Blur Effect
or type "random" in search box :)

*_*

Reverse display list objects in AS3

2013-03-11T04:11:00.000-07:00

Some simple tricks must be included to reverse display list objects in AS3 and that trick uses name MovieClip property, getChildByName and swapChildrenAt methods. Let's see code first.


import flash.display.MovieClip;
import flash.events.*;
import flash.events.MouseEvent;

var temp:MovieClip = new box();

for (var i:Number = 0; i < 50; i++) {
    temp.x = Math.random()*500;
    temp.y = Math.random()*350;
    temp.name = String(i);
    temp.alpha = i/50;
    addChild(temp);
    temp = new box();
}

stage.addEventListener(MouseEvent.CLICK, onStageClick);
function onStageClick(evt:MouseEvent):void {
    for (var j:Number = 0; j < numChildren/2; j++) {
        swapChildrenAt(j, numChildren-j-1);
        getChildByName(String(j)).name = String(numChildren-j-1);
        getChildByName(String(numChildren-j-1)).name = String(j);
        getChildByName(String(j)).alpha = j/50;
        getChildByName(String(numChildren-j-1)).alpha = (numChildren-j-1)/50;        
    }
}

For this example I will use MovieClip alpha property for visual representation of change after list reversing. First simple shape (sqaure in my case) has box class as linkage name.

Using for loop place on stage 50 of those boxes on random positions, but inside stage width and height dimensions. Using temp.name = String(i) line every box is named after its depth value, meaning first box added to stage will have name "0", second name "1", etc. Last one will have name "49".

Then, with temp.alpha = i/50 line we make every new box have slightly higher alpha value than previous one. We will reverse those alpha values later.

Function onStageClick will have single for loop, but with index going only half of number of boxes. In this way using swapChildrenAt we replace depth of box "0" with depth of box "49", depth of box "1" with depth of box "48", etc while entire list is reversed.

All that is left is to change names and alphas of new order using getChildByName method.

Image shows two different states, before and after the reverse.

*_*

Learning Multimedia Development Online for Free

2013-03-08T08:32:00.000-08:00

I just can't ignore some subjects here and have to touch them just a bit. One of those is for sure huge raise in MOOC in recents times (which stands for massive open online course).

There are many platforms right now that offer different types of online courses from free to paid ones, from beginners video tutorials to full-scale high class Universities courses.

I won't mention them all, instead I will only provide this link, which is place to find Top 50 Sites to Get Educated for Free.

I will however say that me personaly have used Coursera to learn Python, some Astrobiology and Sustainability :) and my experience is positive every step of the way. If you are in pursuit for knowledge Coursera is great, however if you need certifications, try some other place (for now, but it seems like that will change in the future). Coursera also won Best New Startup Of 2012.

Since I'm always hungry for more, my next project will be Diploma in Multimedia Development on Alison platform. It is free course where you can learn few multimedia tools like Adobe Photoshop, Windows Movie Maker, Adobe Flash, Audacity, Director MX and Adobe After Effects. I'm already familiar with some of those tools and I'm interested to see what new tricks can I learn.

Alison also offers free individual courses on PhotoShop, Flash, After Effects and Adobe Connect.

*_*

Pure Citrus madness

2013-02-17T18:01:00.000-08:00

As I can see from my first readings Flash game development market is huge, even growing on web and devices. Facebook is pretty big market. Pure madness.

Many are talking about Citrus engine which also uses Stage3D, Starling, Away3D, Box2D and NAPE. It seems like they are moving forward very fast. Citrus is higher level layer above mentioned libraries, which makes gamedev process easier.

Complete SWC engine with all extra libraries included in about 2.5 Mb available from downloads page and full API docs are easy to find.

Here is only one of many examples of how game may work if it is made using Citrus Engine.

New market files: Breakout Game Starter Kit | Top Down Shooter Kit

*_*

Is Flash still alive?

2013-02-16T13:19:00.000-08:00

I don't really know what happened, where was I and this blog for the past two years. It's like some space-time wormhole got me into its unimaginable depths and spit me out a couple of days ago.

Anyway, you can all assume I was in another dimension or something (I wanted to say prison but then I realized I could have had computer and Internet access inside it, so that's not good excuse) because I didn't touch Flash, web or mobile development or anything similar all this time! I know it sound incredible but it's true.

This means first I'll have to see what in the world happened with Flash in all this time :) Is it still alive and can I countinue with it?

I can see from my stats people still visit this blog quite often, so I guess there are some good info here for you to read and enjoy. If I need some help in catching up with new stuff don't be a stranger and help me out!

You can still connect with me via Twitter or Facebook page.

Flanture
*_*

Presenting data using Bluff library

2012-09-18T04:43:00.000-07:00

There are many ways to present your data, but sometimes simplest solutions are best ones.

In this case, JavaScript library Bluff by James Coglan (which is released under the GPL and MIT licenses) comes with amazingly easy API to work with, but still in many cases it can be 'the' tool you needed for your data representaion.

Three small files are required: js-class.js (8 kb), bluff-min.js (42 kb) and if using Internet Explorer excanvas.js (12 kb).

Let's jump start to Line Chart Graph, it's an easiest way to understand how this library works.

First we need some space to draw and that's obviously our canvas. Use proper dimensions and id.

<canvas id="example" width="500" height="300"></canvas>

Now, all we have to do in order to present our data is create new Bluff.Line class like this:

  <script type="text/javascript">
    var g = new Bluff.Line('example', '500x300');
    g.title = 'Products Stats';
    g.tooltips = true;

    g.theme_rails_keynote();

    g.data("Product B", [4, 7, 9, 10, 8, 5]);
    g.data("Product C", [4, 8, 7, 9, 4, 2]);
    g.data("Product D", [2, 3, 1, 5, 6, 8]);
    g.data("Product A", [9, 9, 10, 8, 7, 9]);

    g.labels = {0: 'April', 2: 'Jun', 5: 'September'};

    g.draw();
  </script>

Notice how canvas id and Line class first argument are identical. In this way you connect canvas with its content.

Just as a practise, copy canvas and script code and paste it below, but instead of 'example' put someting like 'example2' and within example2 change width to 400. Refresh your page and you will get one canvas below the other. This is how you can get multiple charts on the same page.

Graph title is first text line, you can change that. Also, if you set graph tooltip to be true, your tooltip will show node information when you move your mouse above it. Check image above and notice 'Product C 7' as an example.

Even better, tooltip box can be styled using CSS. It is within bluff-tooltip div class. This means adaptation to your own data presentation style. Remember not all graph types support tooltips, but many of them does.

OK, now that I've mentioned graph types, I must say there are many of them included into Bluff library. Here is complete list of it: AccumulatorBar, Area, Bar, Dot, Line, Mini.Bar, Mini.Pie, Mini.SideBar, Net, Pie, SideBar, SideStackedBar, Spider, StackedArea and StackedBar.

Total 15 of them! This should be enough for your basic data presentation needs.

You have already seen how Line graph looks like from the image above.

(...)

Now, let's talk more about Themes. You have seen (in first example) something like g.theme_rails_keynote() and you probably wondered what it was? Well, it's one of default style themes applied to data graph. Others default themes are: theme_keynote(), theme_37signals(), theme_odeo(), theme_pastel() and theme_greyscale().

Why rails you may ask, is that coincidence? It's not, actually Bluff library is port of the Gruff graphing library for Ruby. Now you know the truth :)

There are small but significant stylish differences between themes. Here are how same data graph looks like using theme_keynote() and theme_37signals().

Besides these, there are three more built-in themes. One of them is greyscale, it represents just that: greyscale data graph, so no much fun there but usefull in some situations.

Other two build-in themes are Odeo theme and Pastel theme as shown on picture below.

You have a choice to set graph theme manually if you don't like default themes. To do this you use set_theme method before everything else and you have four parameters: colors, marker_color, font_color and background_colors.

(to be continued ...)

Using Adobe Bridge as SVG preview tool

2012-04-17T16:02:00.000-07:00

I'm working on Windows most of the time and it was disappointing to me when I realized I can't preview vector SVG files in Windows Explorer using Thumbnails view. Other image files like JPG and GIF are OK, but SVG just doesn't fit. There is one solution in a form of Explorer plugin called Renesis plugin, but it doesn't work in 100% cases.

However, Adobe Bridge allows you to preview SVG files and you can have even more control with it. When closing Bridge remembers last accessed folder, so you can have your Projects folder available at simple mouse double-click.

From image above you can notice 3 important areas, content area, which represents your project folder, preview area and metadata file information area. Preview are is not fixed, you can change it to suit your needs. If you select multiple files from your content area, all of them will be included in preview.

One more trick, Bridge preview area has useful magnifying glass tool which you can easily move around.

*_*

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.

*_*