FLANTURE

Pyramids using AS3 drawing API

2010-02-09T11:31:00.000-08:00

Let's continue from where we finished last post. We have Triangle AS3.0 class up and running and we want to use it and draw some pyramids.

If you look carefully you will notice that every pyramid consist of two triangles. This is actually simplified version where only two sides are visible and front side triangle has 3 x 60 degrees angles. This is the reason why we need only top pyramid point coordinates and its height, because with some simple math we can easily find other points.

Here is Pyramide.as class


package com.blogspot.flanture.triangles
{
 import com.blogspot.flanture.triangles.Triangle;
 import flash.display.Sprite;
 import flash.geom.Point;
 
 public class Pyramide extends Sprite
 {
  private var p:Point; // top pyramide point
  private var h:Number; // pyramide height
  
  // for pyramide we need single Point and height value
  public function Pyramide(_p:Point, _h:Number)
  {
   p = _p;
   h = _h;
   
   var b:Number = Math.sqrt((4/3)*h*h);
   var p1x:Number = p.x - b;
   var p2x:Number = p.x + b;
   var p1y:Number = Math.floor(p.y + h);
   var p2y:Number = Math.floor(p.y + h);
   
   var t1:Triangle = new Triangle(p, new Point(p1x, p1y), new Point(p2x, p2y), true);
   t1.color = 0xDCF479;
   t1.drawIt();
   addChild(t1);
   
   var p3x:Number = p2x + 0.1 * b;
   var p3y:Number = p.y + 0.7 * h;
   
   var t2:Triangle = new Triangle(p, new Point(p2x, p2y), new Point(p3x, p3y), true);
   t2.color = 0xC9EE33;
   t2.drawIt();
   addChild(t2);
  }
 }
}

Coordinates for smaller triangle free corner are arbitrarily and it depends on how you want your pyramid to look like.

That's why you can try and change 0.1 and 0.7 values in finding p3x and p3y.

Here is the code for test example shown on image above:


import com.blogspot.flanture.triangles.Triangle;
import com.blogspot.flanture.triangles.Pyramide;

var pyr:Pyramide = new Pyramide(new Point(100, 100), 50);
addChild(pyr);

var pyr2:Pyramide = new Pyramide(new Point(250, 125), 75);
addChild(pyr2);

var pyr3:Pyramide = new Pyramide(new Point(300, 180), 150);
addChild(pyr3);

Learn more about triangles and math behind them.

*_*

ActionScript3.0 Triangle Class

2010-02-05T04:58:00.000-08:00

Next two posts are my continuing effort to understand drawing AS3.0 API. Before reading this one you might be interested in previous posts:

- Visual rectangles intersection AS3 example
- Understanding shearing using Matrix object
- Curves and fill with AS3 drawing API
- AS3 drawing API examples

This post will introduce custom ActionScript3.0 Triangle class and next post will show you how to use it with Pyramide class to draw a pyramid using one Point and pyramid height as only parameters. Triangle class is very simple. It uses 3 Point parameters and one Boolean parameter.

public function Triangle(a:Point, b:Point, c:Point, d:Boolean)

Parameter d acts as flag, if you make it TRUE triangle will be drawn on stage with predefined color using 3 Point parameters, but if you make it FALSE, triangle will be crated but it will not appear on the stage right away. This option is added if you want to change triangle color before adding it visually. Now, here is Triangle.as


package com.blogspot.flanture.triangles
{
 import flash.geom.Point;
 import flash.display.Sprite;
 
 public class Triangle extends Sprite
 {
  private var _a:Point;
  private var _b:Point;
  private var _c:Point;
  private var _draw:Boolean;
  private var _color:uint = 0x0000ff;
  
  public function set color(newcolor:uint):void
  {
   _color = newcolor;
  }
  public function get color():uint
  {
   return _color;
  }
  public function set draw(newdraw:Boolean):void
  {
   _draw = newdraw;
  }
  public function get draw():Boolean
  {
   return _draw;
  }
  
  public function Triangle(a:Point, b:Point, c:Point, d:Boolean)
  {
   _a = a;
   _b = b;
   _c = c;
   _draw = d;
   
   // draw it if required
   if(_draw) {
    drawIt();
   }
   
  }
  
  public function drawIt():void
  {
   this.graphics.clear();
   this.graphics.lineStyle(1);
   this.graphics.beginFill(_color);
   this.graphics.moveTo(_a.x, _a.y);
   this.graphics.lineTo(_b.x, _b.y);
   this.graphics.lineTo(_c.x, _c.y);
   this.graphics.lineTo(_a.x, _a.y);
   this.graphics.endFill();
  }
 }
}

Now we need some example to see if it works OK. Create new document and enter next code:


import com.blogspot.flanture.triangles.Triangle;

for (var i:uint=0; i<20; i++) {  
   var t:Triangle = new Triangle(grp(), grp(), grp(), true)  
   addChild(t);
} 

// get random Point
function grp():Point {  
   var xp:Number = Math.random()*stage.stageWidth;  
   var yp:Number = Math.random()*stage.stageHeight;  
   return new Point(xp, yp);
}

You will get 20 random position blue triangles on stage. If you want to change color, before addChild() method put t.color = newcolor; where newcolor is 0x000000 format.

*_*

Visual Rectangles Intersection AS3 Example

2010-02-01T07:46:00.000-08:00

ActionScript3.0 Rectangle class is part of the flash.geom package besides Point, Matrix, Transform and ColorTransform. Any visual representation of rectangles has to be implemented by programmer. One way of doing it is to create new class and here I wanted to include rectangle color as initial parameter, so this new class vRectangle (from visual rectangle, off course) looks something like this:

vRectangle.as


package
{
 import flash.geom.Rectangle;
 import flash.display.Shape;
 import flash.display.Sprite;
 
 public class vRectangle
 {
  public var rect:Rectangle;
  public var shape:Shape;
  
  public function vRectangle(a:Number, b:Number, c:Number, d:Number, e:uint):void
  {
   this.rect = new Rectangle(a, b, c, d);
   this.shape = new Shape();
   this.shape.graphics.beginFill(e);
   this.shape.graphics.lineStyle(2, 0x000000);
   this.shape.graphics.drawRect(rect.x, rect.y, rect.width, rect.height);
   this.shape.graphics.endFill();
  }
 }
}

Class has 4 parameters to define a - rectangle's x position, b - rectangle's y position, c - rectangle's width and d - rectangle's height one additional parameter e - which defines rectangle's color.

This is important because some Rectangle Class methods like intersection and union return Rectangle as result and I wanted to make distinction between objects by using different color.

First example creates two rectangles using newly created vRectangle class, finds and displays intersection as different color rectangle. You can move one rectangle with mouse click and intersection rectangle will change accordingly.

vRecrangleExample1.as


import vRectangle;
import flash.display.Shape;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.Sprite;

stage.addEventListener(MouseEvent.CLICK, onClick);

var board:Sprite = new Sprite();

var r:vRectangle = new vRectangle(100, 100, 100, 100, 0x0000ff);
var p:vRectangle = new vRectangle(125, 150, 100, 100, 0x0000ff);

var s1;
var s2;

s1 = board.addChild(r.shape);
s2 = board.addChild(p.shape);

var res:Rectangle = r.rect.intersection(p.rect);
var vres:vRectangle = new vRectangle(res.x, res.y, res.width, res.height, 0xffff00);

board.addChild(vres.shape);
addChild(board);

function onClick(evt:Event):void
{
 board.removeChild(s1);
 board.removeChild(s2);
 board.graphics.clear();
 
 var r:vRectangle = new vRectangle(100, 100, 100, 100, 0x0000ff);
 var p:vRectangle = new vRectangle(mouseX, mouseY, 100, 100, 0x0000ff);
 
 s2 = board.addChild(r.shape);
 s1 = board.addChild(p.shape);
 
 var res:Rectangle = r.rect.intersection(p.rect);
 var vres:vRectangle = new vRectangle(res.x, res.y, res.width, res.height, 0xffff00);
 board.addChild(vres.shape);
}

Next example aims to include just a little bit more interactivity. It recreates one of the rectangles to mouse position on every enter frame event. Oh, board is drawing board dummy Sprite.

vRectangleExample2.as


import vRectangle;
import flash.display.Shape;
import flash.events.Event;
import flash.display.Sprite;

stage.addEventListener(Event.ENTER_FRAME, onFrame);

var board:Sprite = new Sprite();

var r:vRectangle = new vRectangle(100, 100, 100, 100, 0x0000ff);
var p:vRectangle = new vRectangle(125, 150, 100, 100, 0x0000ff);

var s1;
var s2;

s1 = board.addChild(r.shape);
s2 = board.addChild(p.shape);

var res:Rectangle = r.rect.intersection(p.rect);
var vres:vRectangle = new vRectangle(res.x, res.y, res.width, res.height, 0xffff00);

board.addChild(vres.shape);
addChild(board);

function onFrame(evt:Event):void
{
 board.removeChild(s1);
 board.removeChild(s2);
 board.graphics.clear();
 
 var r:vRectangle = new vRectangle(100, 100, 100, 100, 0x0000ff);
 var p:vRectangle = new vRectangle(mouseX-50, mouseY-50, 100, 100, 0x0000ff);
 
 s2 = board.addChild(r.shape);
 s1 = board.addChild(p.shape);
 
 var res:Rectangle = r.rect.intersection(p.rect);
 var vres:vRectangle = new vRectangle(res.x, res.y, res.width, res.height, 0xffff00);
 board.addChild(vres.shape);
}

It doesn't have to be intersection, you can just as easy use union method with more than two rectangles as well. Rectangles are often used in games development to find objects collision as quick and 'good enough' method instead of exact shape collision detection.

*_*

How to migrate to ActionScript3.0 without losing your soul

2010-01-30T15:31:00.000-08:00

My advice is:

*_*

Understanding shearing using Matrix object

2010-01-20T05:10:00.000-08:00

Any display object in AS3.0 Flash project has transform property and among other things you can use this property to shear (skew) that object. Easy way to do this is to use Matrix object. Now, Matrix object isn't so difficult to understand, although it is scary to some (for unexplainable reasons). All you have to do is understand it's parameters and what they do. Here is simple list.

Matrix(a, b, c, d, tx, ty)

a - x scale of display object
b - y shearing of display object
c - x shearing of display object
d - y scale of display object
tx - x translation
ty - y translation

Let's add some Sprites and see how different parameters values change display object. First create new Flash AS3 project, open actions panel and input these import statements.

import flash.display.Sprite;
import flash.geom.Matrix;
import flash.display.MovieClip;
import flash.events.Event;

We will create few boxes and place them on stage.

var box:Sprite = new Sprite();
box.graphics.lineStyle(1, 0x0000ff); // blue object
box.graphics.drawRect(0, 0, 100, 100);
addChild(box);
box.transform.matrix = new Matrix(1, 0, 0, 1, 50, 100);

var box1:Sprite = new Sprite();
box1.graphics.lineStyle(1, 0x00ff00); // green object
box1.graphics.drawRect(0, 0, 100, 100);
addChild(box1);
box1.transform.matrix = new Matrix(1, .5, 0, 1, 50, 200);

var box2:Sprite = new Sprite();
box2.graphics.lineStyle(1, 0xff0000); // red object
box2.graphics.drawRect(0, 0, 100, 100);
addChild(box2);
box2.transform.matrix = new Matrix(1, 0, .5, 1, 150, 100);

var box3:Sprite = new Sprite();
box3.graphics.lineStyle(1, 0x000000); // black border object
box3.graphics.drawRect(0, 0, 100, 100);
addChild(box3);
box3.transform.matrix = new Matrix(1, .5, .5, 1, 150, 200);

Take a look how different values of b and c parameter shear display object along x and y axis.

This also works for any display object. Feel free to create new MovieClip, give it linkage name gBox. Use next code:

var gBox1:gBox = new gBox();
addChild(gBox1);
gBox1.x = 400;
gBox1.y = 150;

var gBox2:gBox = new gBox();
gBox1.x = 400;
gBox1.y = 150;
addChild(gBox2);
gBox2.transform.matrix = new Matrix(1, .5, .5, 1, 550, 300);

Here is the result.

You can even include shearing effect inside animation. Create another box Sprite and add counter variable. This variable will track amount of shearing. For testing purposes use simple onFrame function.



var box4:Sprite = new Sprite(  );
box4.graphics.lineStyle(1, 0x000000);
box4.graphics.drawRect(0, 0, 100, 100);
addChild(box4);
box4.x = 500;
box4.y = 50;
var counter:Number = 0;

stage.addEventListener(Event.ENTER_FRAME, onFrame, false, 0, true);

function onFrame(evt:Event):void
{
 if (counter > .98) {
  counter = 0;
 }else{
  counter += 0.01;
  box4.transform.matrix = new Matrix(1, 0, counter, 1, 0, 0);
 }
}

That's all. Now you understand shearing using Matrix object. So do I.

*_*

SearchArray AS3 Functions

2010-01-12T06:36:00.000-08:00

By far the most downloaded file from this blog is search array functions which have been downloaded more than 2050 times until today. Mattaka noticed in comment how union function is no different from intersection function, but actually function name is wrong - it is functions which returns intersection of two arrays.

I have rewritten all functions into ActionScript3.0 version and added one more. Combine function takes two arrays and returns single resulting array. If two given arrays are a[1,2,3] and b[4,5,6,7,8] resulting array will combine them into c[1,4,2,5,3,6,7,8].

download as3 SearchArray class

Class comes with usage examples. I'll try to add some new functions soon.

*_*

HowTo create Flash video captions using Subtitle Workshop

2010-01-04T03:39:00.000-08:00

My choice for creating Flash video captions is simple work-flow which uses Subtitle Workshop, free subtitle editor. I'm using software version 2.51 which has support for 56 different formats, but doesn't have support for TT format (Timed Text), W3C standard used for Flash video files. More about Timed Text specifications.

However, you can very easily find this format support and implement it into Subtitle Workshop. Learn about integration. Bottom line is you only need single .cfp (custom format) file.

Download custom format file. (by LongTailVideo)

What you do after downloading this 1 Kb file is unzipp it and move to ...\URUSoft\Subtitle Workshop\CustomFormats folder. Open your Subtitle Workshop software, go to File - New Subtitle and create few dummy lines. When you need to save, choose Save as - custom formats and select (or load) your new TT format.

That's all there is about it, you are ready to make captions with you home made videos. Multilingual support is available.

*_*

Thank you for 2009.

2009-12-29T17:54:00.000-08:00

This year was successful for me both in my private life and outside of it. I got job promotion back in January and I didn't s... it up, which is kinda surprise for me :) When I think about it, now when this year is almost at its end, it was one of the best years recently.

My hobby in blogging and Flash has reached the point when I really feel I can advance very fast and learn new staff quickly, so for next year I'm making one extra step. Although, this road was bumpy and few times I almost dropped it all (blogging + Flash), somehow I always found my way back. I guess I'm more addicted than I realized it!

Actually, the main reason for constantly coming back is YOU! Thousands of readers every month is not something I can ignore, so thank you all for reading my blog. I wish you all happy New Year and good health.

See you in 2010.

*_*

ActionScript TextFormat Animation Effect

2009-12-17T08:58:00.000-08:00

Something I haven't seen around and I have need for is multiple selection tool. What is functionality of it? I want to paste any text inside TextField, than to be able to select one sentence from beginning of text with mouse drag action, then select another sentence from distant part of the text while selection of first sentence stays visible, and so on. After I select everything I wanted, button click action needs to copy multiple selected text inside new TextField, so I can use it in for something else. If I had to select 20 different sentences I'm saving time significantly. Anyone knows about such tool?

Problem is you can set background color only to entire TextField. Now, I'm not familiar with Text Layout Framework and I'm not sure if this can be resolve using it, but even if it can then I need to target only latest Flash Player.

Only solution left is to use TextFormat class to make selected text different from not selected one. Until I make it work, here is one example how to use TextFormat ActionScript class for animation effect.

First we need to do is import some stuff.



import flash.events.Event;
import flash.events.MouseEvent;

Next thing we do is to create our input text field and two text formats, default format and selected text format:



var txtFld:TextField = new TextField();

var defaultFormat:TextFormat = new TextFormat();
defaultFormat.color = 0x000000;
defaultFormat.underline = false;
defaultFormat.bold = false;

var selectedFormat:TextFormat = new TextFormat();
selectedFormat.color = 0x0000FF;
selectedFormat.underline = true;
selectedFormat.bold = true;

We set look and feel for our input text field, some random lorem ipsum text and we add the text field to the stage:



txtFld.name = 'input_field';
txtFld.width = 300;
txtFld.height = 400;
txtFld.x = 50;
txtFld.y = 50;
txtFld.alwaysShowSelection = true;
txtFld.border = true;
txtFld.borderColor = 0x000000;
txtFld.defaultTextFormat = defaultFormat;
txtFld.multiline = true;
txtFld.wordWrap = true;
txtFld.background = true;
txtFld.backgroundColor = 0xCCCCCC;
txtFld.type = TextFieldType.INPUT;
txtFld.text = "Lorem ipsum dolor sit ...";
addChild(txtFld);

In order to make multiple selection functionality work I'll need another output text field, but right now for this example we don't need it, so let's skip that step and write some code to animate our formats:


var i:int = 3;
addEventListener(Event.ENTER_FRAME, onEF, false, 0, true);

function onEF(evt:Event):void {
     if (i < txtFld.length-1){
             txtFld.setTextFormat(selectedFormat, i, i+1);
             txtFld.setTextFormat(defaultFormat, i-2, i-1);
             i+=1;
     }
}

This on enter frame function means text format will change only for 2 characters at the time, while previously changed characters return to default format.

*_*

Flash Builder 4 (almost there)

2009-12-11T16:07:00.000-08:00

Not yet a final release, but Flash Builder 4 (artist previously known as Flex Builder) is in beta 2 stage of development and 60 days trial is available from Adobe Labs page. I guess this link will be valid for final release too :)

You can read about some of the new features in article written by Brian Rinaldi ,Edge December 2009 edition.

*_*

Repetitive Flash Animation Effects Using FuseKit

2009-12-07T16:35:00.000-08:00

Again about FuseKit. It is such wonderful animation tool once you start playing around with it you can't stop.

Because some animation effects are so common I had to write few lines of code to make them easier to use.

First of repetitive Flash animation effect I wanted to replicate is 'breathing effect'. This effect allows movie clip to change it's scale value so it looks like it breaths. I have dummy movie clip logo placed in the center of the stage and code to import FuseKit libraries:


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

var f:Fuse = Fuse.open();
f.label = "animation";
// effect code
Fuse.close();
f.start();

Now, one function solve everything and you put the code instead of commented line above with breath(x); where x is number of iterations. Here is the function:


function breath (a) {
 while (a > 0) {
  Fuse.addCommand("delay", .5);
  Fuse.openGroup();
    logo.tween("_yscale", 200, .5, "easeOutCirc");
    logo.tween("_xscale", 200, .5, "easeOutCirc");
  Fuse.closeGroup();
  Fuse.openGroup();
    logo.tween("_yscale", 100, 1, "easeOutCirc");
    logo.tween("_xscale", 100, 1, "easeOutCirc");
  Fuse.closeGroup();
  a-=1;
 }
}

Breath function can have more parameters if you like, one for delay amount, another for scale value, yet another for animation duration ...

Next repetitive Flash animation effect I wanted to create is 'Jump effect'. Again, I'm using same logo dummy movie clip and make it jump using this function:


function jump (b) {
 while (b > 0) {
  Fuse.addCommand("delay", .5);
  Fuse.openGroup();
    logo.tween("_y", 50, .6, "easeOutCirc");
  Fuse.closeGroup();
  Fuse.openGroup();
    logo.tween("_y", Stage.height/2, .6, "easeInCirc");
  Fuse.closeGroup();
  b-=1;
 }
}

If you want to make movie clip bounce when hits the ground you can use easeOutBounce (or some custom variation, perheps?) instead of easeInCirc.

That's all for now, more of these effects some other time.

*_*

Flex UI design, skins, themes and tools

2009-11-29T12:12:00.000-08:00

Playing online chess with a crazy bot

2009-11-25T10:53:00.000-08:00

Adobe AIR application ChessJam is (no surprise) chess application which offers free playing of your favorite game with other enthusiasts around the globe right from your desktop. Visit and download ChessJam home page. Current application version is 2.1 and it brings some new features like multi-game support (up to 6 games), UI enhamcements, improved rating system etc.

You can read more about how this application is done in a post The making of ChessJam Flex/AIR + ColdFusion + LiveCycle DS = fun project! by author Greg Wilson. He reveals some of the code and application architecture used for making ChessJam.

Since this is commercial project they decided to buy third-party library for AI engine. I'm not totally convinced they did good job with it, as you can see from image below.

Another thing I don't like about it is chat room within current game. Everyone can enter the game you're playing (no private game option) and watch game in progress. You get text notification about it "player238 is observing". Bad thing about it is you don't have an option not to see playing suggestions from others. That's very frustrating. Imagine real-world game where everyone is making comments about your next move, even worse in ChessJam you can't through at them angry, warning look!

Greg also mentioned in his post about more than 1000 users, but very often I'm lucky if I find anyone playing at all! That's it. Generally, I like the app and hope it will be even better in the future.

*_*

Zen-coding: hi-speed HTML and CSS coding

2009-11-24T11:13:00.000-08:00

I just wanted to mention excellent work of Sergey Chikuyonok, who developed a new speedy way of writing HTML code using CSS-like selector syntax. This is really great stuff every web developer should adopt. Take a look at presentation:

Already, plugins are available for few editor and for my favorite Aptana. Here is the instruction Using Zen Coding in Aptana/Eclipse.

*_*

Simple Transparent AIR desktop ... thing

2009-11-17T10:42:00.000-08:00

I read all those news about Adobe AIR and I check out new applications, even use few of them right now, but I haven't done much AIR coding myself. I wanted to change this sad fact and make my own 'hello world' AIR app, something very basic.

My reference was Adobe AIR for JavaScript developers, pocket guide. In this book, there is an example for hello world app using html page as content, but instead I wanted to include one of my previously made SWF files as main content, Windmill Simulation. Just as a test I'll take transparent background, so I need to modify my file a little bit, to remove gradient background and put new background behind controls.

AirWindmillSimulation.xml code:


<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
 <id>com.blogspot.flanture.AirWindmill</id>
 <filename>WindmillSimulation</filename>
 <name>Windmill Simulation</name>
 <description>Desktop Windmill Simulation</description>
 <version>1.0</version>
 
 <initialWindow>
  <content>AirWindmillSimulation.swf</content>
  <title>Windmill Simulation</title>
  <systemChrome>none</systemChrome>
  <transparent>true</transparent>
  <visible>true</visible>
  <minimizable>false</minimizable>
  <maximizable>false</maximizable>
  <resizable>false</resizable>
 </initialWindow>
</application>

I have SDK installed a long time ago and now all I have to do is type: adl airwindmillsimulation.xml within shell. Here is how it looks on my desktop, above Milky Way Center background.

I need to change few more things so I can use this code in other projects, like drag and drop functionality and rezise feature. For 'hello world' - it's great!

*_*

AS3.0 preloader part II : adding transparency

2009-11-05T11:23:00.001-08:00

It occurred to me how it would be much better if loading bar and text field in as3.0 preloader from previous post change alpha during loading process. This is what I wanted to do: both elements (loading bar and text field) start with alpha zero, then it grows constantly to alpha 1 in a moment when 'percent' variable is 0.2 (which means loading bar is loaded 20%). After that alpha remains 1.0 until 'percent' is 0.8 and then starts to fade away so it has alpha 0.0 in a moment when loading is finished. Image explains this idea.

Code for this effect is simple one. Inside ProgressFunction add just few lines:


 if (percent < 0.2) {
  loadedTF.alpha = percent*5;
  lBar.alpha = percent*5;
 }
 if (percent > 0.8) {
  loadedTF.alpha = 1-(percent-0.8)*5;
  lBar.alpha = 1-(percent-0.8)*5;
 }

I'm not some math wizard, but this was really easy to conclude, I only had to draw the numbers on paper. So, it would be great if this works, but it doesn't. It needs one simple hack. Reason is this : as3.0 dynamic text field alpha hack . After I added blur filter to my text field everything worked, although I'm not quite OK with TF rendering quality.

*_*

AS3.0 Flash Preloader With Moving TextField

2009-11-03T06:21:00.000-08:00

This simple ActionScript3.0 preloader has two graphic elements, gradient filled loading bar and text field 'loadedTF'. Code contains two functions, progressFunction and completeFunction. Variable named 'percent' inside progressFunction can have values between 0.0 and 1.0. Since loading bar graphic width = 300 we use single line code:

loadedTF.x = percent * 300;

to move our text field along with loading bar, which we animate using scaleX property.

Dummy page.swf which this preloader uses is small only 22kb, so in order to see preloader working you will have to use view - simulate download when you test preloader movie.

If you have any questions, leave comment.

download source files

*_*

p.s. this is post number 200 !!!

Level Timer code explained

2009-10-31T04:20:00.000-07:00

It seems like my code in How To Create Flash Game Level Timer post is not as straightforward as I thought, because it was rejected as Tutorial on one of the directories, so I decided to give detailed explanation of it.

var count:Number = 0;
// this is a counter variable

var maxCount:Number = 75;
// maxCounter is duration of level in seconds

var intervalID:Number;
// Identification variable for repeating interval function

var timerStarted = false;
// variable which tells us if timer has started or not

var temp:Number;
// variable for shortening code writing

// next, we format and display seconds left
if(maxCount < 60) {
// if we have less then 60 seconds,

timeleft.text = "0 : "+maxCount;
// we display '0 minutes' in our Text Field 'timeleft' and concatenate maxCount seconds

} else {
// but if we have more than 60 seconds left

if((maxCount%60)<10) {
// and if we have to display seconds as one cipher number

timeleft.text = Math.floor((maxCount/60))+" : 0"+(maxCount%60);
// we display zero

} else {
// otherways,

timeleft.text = Math.floor((maxCount/60))+" : "+(maxCount%60);
// if we have two cipher number for seconds, we don't display zero

}
}

startlevel.onRelease = function() {
// when click is released on startlevel button

if(!(timerStarted)) {
// if timerStarted variable is false (we don't want to duplicate interval)

intervalID = setInterval(_root, "hronos", 1000);
// we set interval function 'hronos' to repeat once every second to act as counter

timerStarted = true;
// we declare that timer has started

this._alpha = 0;
// and we make invisible startLevel button.
// We chould also remove it from stage!

}
}

function hronos():Void {
// function hronos repeats every second

if(count < maxCount) {
// if counter is still less than maxCounter

count++;
// we increase counter by 1

temp = maxCount - count;
// temp variable holds seconds left until level end

// next piece of code is for formating and displaying purposes,
// same as above except instead maxCount we have temp variable.
if(temp < 60) {
if(temp < 10) {
timeleft.text = "0 : 0"+temp;
} else {
timeleft.text = "0 : "+temp;
}
} else {
if((temp%60)<10) {
timeleft.text = Math.floor((temp/60))+" : 0"+(temp%60);
} else {
timeleft.text = Math.floor((temp/60))+" : "+(temp%60);
}
}
} else {
// if counter is greater than maxCounter

clearInterval(intervalID);
// we clear our interval

timerStarted = false;
// we declare that timer is out of business

count = 0;
// we set counter to 0 so we can use it again

startlevel._alpha = 100;
// and we make startLevel button visible again

}
}

I hope this explanation is clear enough. If you have any questions, don't hesitate to ask.

*_*

Protecting The Brand

2009-10-23T06:14:00.000-07:00

Few days ago Envato (Australia based startup) announced they have to change one of theirs marketplace's name and URL. They run several websites like ThemeForest, GraphicRiver, AudioJungle, VideoHive, FlashDen and more. Latest one FlashDen is our suspect. What happend is that Adobe Systems Incorporated law firm representative contacted them asking to change their name, as TechCrunch reported. Envato did changed it into ActiveDen to avoid further legal problems.

There are few very strange things here. First, FlashDen is already registered trademark in Australia from August 2008 and therefor Envato should be protected by law, but they decided to change their name and url right away. Second, many websites use similar names like flashcomponents.net, flashloaded.com (to name a few) and a LOT more, but it seems like only Envato is contacted about this issue or at least I'm not aware of others. Idea that this is only first step and that all those websites will be contacted in near future is unlikely because it will be biggest technology suicide of all times!

Community responded and they responded hard. Just check 500+ comments on Envato forum. Some are furious, but many of readers are simply confused. Matthew Craig wrote:

"This is absolutely ridiculous… A community developed around a product to promote that product yet the product thinks it’s harmful to the product having a community promoting it? Makes no sense to me. It’s like mall-cops on a power trip thinking they are real cops."

and Mark wrote:

"I’m pretty annoyed that companies like Apple, and Adobe are so vicious with it’s legal protection of their trademarks. Sad really."

So, how about Adobe? What are their thoughts? Let's see what they say about proper use of the flash trademark:

"Trademarks help protect corporate and product identity, and the Flash® trademark is one of Adobe's most valuable trademarks. By following our guidelines, you can help Adobe protect the Flash brand name. The Flash trademark must never be used as a common verb, as a noun, or as a generic term for animation or video or to describe the output format. The Flash trademark should always be capitalized and should never be used in possessive form or as a slang term. It should be used as an adjective to describe the product and should never be used in abbreviated form."

It seems that Adobe is just trying to protect their brand. There is nothing wrong with it and I think there is no room for talks about 'evil Adobe' (at least not for now). Just imagine what would The Ronald do in same situation. They will sue everyone, right away, until extermination! And after dust comes down, they will sue some more! If you put The Ronald and other big aggressive brands together in same room, Adobe would be like nerd teenager trying to get attention, nothing more. For now.

*_*

How To Create Flash Game Level Timer

2009-10-15T09:18:00.000-07:00

In this post I'll explain how to create Flash game level timer mechanism. Code I'm using here is very simple, it's not something you should use in your final product. Code is ActionScript2.0. Sample FLA is Flash 8 file and it demonstrates how timer works.

Graphic elements are simple. We have startBtn movie clip in Library with 'startlevel' instance on Stage. Another graphic element is dynamic single-line text field with instance name 'timeleft'. When you start sample file situation our text field shows time left in minutes and seconds. Start level button is visible and waiting for click. When that happens button get zero alpha (should be moved from Stage) and countdown timer start to work.

Some formating is done, so numbers are displayed like they should, instead of 1:1 we have 1:01 etc. Timer resets when reach 0:00 and start level button is visible again, waiting for action. In real time situation, you can have different level durations for different levels. That means you should replace maxCount variable with Array of different intervals each represents duration of levels in seconds.

Here is the code:


var count:Number = 0;
var maxCount:Number = 75;
var intervalID:Number;
var timerStarted = false;
var temp:Number;

if(maxCount < 60) {
 timeleft.text = "0 : "+maxCount;
} else {
 if((maxCount%60)<10) {
  timeleft.text = Math.floor((maxCount/60))+" : 0"+(maxCount%60);
 } else {
  timeleft.text = Math.floor((maxCount/60))+" : "+(maxCount%60);
 }
}

startlevel.onRelease = function() {
 if(!(timerStarted)) {
  intervalID = setInterval(_root, "hronos", 1000);
  timerStarted = true;
  this._alpha = 0;
 }
}

function hronos():Void {
 if(count < maxCount) {
  count++;
  temp = maxCount - count;
  if(temp < 60) {
   if(temp < 10) {
    timeleft.text = "0 : 0"+temp;
   } else {
    timeleft.text = "0 : "+temp;
   }
  } else {
   if((temp%60)<10) {
    timeleft.text = Math.floor((temp/60))+" : 0"+(temp%60);
   } else {
    timeleft.text = Math.floor((temp/60))+" : "+(temp%60);
   }
  }
 } else {
  clearInterval(intervalID);
  timerStarted = false;
  count = 0;
  startlevel._alpha = 100;
 }
}

*_*

Free Microblog Flash Widget v1.0

2009-10-07T10:04:00.000-07:00

Microblog is Flash widget that represents tiny version of blog or website. It can be embedded on blog sidebar or as standalone application. Microblog is XML based widget. Entire content is stored and controlled from external data.xml file. You don't need any previous Flash knowledge to change the content. Simply, by changing text inside data.xml widget is updated.

Main text field is scrollable. Use up and down triangles on right to navigate current page. If page has long text then navigation is there to help. You can also expand main text filed by clicking on rectangle placed between navigation triangles. Clicking again on same rectangle will shrink text field to it's original size.

When user click on page title, Microblog takes him to original blog page or custom web location. Links are also stored inside XML file.

On the left side of the widget you can load preview images in few formats: JPEG, PNG, GIF and even SWF. Preview files should be 60 x 60 pixels. Microblog free Flash widget is resizable. Original size is 250 x 125 pixels.

Download archive file which includes: microblog.swf, data.xml, folder Images and help.pdf file with instructions on how to use and modify Microblog widget content. No Flash knowledge is required.

Microblog movie clip contains link to this blog.

You are free to use Microblog Flash Widget in any way you desire as long you don't sell it, claim it's your work, modify or use source without author permission.

DOWNLOAD MICROBLOG WIDGET V1.0

For custom solution and support please contact.

*_*

Myth hacked: Flash on iPhone

2009-10-06T05:11:00.000-07:00

Watch and weep!

*_*

Flash Catalyst beta 2

2009-10-05T10:04:00.000-07:00

There was a lot of mixed reactions on beta 1 release of Flash Catalyst, from those who were praising it like Flash On The Beach visitors to others who were completely confused about where to include it concerning development workflow.

Adobe has just released beta 2 of Flash Catalyst with lots of new stuff and improvement. Ryan Stewart gives you an introduction via his screencast.

*_*

Windmill Farm Flash Animation

2009-09-26T17:44:00.001-07:00

This next Flash animation is about clean energy sources, renewable energy, green technology. It represents windmill farm. Animated elements are windmills themselves, but also clouds are moving in same direction and with slightly different speed to create realistic effect.

File is suitable for ecology and related blogs and websites, various presentation projects, etc. This Flash file is free to use in non-commercial projects. Uploaded zip archive contains 6 Kb Windmill Farm Flash Animation and readme.txt file with more information about the file.

Windmill Farm Flash Animation is inspired by one of the posts from March this year Free Flash Windmill Simulation File (downloaded over 400 times). Leave comment with your thoughts and suggestions.

DOWNLOAD WINDMILL FARM ANIMATION

Animation image preview:

*_*

Thiefs among us (stolen content)

2009-09-25T15:10:00.000-07:00

This is screenshot of completely stolen post from this blog. Here is my original post and here is the location of stolen content *. Post is 100% stolen, even swf example and source. Off course, no contact information on thief's blog, but since it's on Blogger and he uses AdSense I know who should I contact about it.

I don't mind fair use with back link, but this is really ridiculous.

* UPDATE: issue resolved - content removed by blog author.

*_*