FLANTURE

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.

*_*

12 New Free Flash Analog Clocks

2009-09-21T05:55:00.001-07:00

Back in July when I started new blog with free Flash clocks, my goal was to create one new clock per day. I knew this goal is very high, but I needed it in order to do as many of them as possible. It is the only way to make progress and to some extend I did it because there is huge difference in design between first clocks and latest ones. Actually, design is all progress for now. All clocks are analog, but I do plan to make digital one also.

My latest analog clock has taken my experience one step further because it is first animated free Flash clock at Flash2nd. I would like to explore animations within these small Flash widgets and to extend this category as much as possible.

Until today 43 clocks are published. Flash2nd blog has sidebar Top Downloads section (updated weekly) with number of downloads and reference to last week position:

= - same position as last week
A - going up
V - going down
o - new clock on the list

These numbers are just one feature of many useful ones my clocks storage Box.net has.

During these almost 3 months I have introduced new blog header which I'm really proud of, linkWithin widget that does excellent job on blogs with images in every post and even joined Entrecard community. My current plans are to continue with making free Flash clocks until 100 of them and then we will see what to do next.

You can download all 43 clocks from Flash2nd or just take these 12 top downloaded free Flash clocks. You are free to do with them whatever you want, but you can't sell them, modify them or claim it's your work. Thanks.

DOWNLOAD FREE FLASH CLOCKS (109 Kb)

Image below shows some clocks that didn't get into Top Downloads.

*_*

Flash & Flex Developers Magazine Now Free

2009-09-11T15:50:00.000-07:00

Back in May this year I wrote about how dark ages are over, how new magazine entirely dedicated to Flash and Flex community has populated that void space of publications. Good news is - magazine is still around, but even better news is - magazine is now completely free. (sorry, no bad news this time)

Editor Ewa Samulska wrote:

"Making the switch from print to digital publishing is a big step. So here we are – 100% digital publication and best of all it’s FREE – and available worldwide. If I can promise one thing – here it is: Our coverage will not change – it will only be better. Promise! Hopefully you will stay with the magazine and help us create the Best magazine for Flash and Flex Developers in the world."

I think this is just the right step to do and much better business model than subscription. You can download all 7 issues from their website and start exploring right away - I know I am :)

*_*

Curves and Fills with AS3 Drawing API

2009-09-07T04:11:00.001-07:00

After I learned to draw straight lines with ActionScript 3.0 it’s time to go further and to see what else can I accomplish using ActionScript 3.0 Drawing API.

There are several built-in functions for drawing simple shapes like drawCircle(), drawEllipse(), drawRect() and drawRoundRect() for rectangles. Since almost every complex shape is some combination of simple ones these functions are solid ground to start with.

One interesting thing about fills is that overlapping shapes change the way fill is displayed. If you have two overlapping circles their intersection is without fill. Take a look at this code:


import flash.display.*;
var d:Sprite = new Sprite();
d.graphics.lineStyle(1, 0x000000);
d.graphics.beginFill(0xff0000, 1);
d.graphics.drawCircle(200, 200, 100);
d.graphics.drawCircle(300, 200, 100);
d.graphics.endFill();
addChild(d);

Result is shown on image below. It seems that any area within even number of shapes is without fill and area within odd number of shapes has its fill intact.

We have to pay attention about this to avoid unwanted things, but this also can be used to create some interesting effects. Next code uses for loop to draw several overlapping circles:


import flash.display.*;
var d:Sprite = new Sprite();
var i:uint;
d.graphics.lineStyle(1, 0x000000);
d.graphics.beginFill(0xff0000, 1);
for(i= 0; i<10; i++) {
 d.graphics.drawCircle(200, 200, (i*5)+50);
 d.graphics.drawCircle(300, 200, (i*5)+50);
}
d.graphics.endFill();
addChild(d);

Here is the output:

As I mentioned in previous post about drawing, best practice to draw lines and shapes with ActionScript 3.0 is to use rulers or even better plain paper with Flash coordinate system. This advice is valuable even more for drawing curves because you have two extra parameters for control point, its X and Y coordinates. Here is just one example for now, more of them probably in separate post when I have more time.


import flash.display.*;
var d:Sprite = new Sprite();
d.graphics.lineStyle(2, 0x000000);
d.graphics.beginFill(0xff0000, 1);
d.graphics.moveTo(100, 100);
d.graphics.lineTo(200, 100);
d.graphics.curveTo(250, 150, 200, 200);
d.graphics.lineTo(100, 200);
d.graphics.curveTo(-50, 150, 100, 100);
d.graphics.moveTo(200, 100);
d.graphics.curveTo(150, 150, 200, 200);
d.graphics.endFill();
addChild(d);

*_*

15 websites where you can submit Flash tutorials

2009-09-01T09:12:00.000-07:00

Blogosphere is like Universe itself. Almost endless. Searching for good content can be imposible task and this just might be the reason why not many people know about your great blog, awesome posts and incredible Flash tutorials. However, there are shortcuts inside Blogosphere (just like wormholes in space-time), and those can bring you closer to your readers in no time. These shortcuts are Flash tutorials directories, places where you can submit your work and places where people often search for content just like yours.

My experience is limited to pixel2life for now, but that's why I'm writing this post, as self-reference of where to submit all those Flash tutorials. My profile at pixel2life consist of 7 tutorials + 1 in approval queue. I have 5000+ views from them. Not bad.

Here is the list of 15 places where you can submit your Flash Tutorials:

1. Pixel2life
2. FlashDesignerZone
3. FlashPerfection
4. BeeDigital (earn $20 per tutorial)
5. FlashAdvisor
6. NewGrounds
7. TutPlus
8. MyFlashTutorials
9. AdobeFlashPack
10. CreateBlog
11. TutorialGuide
12. TutorialOutpost
13. InfiniteeDesigns
14. Tutorialized
15. Flashkid

Do you know another one? If you do, please do tell me about it.

*_*

Flash AS3 Star System Simulation Tutorial

2009-08-24T09:07:00.000-07:00

Download Tutorial as PDF file.

As I promised, earlier this step-by-step tutorial will show you how you can create your own working star system simulation using Flash and ActionScript3.0 code. I like to think this is tutorial for beginners because it is written by one and code I'll explain here is very simple just around 50 lines stored in single class. This star system simulation is not finished work, but rather just something to start from building further.

Let's start with planets. I will not explain here how you can create images of planets, just search the web, there are many good tutorials out there about it. You can use some dummy images for start, just different size circles. Import them with File . Import . Import to library. Create movie clips for your planets, center images and name them as you like it doesn't really matter.

For every planet movie clip in your library you will have to set Linkage parameters like image shows. For class parameter use different names. I have only two planets in this example, but you can use more if you like. My planets classes are PlanetSmall and PlanetBig.

We are almost done with Flash, we only need to declare document class. Within properties panel set StarSystem as Document class. You can also make full folders structure if you like and use com.blogspot.flanture.animations.StarSystem as Document class name, but I want to keep this simple.

Create new ActionScript file in same folder as your StarSystem.fla, name it StarSystem.as and open it for editing. Now the code.

First we import some libraries:


package
{
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.display.Stage;

We define our class:


 public class StarSystem extends Sprite {
 
  private var p1:PlanetSmall;
  private var p2:PlanetBig;

Variables p1 and p2 are types of PlanetSmall and PlanetBig. You will need one variable for every planet you have.

Next we define two variables to represent center of the stage:


  private var xCenter:Number = stage.stageWidth/2;
  private var yCenter:Number = stage.stageHeight/2;

Now, for every planet we need different parameters. First parameter is angle and here we define starting animation angle, two more parameters are xRadius and yRadius needed to define elliptic movement of planets and one more parameter is planet moving speed. So, for my two planets I have:


  private var angle:Number = 20;
  private var xRadius:Number = 250;
  private var yRadius:Number = 150;
  private var speed:Number = .008;
  
  private var _angle:Number = -45;
  private var _xRadius:Number = 100;
  private var _yRadius:Number = 65;
  private var _speed:Number = .01;

All these variables are something you need to test for yourself to find right numbers.

Then we define main method,


  public function StarSystem() {
   init();
  }

note how main method must be declared as public not private. Init function goes like this:


  private function init():void {
   p1 = new PlanetSmall();
   addChild(p1);
   
   p2 = new PlanetBig();
   addChild(p2);
   
   addEventListener(Event.ENTER_FRAME, onEnterFrame);
  }

Here we simple set p1 as new PlanetSmall instance, and p2 as PlanetBig instance. Then we add those instances to the stage using standard addChild method. Finally we have event listener which file will fire on every enter frame event and this is where we define planets movement:


  public function onEnterFrame(event:Event):void {
   p1.x = xCenter + Math.sin(angle) * xRadius;
   p1.y = yCenter + Math.cos(angle) * yRadius;
   p1.scaleX = p1.scaleY = p1.y/400;
   p1.alpha = p1.scaleX*2;
   angle += speed;
   
   p2.x = xCenter + Math.sin(_angle) * _xRadius;
   p2.y = yCenter + Math.cos(_angle) * _yRadius;
   p2.scaleX = p2.scaleY = p2.y/300;
   p2.alpha = p2.scaleX*1.2;
   _angle += _speed;
  }
 }
}

Last part of the code defines elliptic movement of the planets and it consists of two parts. If you have more planets you will need one block of code for every planet. Position x of the planet is calculated using sin function and y position is calculated using cos function. We use scale functions to make our planets smaller when they are away from viewing point (means they have smaller y value) and bigger when they are closer (bigger y value). Remember, Flash has different coordinate system, x axis has higher values from left to right and y axis has higher values from top to down.

We also set alpha as function of scale which is nice trick to use. Feel free to play with these numbers and see what suits your needs. Last line of the code changes angle of the planets as function of defined speed and this happens every new frame. Test your star system.

I hope you will make better looking rotating planets , some supernovas, stars and galaxies on background, animated Sun, maybe some starship or even planets with moons orbiting around them! When you do that, send me the link, I would like to see your creation.

Thanks for your time.

*_*

Next Flash Tutorial Sneak Peek

2009-08-21T09:30:00.000-07:00

I'm working on yet another Flash tutorial and this time subject is how to create Star System Simulation using ActionScript 3.0 in few easy steps.

Tutorial is almost finished and it will be published probably on Monday. Until then take a look at live example.

*_*

Custom Winter Track

2009-08-12T04:25:00.000-07:00

One of the tutorials on older Flanture blog was Flash Racing Game Custom Track Tutorial. Since Mediafire swallowed my files, here is another place (reliable Box.net) where you can download winter track, or just play right now.

Anyone knows if GameSheep ever finished part two of the tutorial? Anyway, you can learn a great deal from part one.

There wasn't many posts here about flash games and development, if any, because my old blog was right place for it, but now since it's officially closed, you can expect some games related ramblings here too.

Good place to start with searching for soul mates and flash games developing collaborations is Kongregate forum. Enjoy.

*_*

AS3 Loading Animation Tutorial

2009-08-04T07:06:00.000-07:00

I've seen many loading animations people selling via Envato Flash Marketplace and other flash stock websites at prices like $1, $2 or more. Some of them are really great and some of them are just regular. Truth is, you can make simple loading animation in minutes and enhance it as you like and I'm going to show you how in this step-by-step tutorial.

step 1:

Create new Flash document. Choose File _ New... and than Flash File (ActionScript 3.0). Take a look at how finished loading animation will look like. It will display 6 rectangles and we will simulate 'color movement'.

step 2:

We need only one movie clip, so go to Insert _ New Symbol (or use keyboard shortcut CTRL+F8, choose Movie Clip and name it 'rectangle'. While in edit mode choose Rectangle tool, set black color for stroke and yellow for fill #ffff00. Draw any rectangle on stage, select it and type these setting width:20 height:50 X:0 and Y:0 in Property panel.

Now, on movie clip's timeline, right-click on first frame, copy it and paste it on second frame. Do the same for frames 3, 4, 5 and 6. Get back to frame 2, deselect shape and select only fill. Choose slightly brighter yellow color #ffff33. Continue same thing, for frame 3 fill set #ffff66, for frame 4 #ffff99 for frame 5 #ffffcc and finally for frame 6 use white #ffffff.

step 3:

We are done with our movie clip, go back to scene 1. One more things, rectangle movie clip is now in library. Right click on it and choose Linkage. Set properties like image shows and click OK.

step 4:

All we need to do now is write some AS3 code. Click F9 on keyboard to open Actions panel for first frame of main timeline. Paste next code:



var s1:rectangle = new rectangle();
addChild(s1);
s1.x = 200;
s1.y = 50;

var s2:rectangle = new rectangle();
addChild(s2);
s2.x = 170;
s2.y = 50;

var s3:rectangle = new rectangle();
addChild(s3);
s3.x = 140;
s3.y = 50;

var s4:rectangle = new rectangle();
addChild(s4);
s4.x = 110;
s4.y = 50;

var s5:rectangle = new rectangle();
addChild(s5);
s5.x = 80;
s5.y = 50;

var s6:rectangle = new rectangle();
addChild(s6);
s6.x = 50;
s6.y = 50;

s1.addEventListener(Event.ENTER_FRAME, onFrame1);

function onFrame1(evt:Event) {
s2.gotoAndPlay((s1.currentFrame+1)%6);
s3.gotoAndPlay((s1.currentFrame+2)%6);
s4.gotoAndPlay((s1.currentFrame+3)%6);
s5.gotoAndPlay((s1.currentFrame+4)%6);
s6.gotoAndPlay((s1.currentFrame+5)%6);
}

Code is simple. Variables s1 .. s6 are our rectangles. We add them to Stage with addChild and we set positions using x and y movie clip properties, since rectangle class extends Movie Clip class, remember Linkage step?

Finally we attach onFrame1 function to s1 instance on enter frame event. Formula (s1.currentFrame+i)%6 will give us values for i=1, 2, ..., 5 which means all rectangles will have different colors during current frame - and that's how we simulate color movement needed for loading animation.

Feel free to improve appearance and play with the code. Final swf is only 805 bytes.
That's all. Easy, right?

*_*

AS3 Drawing API examples

2009-07-30T13:13:00.001-07:00

OK, so with ActionScript 3.0 drawing API you can draw almost anything. You can use straight or curved lines, solid colors or gradients and more. I have been searching for some interesting drawing examples but almost everyone will show you single example and that's it.

In order to feel comfortable with this library I needed some practice, so here they are - some basic shapes with AS3 drawing library.

shape 1 ActionScript class:


package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape1 extends MovieClip {
  
  public function shape1() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(100,160);
   this.graphics.lineTo(100,100);
   this.graphics.lineTo(120,100);
   this.graphics.lineTo(120,120);
   this.graphics.lineTo(140,120);
   this.graphics.lineTo(140,100);
   this.graphics.lineTo(160,100);
   this.graphics.lineTo(160,160);
   this.graphics.lineTo(140,160);
   this.graphics.lineTo(140,140);
   this.graphics.lineTo(120,140);
   this.graphics.lineTo(120,160);
   this.graphics.endFill();
  }
 }
}

shape 2 ActionScript class:


package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape2 extends MovieClip {
  
  public function shape2() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(130,100);
   this.graphics.lineTo(140,120);
   this.graphics.lineTo(160,120);
   this.graphics.lineTo(150,140);
   this.graphics.lineTo(110,140);
   this.graphics.lineTo(100,120);
   this.graphics.lineTo(120,120);
   this.graphics.endFill();
  }
 }
}

shape 3 ActionScript class:


package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape3 extends MovieClip {
  
  public function shape3() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(120,100);
   this.graphics.lineTo(150,100);
   this.graphics.lineTo(170,140);
   this.graphics.lineTo(100,140);
   this.graphics.endFill();
  }
 }
}

shape 4 ActionScript class:


package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape4 extends MovieClip {
  
  public function shape4() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(100,110);
   this.graphics.lineTo(110,100);
   this.graphics.lineTo(120,110);
   this.graphics.lineTo(130,100);
   this.graphics.lineTo(140,110);
   this.graphics.lineTo(150,100);
   this.graphics.lineTo(160,110);
   this.graphics.lineTo(160,150);
   this.graphics.lineTo(100,150);
   this.graphics.endFill();
  }
 }
}

shape 5 ActionScript class:


package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape5 extends MovieClip {
  
  public function shape5() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(130,100);
   this.graphics.lineTo(150,110);
   this.graphics.lineTo(160,130);
   this.graphics.lineTo(150,150);
   this.graphics.lineTo(130,160);
   this.graphics.lineTo(110,150);
   this.graphics.lineTo(100,130);
   this.graphics.lineTo(110,110);
   this.graphics.endFill();
  }
 }
}

Best way to do this is to draw your shapes on paper with coordinate system in place, but remember not Cartesian system but Flash coordinate system with (0,0) point started in top left corner of the Stage.

These shapes don't have to be simple. If we take last shape, number 5 and just keep adding new lines, we can get shape number 6.


package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape6 extends MovieClip {
  
  public function shape6() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(130,100);
   this.graphics.lineTo(150,110);
   this.graphics.lineTo(160,130);
   this.graphics.lineTo(150,150);
   this.graphics.lineTo(130,160);
   this.graphics.lineTo(110,150);
   this.graphics.lineTo(100,130);
   this.graphics.lineTo(110,110);
   this.graphics.endFill();
   
   this.graphics.beginFill(0xeffffff);
   this.graphics.moveTo(120,120);
   this.graphics.lineTo(140,120);
   this.graphics.lineTo(140,140);
   this.graphics.lineTo(120,140);
   this.graphics.endFill();
  }
 }
}

This kind of drawing we used to call 'turtle graphics'.
Next time some examples including curves and gradients.

*_*

ActionScript Random Number Generator With Blur Effect

2009-07-24T08:15:00.000-07:00

There was a few posts on my older blog in form of tutorial on how to create random number generator with blur effect. I'm near bandwidth limit, so no live example, but click on preview image to download files.

here is required code



// author: FLANTURE http://flanture.blogspot.com
// date: 24 Jan 2009

import flash.filters.BlurFilter;

// function for roll_mc movie clip onPress action. If timer has not started,
// that means there is no action in progress, so we can start one.

roll_mc.onPress = function() {
 if (!timerStarted) {
  var filter:BlurFilter = new BlurFilter(60, 120, 1);
  var filterArray:Array = new Array();
  filterArray.push(filter);
  num1_txt.filters = filterArray;
  var newNumber1 = Math.floor(Math.random()*10);
  num1_txt.text = newNumber1;
  num2_txt.filters = filterArray;
  var newNumber2:Number = Math.floor(Math.random()*10);
  num2_txt.text = newNumber2;
  num3_txt.filters = filterArray;
  var newNumber3:Number = Math.floor(Math.random()*10);
  num3_txt.text = newNumber3;
  timerStarted = true;
 }
}

// functions for restoring blur effect

function restoreBlur1() {
  num1_txt.filters = new Array(filter);
}
function restoreBlur2() {
  num2_txt.filters = new Array(filter);
}
function restoreBlur3() {
  var filter:BlurFilter = this.filters[0];
  filter.blurY = 0;
 filter.blurX = 0;
  num3_txt.filters = new Array(filter); 
}

// next function controls when blur should stop and numbers should display.

onEnterFrame = function () {
 if (timerStarted) {
  if (counter < thirdDigitStop) {
   counter += 1;
   if (counter == firstDigitStop) {
    restoreBlur3();
   }
   if (counter == secondDigitStop) {
    restoreBlur2();
   }
  } else {
   timerStarted = false;
   counter = 0;
   restoreBlur1();
  }
 }
}

// you can change firstDigitStop and other variables to suit your needs.
// numbers represent frames, not seconds.

onLoad = function () {
 timerStarted = false;
 counter = 0;
 firstDigitStop = 8;
 secondDigitStop = 16;
 thirdDigitStop = 24;
}

This example can be used as slot machine simulation or anything similar you can think of.

*_*

Old Flanture will be assimilated. Resistance is futile.

2009-07-16T05:55:00.000-07:00

Back in 2007 Flanture has started as two separate blogs. This one is, as you might already know, more about ActionScript, Flash and Flex stuff. The other blog has actually started in January 2007, three months before this one, but it was intended from beginning for Flash games related stuff and just a little bit of flashlite.

Things have changed in the meantime and since I have few new projects going on and time is most valuable asset I decided to pull the plug for my Blog.com hosted blog. This means I will port some of posts here, but not in original state. Posts will be rewritten and updated, so you can expect some Flash games related code here.

Btw, Blog.com home page has changed recently and I find out they moved to WordPress, but right now it seems nothing is working as it should. I couldn't even publish my farewell post and my blogroll section is gone even though on dashboard it is marked as visible.

Free Flash Clocks projects is doing just fine. I have managed to publish 20 clocks in 20 days, as I promised to myself, one clock per day. Today's special clock is honoring King of pop Michael Jackson. I didn't do much marketing except on Twitter and few other blogs but I plan to do it besides starting with custom clocks.

*_*

Manipulating Shapes Using Bone Tool in Flash CS4

2009-07-10T07:37:00.001-07:00

Bone Tool in Flash CS4 can be used in various ways to create IK effects with animations, but also you can use this powerful tool to manipulate shapes. Here is quick tutorial on how to do it.

Create new Flash AS3 file. Go to Insert - new symbol or CTRL+F8 to create new movie clip. Give it some name or leave default, it doesn't matter.

Select Polystar Tool and draw single pentagon shape on Stage. Now, select Bone Tool from tool box or press X on keyboard. You will create 5 bones all starting from the center of pentagonal shape all the way to shape vertices like image shows.

Now, you have noticed new Armature layer and that's what will work on next. We have to introduce some new armature positions, so right click on frame 10 and select insert pose. Use selection tool (V) to move bones around. Continue to do same thing on frames 20, 30, etc.

Finally when you think you have enough changes, move for another 10 frames and insert another pose. Now, you can actually copy and past different poses with right click on specific armature frame, but you will need a lot of patience to make this operation work. Paste first pose onto last armature frame.

When you are done, go back to do Scene 1 and from library drag and drop movie clip instance on the Stage. That's it, test your movie.

This is just one simple example on how to use bone tool to manipulate shapes in Flash CS4, but that's enough for you see how incredible effects can be achieved with just playing around with new Flash tools.

*_*

New Blog with free flash clocks

2009-07-04T07:32:00.001-07:00

If you are not first time here you probably know about few free Flash clocks I published earlier like:

Analog Clock Worldmap or
Classic Blue Clock

I have finally managed to establish new blog for my clocks collection (currently I have around 20 of them) and I have excellent domain for it Flash2nd.com. For now I have published only few of them and not the best ones, but first ones I made. Some of them are even two years old!

My plan is to publish one new clock each day for at least next 3 months, but we'll see how that goes. Feel free to download any of them (or all), leave comments and make suggestions. This is very work-in-progress blog, so nothing spectacular yet.

Thanks for support.

*_*

Flash gravity example (black hole simulation)

2009-06-22T09:00:00.000-07:00

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

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

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


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

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

movie example

*_*

Create Flash Banner Using FuseKit Simple Tutorial

2009-06-16T08:01:00.000-07:00

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

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

step 1

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

step 2

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

step 3

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

step 4

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


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

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

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

Fuse.addCommand("delay", 2);

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

Fuse.addCommand("delay", 2);

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

Fuse.close();

f.start();

Test your movie.

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

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

DOWNLOAD banner example

*_*