29 December 2009

Thank you for 2009.

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.

*_*

17 December 2009

ActionScript TextFormat Animation Effect

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.

*_*

11 December 2009

Flash Builder 4 (almost there)

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 :)

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

*_*

07 December 2009

Repetitive Flash Animation Effects Using FuseKit

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 ...

flash animation effect with fusekit
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.

*_*

29 November 2009

Flex UI design, skins, themes and tools

related post: flex components styling

If you ever wondered how to download Flex Style Explorer v3, one of the ways is to open link in a browser (IE) and search for specific swf in browser's cache folder. Now you can use Flex Style Explorer for making skins and themes. If you are interested to read more about this subject here is list of 15 Tutorials for Creating Skins and Themes (UI Design) in Flex.

You don't wanna anything to do with previous versions of Flex, then check this Introducing skinning in Flex 4 beta, written by Ryan Frishberg. More dev details on Flex 4 (Gumbo), advanced FXG and skinning at Andy Hulstkamp's blog.


Gumbo City Rating Demo

That's not all. Here is one small hidden treasure (at least for me :D) at Flexets, Flex Skinning resources. All of the Explorers like Flex 3 Charting Components Explorer, Custom Easing Explorer or Audio Visualization Explorer you can open in your browser and download for later use. Great.

*_*

25 November 2009

Playing online chess with a crazy bot

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.

Adobe AIR chess application
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.


*_*

24 November 2009

Zen-coding: hi-speed HTML and CSS coding

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.

*_*

17 November 2009

Simple Transparent AIR desktop ... thing

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.

adobe air application example
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!

*_*

05 November 2009

AS3.0 preloader part II : adding transparency

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.


as3 preloader alpha hack

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.

*_*

03 November 2009

AS3.0 Flash Preloader With Moving TextField

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.

as3 flash preloader
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.

as3 flash preloader
If you have any questions, leave comment.


*_*

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

31 October 2009

Level Timer code explained

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.

*_*

23 October 2009

Protecting The Brand

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.

*_*

15 October 2009

How To Create Flash Game Level Timer

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;
}
}



*_*

07 October 2009

Free Microblog Flash Widget v1.0

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.




For custom solution and support please contact.


*_*

06 October 2009

Myth hacked: Flash on iPhone

Watch and weep!





*_*

05 October 2009

Flash Catalyst beta 2

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.




*_*

26 September 2009

Windmill Farm Flash Animation

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.


Animation image preview:

Windmill Farm Animation preview
*_*

25 September 2009

Thiefs among us (stolen content)


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.

*_*

21 September 2009

12 New Free Flash Analog Clocks

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.




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

free flash clocks
*_*

11 September 2009

Flash & Flex Developers Magazine Now Free

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 :)

free flash magazines covers
*_*

07 September 2009

Curves and Fills with AS3 Drawing API

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.

two circles intersection


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:

multiple circles overlapping


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);


drawing curves with AS3 API


*_*

01 September 2009

15 websites where you can submit Flash tutorials

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.

*_*

24 August 2009

Flash AS3 Star System Simulation Tutorial

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.

*_*

21 August 2009

Next Flash Tutorial Sneak Peek

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.







*_*

12 August 2009

Custom Winter Track

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.


flash racing game track preview
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.


*_*

04 August 2009

AS3 Loading Animation Tutorial

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.

as3 loading animation tutorial
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.

as3 loading animation tutorial
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?


*_*

30 July 2009

AS3 Drawing API examples

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.

actionscript 3.0 drawing API example shapesshape 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.


*_*

24 July 2009

ActionScript Random Number Generator With Blur Effect

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.

Flash random number generator


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.

*_*

16 July 2009

Old Flanture will be assimilated. Resistance is futile.

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.

flash related blog preview
*_*

10 July 2009

Manipulating Shapes Using Bone Tool in Flash CS4

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.


*_*

04 July 2009

New Blog with free flash clocks

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


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.

free flash clocks blog header

*_*

22 June 2009

Flash gravity example (black hole simulation)

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






*_*

16 June 2009

Create Flash Banner Using FuseKit Simple Tutorial

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'.


fuse flash banner tutorial preview

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.



*_*

12 June 2009

Flash Platform Books

Every once and a while when I come across some Flash Platform related book I have this habit to post about it, just as a self reference thing, but as time passes I realized how there were lots of this reviews on my blog.

However, I also noticed how learning from a book can be hard sometimes. This doesn't have to apply to everyone, off course, it is probably an individual thing, but quality of the book is also important. There are many 'reference-kinda' books out there with lists of thing you can do, basic programming techniques descriptions within 800+ pages you can read for days or even weeks and not learn much.

For me personally, best ones are real life examples tutorials, concrete knowledge which you can implement and expand right away. This kind of books I would buy any day.


Here is the list of Flash Platform books related reviews or mentions including Adobe AIR and Flex:



*_*

05 June 2009

Using ActionScript Point class distance method for constant speed moving in roadMap function

This have to be longest post title ever, at least it is in my blogging history, but it precisely explains post subject and I was so tempted to use it, I couldn't resist.

Ok, first of all if you are not familiar with roadMap function, don't worry, it's a custom function which enables movie clip movement along given points on Stage. Read about it in this post and download example.

Code works just fine, but there is one thing missing. Object speed between different points is inside arrs Array and has to be added manually, thus it is very hard to achieve same speed along entire path without a lot of calculations. To address this issue some basic math knowledge is required.

If we accept that speed = distance / time, to achieve constant speed we have to know distances between different points. Lets say path consist of two parts, first one is 10 pixels and second is 100 pixels. We want our object to move with speed 10 pixels per frame on entire path. In that case v1, speed on part one should be 10 pixels / frame same as v2, speed on second part. All we have to do is to push value of (distance / 10) to arrs Array and constant speed is there, because actually we are pushing values for object speed.

Changes we have to make are inside onMouseUp function where instead

arrs.push(someValue);

we have next code:


if(arrx.length > 1) {
var point_1:Point = new Point(arrx[arrx.length-1], arry[arry.length-1]);
var point_2:Point = new Point(arrx[arrx.length-2], arry[arry.length-2]);
var distanceBetween:Number = Point.distance(point_1, point_2);
arrs.push(distanceBetween/10);
}else{
var point_1:Point = new Point(arrx[arrx.length-1], arry[arry.length-1]);
var point_2:Point = new Point(obj_mc._x, obj_mc._y);
var distanceBetween:Number = Point.distance(point_1, point_2);
arrs.push(distanceBetween/10);
}


Don't forget to add import flash.geom.Point; at the beginning of code. There is nothing to explain here, we just use Point class distance method to calculate speeds and push those values into arrs Array. That's how we achieve constant speed moving in roadMap function, just as title says.

Live example:


download code : :







*_*

01 June 2009

Maui Flash Zoom Tool

Previously made Flash Zoom Tool have several restrictions and one obvious is not-continuously zooming since you have only few scaling steps. Let's update that feature.

This time I'm using Maui island map by Mike Johnston. It will be even better and it is recommended to use vector maps instead of bitmaps, but this time that's not important.

Moving around the map is the same. Only new things are dragging functions and scaling. Here is entire code:


var rpoint = line._y - (line._height / 2); // reference point

onLoad = function() {
stool._x = line._x;
stool._y = line._y;
}

onEnterFrame = function() {
if (Key.isDown(Key.RIGHT)) {
map_mc._x -= 5;
}
else if (Key.isDown(Key.LEFT)) {
map_mc._x += 5;
}
else if (Key.isDown(Key.UP)) {
map_mc._y += 5;
}
else if (Key.isDown(Key.DOWN)) {
map_mc._y -= 5;
}
}

stool.onEnterFrame = function () {

// restrictions for stool mc movement

if (this._y < rpoint) {
this._y = rpoint;
}
if (this._y > (rpoint+line._height)) {
this._y = (rpoint+line._height);
}
this._x = line._x;

// scale amount

var ypos = Math.abs(stool._y-rpoint);
map_mc._xscale = map_mc._yscale = ypos*2 + 50;
}

stool.onPress = function () {
this.startDrag();
}
stool.onRelease = function () {
this.stopDrag();
}
stool.onDragOut = function () {
this.stopDrag();
}


ypos value range is between 0 and 50 and accordingly scaling is between 50 and 150. I'm using formula ypos*2+50 but you can use whatever numbers suits you. If you let's say use ypos*4+20 you will have scaling in range from 20 to 220 because :

ypos = 0 : ypos*4+20 = 0*4+20 = 20
ypos = 50 : ypos*4+20 = 50*4+20 = 220 etc.





*_*

29 May 2009

Flash Pixel Explosion Tutorial

Well, kinda tutorial. First of all, check out Xuroq, Open Source Flash Solutions website. All code downloaded from there is open source, which means you can use it in whatever way you want, but for the sake of honesty and brighter future don't claim it's yours, that's very 20th century attitude.

What I'm interested in right now is Flash Pixel Explosion 151 kb file. Download it and extract anywhere on your hard disk, let's say new folder \kaboom. Inside \kaboom folder you will find two new folders \kaboom\com and \kaboom\gs and two additional files kaboom.swf and kaboom.fla. Latest one can be opened with Flash CS3. Do it.

Open document Library if it isn't already open and locate xuroqflash.png file. This is the one we will change first. If you right click on file name and choose properties you can see image dimensions are 415x100. Create new image with same dimensions with your favorite image editing software.


Import your new image to Library with File _ Import _ import to library. Next we will replace images. Double click 'clip' library item to edit. Select previous bitmap image and delete it. Drag from the library you new image and place it approximately in same position as Xuroq image. Save file with different name and test it.


You can also edit 'btn' movie clip, add action buttons or just edit text like me.




*_*

28 May 2009

Dark Ages are over - FFD is out!


When "Web Developer's and Designer's Journal" stopped publishing (last issue I know of is issue 2/2007) I was surprised and disappointed, because I know how much one quality magazine about Flash and Flex means to developers.

But dark ages are over and this time new people are about to take over. New magazine is out, 100% devoted to Flash and Flex developers community (online forum included).

Here are some of the subjects you can read-your-eyes-out about in newest issue: Mark Grossnickle writes about How to become a Flash/Flex Developer? Lee McColl Sylvester's article is about Animating with ActionScript. Create your first ActionScript game in minutes by Damien Davidovic. Flex Application Architecture by Andrei Cristian Ionescu. You will also read about FLEXing your business application by Sidney de Koning, Doug Ensley and Barbara Kaskosz write about Blender to Flash workflow.

Remember, this is just a part of subjects covered, so you know where your next destination is ...

FLASH AND FLEX DEVELOPERS MAGAZINE

*_*

 

template by blogger templates