23 December 2008

New Adobe stuff, depreciated projects

Microblog was petit Flash website widget I was working on, just a simple text plus images posts resumes collection, but then Text Layout Framework came along and project stopped. Well, never mind, this framework is worth getting knowing it. Don't forget, in order to see framework demo tour you need to install Flash Player 10.

This library is already included as part of next Flex version, Gumbo and Adobe Flash CS4 Professional. Check the list of features of this beta release, follow link above. Also, amazing Online Text Editor is available for testing.


Adobe Text Layout Framework
Tour is really something. Every demo page has download source arrow icon in top right corner of the page. Here is the screen of formatting demo page where you can easily adjust alignment and space after variables in live example.
.

21 December 2008

No new plans for 2009

Last year, total number of posts on this blog was 69 and this post is number 74 in 2008, which means five posts more. I hope next 2009 will be richer, with at least 80!

I have managed to accomplished some goals in 2008, some not, but I have continued to learn during entire year, didn't stop and my enthusiasm about Flash Platform has only increased.

No new plans for 2009, but I would certainly like to write more tutorials like I did in last two months - check them out:


- Flash Rain Effect
- Making Zoom Tool with Masking
- Tiled Flash Backgrounds (part I)
- Tiled Flash Backgrounds (part II)


In new year I will definitely change blog layout. This one is here for a looong time now and I really need something fresh and more appealing. I'll start right away with this new RSS feed icon:

RSS feed icon


I will also try to do more freelance work.

.

15 December 2008

Tiled Flash Backgrounds Tutorial PART II

This is part II of tiled backgrounds Flash tutorial. If you haven't already, I strongly recommend you read tutorial - part I, where I described how to create tiled backgrounds without any Library movie clips.

Second solution requires custom movie clip which acts as single tile. You can draw whatever you want. Size of your movie clip is important. Function we will write takes original movie clip dimensions, width and height and creates tiles based on those. Name instance of your movie clip 'pattern'.

Tile movie clip dimensions depends on your needs, but if relation between Stage dimensions and movie clip is small, let's say we have Stage 500x400 and movie clip 100x80 it is obvious that resulting tiles set will be only 5x5. If relation between Stage dimensions and movie clip is too big, let's say for Stage 500x400 we take movie clip 5x4, result may be too many tiles and even your script may become too slow and crush your comp. So be careful and plan accordingly.

tiled flash backgrounds tutorial examples
Code is very simple, it has few lines and consist of single drawBackground() function:

function drawBackground() {
var limitWidth = Math.floor(Stage.width / pattern._width)+2;
var limitHeight = Math.floor(Stage.height / pattern._height)+2;
var counter = 0;
pattern._visible = false;
for(var i=0; i<limitWidth; i++) {
for(var j=0; j<limitHeight; j++) {
var current:MovieClip = pattern.duplicateMovieClip("tile"+counter, counter);
current._x = i*pattern._width;
current._y = j*pattern._height;
counter += 1;
}
}
}

Nothing much to explain here. We add 2 to limitWidth and limitHeight just to make sure no empty space is created on Stage. We use variable counter to name new movie clips and set their depth. Since we don't need pattern movie clip on Stage, we set it's visibility to false. For loops are doing their job and create nice tiled background.

.

10 December 2008

Tiled Flash Backgrounds Tutorial PART I

Already scratched the backgrounds subject in two separate occasions and now I'm gonna finish this chapter. Once again, I'm sure there are other, better solutions on how to generate Flash backgrounds, but this is what I figured. Don't have a clue why I need to constantly warn readers how I don't produce best code out there - I got to stop doing it right now!

First solution doesn't require any Library movie clip, but background is generated dynamically, which means we use single function to create background pattern and entire tiled background based on that pattern. This first option is suitable for small pattern usually with dimensions like 6x6, 8x8 or 10x10 pixels. Off course, pattern can have not equal dimensions too. We will create drawBackground function and call it right away. All this happens in first root frame:

function drawBackground() {...};
drawBackground();

Now instead dots, our function have two parts, first one to create pattern and second one to tile it. Best practice for pattern creation is to take pen and paper and draw pattern there and then mark coordinates. This is what we are making with next code:


 this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc.lineStyle(1, 0x111111, 100);
mc.beginFill(0x111111, 100);
mc.moveTo(1,2);
mc.lineTo(4,2);
mc.lineTo(4,1);
mc.lineTo(5,1);
mc.lineTo(5,4);
mc.lineTo(4,4);
mc.lineTo(4,5);
mc.lineTo(1,5);
mc.endFill();

All is left to do is tile our pattern over entire document. We will do this using new 'back' movie clip. Variables mcw and mch will hold pattern dimensions, mc._width and mc._height. They are there just to shorten the code a little bit. OK, now we use Stage properties width and height to calculate limitWidth and limitHeight, borders of our pattern generator, when they are exceeded, we are done. For loops will draw our background until limits are reached. You can copy and paste pattern code and make small modifications, instead mc write back.

this.createEmptyMovieClip("back", this.getNextHighestDepth());
var mcw = mc._width;
var mch = mc._height;
var limitWidth = Math.floor(Stage.width / mcw)+1;
var limitHeight = Math.floor(Stage.height / mch)+1;
back.lineStyle(1, 0x111111, 100);
back.beginFill(0x111111, 100);
for(var i=0; i<limitWidth; i++) {
for(var j=0; j<limitHeight; j++) {
back.moveTo(i*mcw+1,j*mch+2);
back.lineTo(i*mcw+4,j*mch+2);
back.lineTo(i*mcw+4,j*mch+1);
back.lineTo(i*mcw+5,j*mch+1);
back.lineTo(i*mcw+5,j*mch+4);
back.lineTo(i*mcw+4,j*mch+4);
back.lineTo(i*mcw+4,j*mch+5);
back.lineTo(i*mcw+1,j*mch+5);
}
}
back.endFill();

That's all in part I of this tutorial on how to generate tiled Flash backgrounds. Next part will explore another technique which uses drawings as patterns.
.

01 December 2008

Making Zoom Tool with Masking in Flash

This quick tutorial will show you how to create simple zoom tool with masking in Flash. Only few minutes and basic Flash knowledge are required. Before we begin, make sure you have some appropriate image to use with zoom tool, something with details, perhaps. I've found this image by arimoore.

Open new Flash document and set some properties. I have used 350 px for width, 250 px for height, #0099FF as background color and frame rate 24. Add two more layers and rename them like this: layer3 - tool, layer2 - mask_layer and layer1 - map.

First we will create some movie clips. You need to import your image into Library. Go to File - Import - Import to library... Now create new movie clip (ctrl + f8 or Insert - New symbol) and name it map_mc and press OK. Drag your image from library to center of the Stage. It doesn't have to be exactly in the center in pixels, but closely enough. Go back to scene 1, you are done with this movie clip.

Two more movie clips are needed as scaling tool. Create new movie clip, name it 'line' and press OK. Draw solid white (or whatever color) line with 50 height, set stroke height to 2, place it vertically in the center of the stage (see example). This one has to be exactly in the center, so make sure you set X:0.0 and Y:-25.0. Name second movie clip 'stool' (scaling tool) and draw some rectangle like shape, approximately 20 px width and 10 px height and place it in center of the stage. Done with movie clips, now on layers.

Lock both tool and mask_layer and select first and only frame of map layer. Drag map_mc from library and place movie clip in the center. While movie clip is selected, name your instance 'map_mc' (imagine that!). Next, lock and hide map layer and unlock mask_layer. Select rectangle tool, add some corner radius (5-10), set stroke color to none and fill color to some light green. Draw a rectangle with right margin larger than left one (we need extra space for zoom tool). Lock all layers, right click on mask_layer and choose mask option. Save your work if you haven't before. You can test your movie if you like to see if masking is working.

Now, actions. Unlock and select first frame of tool layer. Drag line movie clip from the library to the right of the map, name instance 'line'. Drag stool movie clip also and place it near line movie clip. Name stool instance with 'stool' off course! Exact position of stool isn't matter because we will use ActionScript to position it right. Press F9 to open actions panel. First, we will write onLoad function like this:


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


Next we need arrow movement commands. We use keyboard arrows to move our map in all 4 directions by 5 pixels per frame.


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


Finally, last function we need is scale function.


stool.onMouseDown = function () {
var ypos = _ymouse-line._y;
var distance = Math.abs(_xmouse-line._x);

if (distance < 20) {
if(ypos<-10 && ypos>-20) {
this._y = line._y-20;
map_mc._xscale = 50;
map_mc._yscale = 50;
}
if(ypos<0 && ypos>-10) {
this._y = line._y-10;
map_mc._xscale = 75;
map_mc._yscale = 75;
}
if(ypos<10 && ypos>0) {
this._y = line._y;
map_mc._xscale = 100;
map_mc._yscale = 100;
}
if(ypos<20 && ypos>10) {
this._y = line._y+10;
map_mc._xscale = 120;
map_mc._yscale = 120;
}
if(ypos<30 && ypos>20) {
this._y = line._y+20;
map_mc._xscale = 150;
map_mc._yscale = 150;
}
}
}


This function is easy to understand actually. With ypos variable we make sure only mouse clicks close to line object are detected and with distance we can find out how far mouse is from line center. Based on that distance we create different commands, first one is to move stool movie clip. We use 'this' keyword because MouseDown function is attached to stool movie clip. Second command is actually our zoom tool. We change scale factor for map_mc in a range from 50 to 150 by 25. In this way we get 5 different views, but you can change this to whatever you like. You can easily create drag and drop functionality if you like.

I hope you have enjoyed this tutorial. Share it, use it, abuse it in any way you like.


flash zoom tool live demo

download zoom tool

*_*

24 November 2008

Flash Blured Bubbles Effect

While searching for new Flash creations at FlashDen library, I have noticed some very interesting new files and one of them is background animation - blurry light cells by ranfirefly. It occurred to me that this simple effect can be created using my previous tutorial on rain effect, but with slightly changed parameters.

I have been playing around to see if I can duplicate same effect and amazingly, but after only few new lines of code, my result is the same. I'm not gonna display finished code since this author has already earned few bucks with his file and it won't be fair to give the code for free, but it's easy actually, you only have to provide blur effect inside clone function (described in my previous tutorial), to change movement direction and finally to 'add some randomness' to x direction component of particles.




.

18 November 2008

Flash Tutorial : Rain Effect

download this tutorial as PDF file

This is simple tutorial on how to create more real life rain effect (or snow or whatever falls down in your neighborhood). You will need just few minutes to complete full tutorial, just follows explanations.

1. Create new flash document. I have used dimensions 500px and 400px with #699 background color and 30 frame per second. Higher value of fps will make animation smoother.

2. Create new movie clip that will represent single raindrop. My dimensions of movie clip is 10px by 10px. Drag mc from library to stage to position approximately y=0, x=-20, just left from top-left Stage corner but outside of view. Name your instance 'raindrop'. Now, the code.

3. First, we will create raindrops counter like this:
var counter:Number = 0;

4. Next, we write onEnterFrame for 'raindrop' instance. This function will act as timer. Every time 'raindrop' passes Stage height it returns to the top and fires clone function which creates new raindrop. Actually, it's kinda unusual to create new instances this way, but I was in a hurry...

raindrop.onEnterFrame = function() {
if (this._y < Stage.height) {
 this._y += 30;
}else{
 clone();
}
}

5. Now let's see that clone function and I'll try to explain it.

function clone() {
if(counter < 50) {
 var dx:Number = random(500);
 var dy:Number = random(800);
 var myObject = new Object();
 myObject._x = dx;
 myObject._y = dy-800;
 myObject._alpha = random(100);
 myObject._xscale = 50 + myObject._alpha;
 myObject._yscale = myObject._xscale;
 myObject.onEnterFrame = function() {
  if (this._y < Stage.height) {
   this._y += this._alpha / 10;
  }else{
   this._y -= 400 + Math.floor(Math.random()*400);
   this._x = Math.floor(Math.random()*500);
  }
 }
 raindrop.duplicateMovieClip("nr" + counter, this.getNextHighestDepth(), myObject);
 counter += 1;
}
}


Counter is there to stop producing new raindrops when their number is greater then 49. New raindrops are created using duplicateMovieClip method. It uses 3 parameters. First one is unique instance name, second one is depth and third one myObject is most important. Object is obviously the type of myObject and everything needed is congregated here.

Start position is defined using random function to dx and dy variables. Raindrops alpha is also defined using random function. Based on alpha we create scale values and with this we have effect that closer raindrops have less transparency. We also use alpha value to define raindrops speed inside onEnterFrame function. This way we create effect that closer raindrops move faster than those behind. That's all actually. SWF is 597 bytes total.

I hope you enjoyed this tutorial. You are free to use it in any way you like, mentioning this blog highly appreciated. Thanks.



.

14 November 2008

Flash on Blogger With Free Remote Hosting

OK, earlier solutions on getting Flash files to work on your Blogger blog are no longer valid since some reported that Photobucket no longer hosts swf files, but also second solution with hosting on GooglePages is not longer possible.

There is simple work around method for this problem. Off course, you are free to upload your SWF file wherever you find and if you have access to that file you are OK to continue. For those of you who don't have a clue where to find suitable place (and free) place for SWF hosting, try Google it. If you can be bothered with this then my advise is to use UK Image Host. Only limitation for free usage is file limit of 3024 kb which should be enough for most of the projects.

Here is the code:

<embed pluginspage="http://www.adobe.com/go/getflashplayer/"
quality="high" menu="false" bgcolor="#000000" height="150"
src="http://www.ukimagehost.com/uploads/2230f7da03.swf"
width="200" type="application/x-shockwave-flash"> </embed>




However, please note this embed tag solution will not make your pages pass xhtml validation.
.

12 November 2008

Building Applications for AIR

Just when I thought that single empty space on my Adobe bookshelf will remain empty for eternity, I came across Beginning Adobe AIR book, building applications for Adobe Integrated Runtime by Rich Tretola.

Book is about 300 pages organized in four sections: getting started, adding data, AIR APIs and AIR components. First section gives introduction to Adobe Integrated Runtime and explains AIR installation. There is good chapter about RIA and desktop applications, some words about Flex, XUL, JavaFX etc. You can read about AIR development process and tools like SDK, Flex Builder 3, Flash CS3 and Dreamweaver CS3. Last two chapters in first section are about building first AIR application and packaging the AIR. AIR configuration file is explained in details together with packaging using different tools.
Adobe AIR book
Adding data section is all about how to connect and retrieve data with AMF remoting, XML and JSON (JavaScript Object Notation) but also using web services like SOAP and WSDL.

How to access the file system using AIR API, how to create windows, how to interact with operating system are thing you can read about in third section of the book. My favorite chapter in this section is about SQLite database. Since I'm already familiar to some extend with SQL syntax I find this AIR feature really awesome and right choice of Adobe developers. It's refreshing to see that creating SQLite database it exactly the same as creating new text file with AIR but with db extension instead of txt. Simple and great. Oh, yeah, don't forget freeware SQLite Database Browser available at sourceforge.

Last section of this interesting book is about AIR components, file system components and HTML component. You can jump start with the code from this book (28Mb) available at publishers pages. Here is the direct download link.

Enjoy - I know I am...
.

06 November 2008

Flash Development Tools

One of the ways to start writing Flash Player 10 targeted ActionScript code is to use FDT (Flash Development Tools) IDE. Required version is 3.1 and another requirement along side FDT is Flex SDK 4.

To get started right away you can choose to download standalone FDT installation for Windows or Mac, which is about 298 Mb (296 Mb). Installation is simple and fast. Don't forget that this download is only one option since FTD is actually Eclipse plug-in.

FDT installation screen
After successful installation welcome screen offers four chapters: overview - get an overview of the features including FDT help, FDT cheatsheets and FDT features. Other chapters are What's new section, Tutorials and Workbench. Simple help tutorials will lead you to creation of first AS2.0 or AS3.0 projects in minutes.

One of the first places to visit for some FDT tips and tricks is FlashMech's blog.
.

31 October 2008

Flying Object Shadow

New Flash file added to portfolio - Flying Object Shadow simulation effect.

flying object shadow flash file

.

23 October 2008

Old / new tools

Exactly one month ago I asked question via twitter, but didn't get any answers, so I had to search for myself. Best combination I found is Xmi2as + argoUML.


Xmi2as is created by Darron Schall primary for actionscript2.0 since creation date is back in 2005, and I couldn't find any updates after (project is hosted on OSFlash). Source code is available, written in java and windows and mac osx install files. Don't have a clue if someone has extended this project to work with actionscript3.0 which seems to be possible.

argoUML has been improved since 2005 and current stable version is 0.26. Simple windows installer is available. Also, you can download argoUML quick guide pdf 11 pages document and extended user manual, which is 400 pages pdf document. Simple example xmi file is available from SubVersion repository. Tested and works just fine.


example UML diagram
.

19 October 2008

Free Flash Analog Clock : Classic Blue

free flash analog clock classic blue

First free flash clock I've made was the one you can see on left sidebar, analog clock worldmap, available from downloads page. It was few months ago, back in March. Since then few hundreds of people have downloaded worldmap clock, but I have no clue where they have finished.

In the meantime I had idea to jump into mass production and assemble few hundred flash clock with unique design. I got lazy and idea died, but not before I made about 30+ of them. I'm not gonna start with separate flash clocks website as I have planned (and maybe I will who knows), but good news is from time to time I'll give them away here at Flanture blog. Best way to stay informed about new releases is to subscribe via reader or email.

Here is another free flash analog clock, classic blue, for your website, blog sidebar or whatever. File is 7kb unzipped, resizable. If you have problems with downloading zip (it happened before), drop me a comment or contact via twitter and I'll send you the file.


Download Classic Blue Analog Flash Clock.


If you don't mind I would like to know where do you use it. Thanks.
.

15 October 2008

Flash Game Tutorial

More info at Flanture Games blog...



.

09 October 2008

Cumulus, Blogumus and RUBLBS

It's not often the case to see Flash content on Blogspot blogs. Reasons are different from poor bloggers knowledge in how to include Flash content on Blogger to some SEOphils fears about bad relationship between Flash and search engine bots. However this new Flash widget, Blogumus is something that, it seems, makes a change in that direction.

Blogumus flash widget

Blogumus is Flash widget based on WP plugin Cumulus and it is created by BloggerBuster. Blogumus is a Flash based tag cloud that combines JavaScript code and Flash to create sphere-like Blogger labeler clickable display. Uf! It looks cool. Suddenly bloggers have their labels rotating in 3D space and that's just wow effect for some. But off course, many have included all 158 labels and everything visitors can see is rotating useless black letters ball. Those RUBLB's tell a wider story about balance of design and functionality or the luck of it!

I just say it should be used wisely. Flash widgets, ajax functionality and other technologies will change the way blogosphere works, that's the fact and I think it's the right direction, but in case of Blogumus, you need to limit number of labels displayed to show both important blogging aspects design and functionality. Just my 2c.

02 October 2008

Downloads

DOWNLOADS PAGE

This page contains all stupid flash creations from this blog and I hope the list will grow :)

Feel free to share, compile, expand any of this files. Bookmark for easy access. Thanks.


Microblog Flash Widget v1.0
download | more details

Windmill Farm Animation
download | more details

Flash Windmill Simulation
download | more details

Free Flash Scale Menu v2
download | more details

Analog clock Worldmap
download | more details

Analog clock Classic Blue
download | more details

Comics album
download | more details

Search Array Functions
download | more details

Bookshelf Widget XML v1.5
download | more details

Custom Gradients Tutorial
download | more details

XML Based Ticker
download | more details

Free Flash Tweened Horizontal Menu
more details







*_*

29 September 2008

Free Flash Scale Menu v2

It's been a year now since Flanture published simple flash scale menu and recently file was rewritten and added few improvements. That's why this one is version 2. Source file is included with preview swf and detailed pdf help file.

In this version you can:

1. Change menu items alpha
2. Change menu items scale value
3. Add new menu item or edit existing ones


free flash scale menu preview

download : flanture scale menu v2.

[ if you want to stay updated, consider Flanture blog subscription ]
.

25 September 2008

Top 5 Flash CS4 Announcement Posts

flash cs4 announcement banner

Since the last thing I wanted to do is to repeat what everyone else already said or to list new features of Flash CS4, here is a list of top 5 Flash CS4 announcement posts:

- Flash CS4 Features,Video Tutorial by Lee Brimelow

- Flash CS4 photo tour of features by Flashthusiast

- Say Hello to Adobe Flash CS4 by FlashSpeaksActionScript

- I like Flash CS4 by Bit-101

- Adobe Flash CS4 Professional is out by swfGeek

enjoy reading.
.

22 September 2008

Flash XML Photographer Website Template

One of the better Flash Templates over at FlashDen is this one created by ZebraCreative. It has published size of only 88kb, it opens with Flash 8+ and ActionScript version is 2.0. Template is well documented, HTML is included, but no PSD.

Flash XML Template
Check more Flash Templates at FlashDen.
.

17 September 2008

Killer Templates Marketplace ThemeForest

Templates Marketplace Theme Forest Image

After great success with AudioJungle and FlashDen, which is the best place for buying and selling Flash stock files, Envato Network has gone one step further with ThemeForest. This time it's all about templates.

For as little as $10 you can get all kind of website / blog templates. Complex ones are more expensive. If you think HTML/CSS is enough for you, no problem. If you are more of a Flash templates dude, sure, they got that too. For your blog: WordPress, Joomla, Typepad, even Blogger and many more. Every template belongs to some category so you can choose from creative, corporate template, technology, non-profit, entertainment or personal template. Whatever works for you.

Don't be surprised if you find some categories with no entry yet, they have just opened. If we compare this startup project with FlashDen, we shouldn't worry that it won't succeed. Also, this is great opportunity for authors to make some cash using their hard-earned-while-bleeding-on-the-keyboard template design skills. But first, make sure your design is above average or you just might be refused.
.

11 September 2008

Free Flash Tweened Horizontal Menu

Flanture Tweened Horizontal Menu is easy to use and customize for your own needs. Source file comes with empty movie clip which you can use to place your own menu items text. Tween speed for both alpha change and white line growth can be change in few seconds. If you wish to change graphics but to leave functionality as it is, this can be done in no time. You can get this horizontal tweened flash menu in two ways:

1. For FREE
This menu is available for free to all email subscribers to this blog. After you confirm your subscription, leave comment or email at flanture gmail com with tweened menu request. You will get source FLA file (opens with Flash 8+) with actionscript code explanation and fully featured PDF help file for quick start.

2. Customized Solution ($12)
If you don't have required Flash knowledge to customize this menu on your own, you can order customized solution to meet your needs. Just contact via email.





.

10 September 2008

Fastest Random Array Generator

While searching the net for fastest way to create random array of numbers I was surprised to see some very bad solutions. The idea behind algorithm I found was intuitive. Let’s say we want to create random array with numbers from 0 to 99. We will generate first one random number with:

var myRan:Number = Math.floor(Math.random()*100);

Then we will check if this number already exists in our array, which is empty at start. If it doesn’t exists we append this number with push(), if already exists we do nothing, code goes to next iteration and again it generate new random number. Seems like simple and good solution, but in fact this solution is very bad, very slow and it just might crush your application.

Let’s say we were very lucky and we populate first 99 places in our random array. All the code still have to do is to find one more. Let’s say we need just number 13. Algorithm will circle around the loop until it randomly generates number 13! This might be a problem if computer choose between 100 or even 1.000 numbers in every iteration. It might last seconds, which is eternity in web applications standard. And don’t forget that number 13 is not very lucky one!

I figured that in the end our random array will have all the numbers from 0 to 99, no more no less and that gave me the idea for fastest random array generator.
First, let’s name our function:

function createRandomArray(limit):Array {

limit will decide how many numbers we want from 0
At the beginning let’s have two empty arrays:

starter = [];
finale = [];

Now, we will push all needed numbers to starter:

for(i=0; i<limit; i++) {

starter.push(i);

}


The trick is to take one number from starter, add it to finale and delete that number from starter array in one iteration. To make things random, we will choose random starter INDEX, like this:

while(starter.length > 0) {

var choose = Math.floor(Math.random()*starter.length);

finale.push(starter[choose]);


starter.splice(choose, 1);


}


We do this until there are numbers inside starter array. At the end, we return result array:

return finale;}

I think this might be the candidate for fastest random array generator.
.

05 September 2008

Simple Text Field Skins

Not actually a skin, but a simple way to change the way how your text field looks in Flash. Text Field is dynamic with instance name set to 'tField'. First, we set text for our text field. You can put whatever you want. Use '\n' for new line.

tField.text = "your text goes here"

Next we will define few different formats for our text field.

format0 = new TextFormat();
format0.font = "Courier New";
format0.size = 16;
format0.color = 0x000000;

format1 = new TextFormat();
format1.font = "Courier New";
format1.size = 17;
format1.color = 0xFFFFFF;

format2 = new TextFormat();
format2.font = "Courier New";
format2.size = 18;
format2.color = 0x0000FF;

Ok, now we want to create an array and to push formats in it. We do this with next code:

fArray = new Array();
fArray.push(format0);
fArray.push(format1);
fArray.push(format2);

We can control currently displaying format with variable curr, so set:

curr = 0;

When formats will change is up to you. Simplest example is to change format when mouse is released on root movie clip. We need to define next function:



onMouseUp= function(){
if(curr == fArray.length){
curr = 0;
}
// when curr is equal to array's lenght, we set curr to 0, and cycle formats from the start.

tfield.setTextFormat(fArray[curr]);

// background change is here just for this example to look better.
if(curr == 1){
tfield.backgroundColor = 0x000000;
}else{
tfield.backgroundColor = 0xFFFFFF;
}

curr += 1; // next format

}



Click on text field below to see changes.
That's all. If you need fla source file, leave your e-mail.




.

01 September 2008

Flash Experimental Toolkit Power Cursor

free flash toolkit power cursor
If you ever asked yourself during lazy Sunday afternoon what ‘optically simulated haptic feedback’ is, you are probably one of two things:

A) insane
B) already familiar with Power Cursor

If you are not under B) please keep reading. You might discover things beyond your imagination and how touch sensations like stickiness, volume, roughness, pressure and mass can be experienced in a GUI. That graphical user interface can be your website because Power Cursor can be easily integrated in your existing Flash projects. Power Cursor Flash toolkit is (2.3Mb) free engine.

.

26 August 2008

Flash designers show off your work

Another way to show off your work if you are Flash developer / designer is Carbonmade. This web service allows you to display your portfolio to potential clients and worldwide audience. Free plan gives you 5 projects and 35 images. Pro plan ($12 / month) brings you 50 projects, 500 images and 10 videos. You can even upload swfs with both free and pro plan which is really great.


Carbonmade is here for two and half years and since it managed to present 62.000 portfolios, 132 k projects, almost 1 million images and over 1.000 videos. Only Flash category has 1127 portfolio Right This Minute. Not bad. However, most portfolios have under 5 projects (free plan) which means good opportunities shouldn't be missed.


Great Carbonmade feature is that you can add Google Analytics code and track your portfolio traffic. Also, you will get "available for freelance" flag-like button beside your online portfolio listing. Don't get surprised if you get hired!
.

22 August 2008

Flex Delivers Video Microblogging App

You might have been in position to answer simple question "what are you doing" a few times? How about answering this question by recording a short 12 s video? This is exactly idea behind new video microblogging service 12seconds.tv.

Service is still in alpha, so few new features might lurking around the corner. For now, you are invited to record your video message via web cam, mobile phone or your washing machine if it supports this feature. You have an option to name your video, tag it, locate it and post it. You will also get a unique e-mail address to send video directly from your phone (or washing machine) and it will be published on your 12seconds page. You can also configure your Twitter account with it and service will twit for you any new uploaded message.

If you are familiar with my recent article about AIR based Twitter application TweetDeck and you are fan of same, you will love to read that this powerful Twitter desktop client will support 12Seconds service. And yes, like everything related to web video, this service is also Flex based app.

video microblogging app 12seconds

I have 10 invites for my precious readers, giving them away FIFO style :) Just leave a comment with your e-mail.

_____

20 August 2008

AS3 code libraries list

I was just reading about degrafa framework and how it is really great when big boys support open source communities when run into this huge list of AS3 code libraries which includes:

- AS3 3D engines
- 3D Game Engines
- AS3 3D Physics (not phsics) engines
- AS3 Animation Tweening Kits
- AS3 2D Physics Engines
- AS3 Security
- AS3 Audio Libraries
- AS3 Particle Systems
- Loading Kits
- OOP Frameworks
- more APIs and Libraries

Extremely useful.
.

12 August 2008

Adobe Flex Themes Cool Awards Contest

Visual aspects of Flex and AIR applications are improving rapidly. New Gumbo FXG format will try to take the look-and-feel of Flex applications to the next level. For less patient ones here is very trivial example of FXG usage. Even if you don't understand German language, it is not likely you will not understand this simple tutorial.


However, if you think it's too early for Gumbo and Flex SDK nightly builds, take a look at "Skin to Win Challenge" contest at ScaleNine, sponsored by Adobe and EffectiveUI. You are required to create a custom theme, compatible with Flex 3. Prizes are cool, MacBook Air, Adobe CS3 Master Suite, Adobe Flex Builder 3 Pro, tickets to Adobe MAX.

Themes will be judged for visual design (50%), overall quality (25%), innovation and uniqueness (25%). Deadline is October 10th 2008.

Can you do better than Darkroom?





08 August 2008

Gumbo, FXG example

While Gumbo is still in active development, Flex 3.1 should be out this month and Flex 3.2 is planned for fall 2008. Gumbo will introduce new language features and different set of components that will make some existing Flex 3 components absolute. FXG is new document format and compiler will treat this format as external asset. New tags in FXG and MXML 2009 will be < Private >, < Library >, < Declarations >, < Definition >, < DesignLayer > and < Reparent >.

Instead of current http://www.adobe.com/2006/mxml namespace, Gumbo will introduce new language namespace http://ns.adobe.com/mxml/2009, but Gumbo will also recognize old namespace too. Some older tags like Binding, Script, Style and others will loose mx: prefix. But, built-in types like Array, Number etc will also loose it’s prefix.

Full details on MXML 2009 and FXG, but also if you wish to see it, here is example : Skinning a button in Flex 4 using FXG.

01 August 2008

AIR based Twitter application TweetDeck

Yes, Twitter is that boring web service that keeps asking you same question over and over again, but somehow many find it very handy. I’m no different and if you want to see my twits, you can do it here: Flanture.

There are tons of Twitter clients, good ones, but this new one is special in many ways. I’m talking about TweetDeck. It’s written in Adobe AIR, which is one of the reasons I’m writing about it. Still in deep beta, current version is v0.16.1 means that you can expect bugs and reduced functionality, but don’t let this turn you away. New updates are regular and improvements are really great. I think that it’s only a question of time when this client will become the must-have tool.

AIR based Twitter desktop cliend TweetDeck
TweetDeck introduces columns. You can have up to 10 columns opened at one time, but you can also choose more standard view with only one column. REPLIES and DIRECT are columns with familiar functions. New column is GROUP. With this column, you can group some of the followers and you can name that group appropriately eg: office, real friend, pot. buyers, clients etc. Figure it out for yourself. Another new column that appeared with last update is TWTSCOOP, which brings you something like tag cloud in blogs but including buzz terms in Twitter world.

Last one and my favorite is SEARCH column. This one allows you to filter all global (all twitts) or local (of people you follow) based on search term. Not a revolutionary concept, but extremely useful when you can have few search columns inside single application. Consequences of this are very powerful. Imagine yourself watching trends in real time! Well, now you have the tool to do just that! Just for fun you can try few searches: web2.0, help needed, new book, etc. Cool, right?

To be honest, I was little scared when I saw that monolith black full screen of TweetDeck and right that minute I wished for second monitor. However, next version will include skins and int character support. There is more to this app, but I will mention just another cool feature. TweetDeck works both online and offline. App uses database to store messages when Twitter is down (no more whale image) and updates itself when available. Oh, yeah, just one more. It uses several short URL web services: bit.ly, eweri, is.gd, lin.cr, snipurl and tinyurl for now and have TwitPic integration. I could go on with features, but it’s only v0.16.1. Great job, Iain.

28 July 2008

Howto Find Local Flash Developers

Maybe it was a dream, nothing else. Few days ago I found unknown to me web2.0 app which displays position of freelancers around the globe on Google Maps. App has a lot of tags, one of them was flash off course and I was amazed how easily one can find local developers. Problem is I didn’t bookmarked this website! How insane is fact that I spent 2 hours searching for that website on Google, Yahoo even Listio etc, but with zero success. I’m hopeless, maybe I was dreaming…

Anyway, while searching for this ghost directory I found this one, ProfessionalOnTheWeb with similar feature, but without maps. No fun. However, someone may profit from it. It has currently 258 professionals in Flash category. Locations of developers are available. Directory is still in beta.

Professional on the Web - a portfolio directory for web agencies and flash freelancers

23 July 2008

Playcrafter - Flash Games Playground 4 Kidz

flash games portal

Already reported by ReadWriteWeb and Ryan Stewart, Playcrafter is new Flex based web application, portal that allows users to create new worlds (games) using predefined objects with simple drag-and-drop technique. Playcrafter is best for kidz under six years old. That's my impression, off course, but as always I just might be wrong.


You should use term 'creating games' very loose if you have big plans with this new acquired tool. If you do succeed and you create some kind of 'game' with Playcrafter, I don't wanna know about it. We'll see how things will develop in future, but right now you have a chance to win few awards too like PS3, XBox360, Wii or $100 in games downloads. Wait, what? You can create a game and then buy it? Oh, great! Totally new concept, something the web has crying for. Something is fishy here, I knew I should watch that intro video. But I didn't.
.

20 July 2008

SEOed Flash, first steps

Among web developers with SEO (search engine optimization) on their mind, Flash was always a black sheep technology, something to avoid at any cost. Actually, many developers started to hate Flash because of bad search engines visibility. I’m not sure how anyone can hate a particular technology, but many are capable for that, and even claim that they don’t have “Flash” on their computer. I suppose this is the reason why Flash Player is present on only 99% of desktop computers.

Few weeks ago, Google announced improved Flash indexing and started with implementation right away. This is result of joined effort between Adobe, Google and Yahoo! To make Flash SWF file format more search engines friendly. Bots now see every textual content within Flash file, but also URL’s within Flash files are discovered too. Bots can’t index FLV files and Flash files loaded via JavaScript remain hidden.

Reactions to optimized Flash were both positive and negative, but I must notice that many people are concern about how thing are developing right now, even though everybody think global idea behind SEOed Flash is great. Aral wrote about it and he asks if Flash indexing is revealing too much?


My concern goes in slightly different direction. If blog / website has Flash based widget with links to other pages, (like my Bookshelf Widget on right sidebar with links to Amazon books pages) suddenly, I have dozens of new outgoing links and I wasn’t aware of this until few days later page rank dropped from awesome 7 to medium 5! To be honest I don’t know if this is exact reason for page rank drop, but this is what I suspect. Does Google’s PR algorithm take in account links from Flash files?

I wonder how will Flash haters react to dynamic content and RIA’s indexing and what will happen when search engines start to make no difference between Flash websites and “regular” ones?






14 July 2008

Flash on the Beach 2008

flash conference

This year, Flash on the Beach, the most important Flash Conference in Europe will start one month earlier than in 2007. Location is Brighton, UK from 28th sept - 1st oct. Some of the confirmed speakers are: Peter Elst, Grant Skinner, Keith Peters, Mike Chambers, Lee Brimelow, Aral Balkan, Neil Webb and many others. Popular workshops will happen the day before main conference: Papervision3D and ActionScript 3 for Designers.

Here is just a glimpse from FOTB 07, demo of Diesel CS4 and IK (inverse kinematics) tween engine.



Since all tickets will be sold out long before conference start, how about live streaming?
.

11 July 2008

Adrian's XML Flash Photo Gallery

Someone asked for simple, clean and not expensive Flash Photo Gallery. Here is one where you can add / remove photos without using Flash, but instead, you use plain text editor. Gallery can display jpg, png, gif and swf files.

Gallery features and details...


XML Flash Photo Gallery

.

08 July 2008

Flash Bookshelf Widget Improved

What is bookshelf widget? It is small Flash file designed for blog sidebar, which allows you to offer your readers additional blog related products like books, images, etc. While saving space, bookshelf widget contains links to books / products details page on Amazon or any other online store.

Flanture Flash bookshelf widget is ongoing work-in-progress. I know this widget is not best one out there, it doesn’t have mirror or 3D effect, but WTH, I made it! Entire file, with images is very small 61 kb. This version has some improvements.


free flash bookshelf widget improvements


New features:

- Categories and category navigation. Besides Flash category (7 books), I added two new categories, Ajax with 6 books and just for fun Blogging category with 4 books.
- Images are now also links, same as “more info…” button links. Rotation of images inside categories is now present.
- Tiny visual differences like navigation arrows, background color and dimensions.

There is not XML based version for this one. Full customization is possible.

Download Bookshelf Widget v1.5

.

05 July 2008

Flash Scale Menu Explained

It seems that my expectations were to high when I thought this post is enough to explain how Flash Scale Menu works. One visitor, Francesco has convinced me indirectly to post complete Flash scale menu tutorial. Please, read first just mentioned posts to find out what we are talking about here.

Open new Flash document. Create few menu items (movie clips). For the sake of simplicity, let's say we have 5 items. Name movie clips instances item1, item2, ..., item5. You can name movie clips whatever you like, it doesn't matter. In the first and only frame of main Timeline enter 18 lines of code. This onEnterFrame is the only function needed for menu to work properly.





Now let's talk math. We use common math formula to find d - distance between mouse pointer and center of menu item. Dx is radius of circle inside which xscale and yscale properties of menu item change. Amount of change is equal to subtraction dx-d, thus when d=0 and mouse pointer is in the center of menu item, scale is biggest. In this case 100+(70-0)=170. When mouse is on the circle itself, change is 100+(70-70)=100, which means scale is 100 - no change! You can experiment with different values for dx. It depends on dimensions of your menu items movie clips.


flash scale menu explained

Remember that registration points of menu item movie clips have to be centered. That's all. Share this explanation/tutorial if you like it. Thanks.
.

02 July 2008

Mashups via Flex and AIR

Mashup applications combine and / or transform data from different sources into unique user experience. Sources may include but are not limited to public APIs, web services and data feeds like RSS and Atom.

Imagine what are the possibilities for combining data from Google, Yahoo, Amazon, Flickr, Twitter, Del.icio.us into single desktop application. Indeed, imagination can become your main tool for creation. No technical boundaries, no platform limitations. With knowledge in HTML / JavaScript or Flex / ActionScript you are already cross-platform applications developer, but haven't yet realized it.

Best of all, to get started, you don't need expensive courses and IDEs. You need Flash Player 9 (free), Flex 3 SDK (free), Adobe AIR SDK (free), runtime and examples source code (free). The only thing you will really need is this book.

Mashups applications book


Contents

Chapter 1 Introduction to Mashups
Chapter 2 Technologies to Mash With!
Chapter 3 An Introduction to Flex
Chapter 4 Flex Components
Chapter 5 Flexing Your Muscles
Chapter 6 Performance Management in Flex Applications
Chapter 7 Debugging Flex 3: The Tried-and-True, Plus the New
Chapter 8 Getting the Most out of APIs
Chapter 9 Mashing Up Functionality
Chapter 10 SWX: A Native Flash Data Format
Chapter 11 Taking It to the Desktop
Chapter 12 Developing for the Desktop with AIR
Chapter 13 Adding More Desktop Elements to the Web
Chapter 14 Building a Desktop Experience
Chapter 15 Completing the Experience

more details...

.

26 June 2008

Free RIA eBooks and upcoming community

Have you noticed that AIR (Adobe Integrated Runtime) is RIA (Rich Internet Applications) in reverse? Honestly? Anyway, back to free AIR (RIA) ebooks. Mike Chambers is responsible for this idea. Website is ToString , project that will host books about RIA. All website content will be under creative commons licenses.

Translators are welcomed to contribute. There is already one chapter of Adobe AIR for JavaScript Developers Pocket guide free ebook translated to German, Swedish and Polish are on their way. More info about project from Mike Chambers.

Support this wonderful idea : digg it ! thanks

.

23 June 2008

AS3.0 gurus + Creative Flash Websites

Latest poll question on Flanture was: Rate your AS3.0 knowledge? Results are:

Guru 25%
Advance 25%
Average 25%
Greenhorn 12%
Zero 12%

As always, results are questionable for two reasons. First reason is nobody can force you to say the truth or you are subjective and second reason is low number of voters, off course. It has something to do with statistics, more votes closer to the real results. However, if we overlook those two reasons, 75% of Flanture visitors have average or above average knowledge of ActionScript 3.0. I didn’t expect that much, but this info is interesting.

Also wanted to mention, if you have time to spare, check 21 Incredibly Creative Flash Websites

creative flash websites

20 June 2008

Blog Stats Using ColumnChart

One of the main advantages of using Flex to display blog stats, besides effects and style is ability to dynamically load data as RSS feed or web service. When this is not an option, like with Sitemeter’s basic plan I’m using, more static solution is available with XML file or even simple embedded Array inside MXML file.









<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300">

<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var stats:ArrayCollection = new ArrayCollection([
{Month:"Jul07", Uniques:435, PageViews:622},
{Month:"Aug", Uniques:1189, PageViews:1652},
{Month:"Sep", Uniques:1937, PageViews:2698},
{Month:"Oct", Uniques:1901, PageViews:2508},
{Month:"Nov", Uniques:1698, PageViews:2426},
{Month:"Dec", Uniques:2054, PageViews:3074},
{Month:"Jan", Uniques:2751, PageViews:4175},
{Month:"Feb", Uniques:2963, PageViews:4299},
{Month:"Mar", Uniques:3336, PageViews:4783},
{Month:"Apr", Uniques:3926, PageViews:6053},
{Month:"May08", Uniques:4082, PageViews:6241}
]);
]]>
</mx:Script>
<mx:Style>
ColumnChart{
fontFamily:Verdana;
chartSeriesStyles:ser1,ser2;
}
.ser1{
fill:#F7FA9D;
}
.ser2{
fill:#147CCC;
}
</mx:Style>
<mx:Canvas width="480" height="280" horizontalCenter="0" verticalCenter="0" backgroundColor="#98c8de">
<mx:ColumnChart x="10" y="60" id="columnchart1" dataProvider="{stats}" height="210" width="460" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{stats}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="Month"
yField="Uniques"
displayName="Uniques"
/>
<mx:ColumnSeries
xField="Month"
yField="PageViews"
displayName="PageViews"
/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{columnchart1}" x="367" y="-1"/>
<mx:Text x="10" y="10" text="Flanture Blog Stats" fontFamily="Verdana" fontWeight="bold" fontSize="15" enabled="true"/>
</mx:Canvas>
</mx:Application>




.

17 June 2008

TreeMap Flex Component

Standard Tree Flex component is useful when in need to display hierarchical data as an expandable tree. Josh Tynjala has developed more advanced component with similar functionality, TreeMap Flex component. Currently in version 2.0 beta, which means bugs are unavoidable. This component is published as open source. More info and code on google code pages .

open source TreeMap flex component

TreeMap uses 2D canvas to display relevant data rather then simple hierarchical list in Tree component. Component has advanced data descriptors and custom node and branch renderers. This opens new space for new functionality ideas. Excellent work.

.

14 June 2008

Flanture on pipes

Yahoo pipes is powerful tool for creating web services mushups. For someone with several blogs, pipes allows you to combine feeds of all blogs and present it within single output. Here is example how to connect several feeds in one. I have used all 3 Flanture blogs to do this.


yahoo pipes example

Pipes interface is intuitive and easy to understand. Results are ready to use in seconds.

.

09 June 2008

Exams are 4 egomaniacs

Is it really important to get that Certification banner and make your blog have more authority? I don’t know, but I think it’s impossible to pass the Exam and not to put proof of it on your blog / website / portfolio. Anyone forgot to do it? Take a look what happened to Yakov Fain after taking Flex Certification Exam . And he is right in his conclusion: "Memorizing method signatures and other information that is just one click away in the real world and remembering these things does not make anyone better programmer". If you are still stubborn to take that test, get this practice exam engine for Flex 2.


I still wonder what happened to Web Developer’s and Designer’s Journal (now Flex) and why there isn’t new issue for a year? (or there is?) Not everything in life is web2.0 and some old habits are not replaceable. I like to read paper magazines and even holograms won’t change that. You can still get some old issues in PDF format, by subscribing to free newsletter or use big G to do it: "allinurl: sys-con /mx/ filetype:pdf" without quotes. Ajax, Java and dot Net magazines in query variations. Don’t mention it.


If you want to receive updates from this blog, consider subscribing, via reader or email. I send full posts. Also take a poll on right sidebar: rate your as3.0 knowledge. Thanks.

.

05 June 2008

Flex 4 Developers Book

flex 4 developers book

Here is another great Flex book: "Flex for developers" by Sas Jacobs and Koen De Weggheleire. Subtitle is “Data-Driven Applications with PHP, ASP.net, ColdFusion and LCDS”, but actually this book is great for beginners who want to learn Flex 3 and ActionScript 3.0 through number of real world examples.

Book consists of 3 parts, where first part Flex Application Basics is 330 out of 575 pages. You will learn how to create custom flex components and how to use XML in Flex Builder among many other things.

Part 2 and 3, Data-Driven Applications and Livecycle data services are extra chapters for more advanced learners. They introduce case study projects with PHP, XML, ColdFusion and ASP.net.


more details...

.

28 May 2008

Simple Flex Effects Example

Open Flex Builder and go to File > New Project > Flex Project and name your project as MyEffects. In Design view take new Panel to the stage, set ID - mPanel , title – My Effects, Horizontal align – center, Vertical align – middle. Now inside this new panel, drag Image component. Set ID – mImage, scale content – true. Move to Category View for Image component, within Style choose center horizontalAlign and middle verticalAlign. Create assets folder inside your project, insert any image and for Image component, set Source for that image.

OK, we created our playground and we can open our box with toys. Let’s try Zoom effect first. Just below Application tag, insert Zoom tag like this:

< id="over" duration="100" zoomheightto="1.3" zoomwidthto="1.3">

Everything is simple here, but you also have to add another property inside Image tag:

rollOverEffect="{over}"

In this way we have made connection between two tags Image and Zoom with over ID. In the same way you can add rollOutEffect or any other like this:

< id="”out”" duration="200" zoomheightto="1" zoomwidthto="1"> and
rollOutEffect="{out}" as Image tag property.

You may notice different duration properties, which means, as you expected, that rollOut will last twice longer than rollOver. Insert another tag, Blur tag for mouseDownEffect:

< id="down" duration="1000">

In order to apply more than one effect on one action we need to use Parallel tag. If we put Zoom and Blur tags between Parallel tag, give new tag id – over while deleting Zoom and Blur id property. Something like this:

< id="over">
< duration="100" zoomheightto="1.3" zoomwidthto="1.3">
< duration="1000">
< /mx:Parallel >

Don’t forget also to delete mouseDown property or you will get an error. You can combine several effects for same action. It’s up to you to decide when is enough. You can choose between AnimateProperty, Blur, Dissolve, Fade, Glow, Iris, Move, Pause, Resize, Rotate, SoundEffect, Wipe, Zoom.




download source

p.s. this is post number 100!

.

update: since this Flex example still gets lot of attention here is the source:



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="422" width="481">

<mx:Parallel id="over">
<mx:Zoom duration="100" zoomHeightTo="1.3" zoomWidthTo="1.3"/>
<mx:Blur duration="1000"/>
</mx:Parallel>
<mx:Rotate id="down" angleFrom="0" angleTo="360" duration="500"/>
<mx:Zoom id="out" duration="200" zoomHeightTo="1" zoomWidthTo="1"/>
<mx:Panel x="10" y="10" width="458" height="400" layout="absolute" title="My Effects" id="mPanel" horizontalAlign="left" verticalAlign="top">
<mx:Image id="mImage" scaleContent="true" horizontalAlign="center" verticalAlign="middle" source="frost.jpg" width="332" height="240" rollOutEffect="{out}" rollOverEffect="{over}" mouseDownEffect="down" horizontalCenter="0" verticalCenter="-7"/>
</mx:Panel>

</mx:Application>


*_*

25 May 2008

It’s all about votes

pools image In last 30 days I have asked you few questions via Polls in order to know you better. I hope that this can help me write more about stuff most interested to majority of my readers because this blog covers wide area of interests mainly inside Flash Platform.

What have I learned?

Almost all of Flanture readers who voted on first Poll are first time comers. Now, I can’t say I don’t have returned visitors because number of RSS subscribers on this blog grows every new month, but I do have full feed that’s true. I have learned that most of the traffic comes from search engines and from Adobe feeds also, but only on days with new posts. Bigger presence in social networks required.

I have also find out that Flanture blog navigation is ‘bad’ for 33% of visitors and ‘can be better’ for 66% of them, but also that blog template is important, but after content.

Finally and most important question I asked was: ‘What do you want to read on Flanture?’ and results are:

Flash Tutorials 36%
Flex Tutorials 27%
Flashlite 9%
General programming 9%
Web Development 9%
All above 9%

This clearly shows that two out of three Flanture readers wants to read more Flash / Flex Tutorials and this is just about right direction for this blog, but that doesn’t mean that other subjects will be totally forgotten. Polls are going to continue, so please feel free to participate and in some sense decide about Flanture content. Thanks.

20 May 2008

Catchy title about Astro

adobe flash player 10 Astro Off course I’m gonna write about Astro! It’s a big news, everyone writes about it, so why should I be exception? Astro is code name for next version of Adobe Flash Player 10. While still in beta, meaning not much support, new features are known and explained on Labs .

While others are in agony for new info about FP10, some are already way ahead, testing and writing tutorials, like senocular on drawing API.

Non-developers don’t need to do anything yet, since beta is just that – beta, but they do need to prepare themselves for totally new experience FP10 enhancements are bringing. If you are still eager to try FP10, you will need to first uninstall previous FP versions and don’t expect many demos just yet.

Download Flash Player 10

.

15 May 2008

Flex components styling

Flex applications are known by their default theme. Changing default colors and fonts of Flex applications is called styling. Everything you can do with HTML, you can do also with Flex, because main responsibility for styling is on CSS (Cascading Style Sheets). You can create your CSS file directly typing code in your MXML file using Style tag or using external CSS file.

In Flex Builder, best practice is to create ‘assets’ folder within your project and create new CSS file, let’s say ‘mystyle.css’. Then you make reference line to include that file with Style tag, source property:


source="/assets/mystyle.css"


If you want easier way for styling your components, try Flex Style Explorer . This free online tool will help you achieve visually awesome results in no time. When you are finished playing, copy CSS code and paste it in previously created mystyle.css file. You can even run the Flex Style Explorer inside of Flex Builder or download SWF and run it from desktop. Great!

Now let’s take a look at example simple navigation . We have ViewStack and LinkBar components. Using Flex Style Explorer I altered LinkBar appearance, which is also possible for every Flex component.


styling flex component LinkBar


Here is CSS code:

/* CSS file */
LinkBar {
borderStyle: outset;
borderColor: #999999;
horizontalGap: 12;
separatorWidth: 2;
letterSpacing: 1;
cornerRadius: 0;
backgroundAlpha: 1;
backgroundColor: #0099cc;
separatorColor: #333333;
rollOverColor: #006699;
textRollOverColor: #cccccc;
textSelectedColor: #ffffff;
disabledColor: #ffffff;
fontSize: 10;
fontWeight: bold;
dropShadowEnabled: true;
shadowDistance: 4;
shadowDirection: right;
}

download style

.

11 May 2008

Flex example: simple navigation

Coding in Flex is possible in different ways, which depends on habits and personal style. Someone likes pure code, simple text editors and messing with compiler, while others are much happier with heavy IDEs. Flex Builder has more to offer with both styles, source coding and design approach.

Next example shows how to create simple navigation with just few lines of code. We use natural combination of two tags ViewStack and LinkBar. ViewStack has four Canvas tags and every one of them includes one Text field. Just to make difference between Canvases text fields have labels Home, Portfolio, About and Contact.

Connection between ViewStack and LinkBar is made with properties. ViewStack has id property with value “myViewStack” and LinkBar property dataProvider with same value. Grab source code below.




Download source.

* * * * * *

From yesterday, Flanture is part of Flash Bookmarks, excellent Flash directory.

05 May 2008

AIR for JS developers free ebook

Adobe AIR free ebook coverFirst of all if you didn’t noticed now is the right time to start with Adobe AIR, when 1.0 is out and stable and you have one more reason for this if you are JavaScript developer. That reason is Air for JavaScript developers pocket guide free ebook which you can buy in paper or download for free in PDF file format. The book is published under Creative Commons 3.0 license, meaning you can copy, distribute, transmit and adapt the work. Book has 204 pages packed with general introduction writings about AIR, but also has mini-cookbook inside which covers topics from Windowing and File API to Embedded Database and Networking.

On right sidebar I have asked you another poll question: What do you want to read about on Flanture. Feel free to give your answer and contribute. This is 4th poll in this series and many more will come. If you feel like writing for Flanture and you find yourself in some aspect of Flash Platform, submit your article and I will publish it as guest blogger’s post. Your writings must be unique and exclusive for this blog.

Flanture also feels quite happy about new Blogger’s feature - scheduled posting. It is one of those things when you say something like: This is invented just now? It’s better now than never.

24 April 2008

Learn Flash Video


Flash CS3 Video book is written by Tom Green and Adam Thomas. Tom Green is professor of interactive multimedia in Toronto, he is working with Community MX and he contributes to Adobe Developer Center. Adam Thomas is a professor of rich media and web development. He runs Robin Hood Tech web studio. Here is a shorten list of what you will learn from this book by chapters:

Best practices of using the Flash CS3 Video Encoder
How to create the FLV Playback component

How to use video and audio clips in a Windows Movie Maker project
How to prepare video projects for Flash video

How to create an FLV file using Flix Pro
How to preview an FLV file

How to use the FLV Playback custom UI components
How to use a Video object in Flash
How to use ActionScript3.0 to add components at runtime

How to create an Alpha channel video in a video editor
How to create reflected video

How to apply simple effects to video
How ActionScript is used to programmatically add filters and blend modes to video

How to use ActionScript to create and apply masks and masking effects
How to use the Tween class to animate masks

Used the color tools and filters to create an iPod ad
Used SWFObject to place a Flash SWF file in a web page

Used a series of movieclips to trigger FLV file playback
Discovered how to play a sequence of videos

How to create a simple webcam feed
How to use a webcam to detect motion

Learned how to embed cue points in an FLV file using the Flash Video Encoder
Discovered how to use components and ActionScript to navigate through an FLV file

Learned how to author video applications for a cell phone
Discovered how to convert a Flash movie to a QuickTime video

 

template by blogger templates