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;

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


template by blogger templates