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.

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.

.

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:




I will also try to do more freelance work.

.

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.

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.

.

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.

.

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.

download zoom tool

*_*