Flash Barracks Blog http://flashbarracks.com/blog Tue, 20 May 2008 17:07:12 +0000 http://wordpress.org/?v=2.5.1 en Creating a Game Like Filler Part 2 http://flashbarracks.com/blog/creating-a-game-like-filler-part-2 http://flashbarracks.com/blog/creating-a-game-like-filler-part-2#comments Tue, 20 May 2008 17:03:42 +0000 Hawdon http://flashbarracks.com/blog/?p=29 You might want to read Part 1 if you haven’t already!

In part 1 we finished the hit test between the orbs, so in this one we will do the rest.

I have commented the code so its just easier if you download it and look at it yourself!

This is what the finished version looks like:

That was pritty much it for this tutorial series.

Now go Spam the Internet with Filler Clones!








If you liked this post, please donate!

]]> http://flashbarracks.com/blog/creating-a-game-like-filler-part-2/feed Creating a Game Like Filler Part 1 http://flashbarracks.com/blog/creating-a-game-like-filler-part-1 http://flashbarracks.com/blog/creating-a-game-like-filler-part-1#comments Sun, 18 May 2008 14:29:04 +0000 Hawdon http://flashbarracks.com/blog/?p=28 Meny of you have probably played Filler.
Filler

The idea is to fill 80% of the stage with a limited amount of orbs.
And another orb can’t hit your orb when it’s still growing.

So in this tutorial I will be showing you how to make the orbs.

The only thing you need in the library is a perfect circle movieclip with the linkage identifier of Filler.

This is the code:

  1. FillersonStage = 0;
  2. gravity = .1;//You might want to increase the gravity a little… Meybe .3?
  3. delay = 10;
  4. _root.onMouseDown = function() {
  5.         FillersonStage++;
  6.         this.attachMovie("Filler", "Filler_"+FillersonStage, _root.getNextHighestDepth(), {_width:20, _height:20, _x:_xmouse, _y:_ymouse});
  7.         this["Filler_"+FillersonStage].growing = true;
  8.         this["Filler_"+FillersonStage].vy = 0;
  9.         this["Filler_"+FillersonStage].vx = 0;
  10.         this["Filler_"+FillersonStage].rad = this["Filler_"+FillersonStage]._width/2;
  11.         this["Filler_"+FillersonStage].m = this._height;
  12.         this["Filler_"+FillersonStage].onEnterFrame = function() {
  13.                 for (i=0; i<FillersonStage+1; i++) {
  14.                         if(_root["Filler_"+i] != this){
  15.                                 for(x=0; x<25;x++){
  16.                         checkColl(this, _root["Filler_"+i]);//Checks hit test between balls —- See function down —
  17.                                 }
  18.                         }
  19.                 }
  20.                 this._y += this.vy;//Adds vy to filler._y
  21.                 this._x += this.vx;//Adds vx to filler._x
  22.                 this.vx *= .99;//Adds friction — shouldnt be over 1
  23.                
  24.                 if (this._y+this.rad>400) {//If filler hits the bottom border
  25.                         this._y = 400-this.rad;//Sets the fillers y
  26.                         if (this.vy>2 or this.vy<-2 and this.growing == false) {//Checks if the fillers vy is great enough to bounce and if it is not beeing dragged
  27.                                 this.vy *= -.5;//Reverses the fillers vy
  28.                         } else {
  29.                                 this.vy = 0;//Else if its vy is not great enough or it is beeing dragged vy = 0;
  30.                         }
  31.                 }
  32.                
  33.                 if(this._x-this.rad<0){
  34.                         this._x = 0+this.rad;
  35.                         this.vx *= -.3;
  36.                 }
  37.                 if(this._x+this.rad>550){
  38.                         this._x = 550-this.rad;
  39.                         this.vx *= -.3;
  40.                 }
  41.                
  42.                
  43.                 if (this.growing) {//If the filler is beeing dragged
  44.                
  45.                 //////////////////////THIS PART MAKES THE FILLER FOLLOW THE MOUSE/////////
  46.                         var dist_x = _xmouse-this._x;
  47.                         var dist_y = _ymouse-this._y;
  48.                         var distance = Math.sqrt(dist_x*dist_x+dist_y*dist_y);
  49.                         angle = Math.atan2(dist_y, dist_x);
  50.                         var speed = distance/delay;
  51.                         this.vx = speed*Math.cos(angle);
  52.                         this.vy = speed*Math.sin(angle);
  53.                 //////////////////////THIS PART MAKES THE FILLER FOLLOW THE MOUSE/////////
  54.                        
  55.        
  56.                         this._width += 2.5;//Ads 2.5 to the fillers width and hight
  57.                         this._height += 2.5;
  58.                         this.rad = this._width/2;//Sets the radius of the filler — Need for hit test
  59.                         this.m = this._height;//Sets the diameter of the filler — Need for hit test
  60.                 } else {//Else
  61.                         this.vy += gravity;//Adds gravity
  62.                 }
  63.         };
  64. };
  65. _root.onMouseUp = function() {
  66.         this["Filler_"+FillersonStage].growing = false;//Stops the dragging
  67. };
  68.  
  69.  
  70. /*
  71. //
  72. //The following function was made my Noddybear
  73. //from Emanuele Feronatos Forum.
  74. //
  75. //
  76. //Forum : http://www.triquitips.com
  77. //
  78. //Noddybear’s website: http://www.noddybear.co.nr/
  79. //
  80. //
  81. //You are free to use it
  82. //
  83. //
  84. //For this function to work your circles will need to have 4 variables
  85. //citrcle._x += vx
  86. //citrcle._y += vy
  87. //rad = cirlce._height/2
  88. //m =  cirlce._height
  89. //
  90. //In this code the circles already have these variables.
  91. //
  92. */
  93. function checkColl(b1, b2) {//This function checks the colison of the fillers.
  94.         var dx = b2._x-b1._x;
  95.         var dy = b2._y-b1._y;
  96.         var dist = Math.sqrt(dx*dx+dy*dy);//Gets the distance between 2 circles
  97.         if (dist<b1.rad+b2.rad and b1.growing == false and b2.growing == false) {//If the circles are touching, bounce away.
  98.                 var angle = Math.atan2(dy, dx);
  99.                 cosa = Math.cos(angle);
  100.                 sina = Math.sin(angle);
  101.                 vx1p = cosa*b1.vx+sina*b1.vy;
  102.                 vy1p = cosa*b1.vy-sina*b1.vx;
  103.                 vx2p = cosa*b2.vx+sina*b2.vy;
  104.                 vy2p = cosa*b2.vy-sina*b2.vx;
  105.                 P = vx1p*b1.m+vx2p*b2.m;
  106.                 V = vx1p-vx2p;
  107.                 vx1p = (P-b2.m*V)/(b1.m+b2.m);
  108.                 vx2p = V+vx1p;
  109.                 b1.vx = cosa*vx1p-sina*vy1p;//Bounces the balls away
  110.                 b1.vy = cosa*vy1p+sina*vx1p;//Bounces the balls away
  111.                 b2.vx = cosa*vx2p-sina*vy2p;//Bounces the balls away
  112.                 b2.vy = cosa*vy2p+sina*vx2p;//Bounces the balls away
  113.                 diff = ((b1.rad+b2.rad)-dist)/2;
  114.                 cosd = cosa*diff;
  115.                 sind = sina*diff;
  116.                 b1._x -= cosd;
  117.                 b1._y -= sind;
  118.                 b2._x += cosd;
  119.                 b2._y += sind;
  120.         }else{
  121.         if (dist<b1.rad+b2.rad){
  122.                 if(b1.growing == true){
  123.                         b1.removeMovieClip();
  124.                 }
  125.                 if(b2.growing == true){
  126.                         b2.removeMovieClip();
  127.                 }
  128.         }
  129.                
  130.         }
  131. }
  132.  

It might be a little hard to read it in the browser, so you might just want to copy it right into flash and look at it there!

You should get something like this:


Notice that when too meny orbs are creating it will start to lag.
This is because of the for loops in the hit test between orbs.
If this disturbs you can remove 1 of the for loops, but remember that in Filler only about 80%
of the stage has to be filled. I might still fix this in future parts!

In the next part I will be showing you how to count how meny % of the stage has been filled and how to create the “Bad” orbs!

You can download the FLA file here!








If you liked this post, please donate!

]]> http://flashbarracks.com/blog/creating-a-game-like-filler-part-1/feed Adding Your Own Buttons to the WordPress Editor http://flashbarracks.com/blog/adding-your-own-buttons-to-the-wordpress-editor http://flashbarracks.com/blog/adding-your-own-buttons-to-the-wordpress-editor#comments Mon, 12 May 2008 18:06:45 +0000 Hawdon http://flashbarracks.com/blog/?p=23 Have you ever wanted to create a custome button for the WordPress Editor? (which you use to create posts)
Well I have, so I started searching around the web for a way to do that and I found this.
You can either go look at that site or you can just keep reading because I will be explaining the same stuff in this post.

On your server go to where you keep all your WordPress files and go to

/wp-includes/js/quicktags.js

In there you should find a lot of pieces of code that are similar to this one:

  1. edButtons[edButtons.length] =
  2. new edButton(‘ed_del’
  3. ,‘del’
  4. ,‘<del datetime="’ + datetime + ‘">’
  5. ,‘</del>’
  6. ,‘d’
  7. );

That is the source code of how to create a button.

Now I’ll explain it.

  1. edButtons[edButtons.length] =
  2. new edButton(‘ed_del’

This simply says that we will now start making a new button.

  1. ,‘del’

Is the text displayed on the button.

  1. ,‘<del datetime="’ + datetime + ‘">’

This is the starting tag of the code you want to be inserted.

  1. ,‘</del>’

This is the closing tag of the code.

  1. ,‘d’
  2. );

This is just closing down the button. I realy don’t know why the ,’d’ is there but I quote from the site I gave the url to earlier:

This is the back end name of the button.

In some cases in the default JavaScript code you will find this at the end of the buttons:

  1. ,-1
  2. );

The ,-1 at the end of the code os just added if the code that is added to the editor dosen’t need to be closed (Start tag — Closing Tag)

Now I’ll show you an example of how you could create a new button.
This one will make any text that is inside the tags be highlighted.

First you can go to the Design button on your WordPress interface and go to ‘Theme Editor’
and start editing the Stylesheet of your template. (In my template its called stylesheet.css)
Somewhere in there add this code:

  1. .highlight{
  2. text-align:center;
  3. color:#FFFFFF;
  4. background:#0066FF;
  5. }

Line 2: aligns the text to the center.
Line 3: Sets the color ofthe text to white.
Line 4: Sets the background color to blue

Then go back to the JavaScript file with the button code and add this somewhere under the other button code:

  1.  
  2. edButtons[edButtons.length] =
  3. new edButton(‘ed_highlight’
  4. ,‘HighLight’
  5. ,‘<p class="highlight">’
  6. ,‘</p>’
  7. ,‘hl’
  8. );

This code will create a button called HighLight that will make any text inside the tags look like this:

This is some highlighted text! It is very easy to change the background and text color from inside the CSS file.
You can even ad some borders by putting in this code in the css:

  1. border-color:#333333;
  2. border:solid;

Hope you found this tutorial helpfull!

If you liked this post, please donate!

]]> http://flashbarracks.com/blog/adding-your-own-buttons-to-the-wordpress-editor/feed Dean’s Code Highlighter http://flashbarracks.com/blog/deans-code-highlighter http://flashbarracks.com/blog/deans-code-highlighter#comments Sun, 04 May 2008 18:23:16 +0000 Hawdon http://flashbarracks.com/blog/?p=12 I been working with my WordPress theme and I got an plugin called “Dean’s Code Highlighter”
which makes it easier for you viewers to read any code.

The terms of use says that I have to make a post about me using it.
So here is a link:
Its called Geish

Here is an example of what the code will look like.

  1. //Just a simple ActionScript code to make something move left and right with the arrow keys.
  2. ball.onEnterFrame = function(){
  3. if(Key.isDown(Key.LEFT)){
  4. this._x-=2;
  5. }
  6. if(Key.isDown(Key.RIGHT)){
  7. this._x+=2;
  8. }
  9. }

I will be posting some flash tutorials soon.
Meybe about how to make a highscore board…

If you liked this post, please donate!

]]> http://flashbarracks.com/blog/deans-code-highlighter/feed Starting a blog http://flashbarracks.com/blog/starting-a-blog http://flashbarracks.com/blog/starting-a-blog#comments Tue, 29 Apr 2008 18:02:24 +0000 Hawdon http://flashbarracks.com/blog/?p=3 Hi my name is Oskar Koli, but you should call me Hawdon.
I’m a flash developer from Helsinki Finland.
On this blog I’ll be posting tutorials, reviews, with more.
I also run the site www.flashbarracks.com which is currently under construction.

I hope you will enjoy you stay on this blog.

This was an introduction to this blog.

If you liked this post, please donate!

]]> http://flashbarracks.com/blog/starting-a-blog/feed