It’s Not Flash, It’s FlashJS.

There has been many discussions on Flash being dead because of HTML5. While searching for  tutorials on using HTML5 canvas tag, I came across this open source library called ‘FlashJS.’ FlashJS is a not Flash. It uses code that is very similar to Actionscript. This open source library allows Flash Developers to make web content that is not Flash, without having to learn a whole new scripting language.

After coming across this fun library, I thought it would be fun to try out. I came up with a mini catch balls game. The example is not finished. I just wanted to post what I have so far, so you can sell how cool this library is.  Once I get to the point that I want to be at with this example, I’ll post more on this library.

More Info
http://flashjs.com/

Download
https://github.com/pixelscommander/flashjs

Click the picture to play the game.

(The game is not open source)

Learning Ajax with JQuery

Ajax stands for Asynchronous Javascript and XML.

Ajax allows Web Designers to exchange content easily without having to reload the page. Ajax can exchange content with XML, PHP, and even a text file.

I  have tried Ajax once or twice before doing this experiment/tutorial, but didn’t have any success with it. Now that I am more experienced with Javascript and CSS, then I was when I did my first test, I thought it would be fun to try it again. This time, for the most part I succeeded. The only part I didn’t figure out was removing CSS class that I added. This experiment was fun though because I added content from a external HTML page and when I clicked an image, it kept on adding copies/instances of that HTML page. One of the other features that I messed around with was having it fade out. I didn’t get that to work the way I wanted to. I wanted the copy of the HTML page to be faded out and be removed when the user’s mouse was not above the image. The closest that I got to making it work was making everything on the page fade out.

I’m still working on that removing the class, but you can test it out at the link below.

Ajax and JQuery example

Here is a snippet of the code (click the picture for a better view):

On the index.html page, it has a mouseover on the image and when the mouse is over the image, it calls getAjax().  The url is the string of the URL of the request. If it’s a success, it will add the CSS class, ‘caption’ and get add the content from content.html into the caption class.

The only thing I don’t like about Ajax is that it requires Javascript, so if Javascript is turned off, it won’t work.

Useful Resources

http://api.jquery.com/jQuery.ajax/

http://www.w3schools.com/ajax/default.asp

CSS3 Image Border

One of the cool things about the new CSS3 is that you can use an image as a border. Before, you had to do workarounds to get the border you want, such as making the border as an image and then using HTML or CSS to place the image on the bottom.

I want to give credit to: http://www.useragentman.com/blog/2011/03/29/pixel-perfect-css3-border-image-in-depth/.

While making a website, I was wondering, if you could use an image as a border, so I searched online and found out that with CSS3, you can do it. You would think that you would have been able to do it earlier, since it’s like using a background as an image, but apparently not. I can’t believe though it took three versions of CSS to make it possible.

My example:

Code:

-moz-border-image: url("images/border3.jpg") 2 2 2 2 round round;
-webkit-border-image: url("images/border3.jpg") 2 2 2 2 round round;
-o-border-image: url("images/border3.jpg") 23 22 22 26 round round;
border-image: url("images/border3.jpg") 23 22 22 26 round round;
border-width: 0px 0px 2px 0px;


The first four lines are the CSS for different browsers. The last line determines the width (top, not sure, bottom, not sure). I didn’t see any change when I tried putting numbers in the second and fourth slot.

Now that it is possible to use images as borders, I wonder what crazy borders people will make.

HTML5 Click Inside Canvas Workaround

One of the many things I’ve been trying to accomplish with HTML5 is clicking inside or at least make it look like the user is clicking inside the application.

Before I go any further, I would like to give credit to: http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/, HTML5 Canvas For Games and Entertainment book, and HTML5 Games Development by Example book. For clarification, I’m not being paid for advertising those books or websites. In all of these resources, they helped in some way to make this example possible. The website and the HTML5 Canvas book showed how to make something with HTML5 with the help of JQuery.

I searched online before using these resources and found out how you could click a object in the HTML5 canvas, but it involved around 40 lines of code. I don’t know about you, but I don’t want to write that much code just to click one object. The resources showed another way of getting objects into or on I should say, the canvas. After many tries, I finally got it to work.

HTML

CSS
#canvas{
background-color:#CCCCCC;
z-index:100;

}

#button{
position:absolute;
top:100px;
left:50px;
z-index:5000;
}

Javascript

var _gameButton = $(“#button”);
function init(){
$(‘#button’).mouseup(function(){
alert(“Start Game”);

});

}

Click picture to try it for yourself.

HTML5 Canvas Simple Game

This experiment is the beginning of a bigger experiment of making a HTML5 game using the HTML5′s canvas tag and Javascript. These days, people want HTML5 stuff, why not make a HTML5 game? That being said, I thought I give it a try and I thought it would be fun to recreate one of the Flash experiments that I did.

I want to give credit to: Matthew Casperson (http://www.brighthub.com/internet/web-development/articles/38744.aspx ). I used this tutorial to get things working and then I went on my own to recreate the experiment I mentioned above.

So far, I have a image that I made show up on the canvas and if you click the blue triangle, the ship moves to the right.

Code Snippets

Javascript Mouse Down Listener
canvas.addEventListener('mousedown', movePlayer, false);

Add Image to Canvas
var player = new Image();
player.src = "images/player.png";

window.onload = init;

function init(){
canvas = document.getElementById('canvas');
context2D = canvas.getContext('2d');
setInterval(draw, 1000 / FPS);

}

function draw(){
context2D.clearRect(0, 0, canvas.width, canvas.height);
context2D.drawImage(_player, x, y);
}


Click the image below to test it.