8bitrocket.com
25Feb/100

Poll: How Irritated Are You Tech Pundits Who don't Understand Flash?

Poll: Poll: How Irritated Are You Tech Pundits Who don't Understand Flash?

Here is a good example of a popular tech pundit who talks about Flash, but doesn't seem to understand it.  Bob Cringely, I guy I have respected and followed for more than decade, has weighed in on the Flash/HTML 5 topic with some boneheaded statements:

"Flash always picked up where the browser left off, but it can't talk to your webcam, store local files, or draw pixels directly to your screen."

WTF? Flash can do all those things (if you include Air for storing local files...something you DO NOT want your browser doing anyway).

Cringely is well respected, but it looks like he doesn't do any %&$*! research before he blows his tech wad into his blog.  After 10 years of blogs, I'm done with him. 

Anyway, please take this poll now:  (did I sway your vote?)

How Irritated Are You Tech Pundits Who don't Understand Flash?

23Feb/100

HTML 5 Canvas For Flash Developers #1: What The #@*! Is The HTML 5 Canvas?

In this set of tutorials, we will explore how the HTML Canvas relates to Flash developers.

So, the first question to answer about the HTML 5 Canvas appears to be this:

"What The #@*! Is The HTML 5 Canvas?"

The short answer is this:

It is an area on a web page set-aside to display and manipulate bit-mapped pixels in "immediate" mode. "Immediate" mode is a way to draw pixels that gives a programmer ultimate control, but requires the screen objects to be tracked and be redrawn entirely in code. You create it with the HTML tag, and you manipulate it with JavaScript. The Canvas is a window into a bitmapped world that, until recently, only existed with plug-ins like Silverlight , Java ,and of course Flash. The Canvas is currently supported (in part) in the latest versions of Firefox, Opera, and Chrome, but not Internet Explorer

The tag was created by Apple initially to support their OSX widgets, and as extension to Safari. The tag was recently adopted as part of the HTML 5 spec after being pushed by both Apple and Google. The HTML 5 spec has many parts besides the , and many of them should seem familiar to Flash developers:

  • H.264 video support (Flash has this already, had it since 2007. Oh, and by the way, Apple's Steve Jobs can go on and on about Flash being proprietary...even though the SWF format is open, but at the same time his love for H.264 makes no sense, as it is CLOSED, proprietary format! )
  • Local storage (more like a Flash shared object, not a Cookie)
  • SVG support: SVG is a vector graphics engine for web browsers. Yep, Flash has had that for a long, long time too.

Since the works in "immediate" mode, it does not have a Display List built-in, like Flash AS2/AS3 (which operate on a "Retained" mode, but can be made to work in "immediate" mode by going right to bitmaps themselves). Instead, you must keep track of all objects and their movement yourself. That means that very simple things that you are used to in Flash, are simply not available in the unless you build support for them yourself. For example, There is no easy way to create tweens, except to create them all in-code. The good news for hardcore programmers, is that sheds a lot of layers and forces you to write clean display code from the get-go. Blitting engines should be par for the course because they will be the an efficient way to display graphics on the Canvas. However, for the legions of designers and designers/programmers who use Flash on a daily basis to create interactive (but not hardcore) web content, the state of the Canvas is a freaking nightmare. While there are a lot of promising tools for JavaScript (i.e. http://processingjs.org/     http://www.ambiera.comcopperlicht/ -thanks Paul) to help c  no tools currently exist that will make the process of creating apps or animations easy for designers. In a few months, when producers at over-zealous agencies have sold their big-name clients on this "Flash replacement that works on the iPad", design and development teams will suffer long and troublesome hours trying to make their claims a reality.

Things For Flash Developers To Note About the HTML 5 Canvas

For Flash developers, a few things stick out as interesting about the .

  • Browser compatibility is an issue. You will have to write code that targets one browser or another. One of first test with Mouse events proved this to me.
  • Recall, that many of us "old" guys (web developers before 2000) used HTML until Flash became viable. We didn't adopt Flash for web sites because Macromedia made it, we adopted it because it worked. The problems with HTML 5 are still the same problems we tried to solve with Flash and HTML 2, HTML 3 and HTML 4: Cross browser issues and the need for real interactivity.
  • Again, There are no real "designer friendly" tools for the Canvas. In fact, a product like the Flash IDE would be perfect to make Canvas apps because it could spit put all the complex JavaScript to make it all work much faster than coding it by hand. I fully expect Flash CS6 will have an "Export as Canvas" option,
  • JavaScript is essentially ActionScript 2.0, so it will be familiar, but also seem like a few steps back from AS3
  • There is still no easy way to "hide" your code, but you can use an JavaScript Obfuscator (thanks to Chris Cutler for this point) that does essentially what a SWF encryptor does for Flash apps.

HTML 5 Canvas Hello World

So, now that you know a bit about the Canvas, here is a "Hello World" app using the element. Be sure to view this with the latest version of Firefox, Chrome, or Safari. In the next lesson we will discuss a bit more about how a program like this works, but for now: Hello World!

The area below is a :

See demo here

Here is the HTML code used to create that Canvas: (by the way, a lot of this code was adapted from the code presented here: http://dev.opera.com/articles/view/html-5-canvas-the-basics/) I've added a "Main()" function because I suspect that is the way my code will be going in the future.

[cc lang="javascript" width="550"]




Your browser does not support the HTML 5 Canvas.



[/cc]

There you have it, a short introduction to the HTML 5 . Next time We'll explore some code in more depth.

 

19Feb/100

Tell Us About Your Latest Flash Project

After you take the "Flash Development Tool Survey", why don't you tell us about your latest project?

Yopu can do it all over here: http://8bitrocket.ning.com/forum/topics/what-is-your-newest-game

18Feb/100

Survey: What Are Your Preferred Flash Development Tools?

OK, now for our first survey.
We'd like to know what your preferred tool set is for Flash development:
Head on over to here to take the survey.

(Is this a cheap tactic to try to get you to check out our new forums and social interaction features? Yeah, probably).

16Feb/100

Balloon Saw (Essential Flash Games book demo) (2010)

Game Demo From Essential Guide To Flash Games Book (2010)

Filed under: Action, Games No Comments
15Feb/100

Blaster Mines

Survive each level by blasting all of the mines in the 360 degree scrolling sector. When your shield is depleted, your game is over. Your ship will follow the mouse and auto fire.

Filed under: Games, Shooter No Comments
15Feb/100

Tutorial (AS3): Using Fonts Embedded At Compile-Time

Tutorial (AS3): Using Fonts Embedded At Compile-Time

I am continuing to explore the use of external assets embedded at compile time in AS3. Today we will look at how to embed and use a font in this manner. The Embed compile-time directive is available to users of the Flex SDK, Flex Builder, Flash Builder (if and when it comes out), and Flash IDE users (CS4 and beyond).

First, let's find a font

To test this properly you might want to use a font that you do not already have installed. I went to SearchFreeFonts.com and found a nice font that is free for commercial use (this isn't really a commercial use as I lose my shirt on this site, but just in case...). The name of the font is :01-10-00. I recommend that you donate to the creator of any font you find useful.

Let's start the project
I am going to use Flash Develop to do this small project. You don't have to use this. In any case, place all of the files we create in the same folder. This is the /src folder for a Flash develop project. So, for now you will have a single file (we'll use the True Type version of the font) "01-01-00.ttf". I know it is a strange name, but it is a pretty nice font.

Now we will create our main class file
In the same project folder, let's create a class file called: "FontEmbedTest.as". This will need to be the "always compile" class in Flash develop or the "document" class in the IDE.

1. First we will start off our class and import the other classes we need:

[cc lang="javascript" width="550"]
package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import Libary;

public class FontEmbedTest extends Sprite {
[/cc]

2. Next we will start the variable definition section of our code and create the TextField and TextFormat objects. We will also embed the font using the file name we downloaded and placed in the project folder. Notice that I set both the fontName and fontFamily to be 'font010100". I did this because when I just set fontName or just fontFamily (as I have seen in some other examples) I was not able to get the font to show up properly across all of the different players (Win and Mac) that I tried. We will not use the class that we create "Font010100:Class" but a class or some variable creation is required after the embed directive as the "linkage" name for the embedded asset. Notice that the embed line was broken to fit in the space alotted.

[cc lang="javascript" width="550"]
private var textField:TextField = new TextField();
private var textFormat:TextFormat = new TextFormat();

[Embed(source='01-01-00.ttf', fontFamily = 'font010100', fontName = 'font010100',
mimeType="application/x-font-truetype")]
public static const Font010100:Class;
[/cc]

3. Now we will create the constructor for our class. It will set all of the properties of the TextField and TextFormat instances as well as place the TextField on the screen. Notice that we also finish the class and package brackets to be complete.

[cc lang="javascript" width="550"]

public function FontEmbedTest() {
textFormat.font = "font010100";
textFormat.size = 48;
textFormat.color = 0x000000;

textField.defaultTextFormat = textFormat;
textField.autoSize = TextFieldAutoSize.LEFT;

textField.embedFonts = true;

textField.text = "Embedded Font";

addChild(textField);

}

}

}
[/cc]

Here is a screen shot of this file working:

fontembed.jpg

That's it. It is pretty simple actually.

15Feb/100

Flash Inter-Web Mash-Up Feb 15, 2010: The Mail bag.

Flash Inter-Web Mash-Up Feb 15, 2010: The Mail bag.

I have received an interesting array of emails over the last 2 weeks, some good, some bad, some CGA with speaker sound... (all of these are the good ones).

Ace's Retro Picks:
First let's take a look at some New Grounds retro style games that "our man on the street", Ace "The Super Villian" has found.

THE BEST FLASH GAME EVER (According to Ace). 
Level Up! It's a platformer where you have a number of skills such as jump, run, healing, knowledge, relationship, etc. that you can level up as you use them.  At first it's just fun little gem gathering and chatting with the amnesiac hero guy, but a more sinister vibe becomes apparent as you go along.  It's made by Titch using the Flixel Engine and has a very nice pixely graphical style and Cave Story -esque gameplay.  I'd recommend setting aside an hour or so for this game, though you can save and come back. 
Jeff's take: This is a sweet sweet game. I will be playing it for a while!

One Button Bob:    This is a lot like Wario Ware if you've done that, but the visuals remind me of Pitfall a bit.  You click the mouse to do various tasks.  I thought it would be like press Space to Win, but it's much more skill oriented than that one.
Jeff's Take: A very clever retro styled game where the left mouse button performs a single different action on each screen.

Score: This is an adult oriented text input game like king's quest or hugo.  Retro, but notably sleazy.  You're at a bar and try to get with a girl.  There's no nudity.  
Jeff's Take: Well made, funny, but difficult.

Infectonator: World Domination:   This is totally awesome.  You play as some sort of evil genius trying to take over the world's major cities with a zombie virus.  You can also acquire special units like zombie MJ, zombie Colonel Sandars and zombie Ronald McDonald.  I know that the backgrounds are stolen (RPGM XP) but I don't recognize the zombie sprites.  This is most definitely my favorite of the batch.  
Jeff's Take: Retrotastic score of 95%

Zombie Valentines:   Movie, not a game.  I was very disappointed by that, but it's still funny.  
Jeff's Take: I'll but that for a dollar.

Steven Savage's Fan to Pro
The Fan To Pro site is an excellent resource for all things in the neighborhood of Geektown. The 100+ resources for Video Game Professionals is a nice list that everyone should take a look at. He is even "self-publishing" a book on the subject of Fan To Pro. The site contains pod casts and more and it certainly deserves some of your attention.

The Second Annual Flash Gaming Summit
Mochi is putting on the Flash Gaming Summit for the second year in a row. It will be at the UC San Francisco Mission Bay Conference Center on March 8. It will include the "Mochis" award ceremony, as well as many panels and discussions with industry heavy weights such as: Adobe, Flash Game License, Kongregate, Candy Stand, Armor, The Push Button Engine, and many more. The full details are at the press release site.

8bit little killer
8bit little killer is a sweet little retro game that I reviewed back in December. It deserves a look for anyone who is interested in fin 8-bit shooters and well written retro music.

PlayerIO
Something to keep an eye on is PlayerIO. It is a new multi-player service for Flash games that is in beta right now. It seems to have something to do with Nonoba, but I don't have the details on the affiliation(if there is one).

The Jet Pack Retrofit Contest
Adam Pedersen has been making incredible Jet Pack games in Flash for a couple years now. You can check them all out (and other Jet Pack related zar jaz) at The Jetpack HQ. There are $200 in prizes for the RetroFit contest, so it might be worth of look is you have some spare time.

If you would like something included in the Mail Bag Mash-up, drop me a line info[at]8bitrocket[dot]com. I can guarantee that I will use everything (the bad and the CGA with Speaker Sound don't get published much).

9Feb/100

AS3 Tutorial: Controlling the Main Timeline of a SWF Embedded at Compile-Time

AS3 Tutorial: Controlling the Main Timeline of a SWF Embedded at Compile-Time

Today I was working a a new piece of the Essential Flash Games framework that allows sponsor swf files to be embedded at compile time and displayed before a game reaches the title screen. I am using Flash Develop and the Flex SDK, but the embed compiler directive is also available in the latest versions of the Flash IDE. I wanted to embed rather than load to ensure that the final swf file is a single self-contained unit that can be easily spread to game portals. I tried this a number of different ways to no avail. Most of the standard swf embed code works fine with assets inside the library of embedded swf, but not when trying to control the main time line of the swf itself. So, this is what we are going to cover: If you have been trying to embed swf files at compile time but cannot get your code to recognize the embedded swf, or the totalFrames attribute of the embedded swf returns 0, or if the swf only shows the final frame of your animation then read on. I had all of those problems today and more, but finally figured out a method to make this work properly.

Controlling the Main Time Line of a swf file embedded at run time.

1. Here is the asset that we are going to embed. I Embed all of my assets in a separate Library class as Static Const variables. This could just as easily be in the main document class for your game or application. I will do it the later way here to keep it uncomplicated. This assumes that the 8bitrocketlogo2.swf is in the same folder as the document class. This logo swf is a multi frame animation with 85 frames on the main time line (its just important that there is more than a single frame because you will want to see if you can play and jump to frames to ensure you have control over the time line).

[cc lang="javascript" width="550"]
[Embed(source = '8bitrocketlogo2.swf', mimeType="application/octet-stream")]
public static const LogoAnimation:Class;
[/cc]

This embeds the swf file as a BiteArrayAsset or a pure binary data stream. The mime-type of "application/octet-stream" is needed to embed as this data type.

2. Next we need to be sure to import the necessary classes

[cc lang="javascript" width="550"]
import flash.display.Loader;
import flash.display.MovieClip;
import mx.core.ByteArrayAsset;
import flash.events.Event;
[/cc]

3. We will need to create these class level variables

[cc lang="javascript" width="550"]
public var loader:Loader=new Loader;
public var logo:ByteArrayAsset;
public var clip:MovieClip;
[/cc]

4. Even though the swf file was embedded at compile time we need to use an asset Loader object to make use of it. First we must instantiate the LogoAnimation class we created that is effectively the equivalent of a "linkage name" in the IDE. We do this by assigning the logo variable to be a new instance of this embedded swf:

[cc lang="javascript" width="550"]
logo = new LogoAnimation();
[/cc]

5. We cannot access this data right away for a couple of reasons. First, the data inside this class is not yet an instance of MovieClip. It is still a ByteArray. Second, even though the asset swf has been embedded, we have no idea whether or not the code can access it yet. I found this out the hard way (hair pulling trial and error). I don't know the actual reason for this, but  I know a way to mitigate it. The best way (that I have found) to know when this embedded data is be ready to be used is to "load" it into an asset Loader class instance and check to see when it's INIT event has fired off. Fair enough. Add these lines to do just that:

[cc lang="javascript" width="550"]
loader.contentLoaderInfo.addEventListener(Event.INIT,loadCompleteListener,false,0,true);
loader.loadBytes(logo);
[/cc]

The contentLoaderInfo attribute of the Loader class will fire off the Event.INIT event when the Loader.content is ready to be used. Also notice that we have also called the loader.loadBytes method and passed in the instance of our embedded LogoAnimation class swf (the logo variable).

To be sure that the swf is completely ready before we try to access it, we will create the loadCompleteListener function to catch the INIT event.

[cc lang="javascript" width="550"]
private function loadCompleteListener(e:Event):void {
 
clip = MovieClip(loader.content);
addChild(clip);
clip.stop();
}
[/cc]

The clip variable in a MovieClip instance that we set to be the content of a MovieClip cast of the loader.content attribute. The loader.content contains the actual binary data of embedded swf but AS3 has no idea what to do with it. We cast it as a MovieClip and assign it to our clip variable so we can use this reference throughout our code without having to re-cast every time. The clip variable can now be used to control an instance of the embedded swf just like any other MovieClip instance.

When a swf is embedded all of the time line code is ignored. We need to call the clip.stop() function to make sure the clip stays on frame 1 until we want to actually play it. We also called the addChild(clip) function here, but it does not need to be called until you want to display the clip on the screen.

That's it. It was pretty simple after I finally got the hang of what was going on.

8Feb/100

I Just Want To Say This: I Love Flash!

I've been spending the last year or so looking and/or forced to develop in other technologies thatare not Flash.  I've seen Python, Google App Engine, Silverlight, HTML 5, PHP, Drupal, Joomla, C#, Coco, Android Java, and even Unity.  While all of these technologies have their, there is one thing they are not:

Flash.

There is a reason why Flash saved the internet in 2001.  It's ubiquitous, cross-browser compatible, and 99% of the time, just works.  It allows designers to be designers, and with AS3/Flex, allows programmers to be programmers.  

I played with HTML for many years before I discovered Flash.  Programmed in C/C++ for many years before I found Flash.  Flash is the best of those worlds and more.   I read a lot of technosnobs who do not like Flash.  To bad.   Flash saved the web by making it accessible to marketing (where the money is), designers, and by making it interactive and enjoyable to everyone who uses it. 

Anyway, I love Flash.  That's all I have to say.

This site is protected by Comment SPAM Wiper.