I wrote about how to setup FlashDevelop with Flex Framework last time, but all my old blog entries are taken down when I revamp this site. So, this is just a reblog of the old entry with some minor changes. Hopefully it will be easier to follow this time.

Introduction

FlashDevelop is an open source script editor which primary use for editing ActionScript (Can be use for XML, HTML, CSS… etc as well). Flex is a free open source framework use for compiling Flash SWF. Both of them are free and open source, so it is good for those who want to learn ActionScript without purchasing Adobe Flash.

Steps to Setup

Below is a brief steps on how to setup FlashDevelop with Flex Framework.

• Download and install Java runtime.
• Download and install FlashDevelop.
• Download and extract Flex SDK.
• Launch FlashDevelop.
• Go to Tools>Program Settings>AS3 Context>Flex SDK Location. Fill in the location where you extract flex SDK.
• Go to Tools>Program Settings>Flash Viewer>External Player Path. Fill in the location of the debug Flash player 10. It is include in the flex SDK package in this location \runtimes\player\10\win.
• Done. You can compile flash10 stuff now. Just create a new project, and edit the Main.as in the src folder

Different Flex Framework Version

You can use different version of Flex Framework for different projects. Just set a custom path in the project properties at

• Project>Properties>Compiler Options>Custom Path to Flex SDK

This will be useful to test if your project got screw with a new Flex SDK release without affecting other projects.

Using Preloader

If you want a preloader in your AS3 project, just start a new project and choose “AS3 Project with Preloader“. You will want to add in your own script inside the “progress” function. You can check how many percents of content are loaded by using the following script.

percent = e.bytesLoaded / e.bytesTotal * 100

Free Adobe Flash Builder 4 Standard

Actually Adobe is providing free copies of Flash Builder 4 Standard to students, event attendees, and people who are jobless now. You can get your copy in this page.

LG Malaysia is hosting a web based casual game development contest two months ago. I was thinking to participate but was always hold back by office works. I never did anything major until one of my friend message me.

Ben, a game designer asked me about the progress on my game. I told him my situation and we decide to join forces for this project. We also manage to grab another friend, Adrian (game designer) to the team.

Everything seems to be good after the team is build but there is only one minor problem. We start late and just have like two weeks to work on the game before deadline. So, we meet up on one Sunday afternoon to brainstorm about game design, art styles and lock down all major decisions. After that, all communications were done online via messenger, and emails.

Game Introduction

Our game is known as “Life’s a Game: Live Borderless”, which is designed based on LG’s “Life’s Good” tagline. It is a mash-up of quick & whimsical mini-games depicting everyday life. On a side note, we only have this game title on the last day before submission.

Pixel Art

One of the issues while developing this game is deciding the art direction . Three of us in the team have different art style. If I forced both of my friends to follow my art style, I think the final work would not look good, as different people have different drawing stroke. So, we decide to go for pixel art since it is easier to imitate each other work in pixel art. More over, pixel art give a nostalgia feel of old console games.

Game Play

When I first read about this competition, the first idea that came into my mind is to develop a game base on LG’s “Life’s Good” tagline. And the most obvious way is to develop a game base on everyday life. Ideally, we want to have lots of mini games base on daily life activities. But due to time constraint, we lock the number down to 17 mini games/levels in this Flash game. Most of level is quite straight forward and simple in game play. For example, you need to shave your facial hair by clicking left mouse button for the level show in the image below.

Popular References

We also include some popular references in certain levels such as Revoltech, Danboard, classic batman & robin. For the level show in the image below, there are Mario and Luigi poster at the wall.

Easter Eggs

During final hour of development, we decide to include “easter egg” in some of the levels. In our game, “easter egg” are just hidden easter eggs. You can collect these eggs by clicking on them and it would trigger a slightly different ending if certain amount of eggs is collected.

A virtual Easter egg is an intentional hidden message, in-joke or feature in an object such as a movie, book, CD, DVD, computer program, web page or video game. – wiki

Wisdom Quotes

Another thing we decide to put into game during the last minute is the wisdom quotes scene. When the game ends, a wise old owl will tell the player some wisdom quotes from famous people base on their grades. Initially, we were only using quotes from famous real life peoples such as world leaders and politicians. But we found out certain quotes from cartoon characters is quite good as well, so we decide included them too.

Play The Game

You can play the game by visiting the link below. If you love the game, please vote for us. Click on “Launch Game” button on that site will open a pop up containing the game. If you didn’t see anything after clicking the button. It is most likely the browser is blocking the pop up.

Life’s a Game: Live Borderless – 612KB

I didn’t go to office today and I was staying at home to have some rest. But I don’t really like to spend my whole day by just sleeping and did nothing. So, I dig up an old Flash project that I had long neglected and continue to work on it.

This Flash project is actually a conversion of my “Lost” Flash from AS2 to AS3. Originally, the AS2 “Lost” Flash was based on a wallpaper design that I did for an art event during 2007. One of my friends saw the wallpaper design and told me that the idea could be implement into a simple website. So, I took up the challenge and make it into a simple yet interesting website (at least in my opinion).

Not long after I complete the AS2 version of this Flash, I go through the scripting again and saw how ugly the script was. Although the ugly code is not “visible” to the end user/visitors of my site, but the extensibility is very bad. It was quite hard to add in new features later on.

Being a person that obsessed with “clean” code, I start refactoring the code during 2008. Half way through the process, I realize I might as well completely re-write the script in AS3 OOP. But my AS3 OOP was quite bad back then, so the progress is snail pace and the project got stuck after a while.

Time flies and today is 2010. I finally finish converting this damn thing from AS2 to AS3 after sitting in front of my PC one whole day. Most of the half baked script had been dump and re-written. I also manage to add in a few new features along the way.

Multiple Objects

The AS2 version was just one single character. But now I could spawn multiple objects into this “Lost” Flash by just changing a parameter, thanks to good use of OOP object class. I could even take this class file and reuse it in another project. I never understand that OOP “reusability until recently. That’s the problem with the education system here, the lecturer ask you memorize “The benefits of OOP programming”, instead of teaching you how to code in OOP.

Updated Guestbook

I also manage to update the guestbook system. Visitor can now make star constellation when they leave their comments.

Visit this page to view the updated version and sign my guestbook. I hope there is no serious bug in this version. =)

Download

View the Flash!
Lost Wallpaper 1 Deviant page
Lost Wallpaper 2 Deviant page

After my first experiment using jQuery to develop a rotating banner, I noticed that the script I wrote could be use for other similar list items such as a Twitter update list.

To retrieve recent my tweets, I paste the following JavaScript provided by Twitter into the <body> of my page.

<script src="http://twitter.com/javascripts/blogger.js"></script>
<script src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=3"></script>

Then, I make some simple changes to my jQuery rotating banner script and CSS. Viola! The twitter update list is working as expected. You can view the demo in this page.

Download

To use this twitter update list, You will need to replace the username with your twitter name. You can also specify how many tweets to retrieve by changing the value of count parameter.

jqtwitter.js 1KB
jqbanner.zip 35.5KB

Back then, most JavaScript usage I saw was just for something simple such as bookmark or pop up window. There weren’t many fancy examples but this is not true nowadays. Two years had pass since I heard about Ajax from a friend, I finally decide to spend some time on JavaScript.

JavaScript and ActionScript

Both JavaScript and ActionScript are based on ECMAScript which means they share identical syntax. So, I don’t really have a hard time to understand the basic of JavaScript.

JavaScript Game

For me, the best way to learn is to get my hands dirty instead of reading tons of text and did nothing. I manage did a simple Pong game even though my knowledge on JavaScript is limited.The game can be view at this page.

Pong (marketed as PONG) is one of the earliest arcade video games, and is a tennis sports game featuring simple two-dimensional graphics – wiki

Flash game is usually loop with an onEnterFrame event. But there aren’t any “frames” in JavaScript, so we will need to construct the game loop by using a setInterval() method. Both JavaScript and ActionScript’s setInterval is similar, which execute code periodically.

Of course this little game experiment I did doesn’t really show the power of what JavaScript could do. So, navigate to Google’s Chrome Experiments and have a look at some great experiments did by other PROgrammers.

Download

View JavaScript Pong Game
pong.js 2.69KB

JavaScript Framework

Besides writing your script from scratch, you could also utilize JavaScript framework which will ease your development process. Below are some of the many JavaScript frameworks available.
JQuery
MooTools
YUI
Prototype