The whole game as you know uses Starling Framework to power itself up through Hardware Accelerated rendering.

Now, do enjoy downloading the full source code for free but please DO NOT use the graphic assets in any of the commercial projects. It’s a humble request. Use it only for learning purposes. As for the source code, you may play with it, modify it as per your needs and use it in any project you want. These are some of the consolidated “game development” features this source showcases: -

• Textures
• Animation using the Juggler
• Texture Atlas or Sprite Sheets
• Parallax Background
• Mouse/Touch Interaction
• Collision/Hit Detection
• Object Pooling
• Bitmap Fonts
• Starling Extension: Particle System

As far as the optimization is concerned, the game is well optimized (though there is always scope for more). It runs on most tablets at 60 frames per second. I still have a couple of video tutorials to create around Starling Framework + Optimization, after which I shall update the GitHub source code of this project as necessary.

The simplest way to use this source code is to download the master branch as a zip file and then simply import the downloaded set of project files as a “Mobile ActionScript Project” in Adobe Flash Builder 4.7.

Hope you guys find this useful, and if you do, please leave a comment below! Also, if you happen to use any part of the source code from this project in your projects, do leave a comment with a link below so I can check your game out and don’t forget to credit me for what I have been helpful for. Cheers!

If you are a developer, this is the place to create awesome games and show off your coding skills where you get a chance to build your own game and win cool and exciting prizes. You’ll meet like-minded people and learn more about game design and development using Adobe Flash® technologies.

Rules - http://gaming.adobe.com/events/gamejams/

Register for Adobe Game Jam, India - http://adobegamejamindia.eventbrite.com/

I will also be speaking on 2nd Nov 2012 at the NGDC on “Stage3D: Changing the Game“. Below is the abstract of my session: -

Surely the biggest challenge for today’s game developers is to have their games run on multiple platforms ranging from desktop-web to mobiles and tablets. Meet Stage3D! A fresh and exciting feature and set of APIs for Adobe Flash Player 11. Bringing not only GPU powered 3D games into the web browser and devices, the supporting frameworks do a great job of allowing developers to easily build GPU powered 2D & 3D games or both combined, with ease of the extremely simple ActionScript 3.

See you there!

 In the 9th episode, add food items to the in-game screen randomly and animate them. Using similar techniques used for obstacles, detect collision between the items and hero.

In the 10th episode, learn how text rendering works in Starling Framework. Understand the two types of fonts you can use to display text in your games.

1. Slim and better looking.
2. Paging support with no requirement to refresh the page.
3. Better thumbnails.
4. Search through titles and descriptions of the tutorials.
5. Filter by text only or video tutorials.
6. Filter and display tutorials belonging to a particular series, e.g., Starting with Starling.
7. Looks great on tablets!

I hope you will find these updates useful and more accessible. Thanks!

I have also carried out a stretch of optimization considerations for the iOS version. I am also working on improving the experience, performance further and the whole framework of navigation, response and some extensions to this game. You should be seeing the next dot-release very soon.

Please visit the AppStore and enjoy playing Hungry Hero on your iPad(s)!

In the 6th episode: Write the base code needed to control the game state and hero’s speed. Define idle state, add “Start” button and also make the hero fly in from the left side of the screen. Once the hero is inside the screen, change the game state to the flying state.

In the 7th episode: Create the Obstacle class. Also define the watchout sign animation, obstacle art and crash art.

Finally animate the obstacles from the right side at random vertical points and remove them once they go out of the screen on the left.

Gamua released a much awaited version – Starling Framework 1.1 a couple of days ago! Clearly, a lot of improvements have gone into it. Here are some of the areas of improvement -

• I would say, first and foremost is the performance boost for the iPad 1.
• Introduction of Blend Modes for images for wonderful effects.
• A very handy component built-in to show statistics – frame rate, memory, etc.
• The most seriously useful feature – Multi-resolution development with support for multi-resolution textures.

I hope to cover some of these in my upcoming episodes of Starting with Starling. So, don’t wait more… Start with the new Starling 1.1!

In the 4th episode, welcome screen’s assets are picked from the Sprite Sheet, instead of individual .png files. You will learn to extend starling.events.Event and create a custom event class for navigation between welcome and in-game screens.

I will start showing the parallax scrolling of in-game background based on a variable speed of hero, in the next episode, coming very soon…

I drew the character/elements on paper, then converted them to vector drawings in Adobe Illustrator. Finally animating the hero character in Flash Pro, I created the sprite sheet. It was a fun experience building all of these in the crunch time.

I also thought of what else I could present as part of this series. I am glad a lot of you have provided feedback through the comments/mails on how you like the idea of a complete workflow being covered. I have plans around this to make sure I help you guys with better understanding of the “process”, rather than just a piece of it. Stay tuned!

With that in mind, I released the 2nd episode: Welcome Screen of this video series yesterday. Do have a look at it and let me know what you think. Do re-tweet and share!

I built this game as part of the tutorial series “Starting with Starling“. In fact, this is the game I plan to build in the tutorial. The next episode of this series should be online in a couple of days.  To get updates on my tutorials, you can subscribe and get notified.

Through this series, learn to take advantage of Adobe Flash Player’s Stage3D feature and hardware-accelerate your 2D games.

In the first episode (Introduction & Setup), learn what Starling framework is, how it works and how to set it up.

Your valuable suggestions and comments are welcome. If you have ideas or requests for specific topics, please do post to me and I shall try my best to include them in the future videos if possible.

We just launched a new section of the site dedicated to game development and showcase. Do check it out.

You will find awesome games already published on the web and devices that use Adobe Flash Platform. It also showcases the latest and the greatest – Stage3D and related features of Flash Player. Also beginners, learn from various frameworks, tutorials and links on the Resources page in the portal.

The tutorial files attached with this video is the ActionScript project containing full source of the game.

If you have any feedback or questions, please feel free to write to me.

In this episode, we will add a new type of balloon called “Bomb” balloon and randomize the creation of the balloons. We will define the “type” property for our entities and detect collision between bullets and balloons. Finally, we will pop the balloons out by showing proper graphic once collided with the bullet.

In this episode, we will create game objects – Hero, Bullets and Balloons. We will also animate the Hero based on mouse movement, shoot bullets upon mouse click and generate random balloons and animate them upwards.

This tutorial is targeted towards developers who have knowledge in basic programming and OOP concepts. If you have been an app developer and want to get into game development with basic examples to start with, this is the right place for you. I hope you enjoy learning!

The book demands nothing more than knowledge in ActionScript 3 & a little bit of Flex. Having the knowledge of advanced Flex development & Flash Builder would make it much easier to follow the examples. I really like the structure of the book that takes the readers from the basics of setting the environment up to the publishing of your apps with the social features that you desire. I tried some of the examples in the book and I should say it was pretty easy to follow. I think an absolute beginner should be able to figure out the process of logging in/authenticating, reading profile data and posting something to wall in about 2 hours approximately.

In about an hour of going through this book, I could build a simple app that printed out the percentage of male/female friends the user had. Here is a screenshot of this test application I built. Though the percentage doesn’t add up to 100 in the screenshot, I am pretty sure it is the privacy settings of some of my friends that has ignored the last 2% in the results or may be I need to investigate a little more.

That apart, building the Test Console was particularly very useful in understanding the results and writing code. I also happened to try this with Flash Professional CS5.5 and obviously seemed not much different from how it is instructed for Flash Builder. I just needed to do a couple of minor tweaks for this.

You will need to download and use the Facebook ActionScript 3 SDK from GitHub to start with the development.

I would say it is a pretty good resource for people wanting to make their games social. So, I think you should grab a copy of this book right away and start socializing.

With the new awesome features in the current and future Flash Player just right for gaming, it will be challenging, yet a huge learning curve for me. Through me, I plan to make it equally easy & better for you.

I have had experiences building games in Flash before. Though I have not published most of my work, that’s exactly what I also plan to do going forward. I am super excited about this new role and I am hoping for a good deal of support from you.

Happy gaming!

My session title is – “Understanding the magical world of Design!“. I will be speaking about the experience of end users in playing the games you develop. How important are the design concepts right from color, layout, concept, etc. With a strong belief that Art & Design is independent of the software or technology used, learn how colors influence moods and purposes, layout/composition, elements of user interface, inventing new experiences.

See you there!

The session will cover the concepts to understand right from the design phase of a game development to the deployment on to different platform devices. Hopefully, I will also compile a game on the stage on to an iPad, iPhone, BlackBerry PlayBook and Samsung Galaxy Tab… (hopefully).

See you there!

All the assets were digitally painted by Madhumita Manjunath (New Tint). This is the same Madhumita who worked on all the digital assets for AFPS Photo Booth 2010, MAX Photo Booth 2010 and the upcoming Snap Stall.

This version of the app is a variant of the new “Snap Stall“. I am working towards making this available on different market places for tablets and touch smart phones (iOS, Android and BlackBerry PlayBook). Snap Stall will be available very soon on all these market places for free.

You can view the cards customized by MAX 2011 attendees on Flickr and Photoshop.com here: -

Flickr Stream: - http://www.flickr.com/photos/adobemaxphotobooth

Photoshop.com Stream: - http://www.photoshop.com/users/adobemax/albums/36ba83a75f664304b9c14ecde68ebf2f

For more information on the application: – MAX Photo Booth project page

I just want to thank all the community members, developers & enthusiasts who made AFPS a success this year! Energy was commendable guys. I was truly happy with the interaction I had with a lot of community managers, members, senior developers and newbies.

Keynote by Ben Forta on Day 1

As part of the keynote this year, we also had “The Ben Forta Show” arranged, where Ben interviewed people and handed them over a nice coffee mug with his signature. In the process of the interview, the audience did get to see awesome app demoes built in Flex and ActionScript for devices. Among them were applications for RedBus and Perfios. Here are a couple of pictures from the show: -

This year, we had a “Device Wall” in our stall apart from the usual demos. This was the wall where people enjoyed to play with a variety of AIR applications installed on the devices.

Of course, last year’s “Photo Booth” was called “Snap Stall” this year. Hosted on http://www.snapstall.in, I am planning to take this application ahead with as many props as possible and to as many devices as possible. Look forward to this application in the market places soon. We primarily deployed Snap Stall on 2 BlackBerry PlayBooks in the stall this year. Below are some of the photos of the Snap Stall and its result.

One of the main attractions this year (non-technically) was a wonderful “Flash Monument”. This was an awesome Flash Player logo carved in wood of about 5 feet tall standing right in the middle of the venue entrance. The monument drew a lot of attention and a lot of attendees took many many pictures with it. All the guys who attended the event, hope you had fun with the Monument!

We also had a 16′x6′ poster in the venue that we called “The Flash Timeline”. This is where everyone could stick tiny notes with their names/messages on it. The idea was to make a mark on the version of Flash/Flex you started working on.

Hope all those who attended the summit found all the tech sessions/workshops useful. Looking forward to the coming years… Lastly, though I personally didn’t get the whole Evangelism team to be present for a group photo with the Flash Monument, We finally managed to do it in front of the Timeline… Here’s the photo: -

Just get your laptops and the apps you have been working on or just the idea you have in mind!

You should definitely attend this if -

• You already have an app/game you have developed/designed and want tips and info on porting it for the PlayBook.
• You have a cool idea and want to get started with the design, development, packaging and publishing to the PlayBook.
• You worked on AS3 or Flex but want to put your hands on Flash Builder 4.5.1 learning new features specific to PlayBook.
• You have built an app and want experts from Adobe and RIM to help you “while” porting it to the PlayBook.
• You want to attend Adobe Flash Platform Summit 2011 and want to win up to 2 free passes to the full conference (worth Rs. 6000).
• You want to also try and win BlackBerry PlayBooks and Smartphones.

We will start with the presentation on Flex and AS3 for BlackBerry PlayBook. Make use of this opportunity to clear hurdles in your porting, packaging and signing process for this platform. Experts on the subject from Adobe and RIM will be present in the clinic.

Visit - http://www.facebook.com/event.php?eid=187827427940852 to get more information on registering/venue/timing and RSVP now!

See you there!

If you have already registered, attending or even speaking at the conference, do share the information by using the banners available on the site.

Also, come visit Adobe stall at the summit this time for exciting demos and content showcased on various devices! The summit this time will be truly exciting!!!

Here are my session abstracts -

Top AIR APIs to Bring your Mobile Apps to Life

Get to know the most important APIs of Adobe AIR 2.6 that give you the expertise you need to build great apps for devices. Simple, yet powerful, APIs that give you access to device in ways which take your mobile apps to the next level. All the way from simple file access to accessing the Microphone, Geolocation, Accelerometer and many more features, this session will cover most of the APIs that are critical and experience booster for your AIR applications for multiple platforms and devices. Also learn the basics of creating multi-device, multiplayer apps and games using P2P and other multi-user interaction classes.

Design First Approach – UI/UX for world domination

Did you ever wonder why and how design is important for anything you do? Simply called User Experience sometimes, simply called User Interface sometimes, simply also called “The Wow Factor” most of the times, this session talks about the tips and design concepts that need to be kept in mind when you want to make the best design for your apps, games or any content. Yes! There are elements/concepts that indirectly make big differences in the experience of users using your apps. With a strong belief that Art & Design is independent of the software or technology used, learn how colors influence moods and purposes, layout/composition, elements of user interface, inventing new experiences without re-inventing the already familiar UX patterns or conventions. Designers/Developers, learn to design; and everyone else, learn to appreciate Design!

See you there!

Hope to see good rating for the same.

http://appworld.blackberry.com/webstore/content/30187?lang=en

My session abstract: -

Art and Science of Design

“Do you think all of us who are geeks understand what Design is? Think again. Have you ever found out that Design is subjective? Have you ever thought of appreciating Design from any other perspective than that of yours? Understanding tools, languages, algorithms to create graphics is the Science of Design. Understanding how to create and communicate with graphics in a creative and impressive way is the Art of Design. Communicating with graphics is Visual Communication. Only with the right mixture of Science and Art in our designs can we create magic! In this session, I will cover the theory of colors, layout, visual communication, tools, methods and techniques used in digital art in today’s world ranging from – Graphic Design for Web and Print, Digital Painting, Video Editing, Post-production, Audio and a lot more.“

Here’s a detail on my session: -

“Learn the aspects of building multi-screen and multi-form factor games for various devices ranging from mobiles, tablets to desktop. Also covered will be the aspects of design/development for web based games and standalone games for multiple devices. Understand how Adobe Flash Platform makes it extremely easy for you to build striking games, test and publish them for many devices.“

Thought of writing a simpler, straight forward post that will explain and show how to do the same in easy steps (for those who don’t want to spend more time understanding every aspect of it).

Assuming the AIR app is built using Flash Professional CS5 (that’s what I did), I am using command-line tools to get through this process. So, it is also obvious that this process is for pure ActionScript projects.

The screenshots of the Terminal window that you see in this tutorial are the actual screenshots I took. I wrote this tutorial first and then followed the commands I have mentioned myself and took the screenshots. I also didn’t get any errors following this. So, I am pretty sure this process works.

Publish the SWF file

First, have the .SWF file published.

Have the resources ready

Now, you will need 4 files to create a nice package: -

1. Application Descriptor XML (game-app.xml)
2. Icon file that goes on the tablet’s applications screen (icon.png)
3. A splash screen PNG file that appears before the actual swf is executed in the tablet (splash.png)
4. Icon and Splash screen mentioned in an XML (blackberry-tablet.xml)

Step 1: Download and install the SDK

Download and install the BlackBerry Tablet OS SDK for Adobe AIR from – http://us.blackberry.com/developers/tablet/adobe.jsp

I have not covered the installation, setup and execution of the simulator in this post. Therefore, I will just mention the steps required to install the SDK, create package and sign the package. The link to download the SDK should be similar to the image below for your respective platforms: -

Installing the SDK should dump the SDK into a folder name similar to – “blackberry-tablet-sdk-0.9.3″. These are the folder contents: -

Step 2: Just before packaging

This is how my directory looks before I start packaging. It contains the resources mentioned in Step 1 and the downloaded SDK.

Step 3: Create the blackberry-tablet.xml

This XML file contains the icon and splash screen that need to appear on your tablet’s applications screen and just before opening the application respectively. Below is the screenshot that shows the appeared icon_86.png and crazygems-splash.jpg used in blackberry-tablet.xml: -

<qnx>
  <initialWindow>
    <systemChrome>none</systemChrome>
    <transparent>false</transparent>
  </initialWindow>
  <publisher>hsharma.com</publisher>
  <category>core.games</category>
  <icon>
    <image>Icon_86.png</image>
  </icon>
  <splashscreen>crazygems-splash.jpg</splashscreen>
</qnx>

Step 4: Create the Application Descriptor XML (CrazyGems-app.xml)

This is by default generated by Flash Pro when your publish settings is set to AIR 2.5. I have made minor changes that restrict the orientation to landscape only.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<application xmlns="http://ns.adobe.com/air/application/2.5">
    <id>com.hsharma.crazygems2</id>
    <versionNumber>2.1.0</versionNumber>
    <filename>Crazy Gems 2</filename>
    <description>Crazy Gems 2.1</description>
    <name>Crazy Gems 2</name>
    <copyright>http://www.hsharma.com/projects/crazygems2</copyright>
    <initialWindow>
        <content>CrazyGems.swf</content>
        <systemChrome>standard</systemChrome>
        <transparent>false</transparent>
        <visible>true</visible>
        <fullScreen>false</fullScreen>
        <autoOrients>false</autoOrients>
        <aspectRatio>landscape</aspectRatio>
        <renderMode>auto</renderMode>
        <maximizable>false</maximizable>
        <minimizable>true</minimizable>
        <resizable>false</resizable>
    </initialWindow>
    <customUpdateUI>false</customUpdateUI>
    <allowBrowserInvocation>false</allowBrowserInvocation>
</application>

Step 5: Create the .bar package

This is the simple command that is used to package the .swf and other resources into .bar. Note: The packaging and signing tools are in the subfolder “bin” under the SDK folder.

blackberry-airpackager -package DesiredPackageName.bar game-app.xml blackberry-tablet.xml GameOrApp.swf IconFile86x86.png AllOtherFilesRequiredByYourSwf SplashScreen.png

Note that all the text in red needs to be replaced with the files that you prepared in Step 1. SplashScreen.png and IconFile86x86.png refers to the files included in the blackberry-tablet.xml file in Step 3.

AllOtherFilesRequiredByYourSwf parameter in the above command is where we need to specify all files that are required by the app .swf in runtime. These filenames should be separated by spaces. Also, don’t forget to copy the files in the same folder as .swf.

Now, using this command to actually package my game, looks like this: -

blackberry-airpackager -package CrazyGems2.bar CrazyGems-app.xml blackberry-tablet.xml CrazyGems.swf Icon_86.png crazygems-splash.jpg

This generates the desired CrazyGems2.bar file.

I have ignored -launchApp, -installApp and -device and -password parameters of command-line as they are for running and testing the app on the PlayBook or simulator.

Step 6: Preparing for signing

To sign your package, you will need a signing key from BlackBerry. You can request for the same from https://www.blackberry.com/SignedKeys/.

In this process, please keep in mind that the PIN you enter in the field shown below is extremely important. Do not forget this. Also, note that this PIN allows alpha-numeric characters. The catch is, the alphabets used will be forced to small-case.

You will receive a .CSJ file in a couple of days from BlackBerry.

Step 7: Creating the CSK file

Once you receive the .CSJ file and you are ready to sign, you will need to open Command Prompt (Windows) or Terminal (Mac).

Make sure you change directory to the one where your SDK is copied. Enter the following command to create a .csk file: -

blackberry-signer -csksetup -cskpass DesiredCSKPassword

Again, text in red is what you need to fill in with your information. Enter the desired password for csk file. This password will be used in just a bit. Also, the file created won’t be in the same folder. This is created in -

Mac:

~/user/Library/Research In Motion/barsigner.csk

Win:

\Document and Settings\<name>\Local Settings\Application Data\Research In Motion\barsigner.csk

or

\Users\Youraccount\AppData\Local\Research In Motion\barsigner.csk

Deleting the CSK (just in case)

If you have already created a .csk and want to delete it, use the command below: -

blackberry-signer -cskdelete

Step 8: Register with RIM Server

Now, you need to register with RIM Server using the .csj file. Run the following command: -

blackberry-signer -register -csjpin PinYouEnteredWhileRequestingCSJ -cskpass PasswordYouEnteredWhileGeneratingCSK client-RDK-XXXXXXXXXX.csj

PinYouEnteredWhileRegisteringCSJ – is the one you entered by choice in Step 6.

PasswordYouEnteredWhileGeneratingCSK – is the one you entered by choice in Step 7.

Once you submit, you should see the response – “Successfully registered with server.”

Once you get this message, you should also have received a confirmation email from “websigner@ws-smtp.rim.net” with the subject “Successful Registration Request for Client ’1279793156′”.

Step 9: Create the .p12 Certificate

Once you have registered with RIM server, you can generate the .p12 certificate required to sign your .bar file package. Finally… eh? Not yet actually… Signing in next step.

blackberry-keytool -genkeypair -keystore DesiredCertificateName.p12 -storepass NewPassword -dname "cn=YourCompanyName" -alias author

Make sure you modify only the red text in the above command.

YourCompanyName can contain spaces and full-stop. But not comma.

Step 10: Sign the package with the .p12 Certificate

Finally, we are now ready to sign the package we created in Step 7. Note that you will need to sign the .bar file twice. Once from RIM and once from you as an author.

Use the below command to sign the .bar file first time: -

blackberry-signer -verbose -cskpass CSKPassword -keystore CertificateName.p12 -storepass StorePassword BarFileNameForRIMToSign.bar RDK

CSKPassword – from Step 7.

CertificateName – from Step 9.

StorePassword – This is the NewPassword from Step 9.

BarFileNameForRIMToSign.bar – The .bar file created in Step 5.

Now, sign the already signed file. The first time you signed, was from RIM. Now you sign from the author’s (your) side.

blackberry-signer -keystore CertificateName.p12 -storepass StorePassword RimSignedBarFile.bar author

CertificateName – from Step 9.

StorePassword – This is the NewPassword from Step 9.

RimSignedBarFile.bar – The .bar file created in Step 5 and signed in Step 10 in previous command.

This signs the .bar file again.

Conclusion

So, here you go. You should have a final .bar file that is ready to be published on the BlackBerry App World. Please do write back if you find issues. I will try my best to point you to a possible solution or place where you can find one…

Happy packaging!

UPDATE:

If you get an error “Code signing request failed because this file has been previously signed.” when you try to sign a new package (probably not a major change) with same name and version for your app, change the <versionNumber>x.y.z</versionNumber> tag (line 4) in Step 4. Good idea to increment “z” in the version (revision version). Then try to repackage and it should work.

A lot of Tablet Computers and Touch Screen devices have emerged, and it’s time to create games that have virtual joystick support on the screen for easier gameplay. Read on and discover how you can create a virtual joystick for your games on touch enabled devices.

This tutorial will take you through the basics of setting up your environment and writing code for a character that moves according to the way Joystick is operated. Don’t forget to leave your comments or shoot a mail to me.

Here is an extract from the article -

When designing for multiple platforms like mobiles, PC, Net books, etc. there are a few common challenges that all developers face. These include scaling the game to the respective screen size, performance issues, device capability (touch screen, accelerometer, keyboard, GPS etc.).

Advising on the using the prospect to the fullest, Hemanth says, “Developers should keep in mind that developing for multi-screen will always give you more users and it is a better way to monetize. Handhelds, tablets and PC’s are three main multi-screen devices. And as a lot of companies are shortly going to introduce android tablet PC’s, developers should make maximum use of this opportunity to push their content on these platforms”.

I will be speaking about how Adobe Flash Platform’s new features can be made use of to build amazing games and content.

Understand the optimizations that need to go into your content to make it run on Netbooks, Desktops, Mobiles and the Web!

See you there!

This year Adobe MAX is featuring Photo Booth on the Community Pavilion exhibit floor. With four locations to choose from, MAX attendees can step right up and use augmented reality markers to kick off an application that allows them to place themselves inside MAXtopia with their favorite logo and some quirky props to create a unique souvenir.

Customize your Adobe MAX Photo Booth Card with different product logos, funky hair styles, product branded caps, finally sharing it with the world on Flickr, Twitter, Photoshop.com and also through email.

MAX Photo Booth is a multi-touch AIR application built in AS3 using Flash Professional CS5 and Flash Builder 4.

Do visit the Adobe MAX Photo Booth project page for more details, screenshots, video and more…

Adobe Flash Platform for Mobile Development

“Write one code, ActionScript, and publish your application to multiple mobile devices, web, and desktops. Learn the aspects of multiscreen coding using Adobe Flex, Flash Builder, Flash Professional and emulate your content in Adobe Device Central. This session will cover ActionScript coding & designing for multi-screen and deployment across multiple devices making use of device specific features such as accelerometer, multitouch gestures, geolocation, etc..”

A specific requirement would be to have Froyo (Android 2.2) on your phone before you install the runtime. If you need the runtime on your phone, do sign up for the AIR for Android Prerelease Program. Hope you enjoy playing the game on your phone.

New Feature: – This version uses Accelerometer of your device for the game play.

.

This application was built in AS3 on Flash Professional CS5 + Flash Builder 4 for AIR 2 desktop. I am also planning to port this to AIR for Android version. Comments and suggestions are welcome.

I would also like to thank Madhu from NewTint to have helped me with the artwork assets (digitally painted) that are used in this application.

Please refer to my previous post on how to extract the provided files, setting them up in Flash Professional and Flash Builder. Once you are done setting up, you may proceed reading this article to understand the code constructs.

Prerequisites

• You need to have Adobe Flash Professional CS5 installed.
• You need to have Adobe Flash Builder 4 installed.
• You need the application files (.fla and .as) that I have shared below.

Download

(1265 downloads)

Preview

This is how your app will behave in multiple screens (only visually). I will also go through how you can manage to detect the type of controls/player for handling input events. For a detailed post on how it behaves on multiscreen, visit my blog post – One Code, Multiscreen.

Portrait Version

Landscape Version

Application Logic – Logic.as

The game’s logic is written in Template.Logic class. This is how it looks: -

package Template {
	import com.hsharma.Game;

	import flash.display.MovieClip;

	public class Logic extends MovieClip {
		private var game:Game;

		public function Logic() {
			super();

			game = new Game(this, Canvas, Title, LevelNum, MainMenu, Controls);
		}

		public function initGame():void {
			// GAME CODE

		}
	}
}

As you can see, it is just a simple class that has a constructor instantiating a new object of type Game. Will come to that later. It later has a function initGame() that is supposed to contain the game’s logic and behavior.

Generic Multiscreen Layout – Game.as

Let’s look at the class com.hsharma.Game before we run through the parts of Logic.as that we missed.

package com.hsharma {
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.geom.Point;

	public class Game extends MovieClip {
		private var _gameClass:*;
		private var _stage:Stage;
		private var _canvas:MovieClip;
		private var _title:MovieClip;
		private var _module_1:MovieClip;
		private var _module_2:MovieClip;
		private var _menu:MovieClip;

		private var title_ratio:Point;
		private var mainmenu_ratio:Point;
		private var module_ratio:Point;
		private var screen:String;

		public function Game(myClass:*, myCanvas:MovieClip, myTitle:MovieClip, myMenu:MovieClip, Module1:MovieClip, Module2:MovieClip) {
			super();

			_gameClass = myClass;
			_stage = myClass.stage;
			_canvas = myCanvas;
			_title = myTitle;
			_module_1 = Module1;
			_module_2 = Module2;
			_menu = myMenu;

			_stage.align = StageAlign.TOP_LEFT;
			_stage.scaleMode = StageScaleMode.NO_SCALE;

			title_ratio = new Point(_title.width, _title.height);
			mainmenu_ratio = new Point(_menu.width, _menu.height);
			module_ratio = new Point(_module_1.width, _module_1.height);

			resizeGame(null);
			_stage.addEventListener(Event.RESIZE, resizeGame);

			showSplash();
		}

		private function showSplash():void {
			screen = "splash";
			_title.visible = false;
			_menu.visible = false;
			_module_1.visible = false;
			_module_2.visible = false;

			_canvas.setChildIndex(_canvas.Splash, _canvas.numChildren-1);

			// SETUP GREENSOCK TWEENLITE CLASS AND USE THE BELOW LINE TO FADE IN THE SPLASH SCREEN AFTER 3 SECONDS DELAY
			// TweenLite.to(_canvas.Splash, 1, {delay: 3, alpha: 0, onStart:initGame, onComplete:hideSplash});

			initGame();
			hideSplash();
		}

		private function hideSplash():void {
			// UNCOMMENT THE BELOW LINE ONCE YOU HAVE THE FADE IN ENABLED FOR SPLASH SCREEN
			// _canvas.Splash.visible = false;
		}

		private function resizeGame(event:Event):void {
			// INTELLIGENT LAYOUT LOGIC GOES HERE
		}

		private function initGame():void {
			// RESET VISIBILITY OF VISUAL ELEMENTS

			screen = "game";
			_gameClass.initGame();
		}
	}
}

In the above code, lines 69 and 73 are bunches of lines of code that I have specifically removed for now to reduce confusion. We shall also look into that later.

Passing Game’s Visual Elements to the Generic Layout Class

Now, look at the 2 important lines in Logic.as -

import com.hsharma.Game;

game = new Game(this, Canvas, Title, LevelNum, MainMenu, Controls);

I have imported the generic Game class and instantiated an object game passing some objects to the constructor of the Game class. First object that I pass is the class reference to Template.Logic (Logic class of any game that I write) – this. The other objects that I pass are the visual elements (MovieClips) that are explained in the Part 1 of this tutorial, namely: -

• Canvas – (Center) This is a MovieClip “Canvas” that I use to put in all the elements that my game or app requires to have.
• Title – (Left Top) This is a MovieClip “Title” that will contain my app/game’s logo/icon with the title text if required.
• LevelNum – (Right Top) This is a MovieClip “LevelNum” that will depict the current level of the game.
• MainMenu – (Left Bottom) This is a small MovieClip “MainMenu” consisting of 4 Buttons (Restart Level, Help/Instructions, Close/Exit and About).
• Controls - (Right Bottom) This is a MovieClip “Controls” that contains the Up and Down arrow buttons used to control the game’s behavior (rather, play the game).

This step is to make sure my generic Game class knows the visual elements of the game that I am writing, so it can arrange them according to any screen size. Important point to note is, any game that I write, ideally will be a replica of Template.Logic class. It might be CrazyGems.Logic class that will contain the game behavior of Crazy Gems. This class also will instantiate the com.hsharma.Game class object in its constructor, so the class com.hsharma.Game knows the visual elements of the game Crazy Gems and handles the layout.

Multiple Projects using Game Class

With a little bit of tweaking of Project properties in Flash Builder, we can setup more than one .fla (more than one game) use the same com.hsharma.Game class for the layout handling, so I don’t need to rewrite the multiscreen layout logic separately for each game.

Here is a typical structure of 3 example games that use the same class com.hsharma.Game for laying out the visuals for multiscreen.

Observe the color coding in the image above. Blue files represent the Logic and UI (.fla) for the game Crazy Gems. Green files represent Logic, UI (.fla) and other game-specific classes for the game Crazy Maze. Wheat/Cream colored files represent the Template files that I have shared with this article and their UI (.fla).

Finally, the Red files represent the com.hsharma.Game class and also the greensock package used for tweening. These two packages/classes are used across in all 3 games to avoid duplicates of code. So, I fix one bug in the multiscreen layout class com.hsharma.Game, it gets fixed for all the games referring to them.

Multiscreen Layout

Now that we pass the visual elements of our games/apps to the generic Game class, as you might have seen the output, the commented line 69 in the above code, function resizeGame(), actually has these lines of code shown below (again, minimal code shown). Rest of the code exists in the actual file shared with this article.

if (_stage.stageWidth > _stage.stageHeight) {
	// RESIZE ALL ELEMENTS (CODE NOT SHOWN HERE)

	if (_canvas.x < 50) {
		_title.visible = false;
		_menu.visible = false;
		_module_1.visible = false;
		_module_2.visible = false;
	} else {
		if (screen != "splash") {
			_title.visible = true;
			_menu.visible = true;
			_module_1.visible = true;
			_module_2.visible = true;
		}
	}
} else {
	// RESIZE ALL ELEMENTS (CODE NOT SHOWN HERE)

	if (_canvas.y < 50) {
		_title.visible = false;
		_menu.visible = false;
		_module_1.visible = false;
		_module_2.visible = false;
	} else {
		if (screen != "splash") {
			_title.visible = true;
			_menu.visible = true;
			_module_1.visible = true;
			_module_2.visible = true;
		}
	}
}

In the above code, line 2 and 18 are places where I have mimicked the Constraint Based Layouts available in the Flex framework. In the Game class above, you can observe the lines 41 & 42.

resizeGame(null);
_stage.addEventListener(Event.RESIZE, resizeGame);

This is where I call the function resizeGame(). As the screen is re-sized, during the game play, this function re-sizes and lays out the visual elements according to the screen. That’s all there is to it.

Device Capabilities

For the most part, games rely on some important device capabilities, like the input methods.

It is always a good idea to look for support of a specific support (e.g., Accelerometer) and then initiate the objects relating to that. Example below: -

import flash.sensors.Accelerometer;
if (Accelerometer.isSupported) {
	var acc_obj:Accelerometer = new Accelerometer();
} else {
	stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
}

One more tip on determining if the game is being played from the browser or as a desktop AIR app is shown below: -

import flash.system.Capabilities;
if (Capabilities.playerType == "Desktop") {
	// PLAYED ON THE DESKTOP
} else {
	// PLAYED ON THE WEB BROWSER
}

Minimum Size Constraint

When running the game/app on the desktop as a standalone app, the user might resize the window way less than recommended. To avoid this, we need to constrain the minimum allowed size of the app window.

• To do this, change the Publish Settings in your Flash Professional CS5 to player – Adobe AIR 2.
• Click on the “Settings” button beside Adobe AIR 2.
• Application & Installer Settings open up. Here, choose the Advanced tab.
• Specify the Minimum Width and Minimum Height properties so the user is restricted from resizing below the values specified.

Conclusion

Do note that this is just one method of coding a multiscreen application. There are several methods out there. Please feel free to experiment. I shall also try and write more about other methods. Also, feel free to change the code that I shared to your convenience and improvise if necessary. The intention of this article is to form awareness of the ability to create multiscreen applications in ActionScript easily. Thanks for reading.

With my recent creation of multiscreen game (Crazy Gems) in mind, I am presenting a basic template I created in Flash Professional for use in the games or apps you might be trying to create. The method that I am following is obviously not the only method you need to follow. This comes with my experience and hard learning over time.

I will be using Adobe Flash Professional CS5 for the UI creation and later, Adobe Flash Builder for writing code and debugging. This article will first guide you to setup the provided Template files to give a fair idea of the implementation.

Prerequisites

• You need to have Adobe Flash Professional CS5 installed.
• You need to have Adobe Flash Builder 4 installed.
• You need the application files (.fla and .as) that I have shared below.

Download

(1265 downloads)

Preview

This is how your app will behave in multiple screens (only visually). I will also go through how you can manage to detect the type of controls/player for handling input events. For a detailed post on how it behaves on multiscreen, visit my blog post – One Code, Multiscreen.

Portrait Version

Landscape Version

Setting Up

Once you have the required files extracted to a folder on your hard drive, make sure your folder structure matches the below one: -

Let me explain the folder structure. The main UI file that contains all the images, graphics of my app/game and is supposed to contain all the sound/video/other assets is the .fla file.

The folder Template contains a Logic.as file that is my application’s class file (Document Class).

The com folder additionally contains 2 folders among which one (hsharma) is the one that contains the logic for multiscreen layout.

You should also see an empty folder called greensock. This is just an indication that you can dump other third party class files or packages here and use it in this template.

As explained before, we will have all our compile time assets inside the .fla and write the actionscript separately in the .as files.

The .FLA File

Go ahead and open the Template.fla file in Flash Professional. You should see a similar screen as shown below: -

This image doesn’t depict the visuals in their actual dimensions; I have zoomed out to fit the screen. As you notice, here are the layers -

• LevelNum – (Right Top) This layer contains a MovieClip “LevelNum” that has a gray rounded rectangle, with a static text “LEVEL” and a dynamic text that contains “00″. This will depict the current level of the game.
• Title – (Left Top) This layer contains a MovieClip “Title” that will contain my app/game’s logo/icon with the title text if required.
• MainMenu – (Left Bottom) This layer contains a small MovieClip “MainMenu” consisting of 4 Buttons (Restart Level, Help/Instructions, Close/Exit and About).
• Canvas – (Center) This is a MovieClip “Canvas” that I use to put in all the elements that my game or app requires to have. This makes it easy for me to control the main logic or behavior of my game. The blue rectangle that you see in the image above depicts the selected MovieClip “Canvas”. I also have placed another MovieClip “Controls” in the same layer (Right Bottom) that are the game controls (Up and Down arrow Buttons).

Using the Template

I shall now explain a little more as to how you can use these project files and make the best use of it.

In the Properties panel of your .fla file, when no object is selected on stage, you should see a text field which accepts a Document Class name (as shown below). This is where I enter the package name and the class name. In this case, Template.Logic.

Clicking on the button beside the text field to open/edit the class file, triggers a new panel that asks you for your choice of AS editor. Choose Flash Builder.

Flash Builder should automatically open up and it now tries to create a new Project for the .fla file (Flash Project). You should see a new pop up in Flash Builder as shown below: -

You may let the folder locations be default. In this case, the .fla remains in the folder where you extracted it. A new Flex Project and a folder will be created in your default Flash Builder Projects folder. Once finished, this is how your Flash Builder project structure should look like: -

By default, Flash Builder generates a document class with the same name as the .fla file. In this example, it creates Template.as in the default package. You can go ahead and delete that since we are writing the code in the Template/Logic.as class.

Conclusion

You are now ready to start coding your game/app. You may test and run the swf by pressing Command+Enter (Mac) or Control+Enter (Win). You should see that the UI fits any screen orientation as you drag. I shall explain the specific code for resizing in the next part of this article. Hope you found this article helpful.

Part 2: Understanding Code – Coming soon…

We now have a new Fan Group Site for Adobe Flash Professional enthusiasts. If you are a designer/developer who works on/loves Adobe Flash Professional, please do join the group and start contributing to the discussions.

• Develop – this track will find immediate resonance with Web Application, Desktop Application and Mobile Application developers from the world of ActionScript, Flex, Flash, ColdFusion, Java, PHP and .NET, including Game Developers. Architects creating multi-tiered enterprise systems that go beyond basic RIAs will also benefit from this track.
• Design – this track will feature content for Application UI Designers, Interaction Designers as well as designers who currently specialize in web or video and want to expand their skills. If your goal is to create interactive content, applications or video for the browser, desktop, or devices using Adobe technologies then this is the track for you.

Awaiting more and more proposals for an exciting review process. All the best for the submitters.

25 – 26 August 2010, NIMHANS Convension Center, Bangalore, India.

For more information, keep checking http://bit.ly/adobesummit

Crazy Gems is an addictive game developed in Adobe Flash ActionScript 3.0 Compatible with Flash Player 10.1 and AIR 2.0.

Enjoy the excitement and confusions in dividing the different colored bouncing gems to their respective colored zones.

Resize the game to your convenient gameplay size and enjoy the casual game.

But for now, you may download the .fxp and play around or even convert it to your custom skin if you are already aware of the process.

(874 downloads)