Create HTML5 Vertical Endless Runner cross platform games

Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

How to use Google Maps API with Flash AS3

Emanuele Feronato Actionscript 3, Flash

I was playing with Google Maps API for Flash when I noticed the tutorials in the official page are somehow not that smart, so I am going to clarify some things.

Follow these simple steps:

Sign up for a Google Maps API Key at this link. Once you submit the form, ignore everything you see on the page (it refers to javascript version), just write down the key.

Download the Google Maps API for Flash SDK at this link. Inside the archive you will find a lib directory with a file called map_1_8a.swc inside. The official Google docs refer to a map_1_7.swc file, so this file could be updated anytime. Just refer to the map_xxx.swf, no matter the version you are downloading.

Install the API SWC component to your Flash creating a Google folder with map_xxx.swf inside.

The path to this folder varies from CS3 to CS4, it should be placed in
if you are running CS3 (watch out the en, it may differ according to your language) and
if you are running CS4.

Create a new Flash file and open the components window. You can find this window on Window -> Components menu. You should find a Google -> GoogleMapsLibrary compoent. Drag in on stage wherever you want (you will set its position later).

Don’t worry about the size.

Now it’s time to write the class.

Here it is:

Line 4: importing the Point class in order to use a point later. This is not explained in the official tutorial as it writes the code directly into the timeline.

Lines 5-8: importing Google libraries

Line 10: declaring the new map type

Line 12: inserting the key API

Line 13: setting the size of the map to fill the entire stage, using the Point class

Line 14: listener for the map to be ready

Line 15: adding the map itself

Lines 16-18: once the map is ready, show us Venice!

Here it is:

If you give me good feedback, I’ll show you how to create custom controls and some more tricks.

Download the source code.

Stay up to date
Follow me on the social networks and never miss a post.

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 24

  1. TJ Downes

    You forgot a couple of crucial steps:

    19. Realize Google has no local search integration
    20. Use Yahoo Maps instead


    What I am finding is that while each of the map APIs have pros and cons, Yahoo map seems to offer more in terms of functionality, unless you want to use them both in combination.

    Ive also found that Google maps tends to be more sluggish than Yahoo, but ymmv.

  2. Pingback: How to use Yahoo Maps API with Flash AS3 : Emanuele Feronato

  3. Pingback: How to use Google Maps API with Flash AS3 - part 2 : Emanuele Feronato

  4. Pingback: Introduction: Flash Google Maps API and Multi-touch | Cyan[c] Design

  5. Pingback: weblog » Blog Archive » Googlemaps Flash API

  6. Pingback: » Blog Archive » flash google maps

  7. Maverik0106

    Hey this is great, Thanks a lot for the awesome work here, I was just wondering, this works if you put the script inside the flash file, but you’re showing us the package which means its coming from an actionscript file, so my question is, how do you call it from within flash???

    I know you have to go googlemap();
    but it asks you for an argument inside the function caller. So my question is, what would the argument be inside the function caller?

    thanks in advance for your help!

  8. Pingback: Introduction: Flash Google Maps API and Multi-touch « Kelso’s Corner

  9. roughbern

    I am new to the google map api for flash. I found your example helpful to understand more about how they work. I was wondering what the line

    9 public class googlemap extends Sprite {

    did for the map and how you would add a marker for a business for example?

  10. Mark

    thax alot .. it is amazing .. i was looking for this .. if u can just tell us how to make the custom control buttons.!!!
    thx again ..

  11. Pingback: Google maps application with actionscript 3 for android ( AIR ) | Moe Zainal

  12. mnu7

    I use the same code, and for key I use localhost as I want to run it on my PC.
    Resultant key I put in my AS3 code but still get error.
    What else changes to make

  13. Pingback: Flash Game Development Inter-web mash up: Dec 1, 2008 «

Leave a Reply

Your email address will not be published. Required fields are marked *