Putting a game on the web

(Dan G) #1

I created a game in as3 in FlashDevelop IDE. I have my own webspace, but I’m a rookie in the sense I’ve never put a game on it before. I currently have a .as3proj file and a bunch of .as and .png files. What steps would I take here? I know it will involve embedding it in html, but I have no idea what to embed or how/what that entails.

(Bora Kasap) #2

take a look for a folder named “bin” in your project folder, you’ll find a “swf” file in this folder. That single swf file containin all your other files as a package, also, it is an executable package, your project files not important for anyone but you. You just need to share this “swf” file to make people play your game. Just embed this “swf”. You can change it’s directory, you can copy it, no problem, it doesn’t reads any files from other files when running, it contains all your project as a compiled file. That swf file also called as “flash file”

(Alex Larioza) #3
  1. You’ll first want to choose “Release” mode in FlashDevelop and build your project once more.
  2. In your project folder, there is a “bin” folder that should have a .SWF with the same name as your project. This file is your compiled game, ready for distribution.
  3. Just drag the .SWF and the file “index.html” file onto your server and you’re good to go!

The format of FlashDevelop’s default HMTL page kind of sucks though, as it puts the SWF in the upper left hand corner of the page on a white background. Here’s a responsive template that I use for games on my website:

    <!-- 
RESPONSIVE GAME PRESENTATION PAGE ~ alex larioza
* Replace all instances of GAME NAME with the name of your game
* Replace all intances of PATH TO SWF with the path to your swf file (usually just, myGame.swf)
* Set all instances of WIDTH and HEIGHT to the dimensions of your swf.
-->

<html>
    <head>
        <title>GAME NAME</title>
    </head>
    <body>
        <body bgcolor="#171717">
        <div style="position:fixed; top:0; left:0; width:100%; height:100%;">  
            <div style="height:100%; display:table; margin:0 auto;">  
                <div style="vertical-align:middle; display:table-cell;">
                    <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="600" HEIGHT="400" id="GAME NAME" ALIGN="" wmode="direct" >
                    <PARAM NAME=movie VALUE="PATH TO SWF"/ > 
                    <PARAM NAME=quality VALUE=high />
                    <PARAM NAME=bgcolor VALUE=#000000 />
                    <EMBED src="PATH TO SWF" quality=high bgcolor=#000000 WIDTH="600" HEIGHT="400" NAME="GAME NAME" ALIGN="" TYPE="application/x-shockwave-flash" wmode="direct" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"  /></EMBED> </OBJECT></div>
                 </div>
            </div>
    </body>
</html>

Just copy and paste the above code into a new .HTML file and follow the instructions in the comment at the top. Here’s a demo of the page in action. Notice that the .SWF always stays in the middle of the browser window!.

(Dan G) #4

Wow very helpful thank you. One question though, my school has given me a personal webspace with an index.html file already on it (the page has a few graphics, texts, and links). Would I have to edit that index.html to include my game?

(Dan G) #5

Also, will this work if I were to add it into an already existing index.html file

(Bora Kasap) #6

you can replace index.html file. no problem.

(David Williams) #7

You would if you wanted it to be on the supplied index.html . All that would be necessary to embed it would be:

 <div style="vertical-align:middle; display:table-cell;">
                    <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="600" HEIGHT="400" id="GAME NAME" ALIGN="" wmode="direct" >
                    <PARAM NAME=movie VALUE="PATH TO SWF"/ > 
                    <PARAM NAME=quality VALUE=high />
                    <PARAM NAME=bgcolor VALUE=#000000 />
                    <EMBED src="PATH TO SWF" quality=high bgcolor=#000000 WIDTH="600" HEIGHT="400" NAME="GAME NAME" ALIGN="" TYPE="application/x-shockwave-flash" wmode="direct" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"  /></EMBED> </OBJECT></div>
(Alex Larioza) #8

Note that “index.html” is always your landing page (ie the page that you get first when navigating to the website’s URL). If you’d prefer not to have your game page as your home page, you can rename the file “MyAwesomeGame.html” and link to it from a menu or something. That way you get to keep your original “index.html”.