Welcome to a complete Flash Game Hosting Deep Dive.
The best part?
It requires little to no coding or setup.
Mess free, embeddable code.
Let's get into it.
- Getting Started with Ruffle
- Finding .swf Files *optional but a great help*
- Embedding an .swf File
- Embedding New HTML5 Games
- Links vs File Locations
- Ending Remarks
Getting Started with Ruffle
First we need to understand how this works.
As you probably know if you're here, Flash player is no longer supported by modern browsers.
Meaning, that if we just hosted these game's alone they wouldn't function.
Ruffle is an embeddable flash player written in a programming language called rust for HTML5.
If you're unfamiliar with rust join the club, but luckily all you need to know it basic HTML.
We take the following embed link and put it in the head of our html document:
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
This will take every .swf file and play it as if flash were installed.
Before you waste your time, THIS WILL NOT WORK WITH OFFLINE HTML FILES! Ruffle runs online.
Finding .swf Files *optional but a great help*
Unfortunately, 9/10 times you won't find a download link for .swf files.
The best way to get them is to find them yourself from websites, even if they don't have flash support.
You can rightclick the window the game is in, click inspect, and then try to find the source link.
Using a game I host as an easy example, follow this link: papa's pizzaria .
Right click a blank space, like the rightmost black margin on the screen.
Click inspect, then make sure that you are in the elements menu at the top of the console.
In this scenario, there's only a few drop downs.
Open the <body> tag, then the <div> tag with id="wrapper".
Now visible is a link from cool math games. This is the source of the .swf file.
There are two things you can do from this point: download the file, or link it.
To download it, copy and put the link in your url address bar.
Linking the file is just as simple as copying and pasting shown in the embedding step.
If you download it, it must be hosted on your server and linked to correctly. Also see the embedding step.
If you wanna know the benefits of both, jump here .
Typically, using a link is the most effortless way to host.
Regardless, this was all just assuming you didn't have a .swf.
Here's the .swf download if you wanna skip the process.
Embedding the .swf file in Our Code
There are a few different ways you can embed a flash game.
You can use an HTML <embed> tag, or an <iframe> tag.
Both will do the same job essentially, but use whichever one works for you.
Here's an embed example that's url linked:
<embed width="100%" height="750px" name="plugin" id="plugin" src="https://www.coolmath-games.com/sites/cmatgame/files/games/papaspizzeria_coolmath_update.swf"></embed>
Here's an embed example with a file path:
<embed width="100%" height="750px" name="plugin" id="plugin" src="../../media/papaspizzeria.swf"></embed>
Here's an embed example with a url to the same filepath:
<embed width="100%" height="750px" name="plugin" id="plugin" src="https://keyboardmechanic.com/media/papaspizzeria.swf"></embed>
Width and height do exactly what you think, you can use either css or html to define this.
The name and id are simply good practice, it allows you to reference the element with javascript.
Src is set equal to the link or filepath.
Using a url file path (third example) means it will always work even if the embed location changes.
I'm not going to explain how a file path works because it's fundamental stuff. Learn about it here .
How to Embed Newer HTML5 Games
It's barely different, but there are some things to keep in mind.
Here's a typical example of linking an html game.
<embed width="100%" height="750px" name="plugin" id="plugin" src="https://html5-games.io/game/doodle-jump/"></embed>
There isn't a way that I know of to download any specific files for html5 games.
From my experience, linking is the only way and you can find links by inspecting pages like before.
You'll know you have the right link if you can put it into the address bar and it plays the game in browser.
Copy and paste this link in your address bar or click to see what I mean:
https://html5-games.io/game/doodle-jump/
Reasons to Use Links or a File Location as a Source
There's good reasons for both, but here's my blunt reasoning.
When using a link, all you have to do is take that link and define it as your source using an src attribute.
The only downside being, if the server where the file is hosted goes down, so does your game. :/
If you choose to download your .swf, you have to host the file on your server and properly link to it.
This will give the game more resiliency, since the game can only be down if your website is.
The benefit of your .swf being hosted on your own server is most often paramount because of this.
Ending Remarks
Believe it or not, it truly is that simple.
Only the most professional sites are able to adapt to changes in the technological landscape.
You may have noticed that sites like coolmathgames.com are able to host almost all of their old titles.
This is because coolmathgames actually partners with Ruffle.
To put it frankly, if it's good enough for big businesses in the industry, it suffices for most anyone else.
If you would like to read more useful articles, play cool games, or engage with our community, then bookmark our website (ctrl + D)! We're always doing something new.