forked from ruffle-rs/ruffle-rs.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
529 lines (503 loc) · 23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
---
layout: null
title: Ruffle
---
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
{%- include head.html -%}
<body>
<main>
{%- include header.html -%}
<section class="section splash">
<div id="logo"></div>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
<script type="module">
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("logo");
container.appendChild(player);
player.load({
url: "assets/logo-anim.swf",
autoplay: "on",
unmuteOverlay: "hidden",
backgroundColor: "#37528C",
contextMenu: false,
splashScreen: false
});
});
</script>
<p>
<em>ruffle</em> is a Flash Player emulator built in the Rust programming language.
</p>
<ul>
<li><a href="#what-is-ruffle">Read more</a></li>
<li style="visibility: hidden;">Demo</li>
<li style="position: absolute;"><a href="https://ruffle.rs/demo/">Demo</a></li>
<li><a href="https://discord.gg/ruffle" target="_blank">Discord</a></li>
</ul>
<a class="header-down-arrow" href="#what-is-ruffle">
<img src="{{ "/assets/downarrow.png" | relative_url }}" alt="Read more" loading="lazy">
</a>
</section>
<section class="section content">
<h2 id="what-is-ruffle">What is Ruffle</h2>
<div class="row">
<div class="col-base col-lg col-lg-auto col-img">
<img src="{{ "/assets/logo.svg" | relative_url }}" alt="Ruffle" class="img-fluid my-3 mx-auto">
</div>
<div class="col-base col-lg">
<p>
Ruffle is a Flash Player emulator written in Rust. Ruffle runs natively on all modern operating
systems as a standalone application, and on all modern browsers through the use of WebAssembly.
Leveraging the safety of the modern browser sandbox and the memory safety guarantees of Rust,
we can confidently avoid all the security pitfalls that Flash had a reputation for.
Ruffle puts Flash back on the web, where it belongs - including browsers on iOS and Android!
</p>
<p>
Designed to be easy to use and install, users or website owners may install the web version
of Ruffle and existing flash content will "just work", with no extra configuration required.
Ruffle will detect all existing Flash content on a website and automatically "polyfill"
it into a Ruffle player, allowing seamless and transparent upgrading of websites that still
rely on Flash content.
</p>
<p>
Ruffle is an entirely open source project maintained by volunteers. We're all passionate
about the preservation of internet history, and we were drawn to working on this project to help
preserve the many websites and plethora of content that will no longer be accessible when
users can no longer run the official Flash Player. If you would like to help support this
project, we welcome all contributions of any kind - even if it's just playing some old games
and seeing how well they run.
</p>
</div>
</div>
<!-- <div class="row demo">
<div class="col-base col-lg col-lg-4">
<img src="{{ "/assets/demo-placeholder-1.png" | relative_url }}" alt="Demo 1"
class="d-block mx-auto text-center" style="height:28vh">
</div>
<div class="col-base col-lg col-lg-4">
<img src="{{ "/assets/demo-placeholder-2.png" | relative_url }}" alt="Demo 2"
class="d-block mx-auto text-center" style="height:28vh">
</div>
<div class="col-base col-lg col-lg-4">
<img src="{{ "/assets/demo-placeholder-3.png" | relative_url }}" alt="Demo 3"
class="d-block mx-auto text-center" style="height:28vh">
</div>
</div> -->
</section>
<section class="section content">
<h2 id="usage">Usage</h2>
<div class="row">
<div class="col-base col-sm col-sm-3">
<img src="{{ "/assets/undraw_design_components.svg" | relative_url }}" alt="Usage" class="img-fluid">
</div>
<div class="col-base col-lg col-lg-9">
<h3>Installing on a website you own</h3>
<p>
Use an official Ruffle CDN, or download the 'standalone' version of Ruffle from <a href="#downloads">our downloads</a>,
and include the following JavaScript on any page with Flash content:
{% capture javascript_installation %}<script src="path/to/ruffle/ruffle.js"></script>{% endcapture %}
{% capture unpkg_installation %}<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>{% endcapture %}
<pre>{{ unpkg_installation | xml_escape }}</pre>
<p><b><i>OR</i></b></p>
<pre>{{ javascript_installation | xml_escape }}</pre>
</p>
<p>
If you're using a local installation, you'll need to make sure your web server is configured to serve <code>.wasm</code> files
correctly, so please visit
<a href="https://github.com/ruffle-rs/ruffle/wiki/Using-Ruffle#configure-wasm-mime-type" target="_blank">our wiki</a>
if you need help with that.
</p>
<p>
For advanced usage, consult
<a href="https://github.com/ruffle-rs/ruffle/wiki/Using-Ruffle#javascript-api" target="_blank">our documentation</a>
for our JavaScript API and installation options.
</p>
</div>
</div>
<div class="row mt-2">
<div class="col-base col-lg col-lg-8">
<h3>Installing the browser extension</h3>
<p>
If you visit websites that have Flash content but aren't using Ruffle, or you want to ensure
you're using the latest and greatest version of Ruffle on every website, then our browser
extension is the perfect thing for you!
</p>
<p>
The easiest way to install Ruffle on Chromium-based browsers such as Chrome, Edge, Opera, and Brave is through the
<a href="https://chrome.google.com/webstore/detail/ruffle/donbcfbmhbcapadipfkeojnmajbakjdc" target="_blank" rel="nofollow">Chrome Web Store</a>.
The easiest way to install Ruffle on Firefox is through
<a href="https://addons.mozilla.org/firefox/addon/ruffle_rs" target="_blank" rel="nofollow">addons.mozilla.org</a>.
</p>
<div>
<a href="https://chrome.google.com/webstore/detail/ruffle/donbcfbmhbcapadipfkeojnmajbakjdc" target="_blank" rel="nofollow" class="store-badge">
<img src="{{ "/assets/chrome_web_store.svg" | relative_url }}" width="200" height="60" alt="Chrome Web Store" class="img-fluid">
</a>
<a href="https://addons.mozilla.org/firefox/addon/ruffle_rs" target="_blank" rel="nofollow" class="store-badge">
<img src="{{ "/assets/get-the-addon.svg" | relative_url }}" width="172" height="60" alt="addons.mozilla.org" class="img-fluid">
</a>
</div>
<p>
These update whenever new
builds release. We also offer unsigned nightly extensions, but most people won't need them. If you do, download the appropriate one for your
browser from <a href="#downloads">our downloads</a>, and then install it manually. Instructions for installation of nightly Chrome/Firefox
extensions available on <a href="https://github.com/ruffle-rs/ruffle/wiki/Using-Ruffle#browser-extension" target="_blank" rel="nofollow">
our wiki</a>. Safari instructions below.
</p>
<div class="row mt-2">
<div class="col-base col-lg col-lg-12">
<h4>Safari</h4>
<ul>
<li>Click the "Safari" link.</li>
<li>Extract the downloaded tar.gz file somewhere.</li>
<li>Open the extracted file and confirm the popup dialog box.</li>
<li>Enable <code>Safari > Preferences > Advanced > Show Develop menu in menu bar</code>.</li>
<li>Enable <code>Develop > Allow Unsigned Extensions</code>.</li>
<li>Enable the extension by checking the box in <code>Safari > Preferences > Extensions</code>.</li>
</ul>
<div class="bold-text">Note: Safari 14+ is required</div>
</div>
</div>
</div>
<div class="col-base col-lg col-lg-4">
<h3>Using the desktop application</h3>
<p>
If you want to run Flash content on your computer without a browser in-between, we have native
applications that will take full advantage of your GPU and system resources to get those extra
frames when playing the original Meat Boy.
</p>
<p>
Currently most options are accessed via the command line, but we intend to develop a GUI soon
for ease of use. First, download the appropriate executable for your operating system from
<a href="#downloads">our downloads</a>.
</p>
<p>
To use Ruffle, simply double-click the executable and select the SWF file you wish to play.
Alternatively, type a command such as
<code>ruffle filename.swf</code> or <code>ruffle https://example.com/filename.swf</code>.
We also provide more advanced options if you wish to control how this file is played.
To view the full options available, run
<code>ruffle --help</code>.
</p>
</div>
</div>
</section>
<section class="section content">
<div id="releases"></div>
<h2 id="downloads">Downloads</h2>
<div class="row">
<div class="col-base col-sm col-sm-2">
<img src="{{ "/assets/undraw_relaunch_day.svg" | relative_url }}" alt="Downloads" class="img-fluid">
</div>
<div class="col-base col-lg col-lg-10">
<p>
Ruffle is directly available as an extension in the Chrome Web Store and on addons.mozilla.org:
</p>
<a href="https://chrome.google.com/webstore/detail/ruffle/donbcfbmhbcapadipfkeojnmajbakjdc" target="_blank" rel="nofollow" class="store-badge">
<img src="{{ "/assets/chrome_web_store.svg" | relative_url }}" width="200" height="60" alt="Chrome Web Store" class="img-fluid">
</a>
<a href="https://addons.mozilla.org/firefox/addon/ruffle_rs" target="_blank" rel="nofollow" class="store-badge">
<img src="{{ "/assets/get-the-addon.svg" | relative_url }}" width="172" height="60" alt="addons.mozilla.org" class="img-fluid">
</a>
{% assign all_releases = site.github.releases | where_exp:"item", "item.draft == false" %}
{% assign prerelease = all_releases | where_exp:"item", "item.prerelease == true" %}
{% assign full_release = all_releases | where_exp:"item", "item.prerelease == false" %}
<h3>Latest Nightly Release</h3>
<table class="table table-responsive-lg table-dark downloads">
<thead>
<tr>
<th>Desktop</th>
<th>Browser Extension</th>
<th>Website</th>
</tr>
</thead>
<tbody>
{% assign all_files = all_releases | map: "assets" | reverse | reverse %}
<tr>
{% include release-assets.html assets=all_files %}
</tr>
</tbody>
</table>
{% if full_release.size > 0 %}
{% include releases.html releases=full_release limit=5 %}
{% endif %}
<p>
Ruffle is still in active development and we release nightly development builds every day,
as long as some code changed. Whilst we try to keep nightly builds in working order,
no guarantees can be made.
</p>
<h3>Nightly Builds</h3>
{% include releases.html releases=prerelease limit=3 %}
</div>
</div>
</section>
<section class="section content">
<h2 id="compatibility">Compatibility</h2>
<div class="row">
<div class="col-base col-sm col-sm-3">
<img src="{{ "/assets/undraw_progressive_app.svg" | relative_url }}" alt="Compatibility" class="img-fluid">
</div>
<div class="col-base col-lg">
<h3>ActionScript</h3>
<p>
ActionScript is the language which Flash uses to make interactive content.
It is primarily split into two groups:
"AVM 1" (ActionScript 1 & 2)
and
"AVM 2" (ActionScript 3).
</p>
</div>
</div>
<div class="row">
<div class="col-base col-lg">
<h4>AVM 1</h4>
<p>
AVM 1 is ActionScript 1 and ActionScript 2.
All movies made before Flash Player 9 (June 2006) will be made with AVM 1,
and it remained supported & available to authors until the release of
Flash Professional CC (2013).
</p>
<p>
We believe that most AVM 1 content will work, but we are aware of some graphical inaccuracies
and smaller bugs here and there. Please feel free to report any issues you find that are not
present in the original Flash Player!
</p>
<p>
For in-depth details, please follow our
<a href="https://github.com/ruffle-rs/ruffle/issues/310"
target="_blank" rel="nofollow">AVM 1 tracking issue on GitHub</a>.
</p>
<p>
<h5>ActionScript 1 & 2 Language <code>95%</code></h5>
<div class="meter" title="95%">
<span style="width:95%;"><span class="progress"></span></span>
</div>
</p>
<p>
<h5>ActionScript 1 & 2 API <code>73%</code></h5>
<div class="meter" title="73%">
<span style="width:73%;"><span class="progress"></span></span>
</div>
</p>
</div>
<div class="col-base col-lg">
<h4>AVM 2</h4>
<p>
AVM2 is ActionScript 3, which was introduced with Flash Player 9 (June 2006).
After the release of Flash Professional CC (2013), authors are required to use
ActionScript 3 - making any movie made after that date very likely to fall under
this category.
</p>
<p>
Ruffle now has support for AVM 2, but enough of the API is still missing that we aren't yet
confident enough to claim that most games will work.
A warning will be presented to you when you attempt to play AVM 2 content, for this reason.
We hope that this will be temporary, as AVM2 support is currently increasing at a very fast pace.
</p>
<p>
For in-depth details, please see our
<a href="avm2.html"
target="_blank" rel="nofollow">page outlining full AVM2 implementation details</a>.
</p>
<p>
<h5>ActionScript 3 Language <code>60%</code></h5>
<div class="meter" title="60%">
<span style="width:60%;"><span class="progress"></span></span>
</div>
</p>
<p>
<h5>ActionScript 3 API <code>59%</code></h5>
<div class="meter" title="59%">
<span style="width:59%;"><span class="progress"></span></span>
</div>
</p>
</div>
</div>
<div class="row">
<div class="col-base col-lg d-flex justify-content-center">
<canvas id="weekly-commits"></canvas>
</div>
</div>
</section>
<section class="section content">
<h2 id="get-involved">Get involved</h2>
<div class="row">
<div class="col-base col-sm col-sm-2">
<img src="{{ "/assets/undraw_launch_day.svg" | relative_url }}" alt="Get Involved" class="img-fluid">
</div>
<div class="col-base col-lg">
<h3>♥️ How to help the project</h3>
<p>
We are an entirely open source project and do this for the sake of preserving history,
and we are not a large team at that.
We absolutely welcome and request your help if you are willing to provide it.
There are 4 main ways to help this project, and we will be extremely grateful for any help provided.
</p>
</div>
<div class="col-base col-lg">
<h3>🖥️ Contributing code</h3>
<p>
There are two main codebases in two languages: The actual player in Rust, and the web interface
& browser UI in JavaScript. If you have any experience in either area and would like to
assist,
please feel free to read our
<a href="https://github.com/ruffle-rs/ruffle/blob/master/CONTRIBUTING.md"
target="_blank">contribution guidelines</a>,
<a href="https://github.com/ruffle-rs/ruffle/issues" target="_blank">search for some issues to
tackle</a>,
and
<a href="https://discord.gg/ruffle" target="_blank">join our Discord</a> to ask questions!
</p>
</div>
</div>
<div class="row">
<div class="col-base col-lg">
<h3>🕹️ Testing content</h3>
<p>
Arguably more important than contributing code is testing Ruffle out.
Go install Ruffle and try out your favourite games and animations.
Look for any difference from the official Flash Player, and report your findings to us.
If you find any bugs, changes of behaviour, performance issues or any visual differences then
please report those to
<a href="https://github.com/ruffle-rs/ruffle/issues" target="_blank">our bug tracker</a>.
If it runs flawlessly, come
<a href="https://discord.gg/ruffle" target="_blank">share the good news on our Discord</a>!
</p>
</div>
<div class="col-base col-lg">
<h3>💲 Sponsor the project</h3>
<p>
If you are able and willing to, we welcome any financial support to help us fund the project
going
forward. With your help, we can afford to spend more time dedicated to Ruffle, and pay for
expenses
such as build servers and hosting.
We accept donations and sponsorships through Open Source Collective 501(c)(6). For more
information,
or to view the options available for sponsoring the project, please visit
<a href="https://opencollective.com/ruffle" target="_blank">our Open Collective page</a>.
</p>
</div>
<div class="col-base col-lg">
<h3>💬 Spread the word!</h3>
<p>
Is your favourite Flash-based site shutting down? Let them know they can add one JavaScript
file
and keep it running!
Feeling nostalgic for some old Flash games? Go play some on Newgrounds with Ruffle
installed, and
tell your friends about it!
Maybe you're a streamer and looking for some silly content? There's literally decades' worth,
now
unlocked and accessible once more.
</p>
</div>
</div>
<div class="row">
<div class="col-base col-lg">
<h3>💎 Diamond Sponsors</h3>
<p>
We'd like to thank all of our sponsors, who help make this project possible.
Below are our Diamond level sponsors, without whom we would not be here. Thank you.
<ul class="sponsors">
<li>
<a href="https://www.newgrounds.com/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/newgrounds.png" | relative_url }}" alt="Newgrounds.com" class="img-fluid">
</a>
</li>
<li>
<a href="https://www.cpmstar.com/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/cpmstar.png" | relative_url }}" alt="CPMStar" class="img-fluid">
</a>
</li>
<li>
<a href="https://deepnight.net/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/deepnight.png" | relative_url }}" alt="Sébastien Bénard" class="img-fluid">
</a>
</li>
<li>
<a href="https://www.crazygames.com/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/crazygames.png" | relative_url }}" alt="Crazy Games" class="img-fluid">
</a>
</li>
<li>
<a href="https://www.coolmathgames.com/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/coolmathgames.png" | relative_url }}" alt="Cool Math Games" class="img-fluid">
</a>
</li>
<li>
<a href="https://www.nytimes.com/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/nyt.png" | relative_url }}" alt="The New York Times" class="img-fluid">
</a>
</li>
<li>
<a href="https://www.armorgames.com/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/armorgames.png" | relative_url }}" alt="Armor Games" class="img-fluid">
</a>
</li>
<li>
<a href="https://www.ondaeduca.com/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/ondaeduca.png" | relative_url }}" alt="Onda Educa" class="img-fluid">
</a>
</li>
<li>
<a href="https://www.twoplayergames.org/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/twoplayergames.png" | relative_url }}" alt="TwoPlayerGames.org" class="img-fluid">
</a>
</li>
<li>
<a href="https://www.wowgame.jp/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/wowgame.png" | relative_url }}" alt="wowgame.jp" class="img-fluid">
</a>
</li>
<li>
<a href="http://kupogames.com/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/mattroszak.png" | relative_url }}" alt="Matt Roszak" class="img-fluid">
</a>
</li>
<li>
<a href="https://www.dolldivine.com/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/dolldivine.png" | relative_url }}" alt="Doll Divine" class="img-fluid">
</a>
</li>
<li>
<a href="https://movavi.com/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/movavi.svg" | relative_url }}" alt="Movavi" class="img-fluid">
</a>
</li>
<li>
<a href="https://www.kongregate.com/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/kongregate.svg" | relative_url }}" alt="Kongregate" class="img-fluid">
</a>
</li>
<li>
<a href="https://www.bubbleshooter.net/" target="_blank" rel="nofollow">
<img src="{{ "/assets/sponsors/bubble-shooter.png" | relative_url }}" alt="Bubble Shooter" class="img-fluid">
</a>
</li>
</ul>
<h4 class="text-center">Want to join them? <a href="https://opencollective.com/ruffle"
target="_blank">Sponsor Ruffle
today!</a></h4>
</p>
</div>
</div>
</section>
</main>
<a href="{{ site.github_url }}" class="github-corner" aria-label="View source on GitHub">
<svg width="150" height="150" viewBox="0 0 250 250"
style="fill:#FFAD33; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
{%- include footer.html -%}
</body>
</html>