제작년 Ruffle을 처음 포스팅 한 후 한동안 잊고 있었다가 최근 Ruffle 사이트를 가보니 이제 Action Script 2 이하는 거의 90%를 지원하고 ActionScript 3도 60%를 지원하는 등 점점 완벽한 ActionScript를 지원을 향해 달려가고 있었네요.
(참조 : https://ruffle.rs/#compatibility)
Ruffle은 데스크탑에 설치해서 쓰는 버전도 있고, 크롬 익스텐션으로 설치하여 사용하는 버전도 있지만, 웹서버에서 호스팅하여 Ruffle을 설치하지 않은 사람도 플래시를 재생하도록 하는 버전이 있습니다. 제가 이 블로그에서 말하는 Ruffle은 마지막, 즉 웹서버용입니다. 오늘은 이전 포스트에서 다루지 않았던 Ruffle을 자동실행하고 swf도 자동실행되게 하는 법에 대해 간단히 적어볼까 합니다.
이전 플래시 시절에는 Flash Player가 브라우저의 플러그인 형태로 설치되고 <object>태그로 swf 파일을 웹페이지에 삽입하면 Flash player가 이를 재생해 주는 것이었습니다만 Ruffle은 플래시플페이어와 비슷하면서도 다른 WebAssembly라는 기술을 사용합니다. 기술적으로도 다르기도 하지만 사용자 입장에서 가장 다른 점은 WebAssembly는 별도의 플러그인 소프트웨어를 설치할 필요가 없다는 것과 안드로이드나 애플 iOS에서도 swf 플래시파일을 재생시켜준다는 것이 가장 큰 차이점입니다. 이전의 플래시플레이어는 웹브라우저가 <object>태그나 <embed> 태그로 삽입된 swf 파일을 바로 실행시켜주기에 사용자는 그것이 일반 html인지 swf인지 구분하기 어려웠습니다. (물론 context 메뉴로 알 수는 있지만.)
반면에 Ruffle은 <object>또는 <embed>로 삽입된 swf의 재생의 경우에는 재생버튼이 늘 먼저 실행되어서 사용자가 버튼을 눌러 실행을 해줘야 했습니다. 일반적인 게임이나 비디오의 경우는 뭐 불편함이 없겠지만 메뉴 등 바로 실행되어서 인터렉티브한 클릭을 해야 하는 경우는 불편한것이 사실입니다.
예를 들어, 10여년전 만들어진 홈페이지의 플래시를 바꿀수 없고, 소스코드도 변경하기 어려운 경우는 대개 <object>나 <embed>로 swf가 삽입되어 있을 경우일테고, 이때는 단순히 ruffle의 js 코드만 로드해도 작동되므로 그나마 쉽게 플래시를 재생할 수 있지만 늘 사용자가 클릭을 해야 만 실행되므로 불편함이 있습니다.
위 그림처럼 예전에 만든 홈페이지의 코드를 변경하지 않고 페이지 상단에 단순히 ruffle.js만 로드하는 경우는 재생버튼이 먼저 나타납니다. 클릭해야 실행됩니다. 기존 코드를 변경하지 않고 플래시를 지원하지 않는 최신브라우저에서 플래시를 사용할 수 있는 쉬운 방법이지만, 불편하죠.(이전 포스트 참조 : Ruffle - Flash Player emulator)
그럼 과거의 플래시플레이어처럼 바로 재생되게 하는 방법은 있을까요?? 네 있습니다. <object>나 <embed>로 삽입된 swf를 Javascript로 로드하는 것으로 바꾸면 됩니다.
오늘은 Ruffle에서 제공하는 문서의 내용대로 만든 간단한 소스를 소개합니다. (Using Ruffle · ruffle-rs/ruffle Wiki · GitHub 참조) 이전 포스트에서 사용한 테트리스swf 파일을 그대로 활용하여 다시 만들면 아래와 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<title>Ruffle Test</title>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("container");
container.appendChild(player);
player.load({
url: "./tetris.swf",
});
player.style.width = "100vw";
player.style.height = "100vh";
});
window.RufflePlayer.config = {
"autoplay": "on",
"unmuteOverlay": "hidden",
};
</script>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
<style>
html, body{
margin:0;
padding:0;
overflow:hidden;
height: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html><object>와 <embed>를 제거하고, <div id="container"></div>에 동적으로 Javascript에서 로드한 swf를 바인딩하는 방법으로 바꾸었습니다. Ruffle이 업그레이드 되면서 Ruffle의 로고 스플래시가 나타나긴 하지만 자동으로 재생됩니다. 또 Ruffle이 업그레이드 되면서 자동실행되는 경우 소리가 자동적으로 나오는 것을 막기 위해 음량소거 버튼이 디폴트로 나타납니다. 이를 없애주는 window.RufflePlayer.config 옵션을 추가했습니다.
이제는 Ruffle도 jQuery와 같이 외부 CDN도 지원됩니다. 가장 최신의 Ruffle을 자동으로 활용하려면 Ruffle을 로컬에서 로드하지 말고 <script src="https://unpkg.com/@ruffle-rs/ruffle"></script>와 같이 외부CDN에서 로드해 주면 됩니다.
아직도 ActionScript를 완벽하게 지원하는 것이 아니고 특히 API는 아직도 갈길이 많아서 100% 과거의 플래시플레이어와 같다고 할 수 없지만 다음 포스팅에서는 실제 플래시에서 외부 동영상을 로드하거나 Live 스트리밍을 했던 swf를 가지고 완벽하게 지원되는지 확인해 볼까 합니다. 이를 위해 이제는 완전히 지워버려서 설치파일도 없는 Adobe Flash 저작도구의 설치파일을 구해야 겠네요. ㅋㅋ
마지막으로 위 소스는 다음의 링크에서 직접 보실 수 있습니다. 자 이제, 테트리스 게임 한판 하실까요??
https://nooree.github.io/ruffle/
Ruffle Test
nooree.github.io
'Web & Media' 카테고리의 다른 글
| MistServer가 완전히 오픈소스가 되었습니다.(무료로 HLS서버 구축) (2) | 2022.03.06 |
|---|---|
| 플래시 플레이어(Flash Player)가 여전히 필요한 경우 (0) | 2021.07.17 |
| Ruffle - Flash Player emulator (10) | 2021.01.17 |
| HTTP Streaming을 위한 도구 - hls.js (0) | 2021.01.14 |
| UWAMP를 이용한 USB포터블 PHP개발환경 만들기 (0) | 2020.01.07 |
