Blame
| b1250b | Tebby Dog | 2025-07-06 22:09:41 | 1 | # Flash-Container |
| 2 | ||||
| e69bc2 | Tebby Dog | 2025-07-06 22:33:37 | 3 | Skip the fairy-tale, just give me the code already --> [Click Here](https://teb.codes/2-Code/Docker/Flash-Container#usage) |
| b1250b | Tebby Dog | 2025-07-06 22:09:41 | 4 | |
| 5 | # FlashContainer: Host & Serve Flash (.swf) Files with Ruffle |
|||
| 6 | ||||
| 7 | **FlashContainer** is a lightweight container designed to host and serve Flash `.swf` files using the Ruffle emulator. This allows you to easily run and view Flash-based content in a modern browser, even after Flash's official deprecation. |
|||
| 8 | ||||
| 9 | ## How It Works |
|||
| 10 | ||||
| 11 | This container runs a web server using Node.js and serves `.swf` files via the [Ruffle](https://ruffle.rs/) emulator, which is a Flash Player emulator written in Rust. The emulator provides a modern way to play old Flash content by converting it to formats supported by current browsers. |
|||
| 12 | ||||
| 13 | - **Ruffle Integration**: The container downloads the latest nightly release of Ruffle, ensuring up-to-date compatibility with `.swf` files. |
|||
| 14 | - **http-server**: This serves the content via HTTP, exposing it on port 80. |
|||
| 15 | - **External SWF File**: You can map your own `.swf` files via Docker volume, making it easy to change content without modifying the image itself. |
|||
| 16 | ||||
| 17 | ## Usage |
|||
| 18 | ||||
| 19 | 1. **Pull the Image** |
|||
| 20 | ```bash |
|||
| 21 | docker pull tebwritescode/flashcontainer |
|||
| 22 | ``` |
|||
| 23 | ||||
| 24 | 2. **Run the Container** |
|||
| 25 | ||||
| 26 | Mount your `.swf` file into the container with a volume mapping: |
|||
| 27 | ||||
| 28 | ```bash |
|||
| 29 | docker run -d -p 80:80 -v /path/to/your/game.swf:/app/game.swf tebwritescode/flashcontainer |
|||
| 30 | ``` |
|||
| 31 | ||||
| 32 | - `/path/to/your/game.swf` should be replaced with the path to your local `.swf` file. |
|||
| 33 | - The container will serve your `.swf` file at `http://localhost`. |
|||
| 34 | ||||
| 35 | 3. **Access the Website** |
|||
| 36 | ||||
| 37 | Open a browser and navigate to `http://localhost` (or the IP where your container is hosted) to view and interact with your Flash file. |
|||
| 38 | ||||
| 39 | ## Features |
|||
| 40 | ||||
| 41 | - **Serve Flash Content Easily**: Simple setup for serving `.swf` files. |
|||
| 42 | - **Ruffle Emulator**: Play Flash content in a browser without needing Flash Player. |
|||
| 43 | - **Volume Mapping**: No need to modify the container—just swap out the `.swf` file. |
|||
| 44 | - **Lightweight**: Minimal image size using Node.js and Ruffle. |
|||
| 45 | ||||
| 46 | ## Customization |
|||
| 47 | ||||
| 48 | - You can modify the HTML file that hosts the `.swf` content by editing `index.html` and adjusting the Ruffle embed configurations. |
|||
| 49 | - Use different `.swf` files by swapping the file you mount to `/app/game.swf`. |
|||
| 50 | ||||
| 51 | ## Requirements |
|||
| 52 | ||||
| 53 | - Docker installed on your host machine. |
|||
| 54 | - A valid `.swf` file to be served. |
|||
| 55 | ||||
| 56 | ## Screenshots |
|||
| 57 |  |
|||
| 58 | ||||
| 59 |  |
|||
| 60 | ||||
| 61 |  |
|||
| 62 | ||||
| 63 | --- |
|||
| 64 | ## Source |
|||
| 65 | Dockerfile |
|||
| 66 | ||||
| 67 | ``` |
|||
| 68 | # Base image with Node.js and http-server to serve files |
|||
| 69 | FROM node:20-bullseye |
|||
| 70 | ||||
| 71 | # Install http-server globally to serve files |
|||
| 72 | RUN npm install -g http-server |
|||
| 73 | ||||
| 74 | # Set working directory |
|||
| 75 | WORKDIR /app |
|||
| 76 | ||||
| 77 | # Download the specified nightly release of the Ruffle self-hosted package |
|||
| 78 | # Install additional dependencies: Java, Git |
|||
| 79 | RUN apt-get update && apt-get install -y \ |
|||
| 80 | default-jdk \ |
|||
| 81 | maven \ |
|||
| 82 | git \ |
|||
| 83 | default-mysql-client \ |
|||
| 84 | libasound2-dev \ |
|||
| 85 | libxcb-shape0-dev \ |
|||
| 86 | libxcb-xfixes0-dev \ |
|||
| 87 | libgtk-3-dev \ |
|||
| 88 | libudev-dev \ |
|||
| 89 | libxcb-xinput-dev \ |
|||
| 90 | libxcb-xkb-dev \ |
|||
| 91 | libxcb-cursor-dev \ |
|||
| 92 | default-jre-headless \ |
|||
| 93 | cmake \ |
|||
| 94 | g++ \ |
|||
| 95 | unzip \ |
|||
| 96 | wget \ |
|||
| 97 | && apt-get clean \ |
|||
| 98 | curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y \ |
|||
| 99 | . "$HOME/.cargo/env" |
|||
| 100 | ||||
| 101 | # Install curl and jq to fetch the latest Ruffle nightly release |
|||
| 102 | RUN apt-get update && apt-get install -y curl jq |
|||
| 103 | ||||
| 104 | # Download the latest nightly release of Ruffle |
|||
| 105 | RUN LATEST_RELEASE_URL=$(curl -s https://api.github.com/repos/ruffle-rs/ruffle/releases | jq -r '.[] | select(.prerelease == true) | .assets[].browser_download_url | select(contains("web-selfhosted.zip"))' | head -n 1) && \ |
|||
| 106 | wget $LATEST_RELEASE_URL -O /tmp/ruffle-nightly.zip && \ |
|||
| 107 | mkdir -p /app/ruffle && \ |
|||
| 108 | unzip /tmp/ruffle-nightly.zip -d /app/ruffle && \ |
|||
| 109 | rm /tmp/ruffle-nightly.zip |
|||
| 110 | ||||
| 111 | # Take out the trash |
|||
| 112 | RUN rm -rf ./ruffle-nightly-2024_10_13-web-selfhosted.zip |
|||
| 113 | ||||
| 114 | # Copy the local HTML file into the container |
|||
| 115 | COPY ./index.html /app/index.html |
|||
| 116 | ||||
| 117 | # Copy the local game file into the container |
|||
| 118 | #COPY ./game.swf /app/game.swf |
|||
| 119 | ||||
| 120 | # Expose port 80 for serving the SWF game |
|||
| 121 | EXPOSE 80 |
|||
| 122 | ||||
| 123 | # Command to serve the game using http-server |
|||
| 124 | CMD ["http-server", ".", "-p", "80"] |
|||
| 125 | ``` |
|||
| 126 | ||||
| 127 | index.html |
|||
| 128 | ||||
| 129 | ``` |
|||
| 130 | <!DOCTYPE html> |
|||
| 131 | <html lang="en"> |
|||
| 132 | <head> |
|||
| 133 | <meta charset="UTF-8"> |
|||
| 134 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
| 135 | <script src="ruffle/ruffle.js"></script> |
|||
| 136 | <style> |
|||
| 137 | html, body { |
|||
| 138 | margin: 0; |
|||
| 139 | padding: 0; |
|||
| 140 | width: 100%; |
|||
| 141 | height: 100%; |
|||
| 142 | } |
|||
| 143 | ||||
| 144 | #ruffle-player { |
|||
| 145 | width: 100%; |
|||
| 146 | height: 100%; |
|||
| 147 | } |
|||
| 148 | </style> |
|||
| 149 | </head> |
|||
| 150 | <body> |
|||
| 151 | <script> |
|||
| 152 | window.RufflePlayer = window.RufflePlayer || {}; |
|||
| 153 | ||||
| 154 | window.RufflePlayer.config = { |
|||
| 155 | "letterbox": "on", |
|||
| 156 | } |
|||
| 157 | ||||
| 158 | window.addEventListener("DOMContentLoaded", () => { |
|||
| 159 | let ruffle = window.RufflePlayer.newest(); |
|||
| 160 | let player = ruffle.createPlayer(); |
|||
| 161 | player.style.width = "100%"; // Set player's width to 100% |
|||
| 162 | player.style.height = "100%"; // Set player's height to 100% |
|||
| 163 | document.body.appendChild(player); |
|||
| 164 | player.load("game.swf"); // Load the local SWF file named game.swf |
|||
| 165 | }); |
|||
| 166 | </script> |
|||
| 167 | </body> |
|||
| 168 | </html> |
|||
| 169 | ``` |
|||
| 170 | --- |
|||
| 171 | ||||
| 172 | ||||
| 173 | ||||
| 174 | By using **FlashContainer**, you can keep your favorite Flash content alive and playable through modern web technologies. |