下面我将分步详细解释如何实现,包括 ActionScript (Flash 端) 和 JavaScript (网页端) 的代码。
（图片来源网络，侵删）
核心原理
- Flash Player 内置功能：现代的 Flash Player (从 Flash Player 9 开始) 已经内置了全屏显示的 API，你可以在 Flash 影片内部通过 ActionScript 来请求进入或退出全屏模式。
- 用户交互触发：出于安全原因，Flash Player 不允许 JavaScript 或
setTimeout等非用户直接操作的事件来触发全屏，全屏请求必须由用户的直接交互（如鼠标点击、键盘按键）来触发，这是最关键的一点。 - JavaScript 通信：虽然 JavaScript 不能直接 触发 Flash 的全屏，但它可以：
- 在用户点击页面上的一个按钮（全屏”按钮）时，调用 Flash 影片中的函数。
- 监听 Flash 影片发出的全屏状态变化事件，从而在网页上更新UI（在全屏时隐藏“全屏”按钮，显示“退出全屏”按钮）。
第一步：在 Flash (FLA) 文件中设置 ActionScript
这是实现全屏的核心,你需要编写一小段 ActionScript 3.0 代码。
- 打开你的 Flash 文件 (.fla)。
- 新建一个图层，命名为 "Actions"。
- 选中第一帧，按
F9打开“动作”面板。 - 粘贴以下代码：
// 定义一个公共函数，供 JavaScript 调用
// 使用 [ExternalInterface] 来实现 Flash 与网页的通信
import flash.external.ExternalInterface;
// 检查当前播放器是否支持 ExternalInterface
if (ExternalInterface.available) {
try {
// 在 JavaScript 中注册一个名为 "setFlashFullscreen" 的函数
// 当网页调用 window.setFlashFullscreen() 时，就会执行这里的匿名函数
ExternalInterface.addCallback("setFlashFullscreen", goFullscreen);
// 可选：注册一个函数，用于从 Flash 通知 JavaScript 全屏状态的变化
ExternalInterface.addCallback("onFullscreenStateChange", onFullscreenStateChange);
} catch (e:Error) {
trace("ExternalInterface 交互失败: " + e.message);
}
} else {
trace("ExternalInterface 不可用");
}
// 实际执行全屏/退出全屏的函数
function goFullscreen():void {
// StageDisplayState.FULL_SCREEN 表示全屏显示
// StageDisplayState.NORMAL 表示正常显示
if (stage.displayState == StageDisplayState.NORMAL) {
stage.displayState = StageDisplayState.FULL_SCREEN;
} else {
stage.displayState = StageDisplayState.NORMAL;
}
}
// 监听 Flash Player 的全屏状态变化事件
stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreenStateChange);
// 当全屏状态改变时，被调用的函数
function onFullscreenStateChange(e:FullScreenEvent):void {
// e.fullScreen 是一个布尔值，true 表示进入全屏，false 表示退出全屏
// 通过 ExternalInterface.call 调用 JavaScript 函数，并传递状态
ExternalInterface.call("onFlashFullscreenStateChange", e.fullScreen);
// 注意：在全屏模式下，Flash 会自动隐藏鼠标光标。
// 如果你需要显示光标，可以设置：
// Mouse.show();
}
代码解释：
ExternalInterface.addCallback("setFlashFullscreen", goFullscreen);: 这行代码是关键，它告诉 Flash：“当网页的 JavaScript 调用setFlashFullscreen这个函数名时，请执行我们 Flash 里的goFullscreen函数”。stage.displayState = StageDisplayState.FULL_SCREEN;: 这就是真正让 Flash 进入全屏模式的 ActionScript 命令。stage.addEventListener(...): 我们监听全屏事件，以便在状态改变时通知 JavaScript。
- 发布影片：按
Ctrl+Enter(或Cmd+Enter) 测试并发布你的 SWF 文件。
第二步：在 HTML 网页中设置 JavaScript 和 HTML
我们需要创建一个网页,嵌入 SWF 文件，并编写与之交互的 JavaScript。
-
创建 HTML 文件 (
index.html)。
（图片来源网络，侵删） -
嵌入 SWF 文件，推荐使用
swfobject.js库，这是嵌入 Flash 的标准且最可靠的方式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">Flash 全屏示例</title>
<!-- 引入 swfobject.js 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 可选，但推荐 -->
<script src="https://cdn.jsdelivr.net/npm/swfobject@2.2.1/swfobject.js"></script>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
background-color: #f0f0f0;
}
#flashContent {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#controls {
text-align: center;
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
/* 全屏模式下，隐藏控制按钮 */
.fullscreen-mode #controls {
display: none;
}
</style>
</head>
<body>
<div id="flashContent">
<!-- 这里将由 swfobject 动态插入 Flash 内容 -->
<p>正在加载 Flash...</p>
</div>
<div id="controls">
<button id="fullscreenBtn">进入全屏</button>
</div>
<script type="text/javascript">
// 等待文档加载完成
$(document).ready(function() {
// 1. 使用 swfobject 嵌入 SWF
var flashvars = {};
var params = {
menu: "false", // 禁用右键菜单
scale: "showall", // 缩放模式
bgcolor: "#ffffff" // 背景色
};
var attributes = {
id: "myFlashMovie" // 给 Flash 实例一个 ID，方便 JS 调用
};
// 替换 #flashContent 中的内容，并嵌入 SWF
// 请确保 "your_movie.swf" 是你的 SWF 文件路径
swfobject.embedSWF("your_movie.swf", "flashContent", "800", "600", "11.0.0", "expressInstall.swf", flashvars, params, attributes);
// 2. 监听 "进入全屏" 按钮的点击事件
$("#fullscreenBtn").on("click", function() {
// 获取 Flash 实例
var flashMovie = document.getElementById("myFlashMovie");
if (flashMovie && typeof flashMovie.setFlashFullscreen === 'function') {
// 调用我们在 Flash 中定义的函数
flashMovie.setFlashFullscreen();
} else {
alert("Flash 影片未完全加载或函数不存在。");
}
});
// 3. 监听从 Flash 发来的全屏状态变化通知
window.onFlashFullscreenStateChange = function(isFullscreen) {
console.log("Flash 全屏状态改变: " + (isFullscreen ? "进入" : "退出"));
if (isFullscreen) {
// 进入全屏后的操作
document.body.classList.add("fullscreen-mode");
// 可以在这里做一些适配全屏的样式调整
} else {
// 退出全屏后的操作
document.body.classList.remove("fullscreen-mode");
}
};
});
</script>
</body>
</html>
代码解释：
swfobject.embedSWF(...): 这行代码负责将你的 SWF 文件嵌入到<div id="flashContent">中。id: "myFlashMovie"使得我们可以通过document.getElementById("myFlashMovie")来访问这个 Flash 实例。$("#fullscreenBtn").on("click", ...): 当用户点击“进入全屏”按钮时，这段代码会执行。flashMovie.setFlashFullscreen(): 这行代码调用了我们在 Flash 中通过ExternalInterface.addCallback注册的函数，从而触发了 ActionScript 中的goFullscreen()。window.onFlashFullscreenStateChange = function(...): 我们在全局作用域定义了这个函数，当 Flash 中的ExternalInterface.call("onFlashFullscreenStateChange", ...)执行时，就会调用这个 JavaScript 函数，我们可以根据传入的参数来更新网页的 UI。
重要注意事项和最佳实践
- 安全限制：再次强调，全屏请求必须由用户的直接交互（如点击按钮）触发，你不能在页面加载后自动全屏。
- 用户体验：
- 在进入全屏模式时,Flash Player 通常会自动隐藏鼠标光标以获得沉浸式体验，如果需要显示光标，可以在 ActionScript 中调用
Mouse.show()。 - 提供清晰的“退出全屏”方式，用户通常可以通过按
Esc键退出全屏，你也可以在 Flash 内部添加一个按钮来调用goFullscreen()函数。
- 在进入全屏模式时,Flash Player 通常会自动隐藏鼠标光标以获得沉浸式体验，如果需要显示光标，可以在 ActionScript 中调用
- 浏览器兼容性：此方法在现代浏览器（Chrome, Firefox, Edge 等）中均可正常工作，只要用户安装了 Flash Player 插件，所有主流浏览器都在逐步禁用甚至移除对 Flash 的支持。
- 替代方案：对于任何新项目，强烈建议不要使用 Flash，现代 Web 技术如 HTML5
<video>、Canvas API 或 WebGL 提供了更强大、更安全、更高效且无需插件的解决方案，它们也原生支持全屏功能。
通过以上步骤,你就可以成功地在网页中实现 Flash 内容的全屏显示了。
（图片来源网络，侵删）
