使用 ActionScript 3 脚本化 Coppercube






4.20/5 (2投票s)
学习如何使用 ActionScript 控制 Coppercube SWF 应用程序

引言
Coppercube 是一款可以用来创建交互式 3D 应用程序的工具,这些应用程序可以用于 Windows 或 Web。虽然 Coppercube 包含许多行为,但自定义或复杂的动作仍然需要自定义代码。Coppercube 生成的 SWF 文件可以使用 ActionScript 进行脚本化。本教程将向您展示如何做到这一点。
背景
此处提供的代码用作许多 Coppercube 教程的基础,您可以在此处查看。
Using the Code
Coppercube 应用程序可以通过 SimpleAPI
进行脚本化,它是一组函数,用于公开场景中元素的内部属性。我们将利用这一点来创建一个改变颜色的灯光。
首先需要编译 Coppercube 应用程序。示例项目包含在下载文件中,或者您可以按照此网页上的说明创建自己的项目(如果遵循这些说明,您需要添加一个名为 Light2
的附加灯光)。
Coppercube 支持两种脚本语言:ActionScript (Flash 或 Flex) 和 Squirrel。ActionScript 用于脚本化 Flash 应用程序,而 Squirrel 用于脚本化 Windows 应用程序。这意味着您的目标受众(Web 或 Windows)将决定您使用的语言。这将是一个 Web 应用程序,因此我们将使用 ActionScript。
脚本化 Flash Coppercube 应用程序基本上涉及将 Coppercube 创建的 SWF 文件加载到由您的 ActionScript 编译器创建的新 SWF 文件中。我们将使用 Flex 编译器来创建最终的脚本化应用程序。然后,您创建的 SWF 会修改 Coppercube SWF 文件中的元素。
为了保持简单,您可以将 Coppercube SWF 嵌入到最终的 SWF 文件中。过程在此处描述。我们为名为 CoppercubeSprite
的类使用相同的公式。
CoppercubeSprite.as
package
{
import flash.display.*;
import flash.events.Event;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.utils.ByteArray;
import gs.TweenMax;
[SWF(width="600", height="400", frameRate="100", backgroundColor="000000")]
public class CoppercubeSprite extends Sprite
{
// The CopperCube generated SWF file. Embedded into this file here
// so we get only one single SWF
[Embed(source="../resources/scripting.swf", mimeType="application/octet-stream")]
public static var EmbeddedCopperCubeSWFDataFile:Class;
private var loader:Loader;
private var simpleAPI:Object;
private var loadingFinished:Boolean;
private var applicationStarted:Boolean = false;
private var light:CCLight = null;
public function CoppercubeSprite()
{
addEventListener(Event.ENTER_FRAME, onGraphicsFrame);
// load the coppercube scene from the other swf
var copperCubeData:ByteArray = new EmbeddedCopperCubeSWFDataFile() as ByteArray;
loader = new Loader();
addChild(loader);
loader.loadBytes(copperCubeData);
loader.contentLoaderInfo.addEventListener(Event.INIT, onCoppercubeLoaded);
}
// called when the coppercube .swf file has been loaded and initialized
private function onCoppercubeLoaded(e:Event):void
{
loadingFinished = true;
simpleAPI = (loader.content as DisplayObject)['simpleAPI'];
}
// called every frame
public function onGraphicsFrame(event:Event):void
{
if (loadingFinished)
{
if (simpleAPI && simpleAPI.isLoaded() && !applicationStarted)
{
applicationStarted = true;
startCCApplication();
}
if (applicationStarted)
{
enterFrame(event);
}
}
}
public function startCCApplication():void
{
this.light = new CCLight
(this.simpleAPI, simpleAPI.getSceneNodeByName("Light2"));
this.light.Color = 0xFFFF00;
TweenMax.to(this.light, 1, {hexColors:{Color:0x00FFFF}, yoyo:0});
}
public function enterFrame(event:Event):void
{
}
}
}
首先嵌入 Coppercube SWF 文件。您可以使用 Embed
关键字将资源添加到 SWF 文件中,从而获得一个分发文件,并且无需从外部源加载资源(及其固有的不可靠性)。
[Embed(source="../resources/scripting.swf", mimeType="application/octet-stream")]
我们设置了一个每帧都要调用的函数。在此函数中,我们可以修改 Coppercube 场景。
addEventListener(Event.ENTER_FRAME, onGraphicsFrame);
然后加载嵌入的 SWF 文件,并将 onCoppercubeLoaded
函数设置为在加载完成时调用。
// load the coppercube scene from the other swf
var copperCubeData:ByteArray = new EmbeddedCopperCubeSWFDataFile() as ByteArray;
loader = new Loader();
addChild(loader);
loader.loadBytes(copperCubeData);
loader.contentLoaderInfo.addEventListener(Event.INIT, onCoppercubeLoaded);
嵌入的 SWF 文件加载完成后,我们将 loadingFinished
设置为 true
,以指示 Coppercube 场景已准备好进行修改,并获取 SimpleAPI
接口的引用。
// called when the coppercube .swf file has been loaded and initialized
private function onCoppercubeLoaded(e:Event):void
{
loadingFinished = true;
simpleAPI = (loader.content as DisplayObject)['simpleAPI'];
}
onGraphicsFrame
函数在 loadingFinished
设置为 true
之前不会执行任何操作。一旦我们知道 Coppercube SWF 文件已加载并且已获得 SimpleAPI
接口的引用,我们就会检查 SimpleAPI
是否已加载。一旦加载完成,将调用 startCCApplication
函数,并将 applicationStarted
标志设置为 true
,这样我们就不会再次调用此函数。
if (simpleAPI && simpleAPI.isLoaded() && !applicationStarted)
{
applicationStarted = true;
startCCApplication();
}
应用程序启动后,我们将调用 enterFrame
函数。
if (applicationStarted)
{
enterFrame(event);
}
在 startCCApplication
函数中,我们执行任何必需的初始化。在这种情况下,我们创建 CCLight
类的一个新实例,并使用 TweenMax 类来修改灯光的颜色。
this.light = new CCLight(this.simpleAPI, simpleAPI.getSceneNodeByName("Light2"));
this.light.Color = 0xFFFF00;
TweenMax.to(this.light, 1, {hexColors:{Color:0x00FFFF}, yoyo:0});
Tweening 是在一段时间内平滑改变对象属性的过程,而 TweenMax
只是 ActionScript 中众多可用缓动库之一。我喜欢 TweenMax
,因为它能够缓动颜色,并且 yoyo 属性意味着属性可以来回循环。
enterFrame
函数留空;TweenMax
类将为我们每帧修改灯光的颜色。
public function enterFrame(event:Event):void
{
}
CCLight.as
package
{
import mx.messaging.management.ObjectInstance;
public class CCLight
{
protected var ccObject:Object = null;
protected var simpleAPI:Object = null;
protected var color:int = 0x000000;
public function get Color():int
{
return this.color;
}
public function set Color(color:int):void
{
this.color = color;
simpleAPI.setLightColor(ccObject, color);
}
public function CCLight(simpleAPI:Object, ccObject:Object)
{
this.simpleAPI = simpleAPI;
this.ccObject = ccObject;
}
}
}
CCLight
是一个非常简单的类,旨在将 Coppercube
灯光的颜色属性公开为一对 get
/set
函数。这是因为 TweenMax
需要能够修改属性,而不是像 SimpleAPI
那样提供函数参数。因此,CCLight
类仅保留对 SimpleAPI
接口和要修改的灯光的引用,并从标准 set 函数内部调用 SimpleAPI setLightColor
函数。这使得从 TweenMax
修改 Coppercube
对象变得简单。
SpriteUIComponent.as
package
{
import flash.display.Sprite;
import mx.core.UIComponent;
public class SpriteUIComponent extends UIComponent
{
public function SpriteUIComponent(sprite:Sprite)
{
super ();
explicitHeight = sprite.height;
explicitWidth = sprite.width;
addChild (sprite);
}
}
}
因为我们使用 Flex 来创建应用程序,所以我们需要一种方法将 Sprite 添加到 MXML 文件中定义的应用程序中。Sprite 不能直接添加到 Flex Application 对象中,因此作为一种非常简单的解决方法,我们使用 SpriteUIComponent
类作为中间步骤。SpriteUIComponent
扩展了 UIComponent
类,这意味着它可以被添加到 Flex Application 对象中,然后简单地将提供的 Sprite 添加为自身的子级。
LightScripting.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:ns1="*"
width="600"
height="400"
creationComplete="creationComplete()">
<mx:Script>
<![CDATA[
public function creationComplete():void
{
this.addChild (new SpriteUIComponent
(new CoppercubeSprite()));
}
]]>
</mx:Script>
</mx:Application>
MXML 文件是应用程序的入口点。应用程序准备就绪后,将调用 creationComplete
函数,此时会将一个新的 CoppercubeSprite
对象作为新 SpriteUIComponent
对象的一个子级添加到 Flex Application 对象中。
当您运行应用程序时,您会看到模型上方灯光将在黄色和青色之间缓慢渐变。使用相同的方法,几乎可以修改 Coppercube 场景的任何方面,并且我们还可以利用 ActionScript 的全部强大功能(如缓动)。
在此处查看实时演示,并在此处下载源代码。
历史
- 2009 年 9 月 1 日 - 初始发布