使用 ActionScript 2.0 组件
使用组件创建应用程序 > 显示礼品详细信息

显示礼品详细信息

在应用程序中，用户在 Gift Ideas 部分中单击产品时会出现一个弹出窗口。该弹出窗口包含显示产品信息（包括文字说明、图像和价格）的组件实例。要制作此弹出窗口，需要创建一个影片剪辑元件，然后添加 Loader、TextArea、Label、NumericStepper 和 Button 组件的实例。Bouquet of Flowers Extreme 的产品详细信息窗口的外观如下所示：

稍后将添加 ActionScript，它可为每种产品动态创建该影片剪辑的实例。这些影片剪辑实例将显示在此前添加到库中的 Window 组件中。来自外部 XML 文件的元素将填充这些组件实例。

1. 将 Window 组件的一个实例从"组件"面板拖动到库中。

   Window 组件元件现在被添加到了库中。在本教程的后面部分，将使用 ActionScript 创建 Window 组件的实例。

2. 在"库"面板（"窗口">"库"）中，单击标题栏右侧的选项菜单，然后选择"新建元件"。
3. 在"创建新元件"对话框中，为"名称"输入 ProductForm，然后为"类型"选择"影片剪辑"。
4. 单击"高级"按钮。在"链接"下面，选择"为 ActionScript 导出"，选中"在第一帧导出"，然后单击"确定"。新元件的文档窗口即会以元件编辑模式打开。

   对于库中没有出现在舞台上的影片剪辑元件，必须选择"为 ActionScript 导出"，这样才能使用 ActionScript 进行处理。（在"第一帧导出"意味着只要加载了第一帧，即可使用影片剪辑。）在本教程的后面部分，您将添加 ActionScript，使用户每次在 Gift Ideas 部分中单击产品时，即动态生成该影片剪辑的实例。

5. 在新建元件的时间轴中，选择"图层 1"，然后将它重命名为 Components。
6. 将 Loader 组件的一个实例从"组件"面板拖动到舞台上。分别为 x 和 y 坐标输入 5 和 5。输入实例名称 image_ldr。在"属性"检查器中单击"参数"选项卡。为 autoLoad 选择 false，为 scaleContent 选择 false。

   Loader 组件实例将用来显示产品的图像。将 autoLoad 设置为 false 则指定图像不自动加载。将 scaleContent 设置为 false 则指定图像不调整大小。在本教程的后面部分，将添加一些代码，这些代码根据用户在 Gift Ideas 部分选择的产品动态加载图像。

7. 将 TextArea 组件的一个实例从"组件"面板拖动到舞台上。将它放置在 Loader 组件的旁边。分别为 x 和 y 坐标输入 125 和 5。输入实例名称 description_ta。将"宽度"设置为 200，并将"高度"设置为 130。在"属性"检查器中单击"参数"选项卡。为 editable 选择 false。为 html 选择 true。为 wordWrap 选择 true。

   TextArea 组件实例将用来显示所选产品的文本说明。所选设置指定这些文本不能由用户编辑，可以使用 HTML 标签设置格式，会换行以适合文本区域大小。

8. 将 Label 组件的一个实例从"组件"面板拖动到舞台上。将它放置在 Loader 组件的下面。将 x 和 y 坐标分别设置为 5 和 145。输入实例名称 price_lbl。在"属性"检查器中单击"参数"选项卡。为 autoSize 选择 left。为 html 选择 true。

   Label 组件实例将显示产品价格和单位（由指定价格确定的产品数量，如"每件"或"一打"）。

9. 将 NumericStepper 组件的一个实例从"组件"面板中拖动到舞台上。将它放置在 TextArea 组件的下面。将 x 和 y 坐标分别设置为 135 和 145。输入实例名称 quantity_ns。在"属性"检查器中单击"参数"选项卡。为 minimum 输入 1。

   将 minimum 设置为 1，即指定用户必须至少选择一件产品，才能将商品添加到购物车中。

10. 将 Button 组件的一个实例从"组件"面板拖动到舞台上。将它放置在 NumericStepper 组件的旁边。将 x 和 y 坐标分别设置为 225 和 145。输入实例名称 addToCart_button。在"属性"检查器中单击"参数"选项卡。为 label 输入 Add To Cart。

查看 LiveDocs 上的注释