在 flex 4.6 中添加背景图片答案

【问题标题】：adding a background image in flex 4.6在 flex 4.6 中添加背景图片
【发布时间】：2013-05-09 23:23:21
【问题描述】：

制作一个 Flex 4.6 移动应用程序我正在尝试添加一个资产 .png 文件，以在所有不同的视图和方向上显示为应用程序的背景。有没有人想出办法做到这一点？

任何帮助将不胜感激:)

【问题讨论】：

尝试了当前可用的容器和蒙皮方法。我也参考了 adobe Docs 无济于事。但是我必须承认我不是最擅长整理文档的人。

标签： apache-flex

【解决方案1】：

我一直在这个洞里，我知道出路。

您需要为您的应用程序创建一个外观类。不必太复杂，这就是我的文件 (appSkin.mxml) 的样子。

<?xml version="1.0" encoding="utf-8"?><s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
    [HostComponent("spark.components.View")]
</fx:Metadata>

<!-- states -->
<s:states>
    <s:State name="disabled" />
    <s:State name="normal" />
</s:states>

<s:BitmapImage  source="@Embed('assets/bg.png')" width="100%" height="100%" />

<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />


<!-- SkinParts
name=contentGroup, type=spark.components.Group, required=false
-->

然后您需要在应用程序的开始标记中将该文件声明为应用程序的 skinClass...

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="320"
           creationComplete="creationCompleteHandler()" xmlns:views="views.*" skinClass="skins.appSkin">

然后你必须做最后一步。您的每个 View 组件都带有一个不透明的背景层，因此您需要在每个组件中显式地将 backgroundAlpha 值设置为 0。

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="Start" backgroundAlpha="0">

这应该可以完成您的任务，即在多个视图中为您的应用程序维护一个通用背景图像。

【讨论】：

【解决方案2】：

试试这样的：

<s:View>
 <fx:Script>
    [Embed(source="myImage.gif")]
    public var myImage :Class;
  </fx:Script>
  <s:Image source="myImage" width="100%" height="100%"/>
</s:View>

Info about Embedding images in Flex

但是，我并不期待完美的结果。 PNG 是预渲染的位图。很可能它不会在所有视图和方向[和分辨率]上看起来都正确，因为 PNG 的元素可能会倾斜、拉伸或压缩，并且会动态调整大小；例如从纵向切换到横向时。

【讨论】：