我希望制作一个Flex按钮，使其背景透明，以便对页面应用CSS并影响Flash。
我尝试了，但没有成功：
我尝试了，但没有成功：
<mx:Button skin="{null}" x="0" y="0" label="Submit"/>
如何使Flex按钮的背景透明
3
- croppio.com
1
只能使用Flex 3还是可以使用Flex 4？ - RIAstar
3个回答
3
当使用Spark按钮时，您可以应用自定义外观来去除所有的装饰性元素。
您可以按照以下方式应用自定义外观：
<s:Button label="Submit" skinClass="TransparentButtonSkin"/>
@Panciz的解决方案可能有效，但是通过简单地省略您不需要的所有组件，可以使皮肤更加轻量级。
<!--TransparentButtonSkin.mxml-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<s:Rect id="hitZone" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
<s:Label id="labelDisplay" left="0" right="0" top="0" bottom="0"
horizontalCenter="0" verticalCenter="0"
textAlign="center" maxDisplayedLines="1" verticalAlign="middle"/>
</s:SparkButtonSkin>
请注意
hitzone 透明图形: 这是必要的，否则您会点击按钮的透明部分。- RIAstar
1
你需要定义一个新的Skinclass，并为所有组件定义alpha属性，我尝试使用Spark按钮并成功了。
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark Button component.
@see spark.components.Button
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="21" minHeight="21"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.Group;
/* Define the skin elements that should not be colorized.
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr)
{
cornerRadius = cr;
shadow.radiusX = cornerRadius;
fill.radiusX = cornerRadius;
lowlight.radiusX = cornerRadius;
highlight.radiusX = cornerRadius;
border.radiusX = cornerRadius;
}
if (highlightStroke) highlightStroke.radiusX = cornerRadius;
if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
private var cornerRadius:Number = 2;
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- layer 1: shadow -->
<!--- @private -->
<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.01"
alpha.down="0" />
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.07"
alpha.down="0.5" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill" alpha="{0.1}" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.over="0xBBBDBD"
color.down="0xAAAAAA"
alpha="0.85" />
<s:GradientEntry color="0xD8D8D8"
color.over="0x9FA0A1"
color.down="0x929496"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 3: fill lowlight -->
<!--- @private -->
<s:Rect id="lowlight" alpha="{0.1}" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="270">
<s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
<s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
<s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: fill highlight -->
<!--- @private -->
<s:Rect id="highlight" alpha="{0.1}" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.33"
alpha.over="0.22"
alpha.down="0.12"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.48"
alpha="0.33"
alpha.over="0.22"
alpha.down="0.12" />
<s:GradientEntry color="0xFFFFFF"
ratio="0.48001"
alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 5: highlight stroke (all states except down) -->
<!--- @private -->
<s:Rect id="highlightStroke" alpha="{0.1}" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<!--- @private -->
<s:Rect id="hldownstroke1" alpha="{0.1}" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!--- @private -->
<s:Rect id="hldownstroke2" alpha="{0.1}" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
<!--- @private -->
<s:Rect id="border" alpha="{0.1}" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
alpha="0.5625"
alpha.down="0.6375" />
<s:GradientEntry color="0x000000"
alpha="0.75"
alpha.down="0.85" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 8: text -->
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Label id="labelDisplay"
textAlign="center"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:SparkButtonSkin>
- Panciz
1
最简单的方法是使用
mx:LinkButton，不幸的是 LinkButtonSkin 对于所有状态都硬编码 alpha=1，但你可以覆盖它：package
{
import flash.geom.Matrix;
import mx.skins.halo.LinkButtonSkin;
public class LinkButtonAlphaSkin extends LinkButtonSkin
{
public function LinkButtonAlphaSkin()
{
super();
}
override protected function drawRoundRect(x:Number, y:Number, width:Number, height:Number, cornerRadius:Object=null, color:Object=null, alpha:Object=null, gradientMatrix:Matrix=null, gradientType:String="linear", gradientRatios:Array=null, hole:Object=null):void
{
super.drawRoundRect(x, y, width, height, cornerRadius, color, 0, gradientMatrix, gradientType, gradientRatios, hole);
}
}
}
使用方法：
<mx:LinkButton label="lala" skin="LinkButtonAlphaSkin"/>
- fsbmain
3
好的，如果你需要将整个swf文件设为透明，唯一的方法是在嵌入swf对象到HTML页面时设置wmode="transparent"。 - fsbmain
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接