如何切换动画片段的颜色?
How to toggle color of a movieclip?
假设我在舞台上放了一个电影剪辑。每次单击此影片剪辑时,我都希望它改变颜色,但如果再次单击,我希望它重新着色(再次变为白色)。更清楚 - 它在开始时是白色的,第一次点击我希望它变成黄色,第二次点击再次变成白色,第三次点击再次变成黄色,依此类推。
我刚刚写了第一次点击的代码,但我想不出剩下的怎么做。
var myColorTransform:ColorTransform=transform.colorTransform;
half1a.addEventListener(MouseEvent.CLICK, changeColour);
function changeColour(event:MouseEvent):void
{
myColorTransform.color = 0xD5E40D;
half1a.transform.colorTransform=myColorTransform;
addChild(half_number1a);
}
我会使用 ColorMatrixFilter:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/ColorMatrixFilter.html
var aMatrix:Array = [
0, 0, 0, 0, 0xD5,
0, 0, 0, 0, 0xE4,
0, 0, 0, 0, 0x0D,
0, 0, 0, 1, 0
];
var aYellow:ColorMatrixFilter = new ColorMatrixFilter(aMatrix);
// Make object yellow.
M.filters = [aYellow];
// Make object normal.
M.filters = null;
function toggleColor():void
{
if (M.filters) M.filters = null;
else M.filters = [aYellow];
}
未经测试,但您可以尝试这样的操作...
var myColorTransform:ColorTransform=transform.colorTransform;
var nextColor : String = "yellow"; //set with expected Next Color
half1a.addEventListener(MouseEvent.CLICK, changeColour);
function changeColour(event:MouseEvent):void
{
if (nextColor == "yellow") { myColorTransform.color = 0xD5E40D; nextColor == "white" }
else if (nextColor == "white") { myColorTransform.color = 0xFFFFFF; nextColor == "yellow" }
half1a.transform.colorTransform=myColorTransform;
addChild(half_number1a);
}
理想情况下,您应该使用 Boolean
设置 true/false 状态,然后使用 If/Else
设置颜色。如果 true
则设置为白色,否则如果 false
则设置为黄色。
或者如果您不喜欢打字太多:
var myColorTransform:ColorTransform=transform.colorTransform;
half1a.addEventListener(MouseEvent.CLICK, changeColour);
var cc:uint = 0; //current color.
var cl:Array = [0xFFFFFF, 0xD5E40D]; //list of all colors.
function changeColour(event:MouseEvent):void
{
myColorTransform.color = cl[cc = (++cc < cl.length)? cc : 0];
half1a.transform.colorTransform=myColorTransform;
addChild(half_number1a);
}
解释:
一点解释,因为在我看到评论后我意识到这可能会让经验不足的程序员感到困惑,我们想在这里互相教导不要为别人工作。
那么这是怎么回事?
基本设置
我们声明了一些数组,其中包含我们希望循环我们的影片剪辑的颜色(按?)。
var cl:Array = [0xFFFFFF, 0xD5E40D]; //list of all colors.
不,我们想知道我们现在显示的是哪种颜色,所以我们声明了另一个变量来存储当前颜色的索引。
var cc:uint = 0; //current color.
如果您已经感到困惑,请参阅 Working with arrays
基本上(当前值为 0
)我们将通过以下方式访问数组 0xFFFFFF
的第一项:
cl[cc];
目标
现在我们每次单击动画片段时只需移动索引,使其指向数组中的下一项(颜色)。
我们可以像这样简单地增加当前颜色的值
myColorTransform.color = cl[++cc];
注意这里x++
和++x
的区别。 Adobe 很好地 example 了解这之间的区别。
它会工作,但只有在我们到达数组末尾之前(显然我们不想再增加我们的索引,我们希望它回到 0
)
剩下的就是这样做了——将索引设为 0
;
如果您不知道这种奇怪的 ()?:;
语法是什么意思。您可能想要检查这个 this - 只是 if...else
的缩写,但您最好将其视为返回某个值的函数。
所以在这种情况下 cc = (++cc < cl.length)? cc : 0
相当于这样写:
cc = nextIndex();
function nextIndex() {
if (++cc < cl.length) return cc;
else return 0; //else is redundant here - if "if" is ture then function will return "cc" and no other instruction are executed in this function.
}
总结
总之,myColorTransform.color = cl[cc = (++cc < cl.length)? cc : 0];
行的作用是。
- 增加颜色索引。
检查新索引是否小于颜色列表的长度。
如果为真,将cc
设置为cc
(保留原样)
否则,将 cc
设置回 0
从颜色列表 cl
中选择颜色值 []
.
- 将
myColorTransform.color
设置为选择的值。
补充问题的答案。
从我们刚刚结束的那一刻起,cc
值正在存储新颜色的索引,因此您可以简单地使用它再次访问 cl
,而无需重做这些疯狂的事情。例如,如果你只想拥有一个 mc,你可以只使用 visible 属性:
function changeColour(event:MouseEvent):void
{
myColorTransform.color = cl[cc = (++cc < cl.length) ? cc : 0];
half1a.transform.colorTransform = myColorTransform;
half_number1a.visible = cl[cc] == 0xFFFFFF; //check if current color is white and set it's visible state accordingly
}
请注意,如果按钮未添加到 stage fist,您将看不到它,即使可见 属性 设置为 true
。
更灵活的解决方案
或者另一种方法是创建并行或多维数组。在像这样的简单场景中,并行阵列应该是更好的选择,因为它更容易跟踪,而且您不需要更改已有的任何东西。
基本上这个想法是创建另一个数组,其中每个值(在您的情况下,影片剪辑与同一索引处的颜色值相伴:
var cl:Array = [0xFFFFFF, 0xD5E40D]; //list of all colors.
var ml:Array = [half_number1a, null ]; //movie clips list.
所以如果你有这样的东西,现在你的 changeColor
函数看起来像这样:
function changeColour(event:MouseEvent):void
{
myColorTransform.color = cl[cc = (++cc < cl.length) ? cc : 0];
half1a.transform.colorTransform = myColorTransform;
if (ml[cc]) addChild(ml[cc]); //add child if exist.
if (ml[cc - 1]) removeChild(ml[cc - 1]); //remove previous child if exist.
}
就是这样。请记住,在调用 removeChild()
之前,您需要在舞台上握紧影片剪辑
此设置的好处在于,您可以通过将新值推送到数组来添加任意数量的颜色和动画片段:)
假设我在舞台上放了一个电影剪辑。每次单击此影片剪辑时,我都希望它改变颜色,但如果再次单击,我希望它重新着色(再次变为白色)。更清楚 - 它在开始时是白色的,第一次点击我希望它变成黄色,第二次点击再次变成白色,第三次点击再次变成黄色,依此类推。
我刚刚写了第一次点击的代码,但我想不出剩下的怎么做。
var myColorTransform:ColorTransform=transform.colorTransform;
half1a.addEventListener(MouseEvent.CLICK, changeColour);
function changeColour(event:MouseEvent):void
{
myColorTransform.color = 0xD5E40D;
half1a.transform.colorTransform=myColorTransform;
addChild(half_number1a);
}
我会使用 ColorMatrixFilter: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/ColorMatrixFilter.html
var aMatrix:Array = [
0, 0, 0, 0, 0xD5,
0, 0, 0, 0, 0xE4,
0, 0, 0, 0, 0x0D,
0, 0, 0, 1, 0
];
var aYellow:ColorMatrixFilter = new ColorMatrixFilter(aMatrix);
// Make object yellow.
M.filters = [aYellow];
// Make object normal.
M.filters = null;
function toggleColor():void
{
if (M.filters) M.filters = null;
else M.filters = [aYellow];
}
未经测试,但您可以尝试这样的操作...
var myColorTransform:ColorTransform=transform.colorTransform;
var nextColor : String = "yellow"; //set with expected Next Color
half1a.addEventListener(MouseEvent.CLICK, changeColour);
function changeColour(event:MouseEvent):void
{
if (nextColor == "yellow") { myColorTransform.color = 0xD5E40D; nextColor == "white" }
else if (nextColor == "white") { myColorTransform.color = 0xFFFFFF; nextColor == "yellow" }
half1a.transform.colorTransform=myColorTransform;
addChild(half_number1a);
}
理想情况下,您应该使用 Boolean
设置 true/false 状态,然后使用 If/Else
设置颜色。如果 true
则设置为白色,否则如果 false
则设置为黄色。
或者如果您不喜欢打字太多:
var myColorTransform:ColorTransform=transform.colorTransform;
half1a.addEventListener(MouseEvent.CLICK, changeColour);
var cc:uint = 0; //current color.
var cl:Array = [0xFFFFFF, 0xD5E40D]; //list of all colors.
function changeColour(event:MouseEvent):void
{
myColorTransform.color = cl[cc = (++cc < cl.length)? cc : 0];
half1a.transform.colorTransform=myColorTransform;
addChild(half_number1a);
}
解释:
一点解释,因为在我看到评论后我意识到这可能会让经验不足的程序员感到困惑,我们想在这里互相教导不要为别人工作。
那么这是怎么回事?
基本设置
我们声明了一些数组,其中包含我们希望循环我们的影片剪辑的颜色(按?)。
var cl:Array = [0xFFFFFF, 0xD5E40D]; //list of all colors.
不,我们想知道我们现在显示的是哪种颜色,所以我们声明了另一个变量来存储当前颜色的索引。
var cc:uint = 0; //current color.
如果您已经感到困惑,请参阅 Working with arrays
基本上(当前值为 0
)我们将通过以下方式访问数组 0xFFFFFF
的第一项:
cl[cc];
目标
现在我们每次单击动画片段时只需移动索引,使其指向数组中的下一项(颜色)。 我们可以像这样简单地增加当前颜色的值
myColorTransform.color = cl[++cc];
注意这里x++
和++x
的区别。 Adobe 很好地 example 了解这之间的区别。
它会工作,但只有在我们到达数组末尾之前(显然我们不想再增加我们的索引,我们希望它回到 0
)
剩下的就是这样做了——将索引设为 0
;
如果您不知道这种奇怪的 ()?:;
语法是什么意思。您可能想要检查这个 this - 只是 if...else
的缩写,但您最好将其视为返回某个值的函数。
所以在这种情况下 cc = (++cc < cl.length)? cc : 0
相当于这样写:
cc = nextIndex();
function nextIndex() {
if (++cc < cl.length) return cc;
else return 0; //else is redundant here - if "if" is ture then function will return "cc" and no other instruction are executed in this function.
}
总结
总之,myColorTransform.color = cl[cc = (++cc < cl.length)? cc : 0];
行的作用是。
- 增加颜色索引。
检查新索引是否小于颜色列表的长度。
如果为真,将
cc
设置为cc
(保留原样)否则,将
cc
设置回0
从颜色列表
cl
中选择颜色值[]
.- 将
myColorTransform.color
设置为选择的值。
补充问题的答案。
从我们刚刚结束的那一刻起,cc
值正在存储新颜色的索引,因此您可以简单地使用它再次访问 cl
,而无需重做这些疯狂的事情。例如,如果你只想拥有一个 mc,你可以只使用 visible 属性:
function changeColour(event:MouseEvent):void
{
myColorTransform.color = cl[cc = (++cc < cl.length) ? cc : 0];
half1a.transform.colorTransform = myColorTransform;
half_number1a.visible = cl[cc] == 0xFFFFFF; //check if current color is white and set it's visible state accordingly
}
请注意,如果按钮未添加到 stage fist,您将看不到它,即使可见 属性 设置为 true
。
更灵活的解决方案
或者另一种方法是创建并行或多维数组。在像这样的简单场景中,并行阵列应该是更好的选择,因为它更容易跟踪,而且您不需要更改已有的任何东西。 基本上这个想法是创建另一个数组,其中每个值(在您的情况下,影片剪辑与同一索引处的颜色值相伴:
var cl:Array = [0xFFFFFF, 0xD5E40D]; //list of all colors.
var ml:Array = [half_number1a, null ]; //movie clips list.
所以如果你有这样的东西,现在你的 changeColor
函数看起来像这样:
function changeColour(event:MouseEvent):void
{
myColorTransform.color = cl[cc = (++cc < cl.length) ? cc : 0];
half1a.transform.colorTransform = myColorTransform;
if (ml[cc]) addChild(ml[cc]); //add child if exist.
if (ml[cc - 1]) removeChild(ml[cc - 1]); //remove previous child if exist.
}
就是这样。请记住,在调用 removeChild()
此设置的好处在于,您可以通过将新值推送到数组来添加任意数量的颜色和动画片段:)