แปลความหมายเพลง Olivia Ong – Here, There and Everywhere

19/06/2014

แปลความหมายเพลง Olivia Ong – Sweet Memories

07/07/2014

Flash AS 3.0 – การสุ่มค่าสีให้กับข้อความ, Movie Clip

06/07/2014
empty image
empty image

หายไปนานเลย ฮ่าๆ มึนๆ ไปกับ Flash นี่แหละ เอาล่ะวันนี้เราจะมาสุ่มค่าสีกัน …

การสุ่มค่าสี

มาเริ่มที่การสุ่มค่าสีก่อน

1.1 สุ่มทุกสีในโหมดสี RGB
ก็ง่ายๆ เลยคือ Math.random()*(ค่าสี)
ตัวอย่าง Math.radom()*0xFFFFFF; //แบบนี้จะเป็นการสุ่มทุกสี

1.2 สุ่มเฉพาะสีที่เรากำหนดไว้
แบบนี้ ผมใช้วิธีเก็บค่าสีไว้ใน Array แล้วก็สุ่มเลขดัชนี ดึงค่านั้นออกมา
ตัวอย่าง

var ColorArray:Array=new Array(0xFF0000, 0x00FF00, 0x0000FF);
var IntIndex:int=Math.floor(Math.random()*ColorArray.length);
stage.color=ColorArray[IntIndex];// เปลี่ยนสีพื้นหลัง

จะเป็นการสุ่มค่าสีที่อยู่ใน Array ซึ่งมี 3 สีคือ แดง, เขียว, น้ำเงิน แล้วกำหนดสีพื้นหลังให้เป็นสีที่สุ่มได้

1.3 สุ่มเฉพาะโทน หรือกลุ่มของสี
อันนี้ยากอยู่นะ ผมก็ยังไม่ชำนาญ การทำแบบนี้มีอยู่หลายวิธีเลยล่ะ แต่ผมรู้อยู่วิธีเดียว คือแยกสุ่มเฉพาะค่าของสีใดสีหนึ่งแล้วค่อยเอามารวมกัน ซึ่งต้องเข้าใจก่อนว่าโค้ดสี RGB มันจะเป็น FFFFFF
ซึ่งแสดงค่าสีเรียงตามนั้น คราวนี้ถ้าเราต้องการเอาเฉพาะโทนสีแดง สุ่มเฉพาะหลักแรก พูดไปก็งง ลองเขียนโค้ดเลย -..-

var CRed:int=Math.random() * 255;
var RGB:int=int("0x"+CRed+"00"+"00");
stage.color=RGB;

จากตัวอย่างข้างบนคือสุ่มค่าของแม่สีแดง โดยค่าแม่สีอื่นให้เป็น 0 ดังนั้นสีที่สุ่มได้ มันก็จะเป็นแดง แดงเข้ม ไปเรื่อยๆ จนถึงแดงดำ ส่วนถ้าจะสุ่มแบบละเอียดกว่านี้เช่น เอาสีตรงข้าม เอาโทนร้อน โทนเย็น อันนี้ต้องไปศึกษาเอาเองแล้วล่ะครับ ฮ่าๆๆ

สุ่มเปลี่ยนสีของข้อความ

มาดูตัวอย่างการนำไปประยุกต์ใช้ ตัวอย่างเมื่อเสร็จแล้วก็จะเป็นแบบนี้

วิธีนี้จะเป็นการเขียนสคริปต์เพื่อกำหนด สีและตำแหน่งของ Text Field โดยประเภทข้อความต้องเลือกเป็น Dynamic Text ด้วย และเราจะใช้ Tweener โหลดได้จาก https://code.google.com/p/tweener/

วิธีทำ
1. สร้างข้อความ

1.1 พิมพ์ข้อความที่ต้องการ

 

1.2 กด [Ctrl+B] 1 ครั้ง

 

1.3 เปลี่ยนประเภทเป็น Dynamic Text แล้วตั้งชื่อให้กับทุกตัวอักษร

2. เขียนสคริปต์

2.1 การใช้คลาส Tweener ให้แตกไฟล์ที่โหลดมาแล้วเอาไปไว้ที่ directory เดียวกับไฟล์งาน แล้วก็ทำการ import เข้ามาในไฟล์งาน
โดยพิมพ์
import caurina.transitions.*;

2.2 ประกาศตัวแปรเพื่อเก็บตำแหน่งเริ่มต้น
ต่อจากนี้จะเยอะล่ะ ยิ่งข้อความยาวยิ่งมึน -..-
var Char_Z_reTurn:Number = Char_Z.y;
var Char_Z2_reTurn:Number = Char_Z2.y;

แล้วก็ทำไปเรื่อยๆ จนครบตามตัวอักษร

2.3 ฟังก์ชันรอเหตุการณ์จะใช้ Mouse_UP และ Mouse_Out

Char_Z.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_Z);
function OnOverChar_Z(evt:MouseEvent):void{
 Char_Z.textColor=Math.random()*0xFFFFFF;
 Tweener.addTween(Char_Z, {y:Char_Z_reTurn-30, time:1});
}
Char_Z.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_Z);
function OnOutChar_Z(evt:MouseEvent):void{
 Char_Z.textColor=Math.random()*0xFFFFFF;
 Tweener.addTween(Char_Z, {y:Char_Z_reTurn, time:1});
}

ข้างบนนี่คือ 1 ตัวอักษรนะ จากนั้นก็ก๊อปปี้แล้วแก้ไปเรื่อยๆ จนครบทุกตัวอักษร
**การใช้คลาส Tweener
Tweener.addTween(ชื่อวัตถุ, {y:ชื่อวัตถุ, time:1});
y คือแกน y เราจะขยับเฉพาะแกน y
time คือเวลาที่จะใช้ในการเคลื่อนไหว หน่วยเป็นวินาที

โค้ดทั้งหมดของข้อความที่ผมทำ

import caurina.transitions.*;
var Char_Z_reTurn:Number = Char_Z.y;
var Char_Z2_reTurn:Number = Char_Z2.y;
var Char_Z3_reTurn:Number = Char_Z3.y;
var Char_L_reTurn:Number = Char_L.y;
var Char_E_reTurn:Number = Char_E.y;
var Char_E2_reTurn:Number = Char_E2.y;
var Char_P_reTurn:Number = Char_P.y;
var Char_Y_reTurn:Number = Char_Y.y;
var Char_I_reTurn:Number = Char_I.y;
var Char_N_reTurn:Number = Char_N.y;
var Char_C_reTurn:Number = Char_C.y;
var Char_L2_reTurn:Number = Char_L2.y;
var Char_A_reTurn:Number = Char_A.y;
var Char_S_reTurn:Number = Char_S.y;
var Char_S2_reTurn:Number = Char_S2.y;

//Z
Char_Z.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_Z);
function OnOverChar_Z(evt:MouseEvent):void{
Char_Z.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_Z, {y:Char_Z_reTurn-30, time:1});
}
Char_Z.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_Z);
function OnOutChar_Z(evt:MouseEvent):void{
Char_Z.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_Z, {y:Char_Z_reTurn, time:1});
}
//Z2
Char_Z2.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_Z2);
function OnOverChar_Z2(evt:MouseEvent):void{
Char_Z2.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_Z2, {y:Char_Z2_reTurn-30, time:1});
}
Char_Z2.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_Z2);
function OnOutChar_Z2(evt:MouseEvent):void{
Char_Z2.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_Z2, {y:Char_Z2_reTurn, time:1});
}
//Z3
Char_Z3.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_Z3);
function OnOverChar_Z3(evt:MouseEvent):void{
Char_Z3.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_Z3, {y:Char_Z_reTurn-30, time:1});
}
Char_Z3.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_Z3);
function OnOutChar_Z3(evt:MouseEvent):void{
Char_Z3.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_Z3, {y:Char_Z3_reTurn, time:1});
}
//L
Char_L.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_L);
function OnOverChar_L(evt:MouseEvent):void{
Char_L.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_L, {y:Char_L_reTurn-30, time:1});
}
Char_L.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_L);
function OnOutChar_L(evt:MouseEvent):void{
Char_L.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_L, {y:Char_L_reTurn, time:1});
}
//E
Char_E.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_E);
function OnOverChar_E(evt:MouseEvent):void{
Char_E.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_E, {y:Char_Z_reTurn-30, time:1});
}
Char_E.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_E);
function OnOutChar_E(evt:MouseEvent):void{
Char_E.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_E, {y:Char_E_reTurn, time:1});
}
//E2
Char_E2.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_E2);
function OnOverChar_E2(evt:MouseEvent):void{
Char_E2.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_E2, {y:Char_E2_reTurn-30, time:1});
}
Char_E2.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_E2);
function OnOutChar_E2(evt:MouseEvent):void{
Char_E2.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_E2, {y:Char_E2_reTurn, time:1});
}
//P
Char_P.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_P);
function OnOverChar_P(evt:MouseEvent):void{
Char_P.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_P, {y:Char_P_reTurn-30, time:1});
}
Char_P.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_P);
function OnOutChar_P(evt:MouseEvent):void{
Char_P.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_P, {y:Char_P_reTurn, time:1});
}
//Y
Char_Y.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_Y);
function OnOverChar_Y(evt:MouseEvent):void{
Char_Y.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_Y, {y:Char_Y_reTurn-30, time:1});
}
Char_Y.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_Y);
function OnOutChar_Y(evt:MouseEvent):void{
Char_Y.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_Y, {y:Char_Y_reTurn, time:1});
}
//I
Char_I.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_I);
function OnOverChar_I(evt:MouseEvent):void{
Char_I.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_I, {y:Char_I_reTurn-30, time:1});
}
Char_I.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_I);
function OnOutChar_I(evt:MouseEvent):void{
Char_I.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_I, {y:Char_I_reTurn, time:1});
}
//N
Char_N.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_N);
function OnOverChar_N(evt:MouseEvent):void{
Char_N.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_N, {y:Char_N_reTurn-30, time:1});
}
Char_N.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_N);
function OnOutChar_N(evt:MouseEvent):void{
Char_N.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_N, {y:Char_N_reTurn, time:1});
}
//C
Char_C.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_C);
function OnOverChar_C(evt:MouseEvent):void{
Char_C.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_C, {y:Char_C_reTurn-30, time:1});
}
Char_C.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_C);
function OnOutChar_C(evt:MouseEvent):void{
Char_C.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_C, {y:Char_C_reTurn, time:1});
}
//L2
Char_L2.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_L2);
function OnOverChar_L2(evt:MouseEvent):void{
Char_L2.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_L2, {y:Char_L2_reTurn-30, time:1});
}
Char_L2.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_L2);
function OnOutChar_L2(evt:MouseEvent):void{
Char_L2.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_L2, {y:Char_L2_reTurn, time:1});
}
//A
Char_A.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_A);
function OnOverChar_A(evt:MouseEvent):void{
Char_A.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_A, {y:Char_Z_reTurn-30, time:1});
}
Char_A.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_A);
function OnOutChar_A(evt:MouseEvent):void{
Char_A.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_A, {y:Char_A_reTurn, time:1});
}
//S
Char_S.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_S);
function OnOverChar_S(evt:MouseEvent):void{
Char_S.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_S, {y:Char_S_reTurn-30, time:1});
}
Char_S.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_S);
function OnOutChar_S(evt:MouseEvent):void{
Char_S.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_S, {y:Char_S_reTurn, time:1});
}
//S2
Char_S2.addEventListener(MouseEvent.MOUSE_OVER, OnOverChar_S2);
function OnOverChar_S2(evt:MouseEvent):void{
Char_S2.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_S2, {y:Char_S2_reTurn-30, time:1});
}
Char_S2.addEventListener(MouseEvent.MOUSE_OUT, OnOutChar_S2);
function OnOutChar_S2(evt:MouseEvent):void{
Char_S2.textColor=Math.random()*0xFFFFFF;
Tweener.addTween(Char_S2, {y:Char_S2_reTurn, time:1});
}

ผ่านไปกับสุ่มสีข้อความ …

สุ่มเปลี่ยนสีของ Movie Clip

การสุ่มสีของ Movie Clip จะแตกต่างกับกล่องข้อความเลย โดยจะใช้คลาส ColorTransform ซึ่งจริงๆ แล้วสามารถแปลงข้อความแต่ละตัวอักษรเป็น Movie Clip เก็บไว้ตั้งแต่ A-Z เวลาจะใช้ก็ลากมาใช้เลย แบบนี้ก็ได้ แก้ไขง่ายด้วย

ตัวอย่างง่ายๆ เลย
– วาดวงกลมขึ้นมา 1 รูปแล้วแปลงเป็น Symbol แบบ Movie Clip ตั้งชื่อ MyMC

เขียนสคริปต์

var MyColor:ColorTransform = new ColorTransform();
MyMC.addEventListener(MouseEvent.MOUSE_DOWN, startDarg);
function startDarg(evt:MouseEvent):void{
 MyColor.color=Math.random()*0xFFFFFF;
 MyMC.transform.colorTransform=MyColor;
 MyMC.startDrag();
}
CMC.addEventListener(MouseEvent.MOUSE_UP, stopDarg);
function stopDarg(evt:MouseEvent):void{
 MyMC.stopDrag();
}

แค่นี้เสร็จแล้ว ก็จะได้แบบนี้

จริงๆ ความสามารถของ ColorTransform มันไม่ได้มีแค่นี้หรอกนะ ต้องไปศึกษาเพิ่มเติม…
วันนี้ก็พอละ บาย นอน … Zzz

Ref.
ColorTransform