การเปลี่ยนสี font ของ Dynamiic text ที่อยู่ใน MC

[daromoja]

>> ต้องเขียนโคดยังไงคับถึงจะสามารถ เปลี่ยนสี font ของ Dynamiic text ที่อยู่ใน MC
โดยพอคลิ๊กเลือกที่ MC ไหน  ก็สามารถเปลี่ยนสีของ font ใน MC นั้นได้  เหมือนภาพประกอบ
ที่ให้มาข้างล่างคับ

     ผมเพิ่งหัดเขียน Action Script เลยโง่หน่อย  ถ้ามีตัวอย่างที่ผมวสมารถเรียนรู้ได้  ผมก็
ขอความกรุณาพี่ๆทุกคนด้วยนะคับ 

[daromoja]

  ช่วยหน่อยนะคับ

[ej_sing]

เริ่มจากตรงไหนดีครับ
ทำถึงตรงไหนแล้ว
ติดขัดตรงไหนครับ
หรือยังไม่ได้เริ่มเลย
หรือว่าอยากเอาแนวทางสคริป
หรือจะให้ทำให้เลยครับ
ฯลฯ

http://img2.f0nt.com/flash/0c971aa505329a95b9d8877feca7e224.swf

[daromoja]

ขอบคุณ พี่ ej_sing  มากๆๆ คับ
ถ้ามีคัวอย่างไฟล์กับอธิบายโคดเพิ่ม  จะเปงพระคุณอย่างยิ่งคับ
ตอนนี้ผมเขียนไฟล์เปง AS 2 อยู่อ่ะคับ..
..........................................ขอบคุงค้าบบบบบบบบบบบบบบบบบบบบบบบบบ

[ej_sing]

ตอบไม่ตรงคำถามแฮะ พิมพ์ภาษาไทยให้ถูกต้องกว่านี้อีกนิดครับมันขัดตา 

เริ่มด้วยการโหลด colorpicker component ไปติดตั้งซะก่อน (ถ้ายังไม่มี )
ผมใช้ตัวนี้อ้างอิงโค้ดนะครับ

เริ่มด้วยการ สร้าง listener object มาตรวจจับการเลือกสี
เพื่อเอาค่าสีออกมาส่งให้ mc ที่มี Dynamic text อยู่ด้านใน


var my_fmt:TextFormat = new TextFormat();
var pickerListener:Object = new Object();           // สร้าง listener object มาตรวจจับการเลือกสี
pickerListener.change = function(cl:Object) {      // เมื่อมีการเปลี่ยนแปลงใดๆกับ event นี้
   codeColor = "0x"+cl.getRGB();                   // ดึงค่าสีออกมาส่งให้ตัวแปร
   my_fmt.color = codeColor;                        // เซ็ทค่าสีให้ TextFormat ก่อน
   mc.txt.setTextFormat(my_fmt);                 // แล้วก็ค่อยส่งไปที่ mc ที่มี Dynamic text อยู่ด้านใน
};
clp.addListener(pickerListener);                         // เอา event มาตรวจจับกับตัว colorpicker ซึ่งในที่นี้ตั้งชื่อว่า clp


----------------------------------------------------

อธิบายได้ว่า
เมื่อมีการคลิกเลือกสีที่ colorpicker
ก็จะส่งค่าสีนั้นๆไปให้กับ  Dynamic text ที่อยู่ด้านใน mc

พอเข้าใจนะครับ

ส่วนตัว colorPicker2 ติดตั้งเฉพาะไฟล .mxp ก็ได้ครับถ้าใช้แค่ธรรมดา

[daromoja]

 :25:ขอบคุณมากครับ  ถ้าผมติดตรงไหนยังไง
รบกวนถามอีกได้หรือเปล่าคัรบ   
.....................................

[daromoja]

 :33:ขอรบกวนอีกนิดนึงนะคับ  ถ้าผมจะทำแบบตัวอย่างแรกที่พี่ให้มา 
แบบเลือกได้ว่าจะเปลี่ยนสี mc อันไหนต้องทำยังไงครับ
ตัวอย่างเพิ่มจะขอพระคุณอย่างยิ่งครับ.............................

[ej_sing]

อยากเข้าใจวิธีการ
หรืออยากเอาไปใช้เลยครับ

ถ้าอยากเข้าใจ เพื่อที่จะเอาไปต่อยอดทำงานอื่นๆได้ (ด้วยความเข้าใจ และสร้างขึ้นเอง ไม่ใช้ copy แล้ว Modify)
ลองทำโค้ดที่ให้หรือยังครับ แล้วติดตรงไหน ไม่เห็นถามสักที
เอามาโพสเลยครับ จะได้ตอบเป็นส่วนๆไป (เท่าที่ผมจะสามารถ)

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

var my_fmt:TextFormat = new TextFormat();
var mc:MovieClip;
var pickerListener:Object = new Object();
pickerListener.change = function(cl:Object) {
   codeColor = "0x"+cl.getRGB();
   my_fmt.color = codeColor;
   mc.txt.setTextFormat(my_fmt);
};
clp.addListener(pickerListener);
function choose(mc:MovieClip) {
   for (var i:Number = 1; i<=7; i++) {
      _root["txt"+i].gotoAndStop(1);
   }
   mc.gotoAndStop(2);
}
for (var i:Number = 1; i<=7; i++) {
   _root["txt"+i].onRelease = function() {
      _root.mc = this;
      choose(this);
   };
}

http://img2.f0nt.com/flash/0c971aa505329a95b9d8877feca7e224.swf

[ไอ้เบิร์ด]

งั้นผมถามต่อเลยละกันครับ ถ้าผมต้องการทำให้ mc ที่เป็น solid เปลี่ยนสีได้ต้องทำมั่งอะครับ ใช้โคดตัวเดียวกับที่ใช้เปลี่ยนสีในตัวทดลองพิมพ์ได้รึเปล่าครับ (เอาแค่หลักคร่าวๆก่อนก็ได้ครับ เดี๋ยวผมไปมั่วต่อเองก็ได้ครับ)

[iannnnn]

โอ้โห เห็นแล้วก็ขอบคุณแทนครับ
เพราะเป็นเรื่องที่ผมเองตอบไม่ได้จริงๆ
ขอบคุณครับน้าแอ๊ด

[ไอ้เบิร์ด]

เหมือนเป็นเป็นห้อง คุณถามน้าแอ๊ดตอบ เลย ว่าเมื่อไหร่จะถึงคิวน้าแอ๊ด เปิดห้องรับคำถามอย่างเป็นทางการ บ้างหละครับ

[Layiji]

สุดยอดจริงๆครับ 

[ej_sing]

โอว ปั่นกันกระจุย มีคนตัดหน้าคุณตั้ง 2 คนแน่ะ

งั้นผมถามต่อเลยละกันครับ ถ้าผมต้องการทำให้ mc ที่เป็น solid เปลี่ยนสีได้ต้องทำมั่งอะครับ ใช้โคดตัวเดียวกับที่ใช้เปลี่ยนสีในตัวทดลองพิมพ์ได้รึเปล่าครับ (เอาแค่หลักคร่าวๆก่อนก็ได้ครับ เดี๋ยวผมไปมั่วต่อเองก็ได้ครับ)

ตอบกรณีใช้ colorPicker Component

var my_fmt:TextFormat = new TextFormat();
var pickerListener:Object = new Object();           // สร้าง listener object มาตรวจจับการเลือกสี
pickerListener.change = function(cl:Object) {      // เมื่อมีการเปลี่ยนแปลงใดๆกับ event นี้
   codeColor = "0x"+cl.getRGB();                       // ดึงค่าสีออกมาส่งให้ตัวแปร
   my_color = new Color(my_mc);                   
   my_color.setRGB(codeColor);                       // แล้วก็ค่อยส่งไปที่ mc นั้นๆ
};
clp.addListener(pickerListener);

[ej_sing]

//เบิ้ลละกัน ให้ลองคลำหาเองดูสักนิดเพื่อความรู้ของท่าน (ใจดำชะมัด) 
ทีนี้ก็จะมาอธิบายวิธีคร่าวๆ 

จากคำถามแรก
"ต้องเขียนโคดยังไงคับถึงจะสามารถ เปลี่ยนสี font ของ Dynamiic text ที่อยู่ใน MC
โดยพอคลิ๊กเลือกที่ MC ไหน  ก็สามารถเปลี่ยนสีของ font ใน MC นั้นได้"

ผมก็มั่วๆ คิดไป ทำไป ( 85.372% เปิด help ..... ความลับนะเนี่ย  )
แถมวิ่งไปหา colorPicker Component เจ๋งๆมาให้ใช้ง่ายๆ ทั้งที่ไม่เคยใช้ ก็เลยใช้เป็นแถมดีด้วย

เริ่มแรก เราก็คิดก่อนว่า mc ที่มี txt ข้างในทั้งหมดจะมีกี่ตัว เดาไว้ก่อนว่าหลาย
ถ้ามีหลายตัว เราก็ต้องคิดถึงการวนลูปไว้เลย เลี่ยงไม่ได้
เมื่อมีการวนลูป ชื่อ mc ใดๆที่ต้องการวน ควรจะเรียงกันด้วยตัวเลข mc1 , mc2 , mc3,....n

ต่อมา สร้าง mc ที่มี dynamic txt  กี่ตัวก็ตามใจ แต่ dynamic txt ทุกตัวที่อยู่ใน mc ต้องชื่อเดียวกัน
ในที่นี้ผมให้ชื่อว่า txt เมื่อเวลาอ้างชื่อก็จะเป็น
mc1.txt
mc2.txt
mc3.txt
.... n
เวลาลูปจะได้ง่าย

=====================================================

ทีนี้ทำยังไงให้เมื่อคลิก mc ใดๆ แล้วสคริปถึงจะรู้ว่าเราเลือก mc ตัวนี้อยู่นะ ก็...

var mc:MovieClip;      //ประกาศตัวแปรไว้ตัวนึง ให้มันเป็นตัวรับค่าการเลือก mc ของเรา

mc1.onRelease = function (){      //สร้าง event Release เมื่อคลิกที่ mc
     mc = this                              // ให้ตัวแปรนั้นรับค่าว่ามันคือ mc1
}
mc2.onRelease = function (){      //สร้าง event Release เมื่อคลิกที่ mc
     mc = this                              // ให้ตัวแปรนั้นรับค่าว่ามันคือ mc2
}

.... โอ๊ยยยยย มี mc สัก 20 ตัวไม่พิมพ์กันเมื่อยเลยเรอะ คำสั่งก็เหมือนกันหมด

ใช้วิธีนี้ ในการสร้าง event ที่เหมือนๆกัน (จริงๆถ้าแอดว๊านซ์กว่านี้เขาใช้คลาสกันเลย พอดีไม่เป็น....... )

for (var i:Number = 1; i<=20; i++) {
   _root["mc"+i].onRelease = function() {
      mc = this;
   };
}

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

===============================================

ทีนี้เราก็บอกสคริปได้แล้ว ว่าเราเลือก mc ตัวไหนอยู่ ต่อไปก็ เซ็ทค่าสี
วิธีส่งค่าสีให้ dynamic txt

var my_fmt:TextFormat = new TextFormat();     //สร้าง TextFormat(); ซึ่งสามารถเซ็ทค่า property ได้ทุกอย่าง
my_fmt.color = 0xFF0000                                //ในที่นี้เราจะเซ็ทสีแดง
mc.txt.setTextFormat(my_fmt);                        // ก็เซ็ท txt ใน mc ที่เลือกไว้ ด้วยค่า my_fmt.color = 0xFF0000

กรณีนี้ ถ้าเราเลือก mc8 ไว้
mc.txt.setTextFormat(my_fmt);  ก็คือ mc8.txt.setTextFormat(my_fmt);  dynamic txt ก็จะเป็นสีแดงแล้ว

เพราะ mc = this; จากลูปคำสั่งด้านบนไง
ไม่งงนะ

ต่อ เรามีโค้ดเซ็ทสีแล้ว  ทีนี้อยากจะส่งค่าสีโดยการเลือก colorPicker ล่ะ
เราก็มาดูว่า ไอ้ คอมโปแนนท์ colorPicker เนี่ย มันทำงานยังไง ส่งค่าออกมายังไง
ดูจากตัวอย่างได้ความว่า

var pickerListener:Object = new Object();         //สร้าง listener Object
pickerListener.change = function(cl:Object) {     //ตรวจจับการเปลี่ยนแปลง  เมื่อมีการเปลี่ยนแปลง
   codeColor = "0x"+cl.getRGB();                  //ให้ดึงค่าสีที่เลือก มาส่งให้ตัวแปร codeColor
   my_fmt.color = codeColor;                       //กลับไปเอาโค้ดเซ็ทสีมาใส่ในนี้
   mc.txt.setTextFormat(my_fmt);                // ส่งค่าสีเรียบร้อย
};
clp.addListener(pickerListener);                      //สั่งให้ event listener ไปตรวจจับเหตุการณ์กับตัว colorPicker ซึ่งชื่อว่า clp

เท่านี้เมื่อมีการเปลี่ยนแปลงใน colorPicker มันก็จะส่งค่าสีให้ mc ที่เราเลือกอยู่ครับผม 

==========================================================


ทีนี้ เพิ่มลูกเล่นเล็กน้อย โอ๊ยยยยย ว่างมากเรอะเนี่ยตู 

- พิมพ์เพิ่มได้ เปลี่ยนแปลงได้ เลือก mc ไหน พิมพ์อันนั้น
- สีไม่เปลี่ยนขณะพิมพ์
- สีของ colorPicker ตรงกับ mc ที่เลือก

http://img2.f0nt.com/flash/6e405c69062798f08c1108bc0607aa13.swf

สคริปทั้งหมด ยุ่บยั่บเลย 

var my_fmt:TextFormat = new TextFormat();
var mc:MovieClip;
var pickerListener:Object = new Object();
pickerListener.change = function(cl:Object) {
   codeColor = "0x"+cl.getRGB();
   my_fmt.color = codeColor;
   mc.txt.setTextFormat(my_fmt);
   lockColor();
};
clp.addListener(pickerListener);
inp.onChanged = function() {
   mc.txt.text = this.text;
};
function choose(mc:MovieClip) {
   for (var i:Number = 1; i<=9; i++) {
      _root["txt"+i].gotoAndStop(1);
   }
   mc.gotoAndStop(2);
}
for (var i:Number = 1; i<=9; i++) {
   _root["txt"+i].onRelease = function() {
      _root.mc = this;
      choose(this);
      inp.text = mc.txt.text;
      lockColor();
      clp.color = codeColor;
   };
}
function lockColor() {
   fmt = mc.txt.getTextFormat();
   codeColor = "0x"+fmt.color.toString(16);
   mc.txt.textColor = codeColor;
}


อธิบายยยยยยยย

var my_fmt:TextFormat = new TextFormat();
var mc:MovieClip;
var pickerListener:Object = new Object();
pickerListener.change = function(cl:Object) {
   codeColor = "0x"+cl.getRGB();
   my_fmt.color = codeColor;
   mc.txt.setTextFormat(my_fmt);
   lockColor();                                  //เพิ่มเติมตัวล๊อคค่าสีของ dynamic txt นั้นๆ
};
clp.addListener(pickerListener);

//เพิ่มเติมตัวพิมพ์เพิ่ม แก้ไข โดยข้อความเดิมยังอยู่

inp.onChanged = function() {               //เมื่อ input txt มีการเปลี่ยนแปลง (พิมพ์) ให้ส่งค่าไปที่ dynamic txt ที่เลือกอยู่
   mc.txt.text = this.text;                 
};

//ส่วนนี้เป็นฟังชั่นแสดงผลกรอบสีแดงให้รู้ว่าเราเลือกอยู่นะ โดย mc แต่ละตัวมีสองเฟรม
//เฟรมแรกไม่มีกรอบ เฟรมสองมีกรอบแดง

function choose(mc:MovieClip) {                      //ฟังชั่นนี้จะส่งกากิวเม้นต์เป็น mc ตัวที่เลือก โดย
   for (var i:Number = 1; i<=9; i++) {         // ให้ mc ทุกตัวกลับไปเฟรมแรกที่ไม่มีกรอบ
      _root["txt"+i].gotoAndStop(1); 
   }
   mc.gotoAndStop(2);                              // ยกเว้นตัวที่เลือก ให้แสดงผลเฟรมสอง (กรอบแดง)
}


for (var i:Number = 1; i<=9; i++) {                   //อันนี้ลูปสร้าง event กดเลือก mc ใดๆ ถ้าไม่ทำแบบนี้ ก็ต้องพิมพ์คำสั่งกันอ้วกแตก
   _root["txt"+i].onRelease = function() {
      _root.mc = this;
      choose(this);                                   // รันแสดงผลกรอบแดงตัวที่เลือก
      inp.text = mc.txt.text;                      //ดึง text เก่าไปแสดงผลที่ input txt
      lockColor();                                    //ล๊อคค่าสีเดิมไว้
      clp.color = codeColor;                     //ดึงค่าสีเดิมมาส่งให้ colorPicker แสดงผลสีเดิมด้วย
   };
}


function lockColor() {                                        //ฟังชั่นล๊อคค่าสีเดิมของ dynamic txt ที่เลือก
   fmt = mc.txt.getTextFormat();                    //ดึงค่า TextFormat(); ทั้งหมด
   codeColor = "0x"+fmt.color.toString(16);     //เอาค่าสีที่ดึงมาได้ ส่งไปตัวแปร codeColor
   mc.txt.textColor = codeColor;                     //เซ็ทค่าสีเดิมไว้ก่อนกันเหนียว อิอิ
}

อ่ะ ดูดดดดดดดดดด 

[iannnnn]

+