ScrollBar ของ Flex ที่โผล่มาซ้อนกับ CustomScrollBar
จากการที่ใช้ Flash Catalyst สร้าง CustomScrollBar เพื่อนำมาใส่ใน Flex ทำให้เกิดปัญหาเรื่อง ScrollBar ของ Flex โผล่มาซ้ำซ้อนกับ CustomScrollBar ของเรา แม้ว่าเลื่อนไปล่างสุดก็ยังมีไอเม็มที่ยังเลยจาก CustomScrollBar ของเราอีก
เลื่อน CustomScrollBar สุดแล้วยังเห็นไอเท็มไม่ครบ
ซึ่งวิธีแก้ที่จะเสนอในวันนี้เป็นวิธีการแก้ใน ActionScript ดังนี้ครับ
Group ตัวอย่างที่นำมาใชเแสดงผล โดยมี id คือ groupList และจากที่เห็น dataProvider ของ List เราคือ aColvList ซึ่งเป็น ArrayList ที่ถูกกำหนดไว้ใน ActionScript แล้ว
จากโค้ดข้างต้นเป็น mxml tag ของ CustomScrollBar ของเราซึ่งกำหนด Viewport ไว้คือ Group ที่ครอบลิสท์ไอเท็มของเราที่จะใช้
ทีนี้มาถึงสวนที่เราใช้แก้ปัญหา ScrollBar ของ Flex ไม่ให้แสดงขึ้นมาคือการเติมส่วนที่กำหนดขนาดความสูงของ Group ของเรา ให้มีขนาดเท่ากับส่วนสูงของ Item ของเรา คูณด้วยจำนวนแถว ซึ่งอธิบายโค้ดได้ดังนี้
if(aColvList.length%5) // 5 คือจำนวนของ Item ใน 1 แถวว่ามีกี่ตัว ซึ่งเราทำการเช็คว่าจำนวนไอเท็มของเราพอดีกับแถวหรือไม่หรือมีจำนวนที่เกินมา
colvList.height = (int(aColvList.length/5)+1)*160; //ถ้ามีเกินมาซึ่งก็คือแถวสุดท้ายมี 1-4 ตัว ก็ทำการนำจำนวนไอเท็มทั้งหมดหาร 5 แล้ว +1 ก็จะได้จำนวนแถว + แถวที่เกินมาแล้วคููณกับความสูงของไอเท็มหรือแถวๆหนึ่ง ซึ่งในที่นี้คือ 160
else
colvList.height = int(aColvList.length/5)*160; //ถ้าไม่มีเกินก็ทำการหารเอาจำนวนแถวคูณกับความสูงของแถวได้เลยครับ
ที่นี้เราก็จะได้ CustomScrollBar มาใช้อย่างไม่มีปัญหาแล้วล่ะครับ
CustomScrollBar เมิ่อแก้ไขสำเร็จแล้ว
ในก่อนหน้านี้ Flash Catalyst 5 (ต่อจากนี้จะเรียกว่า Fc) และ Flash Builder 4 (ต่อจากนี้จะเรียกว่า Fb) ได้สร้างความสะดวกในการสร้าง UI ใน Fc แล้วจึงนำไปโค้ดดิ้งต่อใน Fb แต่หลังจากที่ตัวผมเองได้ทำงานกับทั้งสองโปรแกรมมาสักพัก ก็ได้พบความลำบากนิดหนึ่งในการใช้งานคือ มันเป็นโฟลว์ทางเดียว เมื่อคนออกแบบสร้าง Fc มาเสร็จแล้ว เราก็ต้องอิมพอร์ทเข้ามาทำงานใน Fb เพราะ Fc ไม่สามารถแก้ไขโค้ดใดๆได้เลย และเมื่อทางโค้ดดิ้งแก้ไขอะไรเรียบร้อยแล้ว เมื่อถึงเวลาจะมีการแก้ UI ต้องแก้ในโค้ดดิ้งเลย เพราะเมื่อเราทำการอิมพอร์ทเข้า Fb แล้ว เราจะไม่สามารถนำกลับไปทำใน Fc ได้อีก แต่หลังจากนั้นเพียงไม่นาน Adobe ก็ได้ปล่อยเวอร์ชั่นใหม่มาครับ คือเพิ่ม .5 เข้าไปเป็น Fc CS 5.5 และ Fb 4.5 ซึ่งส่วนใหญ่จะมากับการซัพพอร์ท Mobile ต่างๆ แต่ก็มีผลพลอยได้ด้วยคือ ทาง Fb สามารถเรียก Fc ขึ้นมาแก้ไข UI ได้แล้วล่ะครับ!
เรามาดูกันเลยดีกว่าว่าเป็นอย่างไร
• เรามาทำการ Import Flash Catalyst Project กันก่อนเลยครับ โดยตอนนี้ได้ย้ายที่แล้ว
• ก็จะได้โปรเจ็ค Flex จาก Fc เหมือนเวอร์ชั่นเดิมนะครับ
• จากนั้นเราลองมาแก้โค๊ดกันสักหน่อย
• ต่อไปเราก็ใช้ความสามารถใหม่ของ Fb 4.5 ครับ กดไปที่ Edit Project in Flash Catalyst
• จะทำให้เราเห็นโปรเจ็คใน Fb ของเราโดนล็อคดังรูป และโปรแกรม Fc ก็จะทำการเปิดโปรเจ็ค Fb ของเราใน Fc เองครับ
• เรามาดูกันใน Fc จะเห็นได้ว่าโค้ดที่เราแก้ไขไว้ได้เข้ามาใน Fc แล้ว ซึ่งทำให้เราสามารถแก้ไข UI หลังโค้ดดิ้งได้แล้วล่ะครับ
• เรามาลองใส่ State เพิ่มอีกตัว
• เมื่อเราแก้ไข UI ต่างๆ ใน Fc เสร็จแล้วเราก็มาเลือก Resume Working On Project in Flash Builder ครับ
- หรือถ้าต้องการทำการเริ่มการแก้ไขใหม่อีกครั้งจาก Fb ที่มีอยู่ให้เลือก Re-open Project in Flash Catalyst ครับ
– หรือถ้าต้องการยกเลิกการแก้ไขจาก Fc ให้เลือก Cancel Editing Project in Flash Catalyst ครับ
• เมื่อเราแก้ไขเสร็จแล้ว UI ที่ถูกแก้ไขก็จะถูกนำมาแก้ใน Fb Project ของเราในทันทีเลยล่ะครับ
Flow การทำงานแบบใหม่ของ Flash Catalyst CS5.5 และ Flash Builder 4.5
เราจะเห็นได้ว่าโฟลว์การทำงานของ Fc 5.5 และ Fb 4.5 ไม่ได้ไปทางเดียวเหมือนเวอร์ชั่นเก่าๆอีกต่อไปครับ เพราะเราสามารถแก้ไขไปมาระหว่างสองโปรแกรมได้อย่างอิสระแล้ว ทำให้ผู้ที่ทำ Flex มีความสะดวกสบายขึ้นในเวอร์ชั่นใหม่นี่ครับ
วิธีการสร้าง Tab ใน Catalyst จะต้องใช้การพลิกแพลงเอานิดหน่อยครับ
เพราะว่ามันไม่มีให้สร้าง component เป็น Tab เลย
วิํธีการคือ
1. สร้าง Tab แต่ละอัน เป็น Button แล้ว edit state disable ให้เป็น รูปที่ใช้เวลาอยู่ที่ Tab นั้นๆ
(ในตัวอย่างคือเป็นสีขาวนะครับ)
2. หลังจากทำครบทุก tab แล้ว ให้เอาช่อง Enable ของ tab ที่จะอยู่ในหน้านั้นออกครับ
จะอยู่บริเวณกล่อง Properties ในตัวอย่างคือให้ Page1 คือ Tab1
3.แล้วก็สร้าง Page/State เพิ่มครับ ให้ครบทุก Tab
หลังจากนั้นแล้วทำแบบเดียวกันครับคือ Page2 ก็ไปตั้ง Tab2 เป็น Disable และ Page3 ก็ตั้ง Tab3 เป็น Disable
เท่านี้ก็เสร็จเรียบร้อยแล้วครับ
*เนื้อหาใน entry นี้มาจากความเข้าใจของผมเองล้วนๆ ถ้าผิดถูกยังไงก็ขออภัย และน้อมรับคำแนะนำทุกข้อครับ
Flash Catalyst คืออะไร?
Tool ที่ช่วยแปลงจาก ไฟล์กราฟฟิค(.ai หรือ .psd) กลายเป็น Component ต่างๆ(Button, Tab, Scrollbar, etc.)
ได้อย่างง่ายดาย ชี้ปุ่มเป็นปุ่ม ชี้ tab เป็น tab
ทำไมต้องใช้ Flash Catalyst?
ก่อนหน้าจะมี Flash Catalyst เวลาผมทำ Flash App หรือ Flash Game การที่จะสร้างปุ่มขึ้นมา 1 ปุ่มนั้น
ขั้นตอนที่ต้องคือ Import รูปปุ่มนั้นๆเข้าไปใน .fla สร้างมันเป็น Movieclip ถ้ามีการ Rollover แล้วต้อง ดีดเด้ง เปลี่ยนสี โฉบเฉี่ยวไฉไล ก็ต้องทำ animation ยืดๆีดัดๆมันบน timeline ก็ว่ากันไป เสร็จแล้วก็ ตั้งชื่อ KeyFrame ให้โปรแกรมเมอร์เข้าใจว่า เออ ไอ้นี่ถึงนี่ มันคือ ตอนธรรมดานะ ตอน Rolloverนะ เอาเม้าส์ออกแล้วให้มาหยุดตรงนี้นะ
ซึ่ง!! ต้องเสียเวลาทำความเข้าใจกับโปรแกรมเมอร์ระดับนึง เข้าใจตรงกันบ้าง ไม่ตรงกันบ้าง แต่ถ้าใช้ FC ก็ลืมเรื่องพวกนี้ไปได้เลย บอกมัน(ในที่นี้คือ FC)ไปเลย ไอ้นี่คือธรรมดา ไอ้นี่คือเอาเม้าส์ชี้ เอาเม้าส์ออก หรือ แบบนี้คือ Disable ที่กล่าวมาทั้งหมดนี้คือความสามารถพื้นฐานของ FC เฉยๆนะครับ ยังมีอีกหลายอย่างเลยที่ทำให้ เราสามารถทำงานได้เร็วมากขึ้นเยอะ
Sample กับ Flash Catalyst
1. ปุ่ม
1.1 Import File .ai เข้าไป
1.2 บอกมันว่าเป็นปุ่ม
1.3 Edit ในแต่ละ State ว่าจะเป็นหน้าตายังไง เช่นขนาดใหญ่ขึ้น
State ของ Button จะมี 4 อันคือ up(ปกติ), over(เอาเม้าส์ไปวาง), down(กดคลิก), disable
1.4 Edit Animation ในการเปลี่ยนจาก State นึง ไปอีก State นึง
2. Scrollbar
2.1 บอกมันไปว่าเป็น scrollbar เลือกแนวตั้งแนวนอนให้ถูกด้วยนะ
2.2 ส่วนสำคัญของการ ทำ Scrollbar คือ Part ต่างๆต้องครบ ขั้นตอนถัดมาเราจึงต้อง Edit Part มันก่อน
Scrollbar จะมีองค์ประกอบทั้งหมด 4 ส่วน คือ Thumb(ปุ่มตรงกลางที่ไว้ลากขึ้นลง), Track(ราง), ปุ่มขึ้น, ปุ่มลง
ซึ่ง2ส่วนแรกจำเป็นต้องมี
เท่านี้ก็เสร็จละครับ
ข้อเสียของ Flash Catalyst
เท่าที่ผมรู้สึกตอนนี้คือ มัน edit animation ระหว่าง state ได้ไม่มันส์เท่าไร ทำใน Flash จะคล่องและยืดหยุ่นกว่า
แต่ก็นะ ถ้าทำ Flash App ธรรมดา ไม่ได้มีอะไรพิสดารมาก เท่านี้ก็เพียงพอแล้ว