Flash CS5 First Look! มาดูกัน!!

posted on 16 Apr 2010 23:49 by korstudio in Flash

วันที่ 12 เม.ย. ที่ผ่านมา Adobe ได้เปิดตัวชุด Adobe Creative Suite 5 อย่างเป็นทางการที่เว็บ http://cs5launch.adobe.com ครับ
ผมละโคตรตื่นเต้นเลยพับผ่า *30* เลยพยายามหา Flash CS5 มาลอง เปิดดูจาก Adobe.com ก็แล้ว
บิทก็แล้ว.. ไม่มีแฮะ

วันรุ่งขึ้น..... มาทั้งเซ็ตเลยครับ -- Master Collection CS5 *08*

อ้ะ ใครอยากหามาลองใช้ ก็หาได้ตามแหล่งบิทชั้นนำทั่วไปได้เลยนะครับ
แต่บอกไว้ก่อนว่า มันเป็นเวอร์ชั่น Beta นะ เอามาลองเล่นกัน ไม่เสียหายครับ *12*

หลังจากรอ(โหลด)มา 2 วัน คืนนี้ผมก็ได้สัมผัสแล้วครับ..

 

Adobe Flash CS5 BETA

*07c* *07c* *07c* *07c* *07c* *07c* *07c* *07c*

 

 

ไม่ต้องรอครับ รีบจัดแจงเปิดโปรแกรมทันที!!
วินาทีต่อมา.. ผมกรี๊ดเลยครับ

Splash Screen เปรี้ยวเยี่ยวราดมากๆ *07a*

 

ใช้เวลาโหลดโปรแกรมไม่นานนัก (อาจเพราะยังเป็นเบต้า หรือว่าเครื่องเพิ่งลงวินโดว์ใหม่ไม่รู้ *30*)
ก็เข้าสู่หน้าจอแรกของโปรแกรมครับ

 

สังเกตความเปลี่ยนแปลงได้ไหมครับ? *25*

อย่างแรกคือ ตัวหน้าตาของโปรแกรม ได้ปรับให้เข้ากับ OS ที่เปิดอยู่ครับ ดูได้จากปุ่ม ย่อ/ขยาย/ปิด หน้าต่างแล้วก็มีเมนู CS Live เพิ่มขึ้นมา สำหรับใครที่มี Adobe ID ตรงเมนูนี้ก็เอาไว้สำหรับจัดการ Account และ License โปรแกรมครับ

 

อย่างที่สอง ถ้าใช้ Windows Vista/7 ตัวหน้าต่างโปรแกรมจะมีเงาโผล่มาด้วยครับ จากเดิมไม่มี -- ดูรูปบน
(ไม่รู้ว่าเวอร์ชั่นใหม่ใช้ API หรืออะไรของ Windows ด้วยแน่ๆ)

ที่เหลือเป็นการเปลี่ยนแปลงเล็กๆ น้อยๆ ครับ อย่างโลโก้โปรแกรมด้านมุมซ้ายบน, สีของหน้าต่าง, สีฟอนต์ ฯลฯ

 

อย่างที่สาม ดูที่ Welcome Screen ครับ มีการจัดวาง Layout ใหม่ โดยย้าย Create From Template มาอยู่ด้านบน Open a Recent Item

แถม Template มีบานเบอะเลยแน่ะ!! (ไม่รู้ว่า CS4 ที่ผมลงมันตัด Template ออกไปเองหรือเปล่านะ.. แต่ดูๆ แล้วมันก็มีเท่า CS3 อ้ะ)

เพิ่มแถบ Learn ด้านขวา แทน เหมาะสำหรับคนที่เริ่มไม่ถูก ไม่รู้จะทำอะไรต่อดีหลังลงโปรแกรมเสร็จแล้ว

ส่วนตัวผมว่าสะดวกดีนะ และสังเกตเห็นง่ายกว่าไล่เขาไปเปิด Help อีกแน่ะ

 

 


เกริ่นนำไปเยอะแล้ว ผมจะวิ่งตรงดิ่งเข้าโปรแกรมเลยนะครับ *56*

1. New Text Engine

แฟลชมีการเปลี่ยนระบบแสดงผล Text ใหม่ให้ใช้ง่ายขึ้นกว่าเดิมอันนี้คงเห็นฝรั่งโชว์ไปเยอะแล้ว
แต่ผมไม่ยอม.. ต้องลองเองถึงจะสนุก *30*

จัดแจงเลือกเครื่องมือ Text Tool แล้ววาดกรอบขึ้นมาทันที
วาดเสร็จหันขวับไปที่ Properties Panel .... เฮ้ย นี่มันอะไรกันฟะเนี่ย *07*

 

เครื่องมือเพียบจนต้องหั่นรูปเลยทีเดียว!!! แม่จ้าว *05*
แม้เครื่องมือจะเยอะ(มาก) แต่ถ้าลองจิ้มๆ ดีจะรู้ว่า เฮ้ย! โคตรดีเลย!

ผมขอเสนอฟีเจอร์ใหม่ดังนี้ครับ

-  ต่อไปนี้ Text ทุกตัวคือ Dynamic Text!

ใช่แล้วครับ จาด TLF Engine ทำให้ Text ทุกตัวที่เราวาดๆ อยู่ ตั้ง Instance Name ได้ทันที ว้าว!
ทำให้ไม่ลำบากมานั่งเปลี่ยนว่า เอ.. text ตัวนี้ให้เป็น Dynamic Text นะ เป็น Static Text นะ วุ่นวายมากเรื่อง

รวมกันซะเลย ง่ายดี! ต่อจากนั้น ถ้าจะให้เราพิมพ์ลงใน Text ตัวนี้ได้ด้วย (หรือทำเป็น Input Text) ก็เปลี่ยนจาก Read Only เป็น Editable แค่นี้เอง
ง่ายขึ้น สะดวกขึ้น แล้วก็ (ความเห็นส่วนตัว) เข้าใจง่ายขึ้นด้วยครับ จะได้ไม่งงว่า ไอ้ Dynamic Text นี่เป็นยังไง.. ต่างกันยังไง..

 

- ตั้งค่า Color Effect และ Display ได้แล้ว

จุดนี้ผมว่า เป็นสวรรค์ของผมและใครหลายๆ คนเลยครับ *30*

จากเดิมผมจะปรับ Alpha ให้ text ผมต้องจับมันยัดลง MovieClip ก่อนแล้วค่อยปรับ Color Effect > Alpha
โคตรลำบากเลยครับ *05*

ตอนนี้ปัญหานั้นหมดไปแล้ว เย้ วิฮิ้วววววว!! \*07*/

 

- ปรับแต่งการแสดงผล Text, กรอบ, และพื้นหลัง

อันนี้เป็นฟีเจอร์หลักที่ Adobe นำเสนอครับ คือเราสามารถปรับให้ Text มันมีหลายสดมภ์ (Column) ได้
(ขออนุญาตใช้คำว่า "สดมภ์" นะครับ เพื่อความคุ้นเคยกับผู้ที่ใช้ Microsoft Word ภาษาไทย)

ไอ้นี้ปรับง่ายที่สุดเลยครับ แค่จิ้มแล้วพิมพ์ตัวเลข..... ได้แล้ว 2 สดมภ์ อาห์
*05* ไม่ต้องนั่ง Cut แล้ว Paste ในกรอบใหม่อีกแล้ว

ปรับจัดข้อความในแนวตั้ง (Vertical Align)  ว่าให้ชิดขอบบน/ตรงกลาง/ขอบล่าง ของกรอบ Text

และสามารถปรับระยะขอบจากกรอบ (Padding) ได้ตามสะดวก

ทั้งหมดนี้อยู่ในกลุ่ม Container and Flow ครับ (ดูรูป)

 

- Advanced Character

ที่กลุ่มเครื่องมือนี้ เอาไว้ปรับพวกตัวอักษร และบรรทัดอักษรครับ คล้ายๆ InDesign เลย
(ผมใช้ไม่เป็นล่ะ *3005*)

 

- จัดการวัตถุเป็น 3D ด้วย 3D Rotation/Translate Tool  ได้แล้ว

เดิม Text พวกนี้ไม่สามารถปรับหมุนแบบ 3D ได้ครับ ต้องเอาไปยัดใน MovieClip ก่อน (อีกแล้ว)
เฮ้อ ลำบากมาก *05*

ตอนนี้สบายขึ้นเยอะครับ *12*

 

- ข้อความเกินกรอบ? ก็ย้ายไปขึ้นกรอบใหม่ซี่!!

ปกติเราจะใช้วิธีแบบชาวบ้านๆ กันครับ ด้วยการแปะตัวหนังสือลงในกรอบ
ทีนี้ถ้าข้อความมันยาวเกินพื้นที่ที่เราจัดไว้ให้เนี่ย.. เราต้องทำการ Cut บรรทัดที่เกินๆ ทั้งหมดแล้ว Paste ในกรอบใหม่

ตอนนี้ ง่ายขึ้นเยอะเลยครับ วิธีการใช้งานจะคล้ายๆ Text ของ InDesign เลย

 

- สุดท้าย... ฟีเจอร์ที่ผมเซอร์ไพรส์มาก (เพราะไม่มีใครบอกมาก่อน) คือนี่ครับ

 

 

 

 

มันขีดเส้นใต้ได้แล้วโว้ยยยยย!!!!
\*07*/ \*07*/ \*07*/ \*07*/

 

 

 

 

*05* นะ... นี่มันนวัตกรรมของโลกเลยนะเนี่ย!!

 

2. หน้าต่าง Color ปรับใหม่

 

จะเห็นว่า ตอนนี้มันหน้าตาคล้ายๆ ของ Photoshop เลยครับ

ถ้าเราใช้ระบบสี RGB ไม่คล่อง ก็ลองเปลี่ยนเป็น HSB ดูครับ จะคล้ายๆ ของเก่าที่เคยใช้มา

 

3. Code Assists

มาถึงฝั่ง Developer อย่างผมบ้าง (แฮ่)

เห็น Adobe โชว์ว่า ตอนนี้เวลาเขียนโค้ด ถ้ามีการ import คลาสจากข้างนอกเข้ามา
(คือใช้โค้ดจากของคนอื่น ที่ไม่ใช่ flash.xxxx หรือ fl.xxx ที่ Adobe ทำมาก่อน)

มันจะสามารถโชว์ฟังก์ชั่น และตัวแปรที่เขียนในคลาสนั้นได้ เวลาพิมพ์ . (จุด) หรือกด Ctrl+Space

นึกไม่ออกล่ะสิ อิอิ ผมมีตัวอย่างครับ

**ไฟล์ fla เซฟไว้ที่เดียวกับโฟลเดอร์ com ซึ่งด้านในโฟลเดอร์ com จะมีโฟลเดอร์ korstudio และ greensock

ตัวอย่างนี้ ผมพยายามจะ import คลาสที่ชื่อ TweenLite เข้ามาใช้งานครับ ซึ่งคลาสนี้จะอยู่ในแพคเกจ
com.greensock ดังนั้น ถ้าผมพิมพ์ com. มันต้องโชว์ขึ้นมาว่าในแพคเกจ com มาคลาส/แพคเกจอะไรด้านในบ้าง

 

เหมือนยก FlashDevelop มายัดเลยนะเนี่ย

ต่อไปนี้ผมจะได้เป็นสุขเวลาเขียนโค้ดบน Timeline ซะที๊ *05*

 

อ้อ แต่ยังมีข้อเสียอยู่ครับ ตรงบรรทัด 3 ผมต้องกด Ctrl+Space ครับ มันถึงจะมีตัวช่วยโผล่ออกมาครับ
มันไม่เหมือน IDE ตัวอื่นที่พิมพ์ 2-3 ตัวอักษรก็มีตัวช่วยโผล่มาแล้ว

เห็นผลลัพธ์แล้ว ฝั่งโปรแกรมเมอร์คงจะร้อง "โอ้ พระเจ้าช่วยกล้วยทอด! นี่มันเยี่ยมจริงๆ ซาร่าห์" 
แต่.. คนอื่นคงจะงงว่า "ไอ้นี่มันพูดถึงอะไร(วะ)" แน่ๆ

ใช่มะๆ 

 

นอกจากนี้ในส่วนของ Preference ของการเขียนโค้ด (หมวด ActionScript) ก็ได้เพิ่ม Option มาสองตัวคือ

- Automatic close brace -- ปิดวงเล็บปีกกา } อัตโนมัติ (พิมพ์ { แล้วกด Enter 1 ครั้ง)

- Class Editor -- เลือกว่าจะให้ใช้ Editor ตัวใดในการแก้ไขคลาสเวลา Debug โดยให้เลือกระหว่าง Flash กับ Flash Builder หรือให้ถามทุกครั้ง

 

4. Code Snippets

เย้! ในที่สุดก็มีจนได้!! คนขี้เกียจอย่างผมนี่.. ดีใจมวากก (แต่ไม่เท่า Text tool มีปุ่มขีดเส้นใต้)

Code Snippets เอาไว้สำหรับเวลาจะเขียนโค้ดชุดหนึ่งบ่อยๆ แต่เราขี้เกียจพิมพ์ยาวๆ
เราก็มาเลือก snippet ที่บันทึกไว้ แล้วกด Add to current frame หรือ Copy เอา

ง่าย สะดวก รวดเร็วจริงๆ!!

 

สิบปากว่าไม่เท่าตาเห็น ผมเลยจัดการลองซะเลย

 

ผมลองด้วย countdown timer ครับ คือปกติจะใช้พวก Timer เนี่ย มันจะมีเซ็ตของมันคือ
- ประกาศ Timer
- สั่ง addEventListener
- เขียนคำสั่งที่จะทำใน listener
- สั่งให้ Timer ทำงาน

ผมขี้เกียจเขียนง่ะ อะ มาเลือกใน Code Snippets แทนละกัน

ดูซิๆ Countdown Timer อยู่ไหน...

 

ดับเบิ้ลคลิกเลย.. แล้วก็พบว่า....

 

โห.. มาเป็นชุดเลยวึ้ย! ประหยัดเวลามากๆ (แต่ชื่อฟังก์ชั่นกับตัวแปรมันดูยาวไปแฮะ)

 

5. Help (Adobe Community Help)

*07c* ว้าก กรี๊ดดด ในที่สุดมันก็กลับมา!!! Help ที่อยู่ในโปรแกรมครับ อ๊ากก

 

จะว่าไป มันก็ไม่ได้อยู่ในโปรแกรม Flash ซะทีเดียว มันเป็นโปรแกรมแยกออกมาต่างหากครับ

แต่มันเจ๋งตรงที่ มันสามารถโหลด Help มาเก็บในเครื่องได้ด้วย!!!! ตรงนี้ๆๆๆๆๆ

 

แถมมี Help ของโปรแกรมอื่นนอกจาก Flash ด้วยนะ ครั้งแรกจะทรมานหน่อยครับ
เพราะมันต้องดาวน์โหลดทุกไฟล์ (นานมาก)

หลังจากนั้นก็สบายแล้วครับ สามารถเปิดในแบบ Offline ได้ทันทีเลย เย้! \*07*/

 

เห็นผมดีใจขนาดนี้.. ถามว่าผมดีใจที่สุดไหม.. ไม่ครับ
ไม่เท่ากับที่ Text tool มันขีดเส้นใต้ได้หรอก...

 

ยังมีอีกหลายฟีเจอร์ครับที่ยังเหลือให้ลองเล่นกัน! (แต่ขี้เกียจแปะแล้ว *30*)

ไปหามาลองเล่นเลยครับ แล้วจะรู้ว่า มันเจ๋งมั่กๆ *12*

 

ป.ล. ไม่ได้เป็นหน้าม้านะ เป็นความปลื้มปีติส่วนตัวล้วนๆ *30*

ป.อ. ถ้าต้องการให้ผมถอดบทความนี้ เนื่องด้วยเรื่องลิขสิทธิ์ตัวโปรแกรม หรือ ยังไม่ต้องการให้มีการเผยแพร่บทความ แจ้งได้เลยนะครับ

Comment

Comment:

Tweet

hepljvc

#26 By bjgblpdt (91.232.96.4) on 2012-02-17 10:45

uzalyvei

#25 By fgmkkiq (94.100.25.50) on 2012-02-16 22:34

big smile big smile สุดยอดๆๆ

#24 By อิอิ (202.28.50.108) on 2011-12-02 21:31

พี่คะขอปรึกษาเรื่อง Flash หน่อยได้ไหมคะ

fanran_04@hotmail.comconfused smile

#23 By Faii (182.53.152.102) on 2011-08-21 17:21

สุดยอดมากเลยค่ะ แต่อยากจะถามว่า color effect มันเปิดตรงไหน หาไม่เจอสักที

#22 By O x o... on 2011-03-08 12:37

ติดต่อกลับไปแล้วนะครับ ^^

#21 By korstudioXD on 2011-02-24 03:24

นี่เมล์ผมครับ i_dear_@hotmail.com รบกวนด้วยนะครับ

#20 By idear (180.183.8.88) on 2011-02-23 11:22

จะติดต่อพี่ก่อ ได้ยังไงคับ มีอีเมลล์มั้ย จะสอบถามเรื่อง Flash หน่อยครับ

#19 By idear (180.183.8.88) on 2011-02-23 11:19

ชะแว๊บๆๆมาทักเจ้าของบล็อกอยู่ป่าวเอ่ยยย

#18 By KHUNGIN on 2011-01-19 21:11

เยี่ยมมากน้อง

กด Like ตรงไหนวะ !! ๕๕๕๕๕

#17 By ClOuD (180.180.142.198) on 2010-11-25 11:06

โอ๊ะ โอ .....เพื่อนก่อ

#16 By engineerpraew on 2010-11-25 10:21

Excellent post ! I enjoyed reading your blog today.It was very interesting & informative

#15 By Creative Logos Gallery (110.37.48.173) on 2010-10-13 22:20

พี่ก่อ..ไปแอดเฟบเค้ามั่งฮี่

#14 By kazenokun on 2010-09-30 19:51

กว่าจะอัพนะพี่ =.=

#13 By kabuto.boy (222.123.80.69) on 2010-06-17 17:36

ขอบคุณครับบบ
เอาไปแปะใน TFD เลยจิครับconfused smile

#12 By Tlecoco : 3612 on 2010-05-25 15:05

เห็นในวีดีโองานพรีเซ้นต์

พอมาเห็นรีวิว เครื่องมือเยอะมาก ค่อนไปทาง Adobe มาก ๆค่ะ

ดีมั๊ยนี่ sad smile

#11 By arunsawas on 2010-05-06 19:03

เยี่ยมยอดดดดดดดดดดดดดด


แต่ว่าคงจะใช้งานยากน่าดู


ต้องใช้ความเคยชินกะมันละbig smile

#10 By kopskyz on 2010-04-23 18:48

เดี๋ยวคงได้ลอง 555

โอ้วว....

ขีดเส้นใต้ สุดยอด !!! big smile big smile

#9 By Togetherway.Com (112.142.166.152) on 2010-04-20 15:21

@xxvorachaixx Bone มี Spring เพิ่มครับ แต่ผมยังใช้ไม่เป็นล่ะ.. *05*

ส่วน Photoshop เดี๋ยวไว้ลองแล้วจะมารีวิวนะครับ *42*

#8 By korstudioXD on 2010-04-19 11:42

อร๊ายย

เดี๋ยวหามาลองมั่งครับ

#7 By DeKiiZ on 2010-04-18 18:31

โห
ฟิวเจอร์ใหม่ของ Flash CS5
น่าลองมากกเลยยย

โดยเฉพาะ สีนี้เยอะแยะเหมือน Photo Shop ขึ้นอีก
โอ้ว

แต่ทางนี้ยังใช้ CS3 อยู่เลยย
ยังไม่ได้ลอง CS4 สักที
T^T

แล้วพวกระบบกระดูกมีอะไรเพิ่มเติมหรือเปล่าหว่า

#6 By xxvorachaixx on 2010-04-18 18:15

มีประโยชน์มากครับ
อยากให้ลงรีวิว ps ด้วยเหมือนกันครับ อยากเห็น

ช่วงนี้ติด hot พวก costplay เยอะมาก Hot!

#5 By bellbell on 2010-04-17 19:44

รอตัวสมบูรณ์
จริงๆ คือจะโหลดใช้แค่ PS

Master ขนาดใหญ่ขริงเกิน sad smile

#4 By @NATT2222 on 2010-04-17 19:30

โหย ประโยคบนๆนี่เห็นเหมือนกันเลย

แต่ตั้งแต่ CS3 -> CS4 มันก็เปลี่ยนแปลงไปพอสมควร
อ้างอิงไปมาหากันไม่ได้เลย

เอาเป็นว่า จะลองทำใจ ตั้งต้นกับ CS5 แล้วกันครับ

ขอบคุณสำหรับสุดยอดเมกกะซูพรีมรีวิวนี้ครับ (:

#3 By Framekung.com (180.180.26.177) on 2010-04-17 19:27

พี่ก่อ ที่ผมเห็น
ที่เวบนอก เขาสอน
tut อ่ะ

มะ มะ มัน
สวยกว่านี้!!!
ปืนฉีดน้ำ ปืนฉีดน้ำ ปืนฉีดน้ำ

#2 By dodadoa (110.164.251.96) on 2010-04-17 19:21

ปืนฉีดน้ำ ปืนฉีดน้ำ ปืนฉีดน้ำ ได้มาใช้แล้วเรอะเนี่ย โอ้ว

#1 By phil_wc - Music - on 2010-04-17 19:18