ฟอนต์ฟอรั่ม

โปรแกรมใหม่สดๆ จาก Adobe

Adobe Flash Catalyst

ในตอนนี้ยังเป็น beta อยู่ครับ สามารถโหลดมาใช้ได้ฟรี และมี Serial แจกให้ในเว็บของ Adobe เลย

(http://img3.f0nt.com/03/c0582505f05d1735abd78117b3cb4a8d.jpg)

:27: สนใจมั้ยครับ.. รอตอนเย็นนะฮะ
จะเจาะลึกถึงขั้วเลยทีเดียวแหละ

แล้วจะมีบทความต่อเนื่องเป็นอีก 1 โปรแกรมครับ คือ Adobe Flash Builder 4
(หรือในชื่อเดิมคือ Flex Builder 4)

สองโปรแกรมนี้มีส่วนเหมือน และส่วนต่างอยู่.. ยังไงรอตอนเย็นนะครับ
ตอนนี้ไปเรียนก่อน แหะๆ

มันคืออะไรอีกแล้วเนี่ย :07:
ตูเหนื่อยนะ :07:

แปะ รอชม  :40:

มันเอาไว้ทำอะไร  :09:

อ้างคำพูดจาก: http://www.thaiflashdev.com/home/index.php?topic=5207.0Adobe Flash Catalyst โปรแกรมน้องใหม่ล่าสุดของอะโดบี น่าเล่นมากๆ

    * เน้นใช้งานง่าย เหมือนโปรแกรม PowerPoint แบ่งหน้าเป็น Page
    * สนับสนุนไฟล์กราฟิก Photoshop, Illustrator, Fireworks
    * เป็นโปรแกรมสร้าง Flash ที่ไม่ต้องเขียนโค้ดเอง
    * มีสคริปต์, Transition Effect, Motion สำเร็จรูปให้แล้ว

แบบนี้แหละที่ต้องการ  :07:

โปรแกรม flash ตัวหลังๆ มันชักจะลึกลับซับซ้อนซ่อนเงื่อนเพื่อนทรยศ

แอร๋ยยย แปะรอ  :05:

รอโหลด

 :50: พี่เจนแปะตัดหน้า

จุดเด่นของโปรแกรมก็อย่างที่พี่เจนแปะเลยครับ
แต่ถ้าจะพูดให้ลึกกว่า มันก็คือ
Flex Builder ที่เพิ่มลูกเล่นการปรับแต่งหน้าตา, ไทม์ไลน์สำหรับปรับ Transition ตอนเปลี่ยน Page, และการวาดรูปทรงพื้นฐานเข้าไปนั่นเองครับ

หน้าจอตอนเปิดโปรแกรม
(http://img3.f0nt.com/03/e648aef522316ce4ef31d04d1bdd6a52.jpg)

หน้าจอการทำงาน
(http://img3.f0nt.com/03/1e85743afda9b20085f77a232e8543fb.jpg)

จะเห็นว่ามันเป็นมิตรกับผู้ใช้งานที่เป็นสายกราฟิกมากขึ้น
และเหมาะสำหรับสายกราฟิกที่ ไม่อยากไปวุ่นวายกับเฟรม และไทม์ไลน์ตัวเดิม

โดยรวมผมว่าเหมาะกับงาน Presentation และงานประเภทที่เน้นโต้ตอบกับผู้ใช้เยอะๆ เช่นเว็บที่มีการกรอกข้อมูล, เว็บแสดงภาพ ฯลฯ
แต่ไม่เหมาะสำหรับทำสื่อการสอน เพราะเครื่องมือที่ใช้วาดมีจำกัด
แต่(อะเกน) ผมว่าถ้าอยากจะเอามาทำจริงๆ ก็ทำได้ครับ
เพราะมันก็สามารถโอนไฟล์ไปๆ มาๆ ระหว่าง FC, PS, AI, FW ได้อยู่ดี

โปรแกรมนี้ ถ้าใครติดตามมาแต่ต้น เค้าจะใช้รหัสชื่อว่า Thermo ครับ
ออกมาตอนแรกเป็นที่ฮือฮามาก ต่อมาก็เปลี่ยนเป็น Flash Catalyst ..
ก็ยังฮือฮาอยู่ดี เอ๊ะ ยังไง :30:


อย่างที่ผมบอกก่อนหน้านี้ว่า มันคือ Flex Builder ที่แปลงโฉมตัวเอง
แล้วเอ๊ะ มัน Flex Builder ยังไง?

นี่เลยครับ ลองกด Window > Code Workspace หรือปุ่มด้านบนขวามือครับ (หรือจะกดปุ่ม Ctrl+` ก็ได้ครับ)
(http://img3.f0nt.com/03/44f220b4868026f9b06669bb172869af.jpg)

กดแล้วจะเห็นว่า หน้าต่างที่เราเห็น มันเกิดจาก Flex ครับ (โค้ดรุปแบบนี้จะเรียกว่า MXML ครับ)
(http://img3.f0nt.com/03/0e6aee8553099bdb5efda3ce1eb7714a.jpg)

โอวว เห็นแล้วอ้วกแทบพุ่งเลยทีเดียว :28:
แต่ตรงนี้เราทิ้งไว้เลยครับ เพราะมันจะทำส่วนนี้ให้เอง :12:


เพราะฉะนั้นแก่นแท้ของ Flash Catalyst มันก็คือ Flex นี่เองครับ แต่เพิ่มลูกเล่นให้เราจัดการ Page ได้ง่ายขึ้น
ทำนู่นนี่ได้สะดวกขึ้น
วางโครงสร้างคร่าวๆ คงเป็นแบบนี้ครับ

Flash Catalyst ครอบ Flex แล้ว Flex ครอบ AS3 อีกทีหนึ่ง
(Flex = Flash Framework ตัวหนึ่งครับ)

(http://img3.f0nt.com/03/11505c511fd058934eca7b4854d1f7fb.jpg)

และจากตรงนี้ จะทำให้เราเข้าใจกันง่ายขึ้นว่า Flash Platform นั้นเป็นยังไง
Flash Platform = กระบวนการ กรรมวิธีผลิตต่างกัน แต่ผลผลิตออกมาได้ Flash (swf) นั่นเองครับ

ตอนนี้ผมใช้แล้วรู้สึก การจับวัตถุไปวางมันยังไม่สะดวกเท่าการจัดวางใน Flash และ Flex Builder เท่าไหร่
แต่ก็ยังพอมีความหวังไว้บ้างว่า ตัวเต็มจะแก้ไขให้ดีขึ้น

เดี๋ยวต่อไปจะมาดูว่า มันตกแต่ง Component ได้ง่ายขนาดไหน
รอก่อนนะครับ ไปซื้อขนมก่อน (แอบหิวแหละ) :47:

 :25:

+ :25:

 :25: -

:25: ×

 :25: ÷

:30: อะไรเนี่ย ยังไม่ได้มาต่อซะที แงๆ

รอก่อนนะครับ :05:

ไม่ค่อยรู้เรื่องเลย  :01:

ผมว่าตัวโปรแกรมตอนนี้มันดูหน่วงๆ นะ
ลองเล่นนู่นเล่นนี่ดู สนุกดี เจ๋งตรงที่ import file pdf ai ได้นี่แหละ

แปะก่อน :25:+

ความจริง import AI ได้ไม่แปลกนะ แต่ PDF นี่สิ เจ๋งเลย :25:

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

Flex Framework ล่ะ? มันก็คือสิ่งที่ไป(เหมือนกับ)ครอบ Flex ไว้ ทำให้เราใช้งาน Flex ได้ง่ายขึ้น

แล้ว Flash Catalyst ก็จะนำเอา Flex Framework น่ะมาเป็นแกนหลัก แล้วพัฒนาส่วนอื่นต่อให้เราออกแบบหน้าจอได้ง่ายขึ้น สะดวกขึ้น
ดูจากแผนภูมิก็ตามนั้นเลยครับ ครอบทับกันไปมา

(http://img3.f0nt.com/03/11505c511fd058934eca7b4854d1f7fb.jpg)

ส่วน AVM2 ล่ะ? AVM2 สร้างขึ้นมา เพื่อให้รันงานที่สร้างด้วย AS3.0 ได้ครับ มันคือแกนหลักของตัว Flash นั่นเอง
ไม่ว่าจะสร้างด้วย Flex, AIR หรือแม้กระทั่งจาก Flash เอง ทุกครั้งที่เราคอมไพล์ มันจะทำการแปลงโค้ดเป็นในรูป ActionScript 3.0
จากนั้นก็ทำงานบน AVM2 ตัวนี้

คล้ายๆ กับเวลาไปว่ายน้ำ ก่อนลงสระ ทุกคนก็ต้องเปลี่ยนชุดเป็นชุดว่ายน้ำ ล้างตัว แล้วก็ลงสระเดียวกัน
คนที่อยู่ในสระเดียวกัน ก็สามารถติดต่อกันได้สะดวก
(สมมติมี 1 สระใหญ่ๆ นะครับ และทุกคนพูดภาษาเดียวกัน)

แล้วนี่ก็เป็นสาเหตุที่เราไม่สามารถทำงาน AS2 ร่วมกับ AS3 ได้ เพราะมันอยู่คนละ AVM กัน

จินตนาการว่า สระว่ายน้ำมี 2 สระ คนที่มาว่ายน้ำมี 2 กลุ่มใหญ่ๆ และพูดคนละภาษา
คนกลุ่มแรกลงสระหนึ่ง และกลุ่ม 2 ก็ลงอีกสระหนึ่ง
ทั้งสองกลุ่มนี้ ก็จะติดต่อกันได้ภายในสระเดียวกัน คุยกับอีกสระหนึ่งไม่ได้
(สมมติว่าแต่ละสระมันมีกำแพงใสหนาๆ กั้นอยู่ มองเห็น แต่คุยกันไม่ได้)

:25: พอมองโครงสร้างหลักๆ คร่าวๆ แล้วนะครับว่า Flash Catalyst มันทำงานร่วมกับคนอื่นได้ยังไง

เดี๋ยวผมขอเบิ้ลโพสต์ แล้วแปะตอนตกแต่ง Component ต่อนะครับ

ความรู้เน้นๆ :25:

อ้างคำพูดจาก: นายโอ้เอ้ เมื่อ 04 มิ.ย. 2009, 03:21 น.
:25: % (modulo)

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



ทดสอบโปรแกรม ตอน 1: ใช้งานคอมโพเนนท์
รูปเยอะหน่อยนะครับ

อย่างที่ผมว่าไว้แต่แรกเลยว่า Flash Catalyst มันสร้างขึ้นจาก Flex
ดังนั้นมันก็ต้องมี Component (หรือคอมโพเนนท์) มาให้ใช้งานกันแน่ๆ
แต่ว่า.. คอมโพเนนท์ที่มีให้เลือก มีน้อยกว่าใน Flex Builder นะครับ

เรามาเริ่มกันที่ Button หรือปุ่มดีว่า..

เอาละ ผมเริ่มโดยการลาก Button ออกมาจากหน้าต่าง Component ขยายนิดนึงให้เห็นชัดๆ
หน้าต่าง HUD (สีดำ) ก็จะแสดงให้เราเห็นว่า เราสามารถ
- ปรับแต่งหน้าตา (Edit Button Appearance)
- ปรับรูปแบบการโต้ตอบในงาน (Application Interactions) <= มันคือการใส่ Event หรือเหตุการณ์ของ Application (เช่น รอ App โหลดเสร็จก่อน)
- ปรับแบบการโต้ตอบแบบตามใจชอบ (Custom Interactions) <= ปรับแต่งเหตุการณ์ที่ใส่เข้าไปว่าให้ทำอะไร (เช่น ตอนคลิก ตอน rollOver)

(http://img3.f0nt.com/04/b7b25df63778593a6cd234c66f4658ea.jpg)

เริ่มที่ ปรับแต่งหน้าตาดีกว่าครับ
จะเห็นว่า เราสามารถปรับแต่งได้ 4 สถานะ คือ
- Up  =>  สถานะตอนอยู่เฉยๆ
- Over  =>  สถานะตอนเอาเมาส์ไปชี้ (วางบนปุ่ม)
- Down  =>  สถานะเมื่อเอาเมาส์ไปคลิก (กดปุ่มเมาส์ลง แต่ยังไม่ปล่อย)
- Disabled  =>  สถานะเมื่อมีการสั่งให้ปุ่มใช้งานไม่ได้

ลองกดที่สถานะไหนก็ได้ครับ แล้วมันก็จะเข้ามาข้างในปุ่มเลย
จะเห็นด้านบนว่า มันจะคล้ายๆ กับ Flash เลยครับ คือมีเป็น Page ให้เลือกกดว่าเราจะแก้ที่สถานะใด

ผมลองที่ Up ดู

(http://img3.f0nt.com/04/299dc2dff99f59f86c35d10096e9ed6d.jpg)

ด้านในจะมีกล่องสีเหลี่ยม กับ TextField อันนึงครับ อะผมลองแก้แบบดู
ปรับสารพัดได้ตรงหน้าต่าง Properties ครับ (รูปด้านล่างคือ Properties ของกล่องสี่เหลี่ยมครับ)

(http://img3.f0nt.com/04/2677c93f1d28ac18993cd3179e04666d.jpg)

จากนั้นก็ลองแก้ไปหลายๆ Page (ซึ่งต้องมีการก๊อป แปะ ไปหลายๆ ครั้ง :08:)
เสร็จแล้วกับสู่ Stage โดยการคลิกตรงชื่อ Project ครับ (ผมตั้งว่า test)

(http://img3.f0nt.com/04/f3564f2e204aa38eb65fc041988e0829.jpg)

เมื่อเรากลับเข้า Stage แล้วจะพบว่า..
เราขยายขนาดปุ่มไม่ได้แล้ว :08:
อะไรกันเนี่ย!! :0705: แปลว่าถ้าจะขยายขนาด ต้องกลับเข้าไปขยายข้างในทีละ Page ใช่มั้ย
โอ้แม่จ้าว  :3005:

(http://img3.f0nt.com/04/cbdd5fb25be25aedc7f31875c299adb6.jpg)

อ้อ เราสามารถเปลี่ยน Label ของปุ่มได้ที่หน้าต่าง Properties เช่นกันครับ
(แต่ผมขอละไว้ เพราะความขี้เกียจส่วนตัว)

ทดสอบปุ่ม โดยการกด Ctrl + Enter ครับ
หน้าต่างแสดง Progress การ Compile ก็จะเด้งขึ้นมา
(ซึ่งหน้าตามันเหมือนของ Flex Builder เป๊ะๆ)

(http://img3.f0nt.com/04/38566f50857c89e0f09aecbe4aa4f982.jpg)


หลังจากคอมไพล์เสร็จแล้ว มันจะเปิดเบราเซอร์ขึ้นมา พร้อมกับหน้า Main.html ครับ
เราจะเห็นปุ่มที่วางแปะไว้บน Stage แล้ว ให้ลองลูบๆ คลำๆ กดๆ อิคึๆ อิไต๊ย์ๆ ดู :04b:

(http://img3.f0nt.com/04/6ba69e25783c320a5e033d190b207769.jpg)

:52: อ้าห์ หมดแล้ว ง่ายจริงๆ



ข้อควรระวัง
การปรับแต่งปุ่ม ถ้าเผลอลบ TextField ทิ้งแล้วแปะอันใหม่ลงไป จะทำให้เวลารันแล้ว
Label ปุ่มไม่ขึ้นครับ มันจะเป็น (Label) หรือคำอื่นๆ

ให้ทำการคลิกที่ TextField แล้วไปที่ HUD เลือก Convert Artwork to Button Part
แล้วคลิกที่ Label ครับ

(http://img3.f0nt.com/04/b3d1087bb5e24efcbea8522da357d2d0.jpg)


แล้วเดี๋ยวคราวหน้ามาต่ออีกครับ แหะๆ

เมพขิงๆ  :07c: +

ไม่เป็นไรเดี๋ยวจ้างก่อทำ  :47:

:25: :25: +++

 :25: :25: xxxx







ไม่ได้ใช้แน่ๆเลย   :56: แต่ +

ผมว่าน้าแอ๊ดต้องเหมาะกับ Flash Builder 4 แน่ๆ เลย :30:

มีงานตัวอย่างสักตัวมั้ยครับ

อ้างคำพูดจาก: ก่อสตูดิโอเอ็กซ์ทู เมื่อ 04 มิ.ย. 2009, 16:58 น.
ผมว่าน้าแอ๊ดต้องเหมาะกับ Flash Builder 4 แน่ๆ เลย :30:

:31: จริงรึ ในแง่ใดบ้าง ?

แบบโค้ดท่วมหัวไรงี้อะครับ

อ้างคำพูดจาก: i'sharp เมื่อ 04 มิ.ย. 2009, 18:30 น.
มีงานตัวอย่างสักตัวมั้ยครับ

เอ็งก็ลองโหลดละไปเล่นดูดิ ไม่ต้องเขียนโค้ดซักแอะ

งัฟน์ว์ฮ์ต์

สรุปว่ามันคือโปรแกรมแฟลชที่ไม่ต้องเขียนโค้ดใช่ไหมครับ :25:
แล้วความสามารถในด้านทั่วๆ ไปของแฟลช เช่นสร้างการ์ตูนอะไรงี้ยังมีอยู่ไหม

 :25: ความรู้วววส์

คือประทีปปปส์ :25:

ลองเล่นแล้ว tool พวกวาดอะไรงี้มีกระจุ๋มจิ๋มมากเอามาทำการ์ตูนคงไม่เวิคอะครับ
น่าจะเหมาะเอามาทำพวกงานพรีเซ็นสเตชั่นอะไรแบบนี้มากกว่าครับ  :25:

โอเค เบลส่งให้มั่งดิ เข้าไปโหลดใน adobe ไม่ได้  :05:

300 เม็ก  :39:
สมัคร adobe id ก็ได้แล้ว  :37:

มันบอกเมลล์ไม่ผ่าน  :37: สมัครจนขี้เกียจละ  :37:

มันบอกว่าสมัครเสร็จแล้ว แต่ให้ไปกดลิงค์ Activate จากอีเมลรึเปล่า :37:

เห็นเอ็งบอกว่ามันขึ้น Error ว่าอะไร completeๆ เนี่ย

---

อ้างคำพูดจาก: ☼ อภิมหาแอน ☼ เมื่อ 04 มิ.ย. 2009, 22:29 น.
สรุปว่ามันคือโปรแกรมแฟลชที่ไม่ต้องเขียนโค้ดใช่ไหมครับ :25:
แล้วความสามารถในด้านทั่วๆ ไปของแฟลช เช่นสร้างการ์ตูนอะไรงี้ยังมีอยู่ไหม

อ้างคำพูดจาก: ก่อสตูดิโอเอ็กซ์ทู เมื่อ 03 มิ.ย. 2009, 17:32 น.
โดยรวมผมว่าเหมาะกับงาน Presentation และงานประเภทที่เน้นโต้ตอบกับผู้ใช้เยอะๆ เช่นเว็บที่มีการกรอกข้อมูล, เว็บแสดงภาพ ฯลฯ
แต่ไม่เหมาะสำหรับทำสื่อการสอน เพราะเครื่องมือที่ใช้วาดมีจำกัด
แต่(อะเกน) ผมว่าถ้าอยากจะเอามาทำจริงๆ ก็ทำได้ครับ
เพราะมันก็สามารถโอนไฟล์ไปๆ มาๆ ระหว่าง FC, PS, AI, FW ได้อยู่ดี

:05: แง

Error ว่า Complete  :30:

นั่นแหละๆ พอมันเห็นอะไรเด้งๆ มามันก็กดปิดแบบไม่อ่านเลย :37:

สะเทือนใจ  :05: error ว่า complete

 :55:
:30a: