Microsoft Expression Blend คืออะไร
Microsoft Expression Blend คือเครื่องมือที่ใช้ในการออกแบบ (Design Tool) Graphic รวมถึง Multimedia ต่างๆเช่นภาพเคลื่อนไหว ทางด้านของ Window Presentation Foundation (WPF) และ Web (Microsoft Silverlight) ซึ่งเวอร์ชั่นล่าสุดตอนนี้จะเป็นเวอร์ชั่น Microsoft Expression Blend 3 SketchFlow
มีอะไรใหม่ใน Microsoft Expression Blend 3 SketchFlow
· Prototyping
จะมี SketchFlow ที่ช่วยให้ออกแบบต้นแบบ(prototype) ของ application โดยสามารถที่ออกแบบโครงร่างหน้าตาของ application เพื่อให้เห็นรายละเอียดก่อนที่จะนำมาใช้งานจริงได้และนอกจากนี้ยังสามารถให้ผู้อื่นสามารถ Feedback ได้
· Design
สามารถที่จะนำไฟล์จากโปรแกรม Adobe PhotoShop (.psd) และ Adobe Illustrator (.ai) เข้ามาใช้ในโปรเจค และนอกจากนี้ยังสามารถใส่ Effects โดย Panel ที่ชื่อ Assets ซึ่งสามารถที่จะลาก Effects ที่ต้องการเช่น BlurEffect มาวางไว้ที่ Object ที่ต้องการ
· Styling controls
สามารถที่จะสร้าง user control อันใหม่จาก Object ทีได้เลือกไว้ที่มีอยู่แล้วเพื่อทำเป็น Template ไว้ได้ผ่านทาง Panel ที่ชื่อ Object and Timeline โดยใช้คำสั่ง Make Into Control สำหรับ WPF หรือถ้าเป็น Silverlight ก็ใช้คำสั่ง Make Info Part
· States
ใช้จัดการกับ State ต่างๆ เช่นการเปลี่ยน State จาก State หนึ่งไปอีก State หนึ่ง(State Transition)
· Interactivity
สามารถที่จะใช้ Behaviors ในการใส่ interactivity เข้าไปใน application โดยการลากวาง ( ไม่ต้องเขียนโค้ด )
· Data
สามารถที่จะใช้ Data Panel เพื่อสร้างตัวอย่างข้อมูลสำหรับการทดสอบหรือจะนำข้อมูลจาก xml เข้ามาใช้ รวมถึงสามารถที่จะใช้ Data binding ได้
· Silverlight
ถ้ามีการเปิดโปรเจค Silverlight 2 ใน Expression Blend 3 จะมี Dialog box ขึ้นมาถามว่าต้องการที่จะ update ไฟล์โปรเจคนี้เป็น Silverlight 3 หรือไม่ นอกจากนี้ยังสามารถที่จะ run Silverlight Application โดยไม่ต้องใช้ Browser ได้ รวมถึงการทำ cache library extensions เพื่อเพิ่มความเร็วให้กับ Silverlight Application
· Source file version control
สามารถแชร์โค้ดรวมถึงจัดการกับโค้ดต่างๆเช่น checking in , checking out, merging โดยใช้ Microsoft Visual Studio 2008 Team Foundation Server
· Animation
มีคุณสมบัติใหม่ๆให้เลือกใช้มากขึ้น เช่นการบันทึก keyframes
· Text
สามารถใช้ Font Manager เลือก Font ต่างๆ
· Workflow
มีการพัฒนาในส่วนของการใช้งานให้สะดวกขึ้น เช่น การใช้ Direct Selection , Auto-scroll and zoom , Keyboard shortcuts , การคัดลอกและวางภาพใน clipboard เป็นต้น
· Code editing
สามารถที่จะเขียนและแก้ไข code behind ของ C# และ Visual Basic ใน Expression Blend 3 , สามารถที่จะเพิ่มตัวจัดการ event ใน Visual Studio
· Extensibility
มี extensible project templates เพื่อใช้ในการจัดการกับโปรเจคเทมเพลตต่างๆ รวมถึงมี APIs ต่างๆที่สำหรับ Silverlight และ WPF ที่สามารถใช้ได้กับ Visual Studio designer
การติดตั้งโปรแกรม
Download โปรแกรมที่
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=e82db5e2-7106-419e-80b0-65cce89f06bb
วิธีการติดตั้ง
1. หลังจาก download มาแล้วให้คลิกที่ไฟล์ .exe แล้วจะได้ดังรูปในข้อ 1
2. จากนั้นรอสักพักจะได้ดังรูปในข้อ 2
3. ในรูปข้อที่ 2 นี้เป็น License agreement ซึ่งเป็นข้อตกลงเกี่ยวกับลิขสิทธ์ต่างๆพออ่านเสร็จแล้วก็ให้คลิกที่ Accept
4. ในรูปข้อที่ 4 นี้เป็นหน้าเกี่ยวกับการติดตั้งซึ่งสามารถที่จะเปลี่ยน path ที่จะติดตั้งได้โดยคลิกที่ปุ่ม browse (ในตัวอย่างจะใช้ path ที่ทางโปรแกรมกำหนดมาเริ่มต้น)
5. หลังจากนั้นคลิกที่ปุ่ม Install โปรแกรมก็จะทำการติดตั้งให้ดังรูปในข้อ 5
6. พอติดตั้งเสร็จเรียบร้อยก็จะมีหน้าต่างขึ้นมาด้งรูปในข้อ 6 ซึ่งถ้า download โปรแกรมมา โปรแกรมนี้จะเป็นเวอร์ชั่นทดลองใช้ซึ่งปกติจะมีอายุการใช้งานในช่วงทดลองอยู่ที่ 60 วัน
SketchFlow
SketchFlow ก็เหมือนกับการออกแบบโครงร่างหรือลักษณะของ application โดยนักออกแบบจะทำหน้าที่ออกแบบภาพรวมของ Application ว่าจะให้มีลักษณะอย่างไร เช่นในหน้าแรกจะวาง component อะไรบ้าง หน้าที่สองจะมีรูปร่างหน้าตาอย่างไร หลังจากที่ได้มีการออกแบบแล้วก็สามารถนำผลงานที่ได้ออกมานี้ไปให้ทางทีมงานคนอื่นๆดูได้และถ้ามีข้อคิดเห็นอะไรหรือต้องการให้เพิ่ม component อะไรลงไปก็สามารถที่จะ feedback กลับมาได้ และสามารถปรับเปลี่ยน Flow ได้ในทันที
ทำไมต้อง SketchFlow
· นักออกแบบโปรแกรมสามารถออกแบบรูปร่างหน้าตาคร่าวๆของ application ได้
· คนอื่นๆสามารถที่จะ feedback หรือเสนอไอเดียใหม่ๆเพิ่มเติมจากของเดิมที่ได้มีการออกแบบไว้ได้
· สามารถแบบโครงร่างที่ได้ออกแบบไว้เป็น component และนำไปใช้ได้จริง (Prototype to Real Application)
· ใช้ได้ทั้ง Silverlight และ WPF
· สามารถที่จะ import ไฟล์ จาก Photoshop เข้ามาใช้ได้
ตัวอย่างการสร้าง SketchFlow
ในตัวอย่างนี้จะแสดงรูปร่างหน้าตาของ application ในการขายสินค้า ซึ่งมีหน้า แรกคือหน้า login จากหน้า login พอผู้ใช้คลิกที่ปุ่ม login ก็จะมีการลิงค์ไปยังหน้าหลัก(Detail) ในหน้าหลักก็จะแสดง สิ่งต่างๆคร่าวๆที่ต้องมีเช่น กล่องข้อความแสดงรายชื่อของสินค้า,กล่องข้อความแสดงรายละเอียดของสินค้าและมีปุ่ม Confirm เพื่อยืนยันการเลือกสินค้าที่ต้องการ จากนั้นก็จะมีการลิงค์เข้าสู่หน้าถัดไปซึ่งเป็นหน้าแสดงรายละเอียดเพื่อให้ผู้ใช้ตรวจสอบความถูกต้องก่อนทำการสั่งซื้อสินค้าซึ่งถ้าต้องการกลับไปหน้าก่อนหน้านี้ก็จะมีปุ่ม back กลับไป เป็นต้น ซึ่งถ้านับ screen หรือจำนวนหน้าแล้วก็จะมีทั้งหมด 3 screen ด้วยกัน
1. เปิดโปรแกรม Microsoft Expression Blend 3 SketchFlow ขึ้นมาเลือก New Project แล้วเลือกเป็น WPF SketchFlow Application และให้ตั้งชื่อโปรเจคและเลือกภาษาที่ต้องการ ดังรูปในข้อ 1
2. หลังจากที่คลิกที่ปุ่ม OK แล้วก็จะเข้าสู่หน้าหลักในการสร้าง SketchFlow ซึ่งในการสร้าง SketchFlow ให้มาดูตรง SketchFlow Map กันก่อน ถ้าไม่เห็นหน้าต่างนี้ก็ให้ไปที่ menu bar ที่ชื่อ Window แล้ว เลือก SketchFlow Map (หลังจากคลิกแล้วจะมีเครื่องหมายถูกด้านหน้า) ซึ่งหน้าตาของ SketchFlow Map จะมีลักษณะดังรูปในข้อ 2
3. จากรูปด้านบน จะเห็นได้ว่าตอนที่เราสร้าง project sketch flow ขึ้นมาใหม่จะมี Sceen 1 เพียงแค่ อันเดียวซึ่ง Screen นี้ก็คือฉาก หรือ หน้า ของ application นั่นเองถ้าใน application มี 3 หน้าก็ให้คลิกตรง Create a Connected Screen ดังรูปในข้อ 3
4. ผลลัพธ์ที่ได้จะมี Screen 2 เพิ่มเข้ามา ให้ทำการเพิ่มไป Screen 3 ด้วย โดยหลังจากเพิ่ม Screen แล้วจะมีลูกศรเกิดขึ้นมาด้วยเพื่อแสดงการ link กันระหว่าง Screen ดังรูปในข้อ 4
5. หลังจากที่ได้เพิ่ม Screen เข้ามาให้โปรแกรมจะทำการสร้างไฟล์ชื่อ Screen2 และ Screen3 ให้ด้วย ซึ่งเราสามารถที่จะออกแบบรูปร่างหน้าตาในแต่ละ Screen ได้ในนี้ Screen ต่างๆใน SketchFlow Map เราสามารถเปลี่ยนชื่อเรียกได้โดยที่คลิกขวาที่ Screen 1 แล้วเลือก Rename จากนั้นเปลี่ยนชื่อเป็น Login ใน Screen 2 ก็ให้เปลี่ยนชื่อเป็น Detail และ Screen 3 เปลี่ยนชื่อเป็น Confirm ดังรูปในข้อ 5
6. จากนั้นไปที่ Screen ที่ชื่อ Login ในหน้า (Login)Screen1.xaml แล้วให้ไปคลิกตรง Assets Panel ถ้าไม่เห็น panel นี้ก็ให้คลิกตรง menu bar ที่ชื่อ Window แล้วเลือก Assets โดย panel นี้จะมีรูปร่างหน้าตาดังรูปในข้อ 6
7. ให้คลิกตรงลูกศรที่ Styles แล้วจะมีเมนูย่อยๆแสดงขึ้นมาให้เลือก SketchStyle จากนั้นจะมีอุปกรณ์ต่างๆในการวาด Sketch เกิดขึ้นมาดังรูปในข้อ 7
8. ใน หน้า Login นี้จะมี textbox 2 อันและมี ปุ่ม 1 ปุ่ม ก็ให้ทำการลาก BasicTextBox-Sketch , Button-Sketch มาวางในหน้า Art Board (หน้าที่อยู่ตรงกลางมีพื้นหลังสีขาวสำหรับการวางเครื่องมือหรือ tools ต่างๆ) ดังรูปในข้อ 8
9. ในการกำหนด properties เช่นการปรับความกว้างของ Textbox ก็ให้คลิกที่ Textbox ก่อน แล้วไปดูที่หน้าต่าง Properties (ถ้าไม่เห็น ก็ไปเลือก Window -> Properties) ตรงหัวข้อ Layout ให้ใส่ตัวเลขหรือให้เมาส์เลื่อนขนาดเพื่อกำหนดขนาดในช่อง Widthให้กับ Textbox ดังรูปในข้อ 9
10. จากนั้นไปลาก BasicTextBlock-Sketch มาวางใน หน้า TextBox ทั้งสองอันเพื่อที่จะกำหนดข้อความ หรือจะใช้ toolsที่ชื่อ pencil เขียนข้อความก็ได้ ในตัวอย่างขอใช้เป็น BasicTextBlock-Sketch แล้วไปที่ตรง Properties ในหัวข้อ Common Properties ให้ใส่ข้อความว่า Username , Password ใน Text ลงไปผลลัพธ์จะได้ดังรูปในข้อ 10
11. ตอนนี้ก็สร้างหน้า Login เสร็จแล้ว ให้ทดสอบรันดูโดยกดปุ่ม F5 ผลลัพธ์จะมีหน้าต่าง SketchFlow Prototypeเกิดขึ้นมาดังรูปในข้อ 11
12. ในหน้าต่างดังรูปข้อที่ 11 นี้เป็นหน้าต่างที่สำคัญในการที่ให้คนอื่นๆนอกจากผู้ออกแบบ ได้มีส่วนการแสดงความคิดเห็นว่าสิ่งที่ผู้ออกแบบมาดีหรือยัง ควรเพิ่มสิ่งอื่นๆเข้าไปหรือป่าวซึ่งผู้ที่ต้องการนำเสนอสามารถที่จะ Feedback ได้โดยสังเกตุ panel ที่ชื่อ FEEDBACK ด้านล่างซ้ายมือจะมีปากกา , ปากกา highlight และยางลบเพื่อใช้ในการแสดงข้อคิดเห็นหรือสิ่งที่ควรเพิ่มเข้ามาเช่นในตัวอย่างนี้สมมุติว่าถ้ามีข้อเสนอให้เพิ่มปุ่มเข้าไปปุ่มนึงสำหรับการ reset ข้อมูลที่ใส่เข้ามาในช่อง username, password ก็ไปคลิกทีคำสั่ง Enable ink feedback (รูปพู่กันอันแรก) แล้วเลือกสีที่ต้องการแล้ววาดลงไปดังรูปในข้อ 12
13. หลังจากที่แสดงข้อคิดเห็นลงไปแล้วเราสามารถที่จะลบได้ในกรณีที่ต้องการเปลี่ยนข้อคิดเห็นโดยคลิกเลือกคำสั่ง Erase ink feedback (รูปคล้ายๆดินสอ) หรือถ้าต้องการซ่อนข้อคิดเห็นหรือแสดงข้อคิดเห็น(ในกรณีที่ข้อคิดเห็นถูกซ่อนอยู่) ก็ให้คลิกที่รูปหลอดไฟ ถ้าต้องการ export ไฟล์นี้ก็ให้คลิกรูป folder (รูปที่อยู่ด้านขวาสุด) แล้วเลือก export feedback ถ้าต้องการปิดหน้านี้ก็คลิกเครื่องหมายกากบาทด้านบนขวา
14. หลังจากที่สร้างหน้า Login เสร็จแล้วต่อไปก็สร้างหน้า Detail และ หน้า Confirm ซึ่งหลักการการสร้างจะเหมือนกับ หน้า Login ซึ่งในตัวอย่างผมสร้างเสร็จแล้วหน้า Detail และ Confirm คร่าวๆจะมีลักษณะดังรูปในข้อ 14
หน้า Detail
หน้า Confirm
15. การสร้าง Link ในแต่ละหน้า ถ้าในหน้า Login เมื่อคลิกที่ปุ่ม Login แล้วต้องการ Link ไปยังหน้า Detail ก็ให้ไปที่ Screen ที่ชื่อ Login (Screen1.xaml) คลิกที่ปุ่ม Login (ปุ่มที่เราได้ Sketch ไว้) แล้วคลิกขวา เลือก Navigate to -> Detail (ชื่อ Screen ที่ต้องการ link ไป) แล้วคลิกที่ปุ่ม F5 ทดสอบ กดปุ่ม Login ดูผลลัพธ์จะมีการ link ไปที่ Detail
16. หลังจากที่ได้มีการออกแบบแล้วถ้าต้องการนำไปใช้จริงเราสามารถแปลงสิ่งที่ได้ Sketch ไว้ไปเป็น tools จริงๆได้เพื่อนำไปใช้ต่อไปเช่นในหน้า Login ให้คลิกที่ TextBox แล้วไปใน panel Properties ตรงหัวข้อที่ชื่อ Miscellaneous ในหัวข้อนี้ให้คลิกตรงรูปสีเหลียมเล็กๆหลังคำว่า Style ดังรูปในข้อ 16
17. หลังจากที่คลิกรูปสีเหลี่ยมแล้วจะมี Dialog Style ขึ้นมาให้เลือก Reset ผลลัพธ์โปรแกรมจะเปลี่ยน TextBox รวมถึงสิ่งอื่นๆ ที่ได้มีการ Sketch ไว้ไปเป็นสิ่งที่สามารถนำไปใช้งานได้ดังรูปในข้อ 17
18. ในทางกลับกันถ้าต้องการเปลี่ยนสิ่งต่างๆให้เป็นรูปแบบ Sketch เช่น button ก็ให้คลิกที่ปุ่ม แล้วคลิกที่รูปสี่เหลี่ยมเล็กๆหลัง Style จากนั้นเลือก Local Resource -> Button-Sketch
สรุป
ในบทความนี้ก็ได้กล่าวถึงเรื่องของ Microsoft Expression Blend 3 + SketchFlow ซึ่งสิ่งต่างๆที่เพิ่มเข้ามาใหม่ในเวอร์ชั่นนี้ล้วนเป็นสิ่งที่น่าสนใจทั้งสิ้น โดยสิ่งใหม่ๆเหล่านี้ได้เพิ่มการอำนวยความสะดวก , ความยืดหยุ่น และช่วยลดขั้นตอนในการทำงานเพื่อที่จะได้ประหยัดเวลาในการพัฒนา Application ซึ่งสิ่งต่างๆนี้ถูกสร้างขึ้นเพื่อเหมาะกับการนำไปใช้ในการสร้าง Application ที่จำเป็นต้องใช้ Microsoft Expression Blend เป็นอย่างยิ่ง
เนื้อหาที่เกี่ยวข้อง
DataBinding with Silverlight 3 and Silverlight 2
Posted
10-08-2009 1:52
by
Kreevut Assavakuptanon