Simple Silverlight 2 Animation with Expression Blend


 

สิ่งที่จำเป็น (Prerequisites)

 

Download source code

Demo:

http://silverlight.services.live.com/invoke/68535/Sl2B2AnimationBlend/iframe.html

ขอนำเพื่อนๆ เข้าสู่การสร้างภาพเคลื่อนไหวใน Silverlight 2 โดยใช้ Expression Blend 2.5 June Preview และ VS2008 แบบง่ายๆ ครับ:

 

Animation อันน่าภาคภูมิใจของเรา:

เมื่อคลิกบนปุ่ม Start:> รูปบอลกลมสีแดงจะขยายใหญ่ขึ้น เมื่อใหญ่สุด จะมีตัวอักษรแสดงว่า Hello! GF ดัวรูปที่ 1 -4:

2 3 4

รูปที่ 1:                           รูปที่ 2:                            รูปที่ 3:

 

นี่คือเป้าประสงค์ของเรา:

5 

รูปที่ 4:

 

หยิบเครื่องมือออกมาใช้งาน

หยิบเครื่องมือมีระดับอย่าง Expression Blend 2.5 June ขึ้นมา แล้วคลิกบน New Project ดังรูปที่ 5

6

รูปที่ 5:

 

สร้างโปรเจ็กต์ เป็น Silverlight 2 Application ดังรูปที่ 6:  เมื่อเข้าสู่โปรเจ็กต์ Simple Silverlight 2 Animation with Expression Blend เป็นที่เรียบร้อย ให้ทำการลาก คอนโทรล Button ไปวางบน Page.xaml จากนั้นปรับพรอเพอร์ตี้ ดังรูปที่ 7:

7 8

รูปที่ 6:                                           รูปที่ 7:

 

คลิกเมาส์ค้างบน Rectangle(M) เลื่อนเมาส์ไปเลือก Ellipse จากนั้นลากไปวางบน Page.xaml แต่งให้เป็นรูปบอลกลมสีแดง ดังรูปที่ 8: แล้วทำการปรับพรอเพอร์ตี้โดยใส่เฉดสีดังรูปที่ 9:

9 10

รูปที่ 8:                                          รูปที่ 9:

 

ทำการเพิ่ม Storyboard เข้ามาในโปรเจ็กต์ โดยทำการคลิกเครื่องหมายบวก(+) บน Objects and Timeline ดังรูปที่ 10: จะขึ้นหน้าต่าง Create Storybord Resource ให้ทำการใส่ชื่อตามใจต้องการ ในบทความนี้ใช้ชื่อเป็น: Storyboard1 ดังรูปที่ 11:

11 12

รูปที่ 10:                                        รูปที่ 11:

 

หลังจากที่เราทำการสร้าง Storyboard1 เราจะได้พื้นที่สำหรับจัดการกับภาพเคลื่อนไหว(Objects and Timeline) กันแล้ว ไปกำหนด Record Keyframe กันเลยครับ ตรง Timeline ตำแหน่งศูนย์ (0) ให้เรากำหนด พรอเพอร์ตี้ของรูปบอลกลมสีแดง เป็น Opacity = 0%, Visibility = Collapsed ดังรูปที่ 12: กล่าวคือเริ่มแรกเราจะซ่อนมันก่อน Timeline ตำแหน่งถัดมาทำการเพิ่ม Opacity = 20%, Visibility = Visible กล่าวคือให้มันปรากฏ พร้อมขยายใหญ่ขึ้นจางๆ ดังรูปที่ 13:

13 14

รูปที่ 12                                                              รูปที่ 13:

 

Timeline ตำแหน่งถัดมา(ตำแหน่งที่ 3) พรอเพอร์ตี้ของรูปบอลกลมสีแดง เป็น Opacity = 100% และทำการขยายใหญ่เต็มที ดังรูปที่ 14:

 

#หมายเหตุ:จากรูปที่ 12 และ 13 จะเห็นว่า  19 Timeline Record อยู่: กล่าวคือ มันกำลังบันทึกสิ่งที่เรากำลังกระทำอยู่บน Page.xaml นั่นเอง

จากนั้นทำการเพิ่ม textBlock เข้าไป แล้วพิมพ์ข้อความว่า Hello! GF ดังรูปที่ 15: ก่อนทำการลาก TextBlock ไปวางเราต้องหยุดการบันทึกชั่วคราวครับ โดย:

18 คลิกเข้าตามรูป ให้มันขึ้น Timeline recording is off (จะเห็นว่าสีแดงหายไป) จากนั้นเรากลับไปปรับแต่ง TextBlock ของเราต่อให้ใส่ขนาดตัวอัการดังรูปที่ 15:

 

15 16

รูปที่ 14:                                                              รูปที่ 15:

 

ใสสีให้ textBlock ดังรูปที่ 16:

17

รูปที่ 16:

 

เราไปทำการใส่ความเคลื่อนไหวให้เจ้า TextBlock กันครับ ที่ Timeline ตำแหน่งแรกเริ่มถึงตำแหน่งที่ 3 เราจะซ่อนมันก่อน ให้ปรับพรอเพอร์ตี้ Opacity = 0%, Visibility = Collapsed ดังรูปที่ 17 และ 18:

20 21

รูปที่ 17:                                                               รูปที่ 18:

 

จากนั้นเราทำการเลื่อนตำแหน่ง Timeline ถัดมาดังรูปที่ 19: แล้วทำการปรับพรอเพอร์ตี้ Opacity = 20%, Visibility = Visible ดังรูปที่ 19 เพื่อให้มันปรากฎตัวหนังสือจางๆ เมื่อลูกบอลขยายใหญ่เต็มที แล้ว ทำการขยับตำแหน่ง Timeline ในตำแหน่งถัดมา ให้พรอเพอร์ตี้ Opacity = 100% เพื่อให้ตัวหนังสือ แสดงชัดเจนดังรูปที่ 20:

22 23

รูปที่ 19:                                                               รูปที่ 20:

 

มาถึงตรงนี้ภาพเคลื่อนใหวของเราเป็นอันเสร็จสิ้นสมบูรณ์ในขณะทำการออกแบบภาพเคลื่อนไหวเราสามารถทำการทดสอบดูผลการเคลื่อนไหวได้โดยคลิกบนเมนู play บน xx เราก็สามารถดูความเคลื่อนไหวได้เช่นกัน

 

เราไปทำการสั่งให้มันเคลื่อนไหวเมื่อเราคลิกเมาส์บนปุ่ม Start ที่เราวางไว้ตั้งแต่แรก ให้คลิกเมาส์เลือกบนปุ่ม Start ไปที่ Propertices => Event => Click ดังรูปที่ 21

24

รูปที่ 21:

 

มันจะกระโดดไปเปิด VS2008 และทำการเจนโคด Event Button_Click()  จากนั้นทำการใส่โค้ด Storyboard1.Begin(); ลงไปใส่ Event นั้นดังรูปที่ 22: จากนั้นทำการทดสอบรัน(Run) ดูการทำงาน โดยกดปุ่ม execute ดังรูปที่ 23 เราจะได้ภาพเคลื่ไหวดังรูปที่ 1 ถึง 4 ดังที่ได้กล่าวปแล้ว

25 26

รูปที่ 22:                                        รูปที่ 23:

 

การสร้างภาพเคลื่อนไหวพื้นฐานบน Expression Blend 2.5 June Preview และ VS2008 ไม่ใช่เรื่องยากอีกต่อไปใช่ใหมครับ…

แต่สำหรับการสร้างภาพเคลื่อนไหวที่มีความสลับซับซ้อนแล้ว คงต้องอาศัยความขยัน ฝึกฝนของเพื่อนๆ กันแล้วละครับ ดังคำกล่าวที่ว่า ความพยายามอยู่ที่ใหน? ความพยายามย่อมอยู่ที่นั่น… หงิๆ??… [ความพยายามอยู่ที่ใหน? ความสำเร็จก็อยู่ที่นั่น?]

สรรพสิ่งย่อมมีการเปลี่ยนแปลงตามกาลเวลา ไฉนจิตใจคนจะยั่งยืนยง …

สรรพสิ่งล้วนยังถึง แต่จิตใจคนยากยิ่งล่วงรู้…

Advertisements
เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Silverlight

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: