ภาพเคล่ื่อนไหวเกิดจากการแสดงภาพนิ่งหลายๆภาพตามลำดับด้วยความถี่จนทำให้สามารถมองเห็นเป็นเหมือนกับการเคลื่อนไหว ซึ่งภาพนิ่งที่ว่านั้นจะถูกแบ่งออกเป็นเฟรม เฟรมละ 1ภาพ ใน objective-c มีคลาสที่ช่วยให้เราสร้างภาพเคลื่อนไหวหรือภาพ Animation ได้ง่ายๆ นั่นก็คือ UIImageView

สิ่งที่ต้องเตรียม
- ไฟล์รูปภาพ

ไฟล์รูปภาพในตัวอย่างนี้ ผมเค้นความสามารถด้านศิลปะที่มีอยู่อันน้อยนิดวาดออกมาอย่างสุดฤทธิ์แจกให้ใช้กันฟรีๆเลยครับ
Download คลิกที่นี่

สร้าง Xcode Project

1. คลิกที่ File > New Project

2. เลือก Application เป็น View-based Appliecation


3. ตั้งชื่อโปรเจ็คเป็น SimpleAnimation

Resource

1. ไฟล์รูปภาพที่เตรียมไว้ทั้งหมดอยู่ในโฟลเดอร์ Nji สัังเกตุว่าชื่อไฟล์จะใช้ตัวเลขกำกับเฟรม 1-40

2. ลากโฟลเดอร์ Nji ไปวางใน Resource

3. ติ๊กที่ Copy items… เพื่อคัดลอกไฟล์นั้นเก็บไว้ในโปรเจ็ค xcode ด้วย

Interface

SimpleAnimationViewController.h

ประกาศตัวแปร UIImageView เพื่อใช้แสดงรูปภาพ ตั้งชื่อว่า myImage

UIImageView *myImage;

ประกาศตัวแแปร NSMutableArray เป็น Arrayเอาไว้เก็บรูปภาพเป็นเฟรมเพื่อใช้ทำภาพเคลื่อนไหว ตั้งชื่อว่า imageArray

NSMutableArray *imageArray;

Implement

SimpleAnimationViewController.m

init ค่าให้กับ myImage และ imageArray (ตรงนี้สำคัญมาก เพราะว่าตัวอย่างนี้เราจะไม่กำหนดค่าของ myImage ด้วย Interface Builder แต่เราจะกำหนดค่าในตัว Implement เลย หากเราไม่ init ค่าให้กับ myImage จะทำให้รูปภาพไม่แสดง)

myImage = [[UIImageView alloc] init];
imageArray = [[NSMutableArray alloc] init];

วนลูปโหลดภาพเก็บไว้ใน Array ให้ครบ 40 ภาพตามที่เตรียมไว้

for(int i=1; i<=40; i++){
     [imageArray addObject:[UIImage imageNamed:
     [NSString stringWithFormat:@”NjiAnimate%i.png”,i]]];
}

กำหนดค่าของ imageArray ให้กับ myImage ที่ทำหน้าที่แสดงภาพ Animation

[myImage setAnimationImages:imageArray];

กำหนดค่าของช่วงระยะเวลาที่จะแสดงภาพแต่ละเฟรม ยิ่งน้อยยิ่งเนียนครับ 555+

[myImage setAnimationDuration:0.2];

กำหนดค่าจำนวนรอบที่ต้องการแสดงซ้ำ หากกำหนดเป็น 0 จะหมายถึงไม่จำกัดจำนวนรอบ

[myImage setAnimationRepeatCount:0];

กำหนดขนาดของรูปภาพที่จะแสดง ในตัวอย่างใช้ CGRectMake โดยรับพารามิเตอร์เป็น x,y,width,height ตามลำดับ

[myImage setFrame:CGRectMake(85,160,140,150)];

จากนั้นก็เริ่มแสดงภาพด้วยฟังก์ชัน startAnimating

[myImage startAnimating];

​add ภาพลงใน view

[self.view addSubview:myImage];

สุดท้ายก็คืน Memory ด้วยนะครับ

-(void) dealloc{
     [myImage release];
     [imageArray release];
     [super dealloc];
}

Finish

เสร็จแล้วครับ… คลิกที่ Build and Run ดูผลงานได้เลย

สิ่งที่ต้องเตรียม
- รูปภาพ 1 ไฟล์ (ในตัวอย่างใช้ ship.jpg)

สร้าง Xcode Project

1. คลิกที่ File > New Project
2. เลือก Application เป็น View-based Appliecation

3. ตั้งชื่อโปรเจ็คเป็น SimpleTransform

Interface

SimpleTransformViewController.h

ประกาศตัวแปรรูปภาพ IBOutet เพื่อติดต่อกับ Interface Builder

IBOutlet UIImageView *myImage;

สร้างฟังก์ชันหากินทั้ง 3 ต้องเป็น IBAction เพื่อติดต่อกับ Interface Builder

- (IBAction) transformImage;
- (IBAction) rotateImage;
- (IBAction) scaleImage;

Implement

SimpleTransformViewController.m

การทำให้ภาพเคลื่อนที่ด้วย CGAffineTransformTranslate
– CGAffineTransformTranslate(transform เริ่มต้น, x ที่เปลี่ยนแปลง, y ที่เปลี่ยนแปลง)

การหมุนภาพด้วย CGAffineTransformRotate
– CGAffineTransformRotate(transform เริ่มต้น, radian ของมุมที่เปลี่ยนแปลง)

การเปลี่ยนขนาดภาพด้วย CGAffineTransformScale
– CGAffineTransformScale(transform เริ่มต้น, ขนาดที่เปลี่ยนในแกน x, ขนาดที่เปลี่ยนในแกน y)

คืนค่าหน่วยความจำที่ฟังก์ชัน – (void) dealloc

Resource

เราสามารถเพิ่มไฟล์รูปภาพในโปรเจ็คของ xcode ได้ง่ายๆ ด้วยการลากใส่โฟลเดอร์ Resource ได้เลยคับ

ติ๊กที่ Copy items… เพื่อคัดลอกไฟล์นั้นเก็บไว้ในโปรเจ็ค xcode ของเรา

Interface Builder

ดีจริงๆที่ xcode นั้นมี Interface Builder ที่เป็นเครื่องมือช่วยให้เราออกแบบ interface ได้ง่ายดาย วิธีใช้ง่ายมากครับ ดับเบิ้ลคลิกที่ไฟล์ SimpleTransformViewController.xib

สร้างรูปภาพโดยการลาก ImageView จากหน้าต่าง Library ไปวางไว้บน View

ที่หน้าต่าง Attributes กำหนดค่า Image เป็นชื่อไฟล์รูปภาพที่เราเตรียมไว้

สร้างปุ่มก็เหมือนกัน ลาก Round Rect Button ไปวางไว้บน View

กำหนดค่าให้กับ myImage โดยการคลิกขวาที่ File’s Owner แล้วลาก myImage ไปยัง ImageView ที่เราสร้างไว้

กำหนดฟังก์ชันของปุ่มโดยการคลิกขวาที่ File’s Owner แล้วลากฟังก์ชันไปยังปุ่มนั้นๆ

​Save และปิด Interface Builder

Finish

เสร็จแล้วครับ… คลิกที่ Build and Run ดูผลงานได้เลย

ประเภทของข้อมูลมีอยู่ 2 ประเภท คือ Primitive Type และ Reference Type

Primitive Type หรือ ข้อมูลพื้นฐาน ได้แก่
1. ข้อมูลตัวเลขจำนวนเต็ม
1.1 short
1.2 unsigned short
1.3 int
1.4 unsigned int
1.5 long
1.6 unsigned long
1.7 long long
1.8 unsigned long long
(unsigned คือ ข้อมูลที่ไม่เก็บค่าติดลบ ต้องกำหนดค่าตั้งแต่ 0 ขึ้นไป หากเรากำหนดค่าติดลบมันจะเก็บค่า MAX แทน)

2. ข้อมูลตัวเลขทศนิยม
2.1 float
2.2 double

3. ข้อมูลตรรกะ
ที่ว่าแปลกก็คือ boolean ของ Objective-C ไม่ได้ถูกสร้างขึ้นมาเพื่อเก็บค่า true และ false เหมือนอย่าง JAVA
แต่ถูก define ให้ TRUE มีค่าเท่ากับ 1 และ FALSE มีค่าเท่ากับ 0 แทน (เก็บค่าเป็น Integer) เนื่องจากว่าการรีเทิร์นค่าข้อมูลเชิงตรรกะของ Objective-C จะรีเทิร์นออกมาเป็น 0 กับ 1 นั่นเอง…

วิธีใช้ก็เดิมๆครับ ไม่มีอะไรซับซ้อน

BOOL b = TRUE;
if(b){
// statement
}

4. ข้อมูลตัวอักษร
4.1 char ใช้เก็บข้อมูลตัวอักษร “ตัวเดียว” เท่านั้น กำหนดค่าภายใต้เครื่องหมาย ‘ ‘ (Single Quotes) ถ้ากำหนดมากกว่า 1 ตัวมันจะ warnning และเก็บค่าอักขระตัวท้ายสุดแทน

วิธีใช้

char c = ‘A’;
NSLog(@”Character = %c”,c);

Reference Type หรือข้อมูลอ้างอิง
ข้อมูลประเภทนี้ไม่ได้เก็บค่าโดยตรง แต่จะเป็นการอ้างอิงตำแหน่งของค่าข้อมูล
ในหัวข้อนี้จะยังไม่ลงรายละเอียดนะครับ เพราะวิธีใช้งานค่อนข้างจะลึกซึ้งกว่าข้อมูลแบบ Primitive Type
(…อันแน่!..ขี้เกียจล่ะเซ่​ -..-)

ตามนี้ครับ
1.Class
2.Object
3.Array

แถมท้ายด้วยเรื่องของ

String
Objective-C มีให้เลือกใช้สองแบบนะครับ

1. C String เป็นวิธีใช้สตริงในภาษาซีครับ โดยจะใช้ Character Pointer หรือ Character Array แทน

วิธีใช้

char * str = “Hello”; // ประกาศแบบ Character Pointer กำหนดภายใต้เครื่องหมาย ” ” (Double Quotes)
หรือ
char str[] = {‘H’,'e’,'l’,'l’,'o’}; //ประกาศแบบ Character Array กำหนดค่าภายใต้เครื่องหมาย ‘ ‘ (Single Quotes)

NSLog(@”String : %s”,str);

2. NSString

วิธีใช้

NSString * str = @”Hello”; //ดูดีๆ..กำหนดค่าใช้ @ ตามด้วย ” ” (Double Quotes)
NSLog(@”String : %@”,str); //ใช้ %@ ในการแสดงผลด้วยนะ…บอกให้ดูดีๆ! o_O!!

ไว้เท่านี้ก่อนนะครับ เจออะไรสะกิดใจอีก จะเอามาลงให้ดู…ขอบคุณครับบบ (-/\-)

โหลด XCode(3.2.5)เสร็จ ผมก็ไม่รอช้าที่จะเขียนบล็อกบรรยายความรู้สึกของการสัมผัสกับก้าวแรกของความใฝ่ฝันทันที…ตอนนี้บอกได้คำเดียวเลยครับว่า ตื่นเต้นนนน!! สุดๆๆๆ อยากลองเต็มทีแล้ว รีบไปทักทายกับเจ้า XCode กันเลยดีกว่าครับว่าตัวจริงเสียงจริงของเค้านั้นเป็นยังไง… (*3*)

XCode : Template
เริ่มต้นด้วยการ New Project ก่อนเลยนะครับ วันนี้เราจะมาดูว่าเจ้า XCode นั้นมี Template แบบไหนบ้างที่จะทำให้เราทำงานได้ง่ายขึ้น

เลือกเมนู Application เราจะเห็น Template ที่มีให้เลือกทั้งหมด 7 ตัวด้วยกัน

เริ่มต้นที่ตัวแรก Navigation-based
หลังจากทำการเลือก Template เรียบร้อยแล้วเราจะเห็นหน้าตาของ XCode Editor แบบนี้ครับ

ถึงตอนนี้วินาทีแรกที่สมองผมตอบสนองต่อ XCode คือ… “มันเอาไว้ทำอะไรบ้างเนี่ย!? ~..~??!!”
ดูแปลกตาแต่ที่แน่ๆผมรู้จักสองปุ่มนี้ครับ “Build and Run” และ “Tasks” นั่นก็คือปุ่มเอาไว้รันดูผลลัพธ์นั่นเอง

เมื่อกดปุ่ม “Build and Run” โปรแกรมก็จะทำการ Build และเรียก iOS Simulator ขึ้นมาเพื่อแสดงผลลัพธ์ของโปรแกรมที่เราสร้างขึ้นโดยอัตโนมัติ

XCode : Template แบบ Navigation-based

เห็นผลลัพธ์แล้วรู้สึกดีมากครับ(ขนาดยังไม่ทันได้ลงมือ) iOS Simulator มีลักษณะเป็น iPhone ซึ่งสามารถทำงานได้เหมือนเครื่องจริงๆทุกประการ
(เหมือนถืออยู่ในมือจริงๆเลยนะจะบอกให้…ไม่ต้องซื้อ! 555+)

XCode : Template แบบ OpenGL ES
แสดงภาพเคลื่อนไหวโดยใช้ OpenGL เอาไว้พัฒนาเกมเทพๆครับ *0*

XCode : Template แบบ Split View-based
Split View เอาไว้ใช้กับ iPad ครับ

XCode : Template แบบ Tab Bar
มีแท็บให้ลองคลิกสลับไปมาได้ 2 แท็บ

XCode : Template แบบ Utility
ลักษณะเป็นเหมือนหน้าเลือกเพลงของ iPod มีไอคอนรูปตัว i เล็กๆเอาไว้เปลี่ยนโหมดเพื่อดูรายละเอียด

XCode : Template แบบ View-based
หน้าจอ View โล่งๆครับ

XCode : Template แบบ Window-based
หน้าต่างโล่ง คล้ายๆ View-based แต่พื้นเป็นสีขาว

…วันนี้ก็พอจะรู้คร่าวๆแล้วว่า XCode สามารถทำอะไรได้บ้าง หลับฝันดีแล้ววันนีี้ พรุ่งนี้ศึกษาต่อ… Q(>_< )q~!
สำหรับผู้ที่มีคำแนะนำสามารถท้วงติงได้เลยนะครับ

Movie Clip หมุนแบบ 3D ด้วย 3D Rotation Tool

1.ปรับ Frame Rate ให้เท่ากับ 60fps แล้วนำ Movie Clip ที่เตรียมไว้วางลงบนสเตจ

2.คลิกขวาเฟรมที่หนึ่งเลือก Create Motion Tween (เฟรมจะถูกสร้างขึ้นมาทั้งหมด 60 เฟรมตามค่าของ Frame Rate ที่เราตั้งไว้)

3.เลือกเครื่องมือ 3D Rotation Tool แดรกเม้าส์บนเส้นสี เขียวเพื่อหมุนภาพตามแกน Y

4.แดรกเม้าส์บนเส้นสี แดง เพื่อหมุนภาพตามแกน X

5.แดรกเม้าส์บนเส้นสี น้ำเงิน เพื่อหมุนภาพตามแกน Z กด Ctrl+Enter ดูผลลัพธ์ได้เลยครับ

Movie Clip เคลื่อนที่แบบ 3D ด้วย 3D Translation Tool

1.ปรับ Frame Rate ให้เท่ากับ 60fps แล้วนำ Movie Clip ที่เตรียมไว้วางลงบนสเตจ

2.ย้าย Movie Clip มาวางไว้ที่มุมซ้ายล่าง แล้วคลิกขวาเฟรมที่หนึ่งเลือก Create Motion Tween (เฟรมจะถูกสร้างขึ้นมาทั้งหมด 60 เฟรมตามค่าของ Frame Rate ที่เราตั้งไว้)

3.เลือกเครื่องมือ 3D Translation Tool แล้วแดรกเม้าส์บนหัวลูกศรสี แดง เพื่อย้ายตำแหน่งตามแกน X

4.แดรกเม้าส์บนหัวลูกศรสี เขียว เพื่อย้ายตำแหน่งตามแกน Y

5.แดรกเม้าส์บริเวณจุดเริ่มต้นของลูกศรสีแดง (แกน X) และลูกศรสีเขียว(แกน Y) เพื่อย้ายตำแหน่งตามแกน Z

6.เมื่อปล่อยเม้าส์ Motion Tween จะแสดงเส้นพาธสีเขียวบอกระยะการเปลี่ยนแปลงในแต่ละเฟรมจากจุดเริ่มต้น กด Ctrl+Enter ดูผลลัพธ์ได้เลยครับ

BONUS!!!

B1.การทำงานร่วมกันระหว่าง 3D Rotation Tool และ 3D Translation Tool

1.ปรับ Frame Rate ให้เท่ากับ 60fps แล้วนำ Movie Clip ที่เตรียมไว้วางลงบนสเตจ

2.คลิกขวาเฟรมที่หนึ่งเลือก Create Motion Tween (เฟรมจะถูกสร้างขึ้นมาทั้งหมด 60 เฟรมตามค่าของ Frame Rate ที่เราตั้งไว้)

3.เลือกเครื่องมือ 3D Rotation Tool  แดรกเม้าส์บนเส้นสี เขียวเพื่อหมุน ภาพตามแกน Y

4.แดรกเม้าส์บนเส้นสี แดง เพื่อหมุนภาพตามแกน X

5.แดรกเม้าส์บนเส้นสี น้ำเงิน เพื่อหมุนภาพตามแกน Z

6.เลือกเครื่องมือ 3D Translation Tool แล้วแดรกเม้าส์บนหัวลูกศรสี แดง เพื่อย้ายตำแหน่งตามแกน X

7.แดรกเม้าส์บนหัวลูกศรสี เขียว เพื่อย้ายตำแหน่งตามแกน Y

8.แดรกเม้าส์บริเวณจุดเริ่มต้นของลูกศรสีแดง(แกน X) และลูกศรสีเขียว(แกน Y) เพื่อย้ายตำแหน่งตามแกน Z

9.เรียบร้อยครับ กด Ctrl+Enter ดูผลลัพธ์ได้เลยครับ

…เป็นไงบ้างครับ ง่ายนิดเดียวกับ 3D Tools เพียงเท่านี้ก็ทำให้แอนิเมชันของเราดูตื่นตาตื่นใจมากขึ้นแล้วล่ะครับ…

การสร้างไม้เลื้อยด้วย Deco Tool

1.เลือกเครื่องมือ Oval Tool สร้างวงกลมขึ้นมา 1 รูป (ตอนลากกด shift ค้างไว้ จะได้กลมๆครับ)

2.เสร็จแล้วคลิกหนึ่งครั้งเพื่อเลือกพื้นผิววงกลม แล้วกด Delete ลบออกไปให้เหลือแต่เส้นตามรูปครับ

3.เลือกเครื่องมือ Deco Tool แล้วคลิกในพื้นที่วงกลม จะได้ผลลัพธ์เท่ห์ๆ ออกมาดังรูป *0*!

4.เราสามารถเปลี่ยนใบไม้และดอกไม้ในสไตล์ของเราได้นะครับ ให้เราสร้าง symbol ใบไม้และดอกไม้ของเราขึ้นมา โดยในหน้าต่าง Library คลิกที่ New Symbol… ตามรูป

5.สร้าง Symbol เป็นแบบ Movie Clip ตั้งชื่อให้เรียบร้อย

6.ใครอยากได้ภาพนิ่งหรือภาพเคลื่อนไหว ก็จัดได้เลยตามสบายนะครับ ในตัวอย่างผมสร้าง symbol สองตัวชื่อ myLeaf ขนาด 10×10พิกเซล และ myFlower ขนาด 15×15พิกเซล เป็นภาพนิ่ง Movie Clip เฟรมเดียว

7.จากรูปเดิมให้เราใช้เครื่องมือ Selection Tool (V) คลิกเลือกลายเก่า และลบทิ้งก่อน (กด Delete)

8.เลือกเครื่องมือ Deco Tool จากนั้นในหน้าต่าง Properties คลิกที่ Edit เพื่อเลือก symbol ที่จะใช้เป็นใบไม้และดอกไม้

9.เมื่อเลือกเสร็จแล้ว ลองคลิกในพื้นที่วงกลม แค่นี้ก็จะได้ผลลัพธ์เท่ห์ๆ ในสไตล์ของเราแล้ว \*0*/!

อธิบาย Advance Options

Branch angle คือ มุมของการแตกกิ่งก้าน

Pattern Scale คือ สัดส่วนของรูปภาพ

Segment length คือ  ระยะการแตกใบ

Animate Pattern คือ สร้างคีย์เฟรมลงบน Timeline เพื่อทำเป็น Animation

Frame Step คือ จำนวนเฟรมการขยายต่อหนึ่งเฟรมบน Timeline

———————————————————

BONUS!!!

การใช้ Deco Tool ในรูปแบบอื่นๆ

B1.การลงภาพแบบ Grid ด้วย Deco Tool

1.เลือกเครื่องมือ Deco Tool ที่หน้าต่าง Properties เลือก Drawing Effect เป็นแบบ Grid Fill

2.คลิกที่ Edit… เลือก symbol ที่ต้องการ

3.คลิกเลย ไหนดูผลลัพธ์ซิ *0*!

อธิบาย Advance Options

Horizontal Spacing คือ ระยะห่างแนวนอน

Vertical Spacing คือ ระยะห่างแนวตั้ง

Pattern Scale คือ สัดส่วนของรูปภาพ

———————————————————

B2.การลงภาพแบบ Symmetry ด้วย Deco Tool

1.เลือกเครื่องมือ Deco Tool ที่หน้าต่าง Properties เลือก Drawing Effect เป็นแบบ Symmetry Brush

2.คลิกที่ Edit… เลือก symbol ที่ต้องการ

3.ดูที่ Advance Options จะมีให้เลือกทั้งหมด 4 แบบ ซึ่งแต่ละแบบจะให้ผลลัพธ์ที่แตกต่างกัน ดังนี้

3.1 Reflect Across Line ผลลัพธ์ที่ได้จะเป็นภาพสะท้อนไปยังด้านตรงข้าม โดยมีเส้นพิกัดเป็นตัวแบ่ง

3.2 Reflect Across Point ผลลัพธ์ที่ได้ จะเป็นภาพสะท้อนไปยังด้านตรงข้าม โดยมีจุดศูนย์กลางเป็นตัวแบ่ง

3.3 Rotate Around ผลลัพธ์ที่ได้จะเป็นภาพวนรอบจุดศูนย์กลาง

3.4 Grid Translation ผลลัพธ์ที่ได้จะเป็นภาพเรียงกันเป็นตารางตามความยาวของแกน x และ y

Test Collitions คือ การตรวจสอบวัตถุซ้อนทับ ซึ่งถ้าเราติ๊กเลือกที่ Test Collitions จะเป็นการป้องกันไม่ให้ภาพซ้อนทับกัน

…เครื่องมือ Deco Tool ค่อนข้างมีประโยชน์มากเลยทีเดียว สามารถสร้างผลงานแอนิเมชันที่แปลกใหม่และประยุกต์ใช้ได้หลายรูปแบบ ผมอยากให้ผู้อ่านลองฝึกฝน ลองทำหลายๆแบบ คิดค้นสิ่งใหม่ๆ เครื่องมือแต่ละชนิดมีความสามารถในตัวของมันเอง จะสร้างสรรค์ผลงานได้มากมายแค่ไหน ขึ้นอยู่กับจินตนาการของเราครับ…

คติประจำบล็อก วันนี้: “หนึ่งกระบี่ เรียนรู้ร้อยวิทยายุทธ”

ในตัวอย่างนี้ผมจะสร้างแขนกล โดยใช้ Bone Tool เป็นตัวควบคุมการเคลื่อนไหวของข้อต่อในแต่ละส่วน สิ่งที่เราต้องเตรียมไว้ก่อนก็คือ Movie Clip ที่เป็นส่วนประกอบของแขนกลแต่ละท่อนนะครับ

1.เริ่มต้นด้วยการนำท่อนแขนกลสองชิ้นมาวางต่อกันก่อน เพื่อให้ง่ายต่อความเข้าใจผมจะถือว่าแหน่งของวงกลงมสีฟ้าๆเป็นจุดเชื่อมข้อต่อในแต่ละส่วนนะครับ ให้เรานำท่อนแขนชิ้นที่สองมาวางซ้อนทับท่อนแขนชิ้นแรกโดยวางให้จุดสีฟ้าตรงกัน ดังรูป

2.เพื่อให้เห็นการทำงานที่ชัดเจน เราจะใช้ท่อนแขนทั้งหมด 4 ชิ้นประกอบเข้าหากัน โดยให้จุดสีฟ้าซ้อนทับกันเปรียบเสมือนเป็นข้อต่อเช่นเดิม

3.ใส่กระดูกให้กับแขนกล โดยเลือกเครื่องมือ Bone จากกล่องเครื่องมือ เริ่มลากจากจุดเริ่มต้นที่จะใช้เป็นจุดหมุนไปยังข้อต่อระหว่างท่อนแขนชิ้นที่หนึ่งและชิ้นที่สอง  (สังเกตว่าท่อนแขนชิ้นที่หนึ่งและชิ้นที่สองจะอยู่ในสถานะถูกเลือก)

4. สร้างกระดูกต่อเนื่องกันไปเรื่อยๆจนเชื่อมทุกชิ้นต่อกัน จะได้กระดูกทั้งหมด 3 ชิ้นเชื่อมข้อต่อทั้งหมด 3 จุด(จุดเริ่มต้นของกระดูกชิ้นที่ 1 คือ “จุดหมุน” จุดปลายของกระดูกชิ้นที่ 1 คือจุดเชื่อมต่อของ AกับB จุดเริ่มต้นของกระดูกชิ้นที่ 2 คือจุดเชื่อมต่อของ AกับB จุดปลายของกระดูกชิ้นที่ 2 คือจุดเชื่อมต่อของ BกับC จุดเริ่มต้นของกระดูกชิ้นที่ 3 คือจุดเชื่อมต่อของ BกับC และจุดปลายของกระดูกชิ้นที่ 3 คือจุดเชื่อมต่อของ CกับD) ถึงตอนนี้แขนกลของเราทั้งหมดจะถูกดึงขึ้นไปอยู่ในเลเยอร์เดียวกันกับกระดูก ไม่ต้องตกใจนะครับ เรื่องธรรมชาติ…

5.ลองใช้ selection tool ขยับแขนกลดูจะพบว่าตอนนี้แขนกลแต่ละชิ้นได้ถูกเชื่อมต่อกันเรียบร้อยแล้ว ไม่ว่าจะดึงขึ้น ดึงลง ดึงซ้าย ดึงขวา ดึงแรงๆยังไงก็ไม่ขาด ของเค้าดีจริงๆ *0*

6.ไหนลองทำเป็น Animation ซิ! ที่หน้าต่าง Timeline คลิกขวาที่เฟรม 60 เลือก Insert Pose แล้วลองดึงแขนกลโพสท่าให้สวยงาม แล้วรันดูผลลัพธ์ได้เลยจ้า

Bonus!!!

B1.การใส่กระดูกให้กับวัตถุชิ้นเดียว

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

B2.แก้ไขจุดเชื่อมต่อวัตถุด้วย Bind Tool

1.เลือกที่ Bind Tool คลิกที่กระดูกชิ้นสุดท้าย เราจะเห็นเส้นพาธสีน้ำเงินลากยาวจากจุดเริ่มต้นถึงจุดปลายของวัตถุที่เชื่อมต่อกับกระดูกโดยที่บนเส้นจะมีจุดที่เป็นจุดเชื่อมกับกระดูก สังเกตุที่จุดสี่เหลี่ยมสีเหลืองๆ จุดนี้ใช้บอกว่ากระดูกชิ้นที่เราเลือกกำลังเชื่อมต่อกับวัตถุที่จุดไหน

2.ลองยกเลิกการเชื่อมต่อกับจุดสุดท้ายดูลากทิ้งไปที่อื่นเลยครับ (วิธีลากให้คลิกจากเส้นสีแดงบนกระดูก ไปยังจุดเชื่อมต่อใดๆบนเส้นพาธ ซึ่งถ้าลากไปไม่ตรงจุดจะเป็นการยกเลิกการเชื่อมต่อ สังเกตได้จากสุดสี่เหลี่ยมสีเหลืองๆจะหายไป)

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

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

ประเดิมด้วยเรื่องของ Motion Tween ใน Flash CS4 ซึ่งเมื่อก่อนใครเคยใช้ เวอร์ชันก่อนๆ ก็จะเกิดอาการงงๆ เมื่อ motion tween ที่เคยใช้กลับกลายเป็น classic tween ซะง้านน! (รู้สึกเหมือนตกยุคไป 88ปี) สำหรับ motion tween ในเวอร์ชันนี้  วิธีใช้ค่อนข้างจะแตกต่างจากเดิมพอสมควร ผมได้ลองทำไปบ้างแล้ว ไม่แปลกใจเลยว่าแบบเก่าที่เคยใช้ทำไมถึงกลายเป็น classic ไปซะได้ ก็เพราะว่าแบบใหม่ที่ว่านี้ได้ถูกออกแบบมาให้เราสามารถจัดการได้ง่ายขึ้น ง่ายอย่างแรง ง่ายยังไง ไปดูกันเลยดีกว่า

1.สร้าง Shape ขึ้นมาซักอันก่อน แล้ว convert ให้กลายเป็น symbol โดยการกด F8 หรือ Modify > Convert to Symbol… (motion tween สามารถใช้ได้กับ symbol (movie clip,button,graphic) เท่านั้น ถ้าหากเราไม่ convert ก่อน โปรแกรมจะ convert ให้เป็น movie clip โดยอัตโนมัติ)

2.เลือกที่ symbol ของเรา แล้วคลิกขวาเลือก Create Motion Tween

3.เมื่อดูที่หน้าต่าง Timeline จะเห็นว่าเฟรมได้ถูกสร้างขึ้นโดยอัตโนมัติ โดยจำนวนเฟรมที่ถูกสร้างจะเท่ากับจำนวนของเฟรมเรทที่เราตั้งไว้ ในตัวอย่างตั้งค่าเฟรมเรทไว้ที่ 60fps (frame per sec)

4.จากนั้นให้เราลากวัตถุไปยังตำแหน่งปลายทางที่เราต้องการ จะเห็นว่ามีเส้นพาธช่วยบอกพิกัดตำแหน่งของวัตถุในแต่ละเฟรมปรากฎขึ้นมาให้เห็นด้วย ลองรันดูผลลัพธ์ได้เลยจ้า (Ctrl+Enter)

BONUS!!

B1.การทำเส้นพาธให้เป็นเส้นโค้ง

ใช้เครื่องมือ Selection Tool ชี้ไปบนเส้นพาธ (เส้นพาธต้องอยู่ในสถานะยังไม่ถูกเลือก) เม้าส์ไอคอนจะปรากฏเป็นรูปเส้นโค้ง จากนั้นให้คลิกซ้ายค้างไว้และลากได้ตามอัธยาศัย จะโค้งมากโค้งน้อย สวยไม่สวยขึ้นอยู่กับความเกรียน เอ้ย! เซียนของคุณ ..ฮิๆ

B2.การทำให้วัตถุเคลื่อนที่แบบมีน้ำหนัก

จากตัวอย่างจะเห็นว่าการเคลื่อนที่ของวัตถุในแต่ละเฟรมจะเคลื่อนที่ด้วยระยะห่างที่เท่าๆกัน ซึ่งเป็นการเคลื่อนที่ที่ดูไม่มีน้ำหนักเอาซะเลย เดี๋ยวเราลองปรับอีกซักนิดนึง เพื่อความสวยงาม นุ่มสลวย และมีน้ำหนัก (เฮ้ย! ไม่ใช่โฆษณายาสระผม -*-)

1.คลิกที่เส้นพาธ จากนั้นเปิดหน้าต่าง Properties ขึ้นมา (Ctrl+F3) ลองปรับค่า Ease ให้เป็น 100

2.สังเกตุว่าตำแหน่งของวัตถุบนเส้นพาธในแต่ละเฟรมนั้นระยะห่างจะเปลี่ยนไป ลองรันดูผลลัพธ์ (Ctrl+Enter) แล้วท่านจะตกใจ *0*!

3.ทดลองเปลี่ยนค่า Ease จาก 100 เป็น -100 ดูผลลัพธ์ แล้วพยายามคิดว่าเราสามารถใช้เทคนิคนี้ทำอะไรได้บ้าง เก็บเอาไปคิดเป็นการบ้าน ลองทำดูนะครับ “ทำบ่อยๆ เดี๋ยวง่ายเอง…”

คติประจำบล็อกวันนี้:  “ทำบ่อยๆ เดี๋ยวง่ายเอง…”

…จบการขึ้นบล็อกครั้งแรกในชีวิต สนุกเหมือนกันนะเนี่ย ฮ่าๆๆ