การทำภาพ Animation

การทำ�าภาพ การทำ�าภาพ Animation (Animation (ตอนทำ� ตอนทำ� 1)1)

เร� มแรกก�อนก�เปิ�ดโปิรแกรมโฟโต�ชอปิ เร� มแรกก�อนก�เปิ�ดโปิรแกรมโฟโต�ชอปิ และทำ�าการสร�างภาพและข้�อความเตร�ยมและทำ�าการสร�างภาพและข้�อความเตร�ยมไว�ทำ$%งหมด ไว�ทำ$%งหมด 6 Layers 6 Layers ด$งภาพด�านบนค�ะ ด$งภาพด�านบนค�ะ จากน$%นเราจะมาเร� มทำ�า จากน$%นเราจะมาเร� มทำ�า Animation Animation โดยการคล�กทำ� ต�าแหน�งด�านล�างส)ดข้อง โดยการคล�กทำ� ต�าแหน�งด�านล�างส)ดข้อง Tool box Tool box ตามภาพด�านล�าง เพ* อเปิ�ดใช�ตามภาพด�านล�าง เพ* อเปิ�ดใช�งานโปิรแกรม งานโปิรแกรม ImageReady ImageReady ซึ่- งเปิ.นซึ่- งเปิ.นโปิรแกรมส�าหร$บทำ�าภาพโปิรแกรมส�าหร$บทำ�าภาพ Animation Animation

จากน$%นเม* อโปิรแกรม จากน$%นเม* อโปิรแกรม ImageReady ImageReady ถู0กเปิ�ดข้-%นมาแล�ว ถู0กเปิ�ดข้-%นมาแล�ว พาเล�ตทำ� เราจ�าเปิ.นต�องใช�งาน ก�ค*อ พาเล�ตทำ� เราจ�าเปิ.นต�องใช�งาน ก�ค*อ Layer Layer และ และ Animation Animation หากไม�ม�หากไม�ม�ปิรากฏอย0� ก�ให�เร�ยกใช�งานพาเล�ตทำ� ปิรากฏอย0� ก�ให�เร�ยกใช�งานพาเล�ตทำ� ต�องการโดย ใช�ค�าส$ ง ต�องการโดย ใช�ค�าส$ ง Window Window แล�วแล�วคล�กเล*อกพาเล�ตทำ� ต�องการคล�กเล*อกพาเล�ตทำ� ต�องการ

จากน$%นเม* อเราเร�ยกพาเล�ตทำ� ต�องการได�เร�ยบร�อยจากน$%นเม* อเราเร�ยกพาเล�ตทำ� ต�องการได�เร�ยบร�อยแล�ว ให�เราทำ�าการส$งเกตทำ� พาเล�ต แล�ว ให�เราทำ�าการส$งเกตทำ� พาเล�ต Animation Animation จะจะปิรากฏเฟรมหมายเลข้ ปิรากฏเฟรมหมายเลข้ 1 1 อย0� ซึ่- งการสร�างอย0� ซึ่- งการสร�าง Animation Animation น$%นเราจะสร�างได�โดยการสร�างเฟรมน$%นเราจะสร�างได�โดยการสร�างเฟรมในพาเล�ตในพาเล�ต AnimationAnimation

ว�ธี�การสร�างเฟรมเพ� มข้-%น ทำ�าได�โดยการคล�กทำ� ว�ธี�การสร�างเฟรมเพ� มข้-%น ทำ�าได�โดยการคล�กทำ� ต�าแหน�ง คล�กเพ* อค$ดลอกเฟรม ตามภาพด�านล�างต�าแหน�ง คล�กเพ* อค$ดลอกเฟรม ตามภาพด�านล�างค�ะ ซึ่- งจะทำ�าให�ม�เฟรมเพ� มข้-%นค�ะ ซึ่- งจะทำ�าให�ม�เฟรมเพ� มข้-%น

เม* อเราค$ดลอกเฟรมได�แล�ว ให�ทำ�าการค$ดลอกเฟรมให�ได�ทำ$%งหมด เม* อเราค$ดลอกเฟรมได�แล�ว ให�ทำ�าการค$ดลอกเฟรมให�ได�ทำ$%งหมด 4 4 เฟรมตามเฟรมตามภาพด�านล�างค�ะ เอาล�ะค�ะเม* อได�เฟรมทำ$%งหมด ภาพด�านล�างค�ะ เอาล�ะค�ะเม* อได�เฟรมทำ$%งหมด 4 4 เฟรมแล�ว ให�ทำ�าตามข้$%นตอนต�อไปิเฟรมแล�ว ให�ทำ�าตามข้$%นตอนต�อไปิน� นะค�ะน� นะค�ะ

ขึ้��นตอนที่� ขึ้��นตอนที่� 11 คล�กทำ� เฟรมทำ� คล�กทำ� เฟรมทำ� 1 1 จากน$%นส$งเกตทำ� พาเล�ต จากน$%นส$งเกตทำ� พาเล�ต Layer Layer จากน$%นส$งเกตทำ� จากน$%นส$งเกตทำ� ช�องทำ� เปิ.นร0ปิตา ทำ� พาเล�ตเลเยอร3 คล�กให�ม�ร0ปิตาเฉพาะทำ� เลเยอร3ทำ� ช�องทำ� เปิ.นร0ปิตา ทำ� พาเล�ตเลเยอร3 คล�กให�ม�ร0ปิตาเฉพาะทำ� เลเยอร3ทำ� 1 1 เทำ�าน$%น ส�วนเทำ�าน$%น ส�วนเลเยอร3อ* น ๆ เอาร0ปิตาออกให�หมด เลเยอร3อ* น ๆ เอาร0ปิตาออกให�หมด ((ถู�าเลเยอร3ไหนม�ร0ปิตา เราต�องการเอาตาออกถู�าเลเยอร3ไหนม�ร0ปิตา เราต�องการเอาตาออกทำ�าได�โดยคล�กทำ� ร0ปิตาอ�กคร$%ง ร0ปิตาก�จะหายไปิ การปิ�ดตาหร*อเอาตาออก ก�ค*อการทำ�าได�โดยคล�กทำ� ร0ปิตาอ�กคร$%ง ร0ปิตาก�จะหายไปิ การปิ�ดตาหร*อเอาตาออก ก�ค*อการไม�แสดงภาพข้องเลเยอร3น$%นน$ นเองไม�แสดงภาพข้องเลเยอร3น$%นน$ นเอง))

ขึ้��นตอนที่� ขึ้��นตอนที่� 22 คล�กทำ� เฟรมทำ� คล�กทำ� เฟรมทำ� 2 2 จากน$%นส$งเกตทำ� พาเล�ตจากน$%นส$งเกตทำ� พาเล�ต Layer Layer จากน$%นคล�กให�ม�ร0ปิจากน$%นคล�กให�ม�ร0ปิตาเฉพาะทำ� เลเยอร3ทำ� ตาเฉพาะทำ� เลเยอร3ทำ� 1 , 2 1 , 2 และ และ 3 3 เทำ�าน$%น ส�วนเลเยอร3ทำ� เทำ�าน$%น ส�วนเลเยอร3ทำ� 4, 5, 6 4, 5, 6 ให�เอาร0ปิตาออกให�เอาร0ปิตาออก

ขึ้��นตอนที่�ขึ้��นตอนที่� 33 คล�กทำ� เฟรมทำ� คล�กทำ� เฟรมทำ� 3 3 จากน$%นส$งเกตทำ� พาเล�ต จากน$%นส$งเกตทำ� พาเล�ต Layer Layer จากน$%นคล�กให�ม�ร0ปิจากน$%นคล�กให�ม�ร0ปิตาเฉพาะทำ� เลเยอร3ทำ� ตาเฉพาะทำ� เลเยอร3ทำ� 1 , 2 1 , 2 และ และ 4 4 เทำ�าน$%น ส�วนเลเยอร3ทำ� เทำ�าน$%น ส�วนเลเยอร3ทำ� 3, 5, 6 3, 5, 6 ให�เอาร0ปิตาออกให�เอาร0ปิตาออก

ขึ้��นตอนที่� ขึ้��นตอนที่� 44 คล�กทำ� เฟรมทำ� คล�กทำ� เฟรมทำ� 4 4 จากน$%นส$งเกตทำ� พาเล�ต จากน$%นส$งเกตทำ� พาเล�ต Layer Layer จากน$%นคล�กให�ม�ร0ปิจากน$%นคล�กให�ม�ร0ปิตาเฉพาะทำ� เลเยอร3ทำ� ตาเฉพาะทำ� เลเยอร3ทำ� 1 , 2 , 5 1 , 2 , 5 และ และ 6 6 เทำ�าน$%น ส�วนเลเยอร3ทำ� เทำ�าน$%น ส�วนเลเยอร3ทำ� 3 3 และ และ 4 4 ให�เอาร0ปิตาให�เอาร0ปิตาออกออก ((ทำ�าเหม*อนในภาพเลเยอร3ด�านล�างเลยค�ะทำ�าเหม*อนในภาพเลเยอร3ด�านล�างเลยค�ะ))

ตอนน�%เราก�จะได�เฟรมข้องภาพ ตอนน�%เราก�จะได�เฟรมข้องภาพ Animation Animation เร�ยบร�อยเร�ยบร�อยแล�วค�ะ เราสามารถูลองเล�นภาพ แล�วค�ะ เราสามารถูลองเล�นภาพ Animation Animation ได�โดยได�โดยการกดทำ� ปิ)6ม การกดทำ� ปิ)6ม Play Animation Play Animation ตามภาพได�เลยค�ะ จากตามภาพได�เลยค�ะ จากผลล$พธี3จะเห�นว�าภาพ ผลล$พธี3จะเห�นว�าภาพ Animation Animation กระพร�บเร�วมาก ๆ กระพร�บเร�วมาก ๆ ทำ$%งน�%เน* องมาจากเราย$งไม�ได�ก�าหนดความเร�วข้องเฟรมทำ$%งน�%เน* องมาจากเราย$งไม�ได�ก�าหนดความเร�วข้องเฟรมเลย ทำ�าให�ม�ค�าความเร�วเร� มต�นอย0�ทำ� เลย ทำ�าให�ม�ค�าความเร�วเร� มต�นอย0�ทำ� 0 0 ซึ่- งเร�วมาก ๆซึ่- งเร�วมาก ๆ

เราจ�าเปิ.นต�องมาต$%งค�าหน�วงเวลาการแสดงผลข้องเราจ�าเปิ.นต�องมาต$%งค�าหน�วงเวลาการแสดงผลข้องเฟรมแต�ละเฟรม เพ* อให�เฟรมแต�ละเฟรม เพ* อให� Animation Animation ข้องเราสามารถูข้องเราสามารถูเล�นและผ0�มองภาพ เล�นและผ0�มองภาพ Animation Animation สามารถูเห�นรายสามารถูเห�นรายละเอ�ยดทำ� เราต�องการน�าเสนอผ�านภาพ ละเอ�ยดทำ� เราต�องการน�าเสนอผ�านภาพ Animation Animation การก�าหนดเวลาหน�วงข้องแต�ล�ะเฟรมสามารถูทำ�าได� โดยการก�าหนดเวลาหน�วงข้องแต�ล�ะเฟรมสามารถูทำ�าได� โดยคล�กทำ� ต�าแหน�งการต$%งเวลาการแสดงเฟรมตามภาพค�ะ คล�กทำ� ต�าแหน�งการต$%งเวลาการแสดงเฟรมตามภาพค�ะ ซึ่- งค�าต$วเลข้ข้องเวลาย� งเยอะ ก�จะทำ�าให�ภาพในเฟรมน$%น ซึ่- งค�าต$วเลข้ข้องเวลาย� งเยอะ ก�จะทำ�าให�ภาพในเฟรมน$%น ๆ แสดงผลเปิ.นเวลานานตามไปิด�วย จากในต$วอย�าง ๆ แสดงผลเปิ.นเวลานานตามไปิด�วย จากในต$วอย�าง Webmaster Webmaster ก�าหนดให�ม�การแสดงผลเฟรมละ ก�าหนดให�ม�การแสดงผลเฟรมละ 1 1 sec. sec. ทำ)ก ๆ เฟรมค�ะ ทำ)ก ๆ เฟรมค�ะ

เอาละค�ะ...ทำ�น�%ก�มาถู-งข้$%นตอนส)ดทำ�ายก$นแล�วละค�ะ น$%นก�ค*อการบ$นทำ-กภาพ Animation ซึ่- งทำ�าได�โดยการใช�ค�าส$ ง File --> Save Optimized As... จากน$%นเม* อม�ไดอะล�อกบ�อกปิรากฏข้-%น ก�ให�เราต$%งช* อไฟล3ค�ะ และทำ� ส�าค$ญส$ งเกตทำ� Save as type ให�เซึ่ฟเปิ.นสก)ล .gif เทำ�าน$%นค�ะ ภาพทำ� เราเซึ่ฟไปิจ-งจะแสดงผลการเล�นภาพเปิ.นแบบ Animation


เร� มแรกก�อนก�เปิ�ดโปิรแกรมโฟโต�ชอปิ และทำ�าการเร� มแรกก�อนก�เปิ�ดโปิรแกรมโฟโต�ชอปิ และทำ�าการสร�างภาพไว�ทำ$%งหมด สร�างภาพไว�ทำ$%งหมด 4 4 ภาพด$งร0ปิ ซึ่-งเวลาเราจะภาพด$งร0ปิ ซึ่-งเวลาเราจะทำ�าจร�ง ๆ จะใช�ก� ภาพก�ได�ค�ะ เม* อเตร�ยมภาพตามทำ�าจร�ง ๆ จะใช�ก� ภาพก�ได�ค�ะ เม* อเตร�ยมภาพตามด�านบนแล�ว เราจะต�องเตร�ยมเลเยอร3ทำ$%งหมด ด�านบนแล�ว เราจะต�องเตร�ยมเลเยอร3ทำ$%งหมด 5 5 เลเยอร3 โดยเลเยอร3ล�างส)ดเปิ.นพ*%นส�ข้าว ส�วนเลเยอร3 โดยเลเยอร3ล�างส)ดเปิ.นพ*%นส�ข้าว ส�วนเลเยอร3ทำ� เหล*ออ�ก เลเยอร3ทำ� เหล*ออ�ก 4 4 เลเยอร3 เปิ.นเลเยอร3ข้องเลเยอร3 เปิ.นเลเยอร3ข้องภาพทำ� เราเตร�ยมไว�ค�ะ จากน$%นเราจะมาเร� มทำ�า ภาพทำ� เราเตร�ยมไว�ค�ะ จากน$%นเราจะมาเร� มทำ�า Animation Animation โดยการคล�กทำ� ต�าแหน�งด�านล�างโดยการคล�กทำ� ต�าแหน�งด�านล�างส)ดข้อง ส)ดข้อง Tool box Tool box ตามภาพด�านล�าง เพ* อเปิ�ดใช�ตามภาพด�านล�าง เพ* อเปิ�ดใช�งานโปิรแกรม งานโปิรแกรม ImageReady ImageReady ซึ่- งเปิ.นโปิรแกรมซึ่- งเปิ.นโปิรแกรมส�าหร$บทำ�าภาพส�าหร$บทำ�าภาพ Animation Animation

จากน$%นเม* อโปิรแกรม จากน$%นเม* อโปิรแกรม ImageReady ImageReady ถู0กเปิ�ดข้-%นมาแล�ว ถู0กเปิ�ดข้-%นมาแล�ว พาเล�ตทำ� เราจ�าเปิ.นต�องใช�งาน ก�ค*อ พาเล�ตทำ� เราจ�าเปิ.นต�องใช�งาน ก�ค*อ Layer Layer และ และ Animation Animation หากไม�ม�ปิรากฏอย0� ก�ให�เร�ยกใช�งานพาเล�ตทำ� หากไม�ม�ปิรากฏอย0� ก�ให�เร�ยกใช�งานพาเล�ตทำ� ต�องการโดย ใช�ค�าส$ ง ต�องการโดย ใช�ค�าส$ ง Window Window แล�วคล�กเล*อกพาเล�ตทำ� แล�วคล�กเล*อกพาเล�ตทำ� ต�องการ ต�องการ ((ข้$%นตอนน�%ก�เหม*อนก$บการทำ�าภาพ ข้$%นตอนน�%ก�เหม*อนก$บการทำ�าภาพ Animation Animation แบบแรกแบบแรก))

เม* อเตร�ยมเคร* องม*อต�าง ๆ เร�ยบร�อยแล�ว ก�มาถู-งข้$%นตอนเม* อเตร�ยมเคร* องม*อต�าง ๆ เร�ยบร�อยแล�ว ก�มาถู-งข้$%นตอนการทำ�าการทำ�า Animation Animation ละค�ะ โดยข้$%นตอนแรกให�เราสร�างละค�ะ โดยข้$%นตอนแรกให�เราสร�างเฟรม เฟรม 2 2 เฟรมในพาเล�ต เฟรมในพาเล�ต Animation Animation สร�างเฟรมเพ� มโดยสร�างเฟรมเพ� มโดยการกดทำ� ต�าแหน�ง การกดทำ� ต�าแหน�ง A A และทำ�าตามข้-%นตอนด$งน�%ค�ะและทำ�าตามข้-%นตอนด$งน�%ค�ะ

ขึ้��นตอนที่� ขึ้��นตอนที่� 11 ให�คล�กทำ� เฟรมแรกใน พาเล�ต ให�คล�กทำ� เฟรมแรกใน พาเล�ต Animation Animation จากน$%นจ$ดการทำ� พาเล�ต จากน$%นจ$ดการทำ� พาเล�ต Layer Layer โดยเอาร0ปิตาออกทำ� เลเยอร3 โดยเอาร0ปิตาออกทำ� เลเยอร3 2-5 2-5 โดยการคล�กทำ� ร0ปิตาด�านหน�าแต�ละเลเยอร3 ให�เลเยอร3โดยการคล�กทำ� ร0ปิตาด�านหน�าแต�ละเลเยอร3 ให�เลเยอร3แรกเทำ�าน$%นทำ� ม�ตา ซึ่-งทำ� ทำ�าภาพในเลเยอร3ทำ� แรกเทำ�าน$%นทำ� ม�ตา ซึ่-งทำ� ทำ�าภาพในเลเยอร3ทำ� 1 1 เทำ�าน$%นทำ� จะเทำ�าน$%นทำ� จะแสดงผลทำ� เฟรมทำ� หน- งแสดงผลทำ� เฟรมทำ� หน- ง

ขึ้��นตอนที่� ขึ้��นตอนที่� 22 คล�กทำ� เฟรมทำ� คล�กทำ� เฟรมทำ� 2 2 จากน$%นจ$ดการทำ� พาเล�ตจากน$%นจ$ดการทำ� พาเล�ต Layer Layer โดยเอาร0ปิตาออกทำ� เลเยอร3 โดยเอาร0ปิตาออกทำ� เลเยอร3 3-5 3-5 ออก ซึ่- งเฟรมน�%ออก ซึ่- งเฟรมน�%จะแสดงผลเปิ.นภาพข้องเลเยอร3ทำ� จะแสดงผลเปิ.นภาพข้องเลเยอร3ทำ� 2 (2 (ตามภาพด�านล�างตามภาพด�านล�าง))

ขึ้��นตอนที่� ขึ้��นตอนที่� 33 เม* อเตร�ยมเฟรมได�ตามภาพเม* อเตร�ยมเฟรมได�ตามภาพด�านบนแล�ว ให�คล�กเล*อกเฟรมทำ� ด�านบนแล�ว ให�คล�กเล*อกเฟรมทำ� 2 2 จากน$%นจากน$%นให�คล�กทำ� ต�าแหน�ง ให�คล�กทำ� ต�าแหน�ง B B เพ* อเร�ยกใช�ไดอะล�อก เพ* อเร�ยกใช�ไดอะล�อก Tween Tween เม* อปิรากฏไดอะล�อก เม* อปิรากฏไดอะล�อก Tween Tween แล�ว แล�ว ให�ก�าหนดค�าต�าง ๆ ตามภาพด�านล�างจากน$%นให�ก�าหนดค�าต�าง ๆ ตามภาพด�านล�างจากน$%นคล�กปิ)6ม คล�กปิ)6ม OK OK เม* อทำ�าข้-%นตอนน�%แล�วจะส$งเกตเม* อทำ�าข้-%นตอนน�%แล�วจะส$งเกตเห�นจ�านวนเฟรมเพ� มข้-%นอ�ก เห�นจ�านวนเฟรมเพ� มข้-%นอ�ก 5 5 เฟรม อย0�เฟรม อย0�ระหว�างเฟรมทำ� เราได�เตร�ยมไว�ในข้$%นตอนก�อนระหว�างเฟรมทำ� เราได�เตร�ยมไว�ในข้$%นตอนก�อนหน�าน�%หน�าน�%

ข้$ %นตอนทำ� ผ�านมาจะทำ�าให�เราได�ภาพ ข้$%นตอนทำ� ผ�านมาจะทำ�าให�เราได�ภาพ Annimation Annimation แบบแบบค�อย ๆ เฟดให�เห�นร0ปิค�ะ ลอง ค�อย ๆ เฟดให�เห�นร0ปิค�ะ ลอง Play Play ภาพ ภาพ Animation Animation ด0ค�ะ โดยคล�กทำ� เคร* องหมาย ด0ค�ะ โดยคล�กทำ� เคร* องหมาย Play Play ทำ� บร�เวณด�านล�างทำ� บร�เวณด�านล�างข้องพาเล�ต ข้องพาเล�ต Animation Animation ก�จะเห�นผลล$พธี3ว�าภาพค�อย ก�จะเห�นผลล$พธี3ว�าภาพค�อย ๆ ช$ดเจนข้-%นๆ ช$ดเจนข้-%น

ทำ� ทำ�าผ�านมาน$%นเพ� มได�ช�อตเด�ยว ถู�าจะทำ�าแบบหลาย ๆ ช�อทำ� ทำ�าผ�านมาน$%นเพ� มได�ช�อตเด�ยว ถู�าจะทำ�าแบบหลาย ๆ ช�อตก�ได�ค�ะ โดยการสร�างเฟรมเพ� มอ�กหน- งเฟรมทำ� ต�าแหน�งตก�ได�ค�ะ โดยการสร�างเฟรมเพ� มอ�กหน- งเฟรมทำ� ต�าแหน�งส)ดทำ�ายข้องเฟรม แล�วเล*อกเลเยอร3ทำ� ต�องการแสดงผล ส)ดทำ�ายข้องเฟรม แล�วเล*อกเลเยอร3ทำ� ต�องการแสดงผล จากน$%นก�คล�กทำ� เฟรมส)ดทำ�ายแล�วใส� จากน$%นก�คล�กทำ� เฟรมส)ดทำ�ายแล�วใส� Tween Tween แบบข้$%นแบบข้$%นตอนก�อนหน�าน�% ก�จะทำ�าให�ได�อ�กช�อตหน- งค�ะ ถู�าต�องการตอนก�อนหน�าน�% ก�จะทำ�าให�ได�อ�กช�อตหน- งค�ะ ถู�าต�องการหลาย ๆ ช�อตก�ทำ�าแบบน�%ไปิเร* อย ๆ จนครบทำ)กเลเยอร3ค�ะหลาย ๆ ช�อตก�ทำ�าแบบน�%ไปิเร* อย ๆ จนครบทำ)กเลเยอร3ค�ะ

การทำ�าภาพแบบน�%ถู�าหากต�องการให�สม0ทำสมจร�ง ก�ต�องใช�จ�านวนเฟรมให�เยอะข้-%นค�ะ โดยในข้$%นตอนการทำ�า Tween ก�อาจจะเพ� มเฟรมจากเด�ม 5 เปิ.นจ�านวนทำ� เยอะข้-%นค�ะ การแสดงภาพก�จะช�าลงและด0สม0ทำมากย� งข้-%นค�ะ แต�ก�ไม�ควรจะม�จ�านวนเฟรมเยอะเก�นไปิ เพราะเม* อข้นาดเฟรมเพ� มข้-%น ข้นาดข้องไฟล3ก�จะเพ� มมากข้-%นเช�นก$นค�ะ ในทำ� น�%ก�าหนด Tween ให�เพ� มเฟรมเปิ.น 5 เพ* อให�ส$งเกตจ�านวนเฟรมในพาเล�ต Animation ได�ง�ายข้-%นค�ะ ...ลองทำดลองปิร$บเปิล� ยนด0เองนะค�ะ ...

ข้$%นตอนส)ดทำ�ายหากต�องการน�าเฟรมไปิใช� ก�ให�บ$นทำ-กภาพ Animation ซึ่- งทำ�าได�โดยการใช�ค�าส$ ง File --> Save Optimized As... จากน$%นเม* อม�ไดอะล�อกบ�อกปิรากฏข้-%น ก�ให�เราต$%งช* อไฟล3ค�ะ และทำ� ส�าค$ญส$ งเกตทำ� Save as type ให�เซึ่ฟเปิ.นสก)ล .gif เทำ�าน$%นค�ะ ภาพทำ� เราเซึ่ฟไปิจ-งจะแสดงผลการเล�นภาพเปิ.นแบบ Animation


บที่ความน��เป็�นการที่�าภาพ Animation อ�กร�ป็แบบหน�ง ที่�ใช้�หลั�กการในการเลั!อนภาพ (Move) จากต�าแหน#งหน�งไป็ยั�งอ�กต�าแหน#งหน�ง แลั�วก&ที่�าได้�ไม#ยัากค#ะ

ช�วงน�%ส�าหร$บคนทำ�าเว�บไซึ่ต3แล�วก�ม�ข้-%น ช�วงน�%ส�าหร$บคนทำ�าเว�บไซึ่ต3แล�วก�ม�ข้-%น Event Event ลอยกระทำง ว$นก�อนลอยกระทำง ว$นก�อน Webmaster Webmaster ก�ได�ร$บก�ได�ร$บมอบหมายงาน มอบหมายงาน ((จากทำ� ทำ�างานจากทำ� ทำ�างาน ) ) ให�ทำ�า ให�ทำ�า Baner Baner Animation Animation ส�าหร$บข้-%นต�อนร$บก�จกรรม ลอยส�าหร$บข้-%นต�อนร$บก�จกรรม ลอยกระทำงกระทำง

เลยได�ไอเด�ยว�าน�าจะเอาเทำคน�คการทำ�าภาพเลยได�ไอเด�ยว�าน�าจะเอาเทำคน�คการทำ�าภาพ Animation (Animation (ตอนทำ� ตอนทำ� 3) 3) ทำ� ได�ค�างเพ* อน ๆ ไว�ซึ่ะทำ� ได�ค�างเพ* อน ๆ ไว�ซึ่ะนานมาฝาก ๆ เพ* อน ๆ ซึ่ะทำ�นานมาฝาก ๆ เพ* อน ๆ ซึ่ะทำ� ((ได�ฤกษ์3งามยามด�ได�ฤกษ์3งามยามด� ) )และเพ* อให�เข้�าก$บช�วงน�%เลยทำ�าออกมาเปิ.น และเพ* อให�เข้�าก$บช�วงน�%เลยทำ�าออกมาเปิ.น Animation Animation ส�าหร$บงานลอยกระทำง ส�าหร$บงานลอยกระทำง ......เอ�า เราเอ�า เรามาเร� มก$นได�เลยค�ะมาเร� มก$นได�เลยค�ะ

ขึ้��นตอนที่� 1 อยั#างแรกเลัยัก&ค!อ การเตร�ยัมภาพ ในแต#ลัะ Layer โด้ยัตามภาพที่� 1 ที่�ม�การเตร�ยัมไว�ก&ค!อ- Layer ขึ้องภาพ กระที่ง- Layer ขึ้องภาพพ!�นหลั�งเป็�น ที่�องยัามค�าค!นแลัะด้วงจ�นที่ร*- Layer ขึ้องภาพ น��า (ที่�ด้�ไม#เหม!อนน��าเที่#าไหร# ห�วไม#ศิ,ลัป็ต�องขึ้อโที่ษด้�วยัค#ะ)- Layer ขึ้องภาพ เอฟเฟคภาพแสงไฟ ระยั,บระยั�บ ม�ป็ระกายั (อ�นน��ก&ที่�าออกมาไม#ค#อยัได้�เร!องเที่#าไหร# ถื!อซะว#าเป็�นไอเด้�ยัก&แลั�วก�นนะค#ะ)

เม!อเตร�ยัมภาพได้�หมด้แลั�ว ก&ส#งภาพไป็ยั�งโป็รแกรม โด้ยัคลั,กที่�ด้�านลั#างขึ้อง Tool box ที่�เป็�นร�ป็ขึ้อง ImageReady

ข้$%นตอนต�อมาให�เราสร�างเฟรม 2 เฟรมในพาเล�ต Animation สร�างเฟรมเพ� มโดยการกดทำ� ต�าแหน�ง 1 จากน$%นก�าหนดให�เฟรมแรกภาพกระทำงอย0�ข้วาม*อ และเฟรมทำ� 2 ให�เล* อน Layer กระทำงให�กระทำรงอย0�ซึ่�ายม*อ (ด$งภาพทำ� 2)

จากน$%นให�คล�กทำ� เฟรมทำ� 2 และกดทำ� ต�าแหน�งหมายเลข้ 2 เพ* อเปิ�ดไดอะล�อก Tween และก�าหนดค�าต�าง ๆ ตามภาพด�านล�าง จากน$%นคล�ก OK

มาถู-งข้$%นน�%หากไม�ม�อะไรผ�ดพลาดเม* อคล�กทำ� ปิ)6ม Play ก�จะแสดงภาพกระทำงเล* อนจากทำางข้วามาทำางด�านซึ่�าย ซึ่- งน$%นหมายความว�าเพ* อได�ทำ�าเทำคน�คน�%ส�าเร�จแล�วค�ะ

และเพ* อความสมจร�ง ๆ จร�ง ๆ แล�วเราควรเล* อนภาพทำ�ละน�ดแล�วใส� Tween ทำ�ละช�อต ๆ เพ* อน ๆ ลองปิระบด0นะค�ะ ซึ่- งจะทำ�าให�ด0เล* อนสมจร�งข้-%น

ภาพส)ดทำ�าย Webmaster ปิร$บให�ม$นค�อยเล* อนทำ� ละน�ด จากน$%นเม* อเราทำ�าครบทำ)กช�อตแล�ว เราก�มาปิ�ด - เปิ�ด Layer ทำ� เปิ.นแสงไฟเพ* อให�ม$นด0เหม*อนม�การกระพร�บแสงไฟค�ะ

Education

การทำภาพ Animation