Adobe Flash Adobe Flash CS3CS3

อ.ชนิ�ดา เรืองศิ�รื�วั�ฒนิกุ�ลสาขาวั�ชาเทคโนิโลยี�สารืสนิเทศิ

คณะวั�ทยีาศิาสตรื�และเทคโนิโลยี� มหาวั�ทยีาล�ยีรืาชภั�ฏอ�ตรืด�ตถ์�

บทท�% 10

หล�กุกุารืท&างานิของ Flash

ข�'นิตอนิท�% 1

นำ��เข้��ภ�พกร�ฟิ�กหร�อภ�พที่��สร��งข้��นำม�

ข�'นิตอนิท�% 2

แปลงส�วนำประกอบต่��ง ๆให�เป#นำ Symbol

ข�'นิตอนิท�% 3

ที่��ก�รสร��ง Animationโดยจะใส�เส�ยง หร�อ Script

ข�'นิตอนิท�% 4

Publish ออกม�เป#นำชิ้)�นำง�นำ

กุารืสรื(างภัาพกุรืาฟิ+กุภัาพ Raster

เป#นำภ�พที่��เก)ดจ�กเม*ดส�หร�อจ+ดส�ที่��เร�ยกว�� Pixel ม�เร�ยงก,นำจนำเป#นำภ�พ

คว�มสวยง�มข้��นำอย.�ก,บคว�มละเอ�ยดข้องเม*ดส� ถ้��ภ�พคมชิ้,ดม�ก ข้นำ�ดข้องไฟิล1ก*จะใหญ่�ต่�มไปด�วย

ภัาพ Vector ใชิ้�ก�รค��นำวณที่�งคณ)ต่ศ�สต่ร1 ไม�เก)ดป5ญ่ห�รอยแต่กหร�อรอยหย,กเม��อข้ย�ยภ�พ

Flash ใช(หล�กุกุารื Vector ในิกุารืสรื(างภัาพ

ควัามต(องกุารืรืะบบคอมพ�วัเตอรื� ควัามต(องกุารืรืะบบคอมพ�วัเตอรื� ควัามต(องกุารืรืะบบของโปรืแกุรืม Flash CS3เครื%องคอมพ�วัเตอรื�ท�%ม�หนิ.วัยีปรืะมวัลผลกุลาง

รืะด�บ Pentium 4,Core Duo 1 GHz ข0'นิไป

รืะบบปฏ�บ�ต�กุารื Windows XP ServicePack2 หรือ Windows Vista

หนิ.วัยีควัามจำ&า (RAM) อยี.างต&%า 512 MB (แนิะนิ&าให(ใช( 1 GB)

เนิ'อท�%ของฮารื�ดด�สกุ�อยี.างนิ(อยี 2.5 GB จำอภัาพส�ท�%ควัามละเอ�ยีด 1024 x 768 pixels (32 bit)

4

กุารืสรื(างไฟิล�ด(วัยีกุารืกุ&าหนิดรื4ปกุารืสรื(างไฟิล�ด(วัยีกุารืกุ&าหนิดรื4ปแบบเองแบบเอง

Flash Document ไฟิล�รื4ปแบบปกุต� ท�%ใช(สรื(างงานิแอนินิ�เมช�นิท�%วัไป

Flash Slide Presentation ไฟิล�งานิท�%เหมาะกุ�บกุารืสรื(างงานินิ&าเสนิอ

Flash Form Application ใช(สรื(างฟิอรื�มส&าหรื�บท&าเป5นิโปรืแกุรืมใช(งานิท�%วัไป

ActionScript File เป5นิหนิ(าต.างท�%ไวั(เข�ยีนิสครื�ปต�เพ�ยีงอยี.างเด�ยีวั

ActionScript Communication File เข�ยีนิไฟิล�เพ%อต�ดต.อกุ�บเช�รื�ฟิเวัอรื�

Flash JavaScript File เหมาะส&าหรื�บงานิเข�ยีนิสครื�ปต�ท�%ท&างานิรื.วัมกุ�บ JavaScript หรือ API

Flash Project เป5นิกุารืรืวัมกุล�.มงานิท�%สรื(างท�'งหมด ให(ออกุมาเป5นิ Project ไฟิล�

5

กุารืวัาดรื4ปซ้(อนิกุ�นิในิ กุารืวัาดรื4ปซ้(อนิกุ�นิในิ FlsahFlsah

ภัาพวัาดแบบปกุต�ท�%นิ&ามาซ้(อนิกุ�นิ    หล�งจำากุแยีกุภัาพออกุจำากุนิ�'นิ ภัาพท�%ถ์4กุซ้(อนิท�บจำะหายีไป

7

ไทมไลนิ� (Timeline )ไทมไลนิ� (Timeline ) หร�อเส�นำเวล� จะใชิ้�

ส��หร,บสร��งและก��หนำดร�ยละเอ�ยดข้องก�รเคล��อนำไหว โดยเอ�องค1ประกอบที่��จะเคล��อนำไหว (เร�เร�ยกองค1ประกอบต่��งๆ ในำชิ้)�นำง�ว��ออบเจ*กต่1หร�อว,ต่ถ้+ ) ม�จ,ดว�งต่�อก,นำละภ�พในำแต่�ละชิ้�วงเวล� (เร�ยกว��เฟิรม: Frame ) ที่��แสดงเป#นำภ�พเคล��อนำไหว โดยเร�จะก��หนำดเส�นำเวล�ให�เล�นำภ�พเคล��อนำไหวซ้ำ���ๆ หร�อเล�นำแล�วหย+ดก*ได�

รื4(จำ�กุ รื4(จำ�กุ TimelineTimeline และ และ FrameFrame

FrameTimeline

9

FrameFrame

Frame เป5นิส.วันิปรืะกุอบของ Timeline ปรืะกุอบด(วัยี Frame ท�%ต.อเนิ%องกุ�นิหลายี ๆ Frame เม%อม�กุารืแสดงภัาพเคล%อนิไหวัโปรืแกุรืมจำะนิ&าวั�ตถ์� (Instance) ท�%อยี4.บนิเวัท� (Stage) มาแสดงผลท�ละ Frame ในิส.วันิของควัามเรื9วัในิกุารืแสดงผลมากุนิ(อยีเพ�ยีงใดข0'นิอยี4.กุ�บกุารืกุ&าหนิดค�ณสมบ�ต� Movie Properties ท�% Frame Rate ม�หนิ.วัยีเป5นิ Frame per Second (fps) ปกุต�จำะใช(อยี4.ท�% 12 fps

10

ล�กุษณะกุารืท&างานิของ ล�กุษณะกุารืท&างานิของ Frame Frame ท�%ปรืากุฏท�%ปรืากุฏบนิบนิ Timeline Timeline

1 .ในิกุรืณ�ท�%ยี�งไม.ม�กุารืกุ&าหนิดใช(งานิ Frame บนิ Timeline จำะปรืากุฏช.องของแต.ละ Frame อยี.างช�ดเจำนิ โดยีม� Playhead เป5นิต�วัช�'อยี4.ท�%เฟิรืมท�%กุ&าล�งแสดงอยี4.บนิสเตจำ

2. เฟิรืมท�%ไม.ม�ออบเจำ9กุต� 3. เฟิรืมท�%ม�ออบเจำ9กุต� 4. ต&าแหนิ.งของเฟิรืมท�%สรื(างกุารืเคล%อนิไหวัไวั(จำะถ์4กุ

เรื�ยีกุวั.า ค�ยี�เฟิรืม (Keyframe )5. ค�ยี�เฟิรืมท�%ไม.ม�ออบเจำ9กุต� 6. ค�ยี�เฟิรืมท�%ม�ออบเจำ9กุต�

11

ซ้0%งหากุสรื(างเฟิรืมไวั(จำ&านิวันิมากุ เวัลาในิกุารืแสดงม4ฟิวั�%กุ9จำะมากุข0'นิ แต.หากุอ�ตรืาในิกุารืแสดงเฟิรืมส4ง กุ9จำะท&าให(เวัลาในิกุารืแสดงม4ฟิวั�%ส�'นิลง

ล�กุษณะกุารืท&างานิของ ล�กุษณะกุารืท&างานิของ Frame Frame ((ต.อต.อ)) Action frame ม�ส,ญ่ล,กษณ1เป#นำ

ร.ป a อย.�กล�ง Frame เป#นำต่��แหนำ�งที่��ม�ค��ส,�ง Action Script ประกอบอย.�ภ�ยในำ Frame นำ,�นำ

Motion-tween เฟิรมที่��สร��งภ�พ เคล��อนำไหวแบบเคล��อนำที่�� ม�ส,ญ่ล,กษณ1

เป#นำร.ปล.กศรส�ด��อย.�ระหว��งจ+ด 2 จ+ด บนำพ��นำส�ฟิ8�อ�อนำ

Shape-tweened เฟิรมที่��สร��งภ�พ เคล��อนำไหวแบบเปล��ยนำร.ปร��ง ม�

ส,ญ่ล,กษณ1เป#นำร.ปล.กศรส�ด�� อย.�ระหว��งจ+ด 2 จ+ด บนำพ��นำส�เข้�ยวอ�อนำ

เส(นิปรืะ เฟิรมที่��ไม�สมบ.รณ1หร�อม�ข้�อผิ)ด พล�ด เชิ้�นำ ค�ย1เฟิรมส)�นำส+ดถ้.กลบไป

12

Layer

กุารืท&างานิแบบ Layer เป5นิเหมอนิกุารืวัางแผ.นิใสซ้(อนิท�บกุ�นิเป5นิล&าด�บข�'นิข0'นิมาเรื%อยี ๆ

บรื�เวัณของ Layer ท�%ไม.ม�รื4ปจำะเห9นิทะล�ถ์0ง Layer ท�%อยี4.ข(างล.าง

ในิแต.ละ Layer จำะแยีกุกุารืท&างานิอยี.างช�ดเจำนิ ม�ค�ณสมบ�ต�ต.าง ๆ เป5นิของต�วัเอง และกุารืแกุ(ไขท�%เกุ�ดข0'นิในิแต.ละ Layer จำะไม.ส.งผลต.อ Layer อ%นิ ๆ

Symbol และ Instance Symbol ก�รนำ��ว,ต่ถ้+ที่��เป#นำภ�พกร�ฟิฟิ�ก ม�ก��หนำด

เป#นำต่�นำแบบเพ��อนำ��ไปใชิ้�เป#นำส�วนำประกอบในำชิ้)�นำง�นำ โดย symbol แบ�งได�เป#นำMovie ClipButtonGraphic

เร�ไม�ส�ม�รถ้นำ�� symbol ม�ใชิ้�บนำสเต่จได�โดยต่รง แต่�จะที่��ได�เพ�ยงส��เนำ�ข้อง symbol เร�ยกว�� Instance ม�ใชิ้� ซ้ำ��งหนำ��ง symbol ม�ได�หล�ย Instance

Instance ค�อ Symbol ที่��ถ้.กใชิ้�ง�นำอย.�บนำ Stage โดย Instance ส�ม�รถ้ปร,บค+ณสมบ,ต่)ต่��งๆ ได� เชิ้�นำ ส� ข้นำ�ด โดยไม�ม�ผิลกระที่บต่�อ symbol

กุารืปรื�บแต.ง กุารืปรื�บแต.ง InstanceInstanceสามารืถ์ปรื�บแต.ง Instance โดยีไม.กุรืะทบกุ�บ

Symbol ปร,บคว�มสว��ง คว�มเข้�ม ปร,บเปล��ยนำส� ปร,บคว�มโปร�งใส

ก�รใชิ้� Symbol ในำก�รสร��งง�นำม�ข้�อด�ค�อ ชิ้�วยค+มต่�นำแบบที่��ใชิ้�ในำชิ้)�นำง�นำได� โดยที่��ไม�จ��เป#นำต่�องสร��งภ�พนำ,�นำบ�อยๆ ส�ม�รถ้นำ�� instance ไปใชิ้�บนำสเต่จแที่นำได�ก��ภ�พก*ได� เนำ��องจ�ก Flash จะมองเห*นำเป#นำภ�พเด�ยว ที่��ให�ชิ้)�นำง�นำม�ข้นำ�ดเล*กลง ที่��ง�นำได�รวดเร*วกว��เด)ม

15

กุารืสรื(าง กุารืสรื(าง Symbol Symbol ปรืะเภัท ปรืะเภัท GraphicGraphic

สรื(าง Symbol ปรืะเภัท Graphic ใหม. ลองสร��ง Symbol ใหม� โดยก�รเล�อก Insert + New

Symbol จะส,งเกต่เห*นำเคร��องม�อ + ต่รงกล�งร.ป เม��อสร��งเสร*จแล�วลองนำ�� Symbol ม�ว�งไว�ในำสเต่จ จะ

เร�ยกว�� Instance แล�วกล,บไปแก�ไข้ Symbol เพ��อด.ก�รเปล��ยนำแปลงภ�ยในำส

เต่จสรื(าง Symbol ปรืะเภัท Graphic จำากุรื4ปท�%ม�อยี4.แล(วั

ส�ม�รถ้เล�อกว,ต่ถ้+ที่��ม�อย.�แล�วให�เป#นำ Symbol โดยก�รเล�อกว,ต่ถ้+ที่��ต่�องก�รจะเปล��ยนำ แล�วเล�อก Modify + Convert to Symbol

16

นิามสกุ�ลของ Flash*.fla (Flash Movie)

เป#นำไฟิล1ที่��ได�จ�กก�รสร��งชิ้)�นำง�นำในำ Flash ที่��ส�ม�รถ้นำ��ม�แก�ไข้เปล��ยนำแปลงได�

*.swf (Shockwave Flash) เป#นำไฟิล1ที่�� Flash สร��งข้��นำหล,งจ�กก�รแสดง

ผิลออกม� ส�ม�รถ้ด.ผิลก�รแสดงได�โดยไม�ต่�องเป�ด

โปรแกรม Flashในิกุารื Publish จำะม�กุารืสรื(างไฟิล� .html

เพ�%ม เพ%อเป5นิต�วัเรื�ยีกุใช(ไฟิล� *.swf ข0'นิมาให(ท&างานิ

แบบฝึ<กุห�ด1 .ก�รสร��งภ�พเคล��อนำไหวแบบ frame by frame

เป#นำอย��งไร พร�อมบอกข้�อด�และข้�อเส�ย ข้องก�รสร��งภ�พเคล��อนำไหวแบบ frame by frame

2. ก�รสร��งภ�พเคล��อนำไหวแบบ Tween เป#นำอย��งไร ม�ก��ประเภที่ อะไรบ��ง จงอธิ)บ�ย

3. Symbol ค�ออะไร ม�ก��แบบ จงอธิ)บ�ย4. Symbol ก,บ Instance แต่กต่��งก,นำอย��งไร5. Timeline ค�ออะไร และม�องค1ประกอบใดบ��ง6. จงบอกคว�มส�ม�รถ้ข้องโปรแกรม Adobe

Flash ม�ไม�ต่���กว�� 5 ข้�อ