Nuchun's Atelier

บล็อกรีวิวเครื่องเขียน l สีมาร์คเกอร์ l อุปกรณ์วาดรูป พร้อมวิธีทำงานประดิษฐ์สนุกๆ ที่ทำได้ที่บ้าน

[Interactive CD] ตอนที่ 3 : เล่นกับปุ่มใน Adobe Animate

วันนี้เราจะมาทำปุ่มรูปแบบต่างๆ ใน Adobe Animate ค่ะ ทั้งลิงค์เข้าเว็บไซต์ ปุ่มปิด ปุ่มข้าม Scene วันนี้จะรวมมิตรสารพัดปุ่มมาให้ทำกันค่ะ

การทำงานกับปุ่ม

ปุ่มก็คือ ทุกสิ่งทุกอย่างที่เมื่อกดลงไปแล้ว มีคำสั่งเกิดขึ้น เช่น กดแล้วหยุด กดแล้วปิด กดแล้วเปิดเว็บไซต์ และอื่นๆ สิ่งเหล่านี้จะเรียกว่าปุ่มค่ะ เราสามารถสร้างปุ่มได้หลายวิธี เช่น พิมพ์ข้อความลงไป (แต่ภาษาไทย อาจมีปัญหาเรื่องสระลอยหรือสระจมนิดนึงนะ) ก๊อปข้อความที่ Create Outline แล้วจากใน Illustrator ก็ได้ หรือวาดสี่เหลี่ยมแล้วทำให้เป็นปุ่ม ดูวิธีการต่างๆ ได้จากคลิปด้านล่างค่ะ

การเปลี่ยนสีปุ่มเมื่อทำสิ่งต่างๆ กับปุ่ม

  1. คงจะเคยเห็นกันเนอะ ที่พอเวลาเอาเมาส์ไปอยู่บนปุ่มเป็นสีหนึ่ง กดลงไปเป็นอีกสีหนึ่ง ใน Adobe Animate เราทำแบบนี้ได้เหมือนกันค่ะ
    .
    .
    ดับเบิลคลิกที่ปุ่ม ตรง Timeline จะเปลี่ยนเป็นสี่ช่องใหญ่
    Up : เวลาปุ่มอยู่นิ่งๆ ปกติ
    Over : เวลาเอาเมาส์มาชี้ที่ปุ่ม
    Down : เวลากดเมาส์ลงไป
    Hit : กำหนดพื้นที่ที่จะให้เมาส์คลิกลงไปได้
    .
  2. .
    คลิกขวาที่ช่อง แล้วคลิกขวา Insert Keyframe
    .

  3. .
    เปลี่ยนสีปุ่มตามต้องการ ถ้าปุ่ม Group เอาไว้อยู่ ก็ดับเบิลคลิกเข้าไปที่ปุ่มอีกที แล้วเปลี่ยนสีในแถบ Properties ทางขวามือ ตรง Fill and Stroke ก็จะเปลี่ยนสีได้ค่ะ
    .
  4. .
    ปรับเสร็จย้อนกลับมาที่ Scene 1 ตรงมุมบนซ้ายมือ เพื่อกลับสู่ Timeline ตามปกติค่ะ (บน Timeline ของ Scene จะไม่เห็นความเปลี่ยนแปลงอะไรค่ะ ไม่ต้องตกใจ)

การกำหนดพื้นที่ที่กดปุ่มได้

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

  1. .
    ถ้าใช้วิธีสร้างปุ่มตามปกติ เวลากดตรงสีขาวๆ ระหว่างตัวอักษร ปุ่มจะไม่ทำงาน เพราะถือว่ากดไม่โดนปุ่ม เราจึงต้องกำหนดพื้นที่กดปุ่มให้ใหม่ค่ะ
    .
  2. .
    ดับเบิลคลิกที่ปุ่มที่เรา Convert to Symbol และตั้งชื่อให้เรียบร้อย จะเข้ามาที่ Timeline ของปุ่ม
    .
  3. .
    คลิกขวาที่ช่อง Hit แล้วกด Insert Keyframe นะคะ
    .

  4. .
    กดปุ่ม Rectangle Tools ตรง Toolbar ซ้ายมือค่ะ
    .

  5. .
    ลากให้คลุมพื้นที่ทั้งหมดที่เราต้องการให้กดปุ่มได้
    .
  6. .
    กดที่ Scene 1 ตรงแถบด้านบนเหนือภาพ เพื่อกลับมาที่ Timeline จะเห็นว่าเรามองไม่เห็นสี่เหลี่ยมสีน้ำเงินที่ลากคลุมไว้เลยค่ะ ตอนนี้ไม่ว่าจะเป็นพื้นที่ขาวๆ ข้างตัวอักษรหรือที่รูปธง ก็คลิกได้แล้วค่ะ

การลิงค์ปุ่มสู่เว็บไซต์

เมื่อทำภาพที่จะปรากฏบน Intro ต่างๆ เสร็จแล้ว ก็อาจจะมีบางจุดที่อยากทำลิงค์ ให้กดที่ภาพแล้วเข้าสู่เว็บไซต์ได้ ตรงนี้จะต้องใส่ Script ลงไปค่ะ

  1. .
    เริ่มจากการทำให้ Vector นี้เป็นปุ่มก่อนค่ะ ด้วยการคลิกขวาที่รูปหรือ Vector แล้วเลือก Convert to Symbol > เลือก Button แล้วกด OK
    .

  2. .
    ตรงแถบด้านขวามือ ให้ตั้งชื่อตรง Instance Name (ใช้ภาษาอังกฤษและไม่เว้นวรรค) ให้เรียบร้อย แล้วกด Enter ค่ะ
    .
  3. .
    คลิกขวาที่เฟรมเพื่อใส่ Action ค่ะ ถ้าเราเซ็ทไว้ให้รูปวิ่งไปวิ่งมา จันแนะนำให้ใส่ใน Frame สุดท้ายเลยค่ะ หลังจากทุกอย่างอยู่นิ่งกับที่แล้ว เราก็ทำให้ปุ่มลิงค์ไปที่เว็บไซต์
    .
  4. .
    ใส่ Script ตามนี้ค่ะ

    /* Click to Go to Web Page
    Clicking on the specified symbol instance loads the URL in a new browser window.
    
    Instructions:
    1. Replace http://www.adobe.com with the desired URL address.
       Keep the quotation marks ("").
    */
    
    ชื่อปุ่มที่เราตั้งไว้ใน Instance Name (ข้อ 2).addEventListener(MouseEvent.CLICK, ชื่อคำสั่ง);
    
    function ชื่อคำสั่ง(event:MouseEvent):void
    {
    	navigateToURL(new URLRequest("เว็บไซต์"), "_blank");
    }
    

    .
    ชื่อปุ่ม
    : Copy จาก Instance Name มาเลยค่ะ ใช้ภาษาอังกฤษและไม่เว้นวรรค
    ชื่อคำสั่ง : ตั้งขึ้นมาใหม่ โดยไม่ให้ซ้ำกับชื่อปุ่ม ชื่อคำสั่งจะต้องไม่ซ้ำกันเลย แม้เราจะสั่งให้ทำอะไรเหมือนๆ กันทุกอย่าง ก็ห้ามซ้ำค่ะ ไม่งั้นจะ Error
    ชื่อคำสั่งที่อยู่หลังคำว่า Function : ชื่อเดียวกับชื่อคำสั่งข้างบน
    เว็บไซต์ : ให้ใส่เว็บไซต์ อย่าลืมใส่ http://www. ลงไปข้างหน้าเว็บไซต์ด้วยนะ

การลิงค์ปุ่มสู่ Scene อื่นๆ

วิธีนี้ หลักๆ เลยคือการสร้างปุ่มขึ้นมา เพื่อนำไปสู่ Scene อื่นๆ ค่ะ อย่างเช่น ปุ่ม Skip Intro หรือปุ่มที่นำไปสู่สารบัญภาษาไทยหรือสารบัญภาษาอังกฤษก็จะใช้วิธีนี้

    1. .
      ไปที่ Frame สุดท้ายของปุ่มที่เราต้องการจะทำลิงค์ คลิกขวา > Actions เพื่อใส่ Script ค่ะ
    2. import flash.events.MouseEvent;
      
      ชื่อปุ่ม.addEventListener(MouseEvent.CLICK, ชื่อคำสั่ง);
      function ชื่อคำสั่ง(event:MouseEvent):void
      {
      gotoAndStop(1,"ชื่อ scene");
      }

.
ชื่อปุ่ม :
ก็คือ Instance Name ที่เรากำหนดไว้
ชื่อคำสั่ง : ตั้งชื่อคำสั่งอะไรก็ได้ เป็นชื่อที่ไม่ซ้ำกับที่เราเคยตั้ง
ชื่อคำสั่ง (หลัง Function) : ใช้ชื่อเดียวกัน
gotoAndStop : เป็นคำสั่งบอกว่ากดแล้วให้ไปหา Frame นี้ใน Scene นี้นะ ไปถึงแล้วหยุด ไม่ต้องเล่น แต่ถ้ามีอะไรจะให้เล่น (เช่นเป็นภาพเคลื่อนไหว) ให้พิมพ์ gotoAndPlay เข้าไปแทนค่ะ
เลข 1 หลัง gotoAndStop : คือเฟรมที่เราจะให้เริ่ม ถ้าให้เริ่มเฟรมที่ 50 ของ Scene 2 ก็จะใส่เลข 50 เป็นต้นค่ะ
ชื่อ Scene : ชื่อ Scene ที่เราต้องการลิงค์ให้ไปหาค่ะ

การลิงค์ปุ่มกับไฟล์ *.pdf


  1. .
    เราจะใส่ Script ให้กับปุ่มเหมือนเดิมนะคะ เลือกที่เฟรมสุดท้ายของเลเยอร์ปุ่ม คลิกขวา แล้วกด Actions
  2. ใส่ Script เข้าไปใน Action Panel ตามด้านล่างค่ะ
    import flash.events.MouseEvent;
    
    ชื่อปุ่ม.addEventListener(MouseEvent.CLICK, ชื่อคำสั่ง);
    function ชื่อคำสั่ง(event:MouseEvent):void
    {
        navigateToURL(new URLRequest("ไฟล์ pdf ที่ต้องการลิงค์ไปหา"), "_blank");
    }

    ไฟล์ pdf ที่ต้องการลิงค์ไปหาให้ใส่สถานที่ที่เก็บไฟล์ พร้อมชื่อไฟล์ pdf ค่ะ เช่น Content/THsplit/TH-39-41.pdf ตามตัวอย่างนี้คือให้วิ่งไปหาไฟล์ชื่อ TH-39-41.pdf ไฟล์ pdf นี้อยู่ในโฟลเดอร์ย่อยชื่อ THSplit และอยู่ในโฟลเดอร์ Content อีกที ตรงนี้ต้องพิมพ์สถานที่เก็บไฟล์ให้ถูกต้องค่ะ


    .
    ถ้ากลัวจะพิมพ์ผิด ก็ให้เข้าไปที่ Window Explorer เข้าไปในโฟลเดอร์ที่มีไฟล์ที่เราจะลิงค์อยู่ แล้วคลิกขวาตรงแถบด้านบน Copy Address as Text จะได้ที่เก็บไฟล์มายาวๆ แบบนี้ค่ะ N:\Bangkok Post\2018.xx Annual Report 2017\Annual Report 2016\Content\THsplit เราจะเอาแค่ส่วนหลังจากที่เราใช้เก็บไฟล์ Flash เท่านั้น ตามตัวอย่างจันเก็บไฟล์ Flash ตัวนี้ไว้ที่โฟลเดอร์ Annual Report 2016 ดังนั้นส่วนที่ต้องใช้ก็คือ โฟลเดอร์ย่อยอีก 2 โฟลเดอร์ พร้อมชื่อไฟล์ค่ะ ถ้าเกิดเราเก็บไฟล์ *.pdf ไว้ที่โฟลเดอร์เดียวกับที่เก็บไฟล์ Flash เลย ก็ใส่แค่ชื่อไฟล์อย่างเดียวพอค่ะ
    .


  3. .
    กรณีที่ต้องการระบุหน้า เช่น เปิด pdf ไฟล์นี้ หน้า 5 ก็ต้องเติมคำสั่ง #page=เลขหน้าเข้าไปค่ะ

    import flash.events.MouseEvent;
    
    ชื่อปุ่ม.addEventListener(MouseEvent.CLICK, ชื่อคำสั่ง);
    function ชื่อคำสั่ง(event:MouseEvent):void
    {
    navigateToURL(new URLRequest("ตำแหน่งไฟล์/ชื่อไฟล์.pdf#page=เลขหน้า"), "_blank");
    }

    .
    เลขหน้านั้น อย่าลืมว่าจะต้องเป็นเลขหน้าในไฟล์ ไม่ใช่เลขหน้าที่ปรากฏอยู่บนหมายเลขหน้านะคะ มีบ่อยๆ ที่เลขหน้าในไฟล์กับเลขหน้าจริงไม่ตรงกัน เพราะว่าไฟล์ทั้งหมดนั้นมีส่วนที่ไม่ได้นับเลขหน้ารวมอยู่ด้วย การรันหน้าจึงไม่ตรงกันค่ะ ลองเช็คด้วยการเปิดไฟล์ pdf ดูก่อนลิงค์นะคะ

  4. _blank ที่อยู่ด้านหลังสุดของคำสั่ง เขาเรียกว่า Target Attribute ค่ะ เป็นคำสั่งเพื่อระบุว่าจะให้เปิดยังไง ไปหน้าใหม่ เปิดในหน้าเดิม และอื่นๆ เราสามารถเปลี่ยนคำว่า _blank เป็นคำสั่งอื่นๆ ได้ ดังนี้ค่ะ
    _blank : เปิดในหน้าต่างหรือ Tab ใหม่
    _self : เปิดในเฟรมเดียวกันกับที่คลิกนี้เลย
    _parent : เปิดในหน้าเดิมทั้งหน้า
    _top :  เปิดในหน้าเดิมทั้งหน้า แต่เวลา back กลับมาจะกลับมาที่หน้าแรก
    ปล. อันนี้เป็นความเข้าใจในแบบลิงค์เว็บค่ะ ของ Flash จันอาจมีข้อแตกต่างจากนี้ แต่พื้นฐานน่าจะเหมือนกันนะ

การสร้างปุ่มปิดโปรแกรม

ใส่ Script ด้านล่าง ลงใน Action Panel ค่ะ

import flash.system.fscommand;

 function clickHandler11(event:MouseEvent):void {
 fscommand("quit");
 }

ชื่อปุ่ม.addEventListener(MouseEvent.MOUSE_DOWN, clickHandler);

นี่เป็นวิธีทำปุ่มทั้งหมดในการทำ Interactive CD ในโปรเจ็คต์นี้ค่ะ

*********************
ทั้งหมดเป็นการเขียนและวาดโดยจันเอง
ใครจะก๊อปไปไว้ไหน เครดิต www.nuchun.com ด้วยนะคะ
ขอบคุณค่ะ