Construct 2 : การสร้างเอฟเฟ็กต์ด้วย CSS style sheet

นี่เป็นวิธีที่ง่ายที่สุดในการใช้ CSS กับ Construct 2 ปัจจุบันมีเว็บไซต์มากมายที่จะสร้างรหัส CSS ให้คุณนำไปใช้ได้อย่างสะดวก เช่น cssportal.com

1. คัดลอกโค้ดลงใน Notepad หรือ text editor อื่นๆ แล้วบันทึกเป็นไฟล์ .css

2. แทนที่ “.bestbutton” ด้วย #myButton (ตั้งชื่ออะไรก็ได้ แต่ต้องนำหน้าด้วย #) ในไฟล์ “style.css”  จะมีลักษณะดังรูป:

  • โค้ดต้นฉบับที่ได้จาก cssportal.com

  • ไฟล์ style.css ที่แก้ไขแล้ว จะมีลักษณะดังนี้:
#myButton {
font-family: arial;
color: #F2F0FC !important;
font-size: 14px;
text-shadow: 1px 1px 0px #7CACDE;
box-shadow: 1px 1px 1px #BEE2F9;
padding: 10px 25px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid #3866A3;
background: #63B8EE;
background: linear-gradient(top, #63B8EE, #468CCF);
background: -ms-linear-gradient(top, #63B8EE, #468CCF);
background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF));
background: -moz-linear-gradient(top, #63B8EE, #468CCF);
}
#myButton:hover {
color: #14396A !important;
background: #468CCF;
background: linear-gradient(top, #468CCF, #63B8EE);
background: -ms-linear-gradient(top, #468CCF, #63B8EE);
background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE));
background: -moz-linear-gradient(top, #468CCF, #63B8EE);
}

3. เพิ่ม Button ลงบนโปรเจ็ค และที่คุณสมบัติของวัตถุในช่องรายละเอียด ID (optional) ให้ใส่ “myButton” (ชื่อที่ตั้งในไฟล์ .css ไม่ต้องใส่ # นำหน้า) ดังรูป

4. อัพโหลดไฟล์ style.css ไปยัง Construct 2 ดังรูป

 

5. เพิ่ม Text ลงบนโปรเจ็ค (ใช้สำหรับ set web font) ดังรูป

6. ใส่ Event > start of the layout และ Action > Text > set web font เพื่อโหลดไฟล์ style.css ในขณะเริ่มต้นโครงการ รายละเอียดดังรูป

7.  เมื่อสร้างเสร็จและ Run layout คุณควรจะเห็นปุ่มสีน้ำเงินไล่โทนสีดังรูป