เริ่มเขียน App ตอน: สร้าง Splash Screen

ส่วนสำคัญรองลงมาจากไอคอนของแอพคือหน้าแรกของแอพ ที่เราเรียกว่า Splash Screen ซึ่งวัตถุประสงค์ก็มีหลากหลาย ตั้งแต่ใช้ดึงดูดสายตาพร้อมกับการโหลดข้อมูลเพื่อเตรียมการแสดงผลหน้าแรก (ของจริง)  หรือเพื่อสร้างเอกลักษ์ของแอพโดยการเพิ่มโลโก้ของบริษัท หรือของนักพัฒนาไปด้วย หรือจะเพื่อเอาไว้คั่นหน้าโฆษณาแบบ Popup เพื่อให้เป็นไปตามกฏของ AdMob เป็นต้น

ทางเลือกในการสร้างหน้า Splash Screen

  1. การใช้ภาพ Graphics โดยอาจจะตกแต่งผ่าน Photoshop ซึ่งต้องทำไว้หลายขนาด หากต้องการให้รองรับอุปกรณ์ที่มีขนาดหน้าจอแตกต่างกัน เหมาะสำหรับใช้แสดง โลโก้บริษัท หรือกรณีที่ไม่ได้มีการเปลี่ยนแปลงบ่อยๆ เช่นเปลี่ยนตามช่วงเทศกาล หรือช่วงจัดโปรโมชัน
  2. ใช้ Template ซึ่งเดียวนี้ก็มีให้เลือกเยอะ แถมสวยด้วย ที่สำคัญส่วนใหญ่จะช่วยจัดการเรื่องบันทึกแบบหลายขนาดเพื่อรองรับหลายขนาดหน้าจอได้ด้วย
  3. ใช้ผ่านตัวโปรแกรมช่วยสร้าง Splash Screen เช่นของ ionic framework จะมีคำสั่ง ionic resource … ในการสร้าง Splash Screen หรือ App Icon จากไฟล์เพียงไฟล์เดียว แบบนี้ก็สะดวกครับหลังๆ ผมก็ชอบวิธีนี้
  4. การสร้างหน้า Splash Screen ด้วยโปรแกรม ภาพพื้นหลัง และการฝังฟอนต์ เหมาะสำหรับกรณีที่ต้องการให้มีการเปลี่ยนแปลงบ่อยๆ และทำครั้งเดียวให้รองรับหลายขนาดหน้าจอ ส่วนใหญ่จะใช้ภาพ wall paper ร่วมกับการเขียน CSS อีกนิดหน่อย

ตัวอย่างงานออกแบบหน้า Splash Screen เราสามารถค้นหาพวก Mobile UX Patterns เพื่อดูแนวที่เราชอบก่อนก็ได้ครับตัวอย่างเช่นท่ http://www.mobile-patterns.com/  แต่การออกแบบควรให้เข้ากับแอพของเราด้วย

splash03

การสร้าง Custom Splash Screen ด้วย CSS3

  1. สร้างโครงของ HTML ก่อน ตัวอย่างนี้เราให้มี 2 หน้าคือหน้า Splash กับหน้า main
    <html>
     <head>
     <title>TODO supply a title</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="css/themes/default/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
     <link href="app/app.css" rel="stylesheet" type="text/css"/>
    
     <script src="js/jquery.min.js" type="text/javascript"></script>
     <script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
     <script src="app/app.js" type="text/javascript"></script>
     </head>
     <body>
     
     <div id="splash-screen" data-role="page" >
        <div id="ct-splash" data-role="content">
           <div id="filter-splash"></div>
           <div id="bg-img"><img src=""/></div>
           <h1 id="txt-splash">My App</h1>
        </div>
     </div>
     
     <div id="main" data-role="page" >
       <div data-role="header">
         <h1>My First App</h1>
       </div>
       <div id="main-content" data-role="content">
         <h1>Main Page</h1>
       </div>
       <div data-role="footer" data-position="fixed">
         <h1>footer</h1>
       </div>
      </div>
     </body>
    </html>
  2. เริ่มสร้าง CSS ในการควบคุมการแสดงผลตามต้องการ เทคนิคที่นิยมใช้คือการใช้ background-image, background-color แบบ rgba(…), opacity, border-radius, box-shadow และ text-shadow อาจจะมีการใช้พวก transition, transformation และ animation ได้ตามความเหมาะสม อันนี้ตัวอย่าง
    @import "fonts/thsarabunnew.css";
    
    html,body{
     height: 100%;
     /*กำหนดฟอนต์เป็น THSarabunNew*/ 
     font-family: 'THSarabunNew';
    }
    
    #ct-splash{
     margin: 0;
     padding: 0;
     /*ตัดรูปของ bg-img กรณีที่เกินขอบ*/
     overflow: hidden;
    }
    #bg-img{
     position: fixed;
     /*ย้ายจุดศูนย์กลางของรูปตามต้องการ*/
     left: -20%;
     top: -20%;
     height:150%;
     width: 150%;
     z-index: 1;
    
    }
    #bg-img img{
     width: 100%;
     height: 100%;
     
    }
    #filter-splash{
     position:fixed;
     /*ใส่ filter ไล่เฉดสีขาวจากบนลงล่าง*/
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
     /*เลเยอร์ระดับที่ 2 รองจาก text-splash*/
     z-index: 2;
     top:0;
     left: 0;
     width:100%;
     height: 100%;
    }
    
    #txt-splash{
     position: absolute;
     display: block;
     z-index: 3;
     
     top:30%;
     width:90%;
     margin-left:5%;
     padding:0.4em 0;
     /*กำหนดกรอบมุมมน*/
     border-radius: 30px;
     
     font-size: 1.5em;
     text-align: center;
     background-color: rgba(0,0,0,0.3);
     color: white; 
    }
    
    /*ปรับขนาด font กรณีที่หน้าจอใหญ่กว่า 400px : iphone 6 plus, nexus 6-7*/
    @media screen and (min-width:400px){
     #txt-splash{
     font-size: 2em;
     }
    }
    
    /*ปรับขนาด font กรณีที่หน้าจอใหญ่กว่า 700px : ipad, ipad mini, nexus 10 */
    @media screen and (min-width:700px){
     #txt-splash{
     font-size: 3em;
     }
    }
  3. การกำหนดการเปลี่ยนหน้าโดยใช้การหน่วงเวลาด้วย window.setTimeout(…) โดยมากจะหน่วงไว้ประมาณ 5-10 วินาที และ้วจึงเปลี่ยนหน้า และอาจทำ page transition ด้วยเพื่อความลื่นไหล
    var splash_delay=5; //sec
    
    function gotoMain() {
     $.mobile.changePage("#main", {"transition": "flip"});
    }
    
    //รูปที่นำมาใช้เป็นพื้นหลัง
    var img1= new Image(); img1.src="images/sp01.png";
    var img2= new Image(); img2.src="images/sp02.jpg";
    
    // Preload รูปเพื่อความเร็วในการแสดงผล
    var imgs=[img1,img2];
    var idx=0;
    
    function setImage(){
     $("#bg-img img:first").attr("src",imgs[0].src);
    }
    function init() {
     setImage();
     $("#splash-screen").on("tap", gotoMain);
     //กำหนดให้เปลี่ยนหน้าภายใน splash_delay วินาที (5 วิ)
     window.setTimeout(gotoMain,splash_delay*1000);
    }
    //เรียก init() เมื่อเอกสารโหลดเสร็จ
    $(init);
    
    

ผลลัพธ์จากการจัดหน้า Splash Screen

splash01

 

ลองดูเล่นๆ : ลองกำหนดให้มีการเปลี่ยนรูปทุกๆ 4 วินาที กรณีที่ไม่มีการกดเพื่อเข้าโปรแกรม (เหมาะสำหรับไว้เสนอดปรโมชันหลายๆ หน้า)

var img1= new Image(); img1.src="images/sp01.png";
var img2= new Image(); img2.src="images/sp02.jpg";

var imgs=[img1,img2];
var idx=0;
function setImage(){
 //เล่น animation นิดหน่อย
 $("#bg-img").animate({ opacity: 0}, 1000);
 //รูปเปลี่ยนตามค่า idx%2 คือ 0,1 สลับกัน สามารถเพิมรูปตามต้องการ
 $("#bg-img img:first").attr("src",imgs[idx%2].src);
 $("#bg-img").animate({ opacity: 1}, 500);
 idx++;
}
function init() {
 setImage();
 $("#splash-screen").on("tap", gotoMain);
 window.setInterval(setImage,4*1000);
}

$(init);


ไฟล์ตัวอย่างของตอนนี้ครับ: MySplashScreen.zip

AjBee.Me
: เป็นไงครับไม่ยากใช่รึเปล่า อย่างที่บอกหน้านี้สำคัญมากๆ เหมือนตอนเราเจอสาวครั้งแรก ถ้าสร้างความประทับใจได้ โอกาสที่จะดึงให้เค้าอยู่กับเรานานๆ มันก็สูงขึ้น ลองเอาไปปรับใช้กันนะครับ ^_^

ติดตามข้อมูลผ่าน FanPage เข้าไปกด Like ที่: https://www.facebook.com/AjBeeMePage