เขียน Responsive web อย่างง่าย ประมาณ 15 นาที

เขียน Responsive web อย่างง่าย ประมาณ 15 นาที
1.สร้าง Layout ด้วย Div ก่อน 3 อัน
<div id=container>Hello World!
</div>
<div class=col-25 >Hello World!
</div>
<div class=col-75 >Hello World!
</div>

2.ใส่ css กำหนดค่า ให้ div ทั้ง 3 ตัว และ body ด้วย
body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px;
  font-size: 13px;
}

#container {
  background: #fff;
  padding: 20px;
  text-align: center;

}
.col-25 {
    background: #ff0;
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
    background: #f0f;
  float: left;
  width: 75%;
  margin-top: 6px;
}

div container คือเต็มจอ
col-25 คือ column ขนาด 25% ของจอ
col-75 คือ column ขนาด 75% ของจอ

จะได้หน้าเวบ แบบสัดส่วน 25:75 ใครอยากได้ 30:70 ก็เปลี่ยนเลขเอานะครับ

3.ใส่ event ให้ css ด้วยคำสั่ง @media screen ตามนี้

@media screen and (max-width: 600px) {
  .col-25, .col-75 {
    width: 100%;
    margin-top: 0;
  }

เมื่อหน้าจอถูกย่อให้น้อยกว่า 600px แล้ว div col-25 และ col-75 จะขยายร่างเป็น 100% เต็มจอมือถือ

เสร็จแล้วก็ไปหาโปรแกรม แปลง html เป็น apk ก็ได้ app android แว้ว

ง่ายมะ!!!!
ปล.อยากทำเป็นคลิปวิดิโอแต่ ไม่ค่อยมีเวลาอัดคลิป

รวมบทความ Workshop Flash Action Script 2.0 3.0 update content

action script 2.0

action script 2.0 ลากๆวางๆ drag and drop 

http://aoodi43.blogspot.com/2013/09/action-script-20-drag-and-drop.html

action script 2.0 บอลเด้งๆ

http://aoodi43.blogspot.com/2013/07/action-script-20.html

action script 2.0 กับ เกมปิงปอง

 http://aoodi43.blogspot.com/2013/07/action-script-20_22.html

action script 2.0 ทำ Web Gallory แบบง่ายๆ 

http://aoodi43.blogspot.com/2013/08/action-script-2-slide-show.html 

action script 2.0 สร้าง presentation slide show

 http://aoodi43.blogspot.com/2013/09/action-script-20-slide-show-presentation.html

action sctipt 2.0 เกมส์เก็บขยะ Junkman 

http://aoodi43.blogspot.com/2013/09/action-sctipt-20-junkman.html

action script 2.0 การเขียน function

http://aoodi43.blogspot.com/2013/09/action-script-20-function.html

action script 2.0 ทำ Quiz Game
http://aoodi43.blogspot.com/2015/05/action-script-20-quiz-game.html
actionscript 2.0 ทำระบบ Physic แบบเกม Mario
http://aoodi43.blogspot.com/2020/01/action-script-20-gravity-physic.html


action script 3.0

action script 3.0 กับ helloworld

http://aoodi43.blogspot.com/2013/07/action-script-30-helloworld.html

action script 3.0 การใช้ keyboard และ Hittest 

http://aoodi43.blogspot.com/2013/07/action-script-30-keyboard-hittest.html 

action script 3.0 ทำโปรแกรมคำนวณหาค่าร้อยละ

http://aoodi43.blogspot.com/2013/07/action-script-30.html 

[Action Script 2.0]สร้าง gravity ระบบ physic เพื่อต้นแบบ platform game แบบ mario

สร้าง Movie Clip มา 2 ตัว ตัวแรกตั้ง instance ว่า ground เป็นพื้น อีกตัวชื่อ sprite เป็นตัวละครของเรา

คลิ๊กขวาที่ movieclip sprite แล้วเลือก action

ฟังก์ชั่น onload เพื่อตั้งค่าเริ่มต้น


onClipEvent(load)
{
 gravity = 0; //แรงโน้มถ่วง
 jumping = false; //ตั้งค่าว่ายังไม่โดด
 jumpheight = 10; //ความสูงตอนกระโดด
}

ใน enterframe ใส่ code เพื่อจัดการแรงโน้มถ่วงดังนี้


onClipEvent(enterFrame)
{
if(!_root.ground.hitTest(_x, _y, true)) //ตัวละครเท้าไม่ติดพื้น
 {
  gravity++; //เกิดแรงโน้มถ่วง
  _y += gravity;//ค่าแกน y เริ่มเยอะขึ้น
 } else //เมื่อเท้าติดพื้นให้ตั้งค่าเป็น 0
 {
  jumping = false;
  gravity = 0;
 }
 //วนลูป set ค่า ตัวละคร อยู่ในตำแหน่ง บนพื้น (ค่าy-ความสูงตนเอง)
 while(_root.ground.hitTest(_x, _y - _height, true))
 {
  jumping = false;
  _y--;
 }
}

ตอนนี้ เราได้ระบบ physic สำหรับทำเกมต่างๆแล้ว
ต่อมาจะทำการเขียน code ส่วนควบคุมตัวละคร
ใส่ keydown เพื่อกระโดดลงไป

if(Key.isDown(Key.UP) && !jumping) // ใส่ เพื่อไม่ให้กด โดดซ้ำได้
 {
  gravity = -jumpheight;
  jumping = true;
 }

 ใส่ code เดินซ้ายขวา

if(Key.isDown(Key.RIGHT))
 {
  _x += 5;
 }

 if(Key.isDown(Key.LEFT))
 {
  _x -= 5;
 }

สรุป code ทั้งหมดด้านล่างนี้

----------------------------------------------------------

onClipEvent(load)
{
 gravity = 0;
 jumping = false;
 jumpheight = 15;
}

onClipEvent(enterFrame)
{
 if(Key.isDown(Key.RIGHT))
 {
  _x += 5;
 }

 if(Key.isDown(Key.LEFT))
 {
  _x -= 5;
 }

 if(Key.isDown(Key.UP) && !jumping)
 {
  gravity = -jumpheight;
  jumping = true;
 }

 if(!_root.ground.hitTest(_x, _y, true))
 {
  gravity++;
  _y += gravity;
 } else
 {
  jumping = false; 
  gravity = 0;
 }

 while(_root.ground.hitTest(_x, _y +_height , true))
 {
  jumping = false;
  _y--;
 }

}

HTML5 ตรวจสอบสี image

Workshop นี้เป็น workshop เชิงทดลองเพื่อตรวจหาค่า Image ของภาพ

สร้างภาพโดยเทสีแดงลงไป รหัส RGB #FF0000 ตั้งชื่อว่า color.jpg

สร้าง html เขียน code ตรวจสอบ ภาพ ใส่ใน body

 <img id="color" src="color.jpg">
  <canvas id="myCanvas">
    Your browser does not support the HTML5 canvas tag.
  </canvas>
  <script>
    document.getElementById("color").onload = function () {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("color");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);

alert(imgData.data[0] + " " + imgData.data[1] + " " + imgData.data[2] + " " + imgData.data[3]);

};
  </script>

 

alert ผลออกมา เป็น 254 0 0 255 คือ สีแดงนั่นเอง(เพี้ยนเล็กน้อย)

ลองดัดแปลงใช้งานด้าน image processing เอานะครับอาจจะวนลูปตรวจสอบสี

action script 2.0 ทำ Quiz Game

 

ออกแบบหน้าจอ ปุ่มสีเหลือง convert เป็น button

 

frame ที่ื 1 เขียน code ตั้งค่า _root.score=0 และ stop();

 

ปุ่มที่ ถูก ใส่ code ดังนี้ 

on (press){

    _root.score=_root.score+1;
    nextFrame();
}

 

ปุ่มที่ ไม่ถูกไม่ต้องใส่ คะแนน

 

สร้าง frame 2 โดยกด F6 ที่เฟรม

 

หน้าสุดท้ายใส่ dynamic text ตั้ง instant name และ var เป็น score

รวมบทความ flash action script

action script 2.0

action script 2.0 ลากๆวางๆ drag and drop 

http://aoodi43.blogspot.com/2013/09/action-script-20-drag-and-drop.html

action script 2.0 บอลเด้งๆ

http://aoodi43.blogspot.com/2013/07/action-script-20.html

action script 2.0 กับ เกมปิงปอง

 http://aoodi43.blogspot.com/2013/07/action-script-20_22.html

action script 2.0 ทำ Web Gallory แบบง่ายๆ 

http://aoodi43.blogspot.com/2013/08/action-script-2-slide-show.html 

action script 2.0 สร้าง presentation slide show

 http://aoodi43.blogspot.com/2013/09/action-script-20-slide-show-presentation.html

action sctipt 2.0 เกมส์เก็บขยะ Junkman 

http://aoodi43.blogspot.com/2013/09/action-sctipt-20-junkman.html

action script 2.0 การเขียน function

http://aoodi43.blogspot.com/2013/09/action-script-20-function.html

action script 2.0 ทำ Quiz Game
http://aoodi43.blogspot.com/2015/05/action-script-20-quiz-game.html
actionscript 2.0 ทำระบบ Physic แบบเกม Mario
http://aoodi43.blogspot.com/2020/01/action-script-20-gravity-physic.html


action script 3.0

action script 3.0 กับ helloworld

http://aoodi43.blogspot.com/2013/07/action-script-30-helloworld.html

action script 3.0 การใช้ keyboard และ Hittest 

http://aoodi43.blogspot.com/2013/07/action-script-30-keyboard-hittest.html 

action script 3.0 ทำโปรแกรมคำนวณหาค่าร้อยละ

http://aoodi43.blogspot.com/2013/07/action-script-30.html 

HTML5 ลอง เอารูปใส่ canvas

สร้าง tag canvas กันก่อน กว้าง 800 สูง 400 pixel
<canvas id="myCanvas" width="800" height="400"></canvas>
 
ต่อมาใน tag script

ประกาศตัวแปร 3 ตัว canvas context และ imageObj
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

 ใส่รูปใน imageObj เปลี่ยนชื่อไฟล์ ตามไฟล์งานของเรานะ
   imageObj.src = 'img.jpg';   


ทำการวาดรูปโดยใช้คำสั่ง drawImage และเรียกโดย Onload


      imageObj.onload = function() {
        context.drawImage(imageObj, 400, 100);
      };

400 และ 100 เป็น พิกัด ที่จะวางรูป

ออกมาเป็นแบบนิ

 code ทั้งหมดลอง copy ไปรันดูนะครับ


<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="400"></canvas>

    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
   imageObj.src = 'img.jpg';   
      imageObj.onload = function() {
        context.drawImage(imageObj, 400, 100);
      };
  
    </script>
  </body>
</html>