AloFlash ! Cộng đồng flash Việt Nam



You are here: Tutorials  AS 1.0 - 2.0 Tạo bài tập nhận biết cho trẻ

Tạo bài tập nhận biết cho trẻ

Email In PDF.
Xem kết quả: / 33
Bình thườngTuyệt vời 

Chào các bạn hôm nay mình sẽ hướng dẫn các bạn làm 1 bài tập cho trẻ nhỏ có thể nhận biết được con vật nào bay được và con nào không bay được.

Mình nghĩ với những bài tập sinh động như vậy sẽ làm trẻ nhớ rất lâu và điều quan trọng là trẻ sẽ rất hào hứng khi học. Ngoài ra các bạn cũng có thể áp dụng được rất nhiều cho các lĩnh vực như hóa học, nếu cho Axit và muối thì nó sẽ xẩy ra phản ứng gì v...v...

Sau khi hướng dẫn bài này mình sẽ up cho các bạn 1 thư viện các con vật và nếu có thời gian mình sẽ gửi 1 người thư viện của nhiều dạng Animation khác.

Giờ để thực hành bài tập này không nhất thiết bạn phải làm con vật chuyển động, chúng ta có thể dùng tạm những hình ảnh có sẵn trên mạng cũng được. Mình sẽ viết TUT demo cho mỗi loại 2 con nhé (2 con bay được và 2 con không bay được).

Mình sẽ lấy 1 chú vẹt, 1 chú đại bàng, 1 chú lợn và 1 chú chim cánh cụt, để làm bài tập này.

Sau khi đã có các hình sau chúng ta bắt tay vào làm nhé.

Bước 1:

Tạo file Flash mới, chọn loại ActionScrip 2.0

Bước 2:

Import 4 bức hình trên vào Flash bằng cách vào: File > Import > Import to Stage... Hoặc nhấn (Ctrl +R) như hình dưới:

Bước 3:

Sau khi đã Import 4 bức ảnh và Flash chúng ta sẽ tiến hành Convert từng bức ảnh thành dạng MovieClip, bằng cách nhấn chuột phải vào bức ảnh chọn Convert to Symbol... hoặc nhấn phím tắt F8. Khi hiện ra bảng lựa chọn bạn hãy chọn loại MovieClip như hình dưới:

Sau khi Convert thành MovieClip xong bạn hãy nhìn sang bảng Properties của MovieClip này và đặt tên cho nó như trong hình là a1 (vì mình chỉ làm 2 loại là vật bay trên trời và vật không bay được trên trời nên đặt tên và phân ra làm 2 loại a và b, con đại bàng sẽ là a1, con vẹt sẽ là a2 nếu bạn có thêm nhiều con nữa sẽ là a3, a4...  ngoài các bạn muốn làm thêm 1 chủng loại dưới nước có thể đặt thêm tên là c và phân loại theo c1, c2, c3...).

Một điều quan trọng nữa mà chúng ta phải thực hiện đó là tạo tâm cho MovieClip này. Bạn Click đúp vào MovieClip để vào bên trong và làm như hướng dẫn của bài này:

http://aloflash.com/forum/forum.php?mod=viewthread&tid=835&extra=

Vì nếu không tạo tâm, thì sau khi bạn làm xong bài tập này mỗi khi nắm 1 con vật nó sẽ nắm lấy bên ngoài chứ không phải lên người chúng. vì vậy trông cũng vừa xấu và cũng vừa khó điều khiển. Vậy là chúng ta đã hoàn thành 1 MovieClip con đại bàng.

Bước 3:

Giờ chúng ta trở ra ngoài Stage của Flash bằng cách nhấn vào 1 trong 2 vùng mình khoanh đỏ ở hình dưới:

Bước 4:

Bạn hãy lặp lại bước 2 và bước 3 đối với 3 con vật còn lại, chỉ khác là khi đặt tên thì bạn đặt cho con vẹt là a2, con chim cánh cụt là b1 và con lợn là b2. (Còn nếu bạn muốn có thêm nhiều con vật nữa cũng tương tự như vậy và đặt tên nó thêm là a3, a4.. và b3, b4.. hay con vật dưới nước c2, c3... và ứng dụng làm gì thì tùy theo ý tưởng sáng tạo của mọi người).

Bước 5:

Tạo 1 layer mới, sử dụng công cụ Text Tool (T) chọn loại Dynamic Text vẽ 1 khung text (đây là nơi sẽ hiện thì những dòng chữ mà khi các bé tương tác vào các con vật). và đặt tên cho Variable của text này là tt_text như hình dưới:

Bước 6:

Tạo 1 layer mới như hình dưới bạn thấy là Layer 3:

Giữ chuột và kéo nó xuống dưới 2 layer trên để được như hình dưới:

ở Layer này chúng ta sẽ tạo 2 phối cảnh trên trời và dưới đất, đây là 2 phối cảnh mình lấy cho ví dụ này:

Các bạn cũng chọn File > Import > Import to Stage... hoặc nhấn (Ctrl + R) để Import nó vào Flash. Tiếp tục bạn cũng Convert 2 bức hình này thành 2 MovieClip và đặt tên cho nó lần lượt là ab tương tự như bước 3. sau đó xắp xếp cho phù hợp. Mình xắp xếp như hình dưới:

Bước 7:

Bạn tạo 1 layer mới sử dụng công cụ Ractangle Tool (R) vẽ 1 hình chữ nhật như hình dưới:

Sau đó Set tọa độ X Y cho nó là 0, 0 để nó ở sắt mép trên của Stage. như hình dưới:

Sau đó bạn nhấn chuột phải chọn Convert to Symbol hoặc nhấn F8 để Convert nó thành 1 MovieClip. Tiếp theo bạn Click đúp (nhấp 2 lần thật nhanh để vào bên trong). tại đây bạn sẽ xóa cái hình chữ nhật mà đen đi bằng cách nhấn phím Delete trên bàn phím máy tính. sau đó bạn tạo thêm 1 layer nữa. Click vào Frame đầu tiên của Layer dưới nhấn F5. ta sẽ được kết quả như hình:

Sau đó bạn Click vào Frame đầu tiên trên layer trên chuột phải chọn Action... hoặc nhấn F9 và chèn vào đoạn code sau:

if (!hasOwnProperty("_load04BD1FF8"))
{
    _load04BD1FF8 = true;
    tellTarget("..")
    {
        function reset()
        {
            tellTarget(getProperty("..", _target))
            {
                for (i in allMC_array)
                {
                    var curMC_tmp = eval(allMC_array[i]);
                    curMC_tmp._x = allPos_array[0][i];
                    curMC_tmp._y = allPos_array[1][i];
                    curMC_tmp.enabled = 1;
                } // end of for...in
            } // End of TellTarget
        } // End of the function
    } // End of TellTarget
} // end else if
 // end if

else
{
    function myStartDrag(dragMC)
    {
        tellTarget(getProperty("..", _target))
        {
            var _loc1 = dragMC;
            oldx = _loc1._x;
            oldy = _loc1._y;
            startDrag (_loc1, false);
        } // End of TellTarget
    } // End of the function
    
    
    function myStopDrag(dragMC, hitMC)
    {
        tellTarget(getProperty("..", _target))
        {
            var _loc1 = dragMC;
            stopDrag();
            if (_loc1.hitTest(hitMC))
            {
                _loc1.enabled = false;
                return;
                _loc1._x = oldx;
                _loc1._y = oldy;
                _loc1.enabled = true;
            } // End of the function
            
            
            tellTarget("")
            {
                stop ();
            } // End of TellTarget
        } // End of TellTarget
    }
}   

Ta sẽ có kết quả:

Bước 8:

Lặp lại bước 3.

Bước 9:

tạo 1 layer mới, click vào Frame đầu tiên chuột phải chọn Action..  hoặc nhấn F9 và chèn vào đoạn code sau:

var tt_text = "Đưa con vật vào khung cảnh đúng"
var allPos_array = [[], []];
var allMC_array = ["a1", "a2", "a3", "a4", "b1", "b2", "b3", "b4"];
for (i in allMC_array)
{
    allPos_array[0][i] = eval(allMC_array[i])._x;
    allPos_array[1][i] = eval(allMC_array[i])._y;
} // end of for...in
delete _global.__resolve;
var oldx;
var oldy;
_global.__resolve = _global.__debugResolve;
a1.onPress = function ()
{
    this.startDrag(a1);
};
a1.onRelease = function ()
{
    this.stopDrag(a1, a);
    if (_root.a.hitTest(_root.a1))
    {
        _root.tt_text = "Chuẩn luôn !";
        music.gotoAndPlay(2);
    }
    else
    {
        _root.tt_text = "Sai rồi !";
        music.gotoAndPlay(4);
    } // end else if
};
a2.onPress = function ()
{
    this.startDrag(a2);
};
a2.onRelease = function ()
{
    this.stopDrag(a2, a);
    if (_root.a.hitTest(_root.a2))
    {
        _root.tt_text = "Chuẩn luôn !";
        music.gotoAndPlay(2);
    }
    else
    {
        _root.tt_text = "Sai rồi !";
        music.gotoAndPlay(4);
    } // end else if
};

b1.onPress = function ()
{
    this.startDrag(b1);
};
b1.onRelease = function ()
{
    this.stopDrag(b1, b);
    if (_root.b.hitTest(_root.b1))
    {
        _root.tt_text = "Chuẩn luôn !";
        music.gotoAndPlay(2);
    }
    else
    {
        _root.tt_text = "Sai rồi !";
        music.gotoAndPlay(4);
    } // end else if
};
b2.onPress = function ()
{
    this.startDrag(b2);
};
b2.onRelease = function ()
{
    this.stopDrag(b2, b);
    if (_root.b.hitTest(_root.b2))
    {
        _root.tt_text = "Chuẩn luôn !";
        music.gotoAndPlay(2);
    }
    else
    {
        _root.tt_text = "Sai rồi !";
        music.gotoAndPlay(4);
    } // end else if
};

Gợi ý: để thêm sinh động có thể bạn chèn thêm âm thanh vào cho sinh động, vì làm demo sợ hơi dài nên mình cắt bớt khoản âm thanh. Ở code trên mình để sẵn Code gọi Sound cho các bạn muốn phat triển thêm. Ngoài ra ngoài việc load text hoặc âm thanh chúng ta có thể phát triển thành 1 sự kiện khách như load vào 1 file video hay swf, hoặc nhiều hàm sự kiện hay ho khác.

Vậy là chúng ta đã hoàn thành bài tập này. Hy vọng rằng nó sẽ có ích cho mọi người. Bên cạnh đó có thể kết hợp với những bài tập như tạo trắc nghiệm (link tham khảo: http://aloflash.com/thuc-hanh-flash/actionscript-10-20/540-tao-mot-bai-trac-nghiem-don-gian-bang-flash.html) để mọi người có thể linh động trong quá trình làm.

Đây là 1 bài tập nữa dành cho trẻ các bạn tham khảo nhé:

Link: http://aloflash.com/file/TUT/bai-tap-nhan-biet-cho-tre/nhan-biet-bong.swf

Các bạn có thể vào đây để lấy những file flash ngộ nghĩnh áp dụng cho bài tập này:

http://aloflash.com/library/phan-mem-tien-ich/561-thu-vien-file-flash-swf.html

Chúc tất cả thành công và sức khỏe.

aloflash.com

Download

Bình luận (20)Add Comment
0
...
được viết bởi Thuy Trang, Tháng tư 01, 2012
Em chờ TUT của anh smilies/grin.gif
0
...
được viết bởi daovanthanh, Tháng tư 02, 2012
1) Các bài viết hướng dẫn trong trang này đều rất bổ ích với chúng tôi. Xin bày tỏ lòng khâm phục tài năng của các bạn và chân thành cảm ơn sự giúp đỡ, đóng góp của các bạn !
2) Tạo hiệu ứng nước chảy ra từ vòi bằng Flash là hiệu ứng rất khó, được nhiều giáo viên quan tâm. Hiện nay chưa có cao thủ Flash nào viết bài hướng dẫn tạo hiệu ứng này cả. Rất mong và cảm ơn bạn nào viết hướng dẫn tạo hiệu ứng này giúp !
0
...
được viết bởi angel_boy, Tháng tư 05, 2012
Các bài viết ở đây viết thì rất hay và tốt, nhưng có vẻ khi làm thì hơi khó làm vì ko nói rõ ràng lắm...
0
...
được viết bởi hùng, Tháng tư 05, 2012
Mình đã làm xong + gọi thêm âm thanh và 1 số đoạn mã nữa rất linh hoạt, cảm ơn bài viết.smilies/cool.gif
0
...
được viết bởi Mai, Tháng tư 05, 2012
Mình thấy bài viết dễ hiểu mà, nếu với người chưa bao giờ học Flash hoặc mới học thì hơi khó, nhưng đã học và đã tiếp xúc rồi thì rất dễ hiểu, mình cũng đã làm được. Thanks for share !smilies/wink.gif
0
...
được viết bởi dingdong, Tháng năm 01, 2012
mình thik nhất bài này, cái này dạy các cháu nhỏ thì tuyệt. Thanks chủ thớt nhá smilies/grin.gif
0
...
được viết bởi KhanhNT, Tháng tám 23, 2012
Trang Web của bạn quá hay. Nhưng học flash mà không viết được action thì không có nghĩa lý gì. Bạn hãy cho một lời khuyên cho một người không biết một chút về lập trình .Bắt đầu học viết thì bắt đầu như thế nào. Cám ơn bạn.
0
...
được viết bởi BinhYenNhe92, Tháng mười một 16, 2012
thanks smilies/smiley.gif smilies/wink.gif smilies/kiss.gif
0
...
được viết bởi trinh, Tháng mười hai 12, 2012
a ơi cho e hỏi là khi e làm kết hợn với một số flash khác.cụ thế là game này làm trên as 2 nhưng menu của e lại làm trên as3.khi ghép vào nhau sẽ bị lỗi.Vậy ai có cách khắc phục j cho e với không ạ?
0
...
được viết bởi abc, Tháng mười hai 13, 2012
Bạn có thể tạo 1 file swf bài tập trên rồi dùng file AS3 chứa menu gọi nó vào là OK.smilies/grin.gif
0
...
được viết bởi hiền, Tháng sáu 28, 2013
hic hic sao đoạn code 7 e ko chèn vào đc, e chèn vào thì báo có lỗi gần xong r chỉ bước ấy là ko đúng thôi e ko biết làm thế nào? e mới học nen ko biết làm sao???????????????smilies/cry.gif
0
...
được viết bởi Ngo Thanh Tung, Tháng bảy 01, 2013
Cái bài đơn giản, nhưng code rối rắm.
0
...
được viết bởi kitty, Tháng ba 02, 2014
Cho mình hỏi làm thế nào để chèn âm thanh vào sau mỗi chọn lựa
Phải code như thế nào?
----Thanks---
0
...
được viết bởi phong nguyễn, Tháng ba 12, 2014
Cảm ơn bạn rất nhiều vì những bài hướng dẫn hay smilies/grin.gif
0
...
được viết bởi Phước, Tháng mười 21, 2014
Bạn nào hướng dẫn cho mình thêm lúc gọi thêm âm thanh với được không. Cảm ơn các bạn
0
...
được viết bởi Hoàng Dũng, Tháng mười một 04, 2014
saominh chèn ảnh động vào thi khi chạy chọn ảnh động nó dính vào chuột luôn không ra kết quả gì hết.Bạn chỏ cho minh nhé. Thanks
0
...
được viết bởi Nghĩa, Tháng sáu 09, 2016
Có việc làm thêm cho các bạn Đây. Thiết kế Flash theo kịch bản
Bạn nào có nhu cầu liên hệ mình nhé !
Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó.

Viết bình luận
nhỏ hơn | lớn hơn

busy