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

In
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

Share