Hình ảnh động vui và đẹp

Chủ đề trong 'Giao Lưu' bởi Hoa_Sim, 27/02/2012.

Trạng thái chủ đề:
Đã khóa
7845 người đang online, trong đó có 1045 thành viên. 09:36 (UTC+07:00) Bangkok, Hanoi, Jakarta
  1. 4 người đang xem box này (Thành viên: 0, Khách: 4)
Chủ đề này đã có 63235 lượt đọc và 670 bài trả lời
  1. Hoa_Sim

    Hoa_Sim Thành viên gắn bó với f319.com

    Tham gia ngày:
    27/11/2010
    Đã được thích:
    23.967
    Làm xe chạy trên đường bằng animation trong flash



    Ô tô, xe máy là những phương tiện đi lại phổ biến nhất, các bạn muốn làm xe chạy 1 cách sống động thì có lẽ bài tập này sẽ rất hữu ích. Trong bài này mình sẽ hướng dẫn cho bánh xe quay và cho xe dập dình như đang bị sóc.
    Các bạn có thể tham khảo thêm bằng link này: http://aloflash.com/images/flash/banner-xe-bus.swf
    Nguyên vật liệu cho bài tập này là hình những chiếc xe, và 1 chiếc bánh xe nhớ là cần tách nền thành file PNG nhé. Mình chọn chiếc xe này và tách bánh của nó ra như hình dưới:
    [​IMG]
    Bánh xe:
    [​IMG]
    Hình nền:
    [​IMG]
    Cộng thêm một tấm hình nền, bạn nên thiết kế nó dài 1 chút để tạo phong cảnh nền khi xe di chuyển. (có thể xử lý qua photoshop).
    Mình sẽ gửi các bạn các file ô tô và bánh xe mình tách ra cho các bạn tiện áp dụng khi nào rảnh. Tạm thời bạn dùng tạm cái xe này để làm xong bài tập này nhé.
    Chúng ta bắt tay vào công việc nhỉ.
    Bước 1:
    Tạo 1 file tài liệu flash mới, Ctrl + N đây là hiệu ứng Animation nên bạn chọn loại ActionScript nào cũng được 2.0 hay 3.0 đều OK hết :).
    Bước 2:
    Import hình nền dài vào trong flash bằng cách vào File > Import > Import to Stages... mở bảng Align để căn cho hình nền vào giữa vùng hiển thị của Flash bằng cách vào Window > Align (Ctrl +K), và thiết đặt như hình dưới:
    [​IMG]
    Ta sẽ được như hình:
    [​IMG]
    Bước 3:
    Sử dụng công cụ Selection Tool (V), click chọn hình nền vừa Import vào, Giữ phím Alt kéo ra để nhân thêm 1 hình nữa (trong lúc kéo bạn có thể giữ phím Shift để có thể kéo song song với hình gốc)
    [​IMG]
    Như vậy là ta đã được 1 chiếc hình nền (các bạn có thể làm sinh động hơn bằng cách sử dụng Photoshop đây là cách làm hình nên đơn giản nhất mà hình giới thiệu).
    Bước 4:
    Nhấn Ctrl + A để chọn toàn bộ hình nền rồi nhấn F8 để Convert nó sang dạng Movie Clip. Nháy đúp vào Movie Clip vừa tạo để vào bên trong lại nhấn Ctrl + A rồi nhấn F8 1 lần nữa để Convert nó thành dạng Movie Clip.
    Bước 5:
    Click vào frame thứ 80 nhấn phím F6 rồi chọn hình nền kéo nó sang bên phải sao cho mép bên phải của Movie Clip bạn tạo trùng với mép bên phải của vùng hiển thị Flash.
    [​IMG]
    Bước 6:
    Click vào bất kỳ nơi nào giữa 2 frame 1 và 80 bạn nhấn chuột phải và chọn Create Classic Tween. để tạo chuyển động cho hình nền.
    [​IMG]
    Bước 7:
    Giờ bạn trở lại Scene đầu tiên bằng cách nhấn vào 1 trong những vùng mình đã khoanh đỏ ở hình dưới:
    [​IMG]
    Sau đó bạn khóa layer chứa hình nền này lại nhé.
    Bước 8:
    Tạo 1 layer mới bây giờ thì bạn sẽ Import hình chiếc xe vào layer này bằng cách vào File > Import > Import to Stages... ta được:
    [​IMG]
    Bạn sử dụng công cụ Free Transform Tool (Q) để kéo chiếc ô tô to nhỏ phù hợp với file flash của bạn nhé (Trong lúc co giãn giữ phím Shift để tránh làm méo hình).
    [​IMG]
    Mình co nó nhỏ như hình trên. Còn tùy các bạn. :D
    Bước 9:
    Sử dụng công cụ Selection Tool (V), click chọn hình ô tô rồi nhấn F8 để Convert nó thành dạng Movie Clip, Nháy đúp vào Movie Clip bạn vừa tạo để vào trong, Tiếp tục chọn hình ô tô và nhấn F8 để Convert nó thành dạng Movie Clip một lần nữa.
    Click vào frame thứ 2 và 3 lần lượt nhấn F6 để tạo thêm 2 Keyframe. Rồi click vào frame thứ 2 nhấn phím mũi tên lên 1 lần (Công đoạn này để tạo cho chiếc xe sóc lên 1 cái)
    [​IMG]
    Bước 10:
    Click đúp vào Movie Clip chiếc xe để vào trong. Khóa layer chứa chiếc xe lại và tạo 1 layer mới.
    [​IMG]
    Bạn tiến hành Import hình bánh xe vào layer này. bằng cách vào File > Import > Import to Stages...
    [​IMG]
    Giờ bạn nhấn Ctrl + để phóng to file flash lên. Click vào hình bánh xe vừa Import vào, chọn công cụng Free Transform Tool (Q) kéo hình bánh xe và đặt nó vừa khít lên cái bánh xe của chiếc ô tô.
    [​IMG]
    Bạn nhấn F8 để Convert chiếc bánh xe này thành dạng Movie Clip nhé. Nháy đúp vào nó để vào bên trong tiếp tục nhấn F8 lần nữa để Convert nó sang dạng Movie Clip, sau đó bạn click vào frame thứ 5 (nếu bạn muốn bánh xe quay chậm hơn thì có thể chọn frame 10 hoặc 15 hay 20) nhấn F6 để chèn vào 1 keyframe, click chuột phải vào bất cứ nơi nào giữa frame 1 và frame 5 chọn: Create Classic Tween.
    [​IMG]
    Bạn nhìn luôn sang bên phải sẽ thấy bảng Tweening, ở phần Rotale: bạn chọn là CW nhé (nếu bạn muốn bánh xe quay ngược chiều kim đồng hồ thì chọn CCW).
    [​IMG]
    Giờ quay trờ lại Scene bên ngoài, bằng cách nháy đúp 1 lần vào vùng không hiển thị của flash hoặc click vào nơi mình khoanh tròn ở hình dưới:
    [​IMG]
    Giờ chúng ta đã ra bên ngoài, sử dụng công cụ Selection Tool (V) bạn chọn cái bánh mà ở phần trên ta đã làm Giữ phím Alt rồi kéo ra để nhân ra thêm 1 cái bánh xe nữa. bạn đặt vừa khít vào cái bánh trước của hình ô tô như hình dưới này nhé.
    [​IMG]
    Vậy là chúng ta đã hoàn thành bài tập này, Rất đơn giản phải không, giờ bạn hãy nhấn Ctrl + Enter xem thành quả của mình nào.
    Nếu làm như trên chúng ta sẽ được kết quả như vậy:

    Các bạn có thể tham khảo thêm bằng link này: http://aloflash.com/images/flash/banner-xe-bus.swf
    Chúc các bạn thành công.
    aloflash.com
  2. Hoa_Sim

    Hoa_Sim Thành viên gắn bó với f319.com

    Tham gia ngày:
    27/11/2010
    Đã được thích:
    23.967
    http://aloflash.com/thuc-hanh-flash...ong-nuoc-song-sanh-lung-linh-trong-flash.html
    Hiệu ứng bóng nước sóng sánh lung linh



    Có rất nhiều bạn quan tâm đến hiệu ứng này, vậy hôm này mình sẽ hướng dẫn các bạn làm nó nhé. Chắc chắn xem xong tut này 90% các bạn mới học flash đều làm được vì nó quá đơn giản đến bất ngờ. :)
    Nguyên vật liệu cho bài tập này chỉ là một tấm hình mà bạn muốn tạo hiệu ứng sóng nước, bạn nên dùng qua photoshop để chỉnh cho phù hợp. Mình là mình chọn luôn cái ảnh này đỡ phải chỉnh nhiều:
    Ah nhân tiện mình sẽ hướng dẫn luôn các bạn cách tạo, anh nền qua photoshop trước khi làm nguyên vật liệu cho Flash.
    Có rất nhiều các tạo bóng nước nhưng mình chỉ xin giới thiệu 2 cách thôi nhé, các cách khác các bạn nghiên cứu thêm.
    Cách 1: Tạo nước bằng Filter.
    Vidu: Mình có 1 bức ảnh như vậy:
    [​IMG]
    Giờ ta sẽ tiến hành tạo nước cho nó ở bên dưới qua Photoshop.
    sau khi đã cho bức ảnh vào trong Photoshop bạn chọn công cụ Rectangular marquee Tool (M), Kéo ở đoạn dưới bức ảnh như hình dưới:
    [​IMG]
    Tiếp đó bạn chọn như trong hình:
    [​IMG]
    Nó sẽ ra 1 bảng nữa, Bạn nhấn OK.
    Tiếp theo bạn vào Filter > Stylize > Wind, thiết lập như hình dưới:
    [​IMG]
    OK. Cuối cùng ta sẽ được như kết quả như sau:
    [​IMG]
    Cách 2: Đảo ngược ảnh và tạo bóng nước
    Tương tự như trên chỉ khác là, cái bóng dưới nước là hình ảnh đảo ngược của ảnh như hình dưới:
    [​IMG]
    Và kết quả tương tự cách 1 ta sẽ có:
    [​IMG]
    Đây là cách đơn giản chúng ta là bóng nước trong Photoshop. Nhưng chúng không đẹp và trông buồn tẻ quá. Vậy chúng ta sẽ bắt đầu với flash để xem nó khác biệt thế nào nhé. Nhớ giữ lại bức ảnh dưới để ta sẽ sử dụng trong Flash nhé:
    [​IMG]
    Ok bắt đầu nào.
    Bước 1:
    Tạo 1 tài liệu Flash mới Ctrl + N, nhấn Ctrl + J để tùy chỉnh các thông số cho bài flash này như sau: (tùy theo kích thước bức anh hay yêu cầu mà bạn điều chỉnh cho phù hợp nhé, mình chọn thiết đặt như vậy vì bức ảnh của mình có kích thước 450x320).
    [​IMG]
    Bước 2:
    Import bức ảnh vào flash, File > Import > Import to Stage... (Ctrl + R), Sau đó bạn điều chỉnh bức ảnh cho vừa với khung hiển thị của flash bằng cách mở bảng Align: Window > Align (Ctrl + K) và điều chỉnh như hình sau:
    [​IMG]
    Bước 3:
    Sử dụng công cụ Selection Tool (V), Click chuột phải vào tấm hình chọn Break Apart.
    [​IMG]
    Bước 4:
    Bạn click vào vùng xám (vùng không hiển thị của flash), giữ chuột và béo sang bên phải sao cho tạo thành 1 khung như hình dưới, (bạn cố gắng kéo đúng điểm giao phân cách trong ảnh nền giữ phần trên mặt nước và dưới mặt nước).
    [​IMG]
    Sau khi bạn kéo xong sẽ được kết quả: (Phần mình khoanh đỏ là phần bạn vừa kéo chọn ở trên).
    [​IMG]
    Bước 5:
    Tiếp theo nhấn luôn F8 bạn nhé để covert nó thành Movie Clip, đặt tên cho movie clip này là: aloflash
    [​IMG]
    Bước 6:
    Tạo 1 layer mới Click vào frame đầu tiên trên layer mới này và nhấn F9, bạn chèn vào đoạn code sau:
    ripple = new flash.display.BitmapData(aloflash._width, aloflash._height);
    offset = new flash.geom.Point(0, 0);
    speed = 0.5;
    this.onEnterFrame = function() {
    offset.y -= speed;
    ripple.perlinNoise(150, 6, 2, 1.1, true, true, 1, true, offset);
    aloflash.filters = [new flash.filters.DisplacementMapFilter(ripple, ripple, 0, 1, 30, 30)];
    };


    Ok thế là xong rồi, quá đơn giản phải không các bạn. Hãy nhấn Ctrl + Enter để thưởng thức nhé.

    Chúc các bạn thành công
    aloflash.com
  3. Hoa_Sim

    Hoa_Sim Thành viên gắn bó với f319.com

    Tham gia ngày:
    27/11/2010
    Đã được thích:
    23.967
    http://aloflash.com/thuc-hanh-flash/hieu-ung/504-hieu-ung-tuyet-roi-trong-flash.html

    Hiệu ứng tuyết rơi trong flash



    Hi, sắp đến noel rồi mình xin hướng dẫn các bạn một số mẫu làm tuyết rơi trong flash bao gồm cả animation và ActionScript. Hy vọng các bạn sẽ có những món quà độc đáo trong dịp noel.
    Đầu tiên là Animation nhé.
    Nguyên vật liệu của bài hướng dẫn này là 1 bức ảnh nền giáng sinh thật đẹp, những bông tuyết lãng mạn.
    [​IMG]
    Chúng ta bắt đầu nhỉ.
    Bước 1:
    Tạo 1 tài liệu Flash mới Ctrl + N, kích thước mình làm là 450x320 và tốc độ frame 12 fps.
    Tiến hành Import bức ảnh nền vào Flash: bạn vào File > Import > Import To Stage... (Ctrl +R). Điều chỉnh nó vừa khít với vùng hiển thị của Flash bằng các vào Bảng Align Window > Align (Ctrl +K). Vè chỉnh như hình vẽ:
    [​IMG]
    Làm xong bạn khóa layer này lại để tránh đụng chạm đến nhé.
    Bước 2:
    Tạo 1 layer mới, ở layer này bạn click chuột vào frame thứ 5 và nhấn F6. Tại đây ta sẽ tạo 1 đoạn tuyết rơi thứ nhất. (bạn có thể chọn màu nền cho FLash là màu đen để tiện làm những bông tuyết trắng).
    [​IMG]
    Tiến hành vẽ bông tuyết, Bạn sử dụng công cụ Oval Tool (O), Vẽ một hình tròn với màu Fill là màu trắng và Stroke là trong suốt, kích thước 4x4.
    Hãy chú ý những phần mình đã khoanh đỏ.
    [​IMG]
    Bước 3:
    Sử dụng công cụ Selection Tool (V), click vào bông tuyết vừa vẽ bạn nhấn F6, để convert nó thành dạng Movie Clip. Để xem rõ hơn bông Tuyết bạn có thể phóng to thu nhỏ bằng cách nhấn Ctrl + Hoặc Ctrl -
    [​IMG]
    Bước 4:
    Click đúp vào Movie Clip bông tuyết, để và trong, ở đây ta sẽ tạo chuyển động cho bông tuyết bằng đường Guide.
    Bước 5:
    Ở đây mình sẽ hướng dẫn các bạn làm 4 bông tuyết chạy trên 4 đường Guide còn các bạn có thể làm ít hơn hoặc nhiều hơn là tùy nhé.
    Tạo 1 layer mới. Bạn có thể đặt tên cho Layer này là Guide.
    Bạn sử dụng công cụ Pencil Tool (Y), vẽ 4 đường lòng vòng như hình dưới, những đường này sẽ là những đường mà những bông tuyết rơi xuống sẽ uốn lượn như thế. (chọn màu Stroke là màu trắng để dễ nhìn như phần mình đánh dấu đỏ trong hình).
    [​IMG]
    Bước 6:
    Bạn sử dụng công cụ Selection Tool (V), click chọn bông tuyết rồi nhấn F8 để Convert nó thành dạng Movie Clip. (Trước đó các bạn có thể nhấn Ctrl + để phóng to lên thuận tiện cho bước làm).
    [​IMG]
    Bước 7:
    Sau khi Convert thành Movie Clip bạn click vào layer thứ 70, ở Layer bông tuyết bạn nhấn F6 và layer đường Guide bạn nhấn F5. Sau đó Click vào bất cứ chỗ nào ở giữa frame 1 đến frame 70 trên layer bông tuyết chuột phải và chọn Create Classic Tween (Phiên bản CS4).
    [​IMG]
    Bước 8:
    Bạn click chuột phải vào layer Guide và chọn Guide.
    [​IMG]
    Bước 9:
    Chọn công cụ Selection Tool (V), Click vào Frame 1 trên layer bông tuyết kéo bông tuyết vào điểm đầu của đường Guide 1 như hình vẽ:
    [​IMG]
    Tiếp tục Click vào frame thứ 70 trên layer Bông tuyết và kéo bông tuyết nằm lên điển cuối của đường guide 1.
    [​IMG]
    Sau đó để bông tuyết rơi được thật hơn, nghĩa là nó sẽ nhỏ bớt đi và sẽ mờ dần bạn chú ý những phần mình khoanh đỏ, W và H là đọ lớn của bông tuyết lúc đầu nó là 4x4 thì giờ bạn đặt là 2x2. Chọn Alpha tầm 40% là OK.
    Bước 10:
    Tạo 1 layer mới dưới layer Guide. Click vào frame thứ 5 trên layer này chọn Nhấn F6. Cũng tương tự như bước 2 tạo bông tuyết mới và convert nó thành Movie Clip, bông tuyết này sẽ bám vào đường guide 2 tương tự như bạn đã làm với đường guide 1. Chỉ có điều bạn làm cho bông tuyết này xuất hiện chậm hơn bông tuyết kia 5 frame. Và khi bạn đã làm hết 5 bông tuyết cho 4 đườn guide nó sẽ có dạng như hình dưới:
    [​IMG]
    Các bạn có thể biến tấu tùy theo ý của mình, hoặc có thể kỳ công tạo ra 10 hoặc 20 đường Guide càng nhiều thì trong sẽ càng sinh động hơn.
    Bước 11:
    Ok vậy là ta đã làm xong chuyển động cho bông tuyết giờ là bước tiếp theo.
    Quay trở lại Trình làm việc ngoài cùng. bằng cách Click đúp vào phần không hiển thị của Flash hoặc Click vào như hình sau khi nào bạn thấy thoát ra ngoài cùng thì thôi. Bạn có thể làm theo hình mình đã khoanh tròn trong hình:
    [​IMG]
    Bước 12:
    Tạo thêm layer và Làm tương tự các bước từ đầu đến giờ, nếu bạn muốn tuyết rơi dày hơn thì làm nhiều layer hơn.
    Như mình thì mình làm 3 layer mỗi layer chứa 4 đường Guide. Như hình.
    [​IMG]
    Còn ở layer chứa code thì bạn chỉ cần chèn vào Chữ " Stop(); " là OK.
    Các bạn có thể tham khảo thêm các bài làm tuyết rơi khác ở link dưới:
    http://aloflash.com/thuc-hanh-flash...6-hieu-ung-tuyet-roi-trong-flash-bang-as.html
    http://aloflash.com/thuc-hanh-flash/hieu-ung/536-flash-tuyet-roi-di-chuyen-theo-con-chuot-as2.html
    Chúc các bạn thành công.
    aloflash.com

    @ptkh , @Shapphire5 , @hoatimbanglang ,
    @yht267 ,
    @SINH-TU ...
    Út và các bạn thử làm theo hai bài viết trên đây xem thế nào ?
    Anh đang bận quá, và cũng chưa có các phần mềm tương ứng cần thiết.
    Nên xem trực tiếp theo link ở đầu bài. [};-


  4. hailua7777

    hailua7777 Thành viên gắn bó với f319.com

    Tham gia ngày:
    05/04/2010
    Đã được thích:
    88
  5. Hoa_Sim

    Hoa_Sim Thành viên gắn bó với f319.com

    Tham gia ngày:
    27/11/2010
    Đã được thích:
    23.967

    [​IMG]


    Bush xem người đẹp tắm tiên !
    Bị nàng ném đá trốn liền thật nhanh !


    [:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D][:D]

  6. Hoa_Sim

    Hoa_Sim Thành viên gắn bó với f319.com

    Tham gia ngày:
    27/11/2010
    Đã được thích:
    23.967
    [​IMG]

    Anh chàng láu cá
    ! [:D]
  7. Hoa_Sim

    Hoa_Sim Thành viên gắn bó với f319.com

    Tham gia ngày:
    27/11/2010
    Đã được thích:
    23.967
    [​IMG]



  8. Hoa_Sim

    Hoa_Sim Thành viên gắn bó với f319.com

    Tham gia ngày:
    27/11/2010
    Đã được thích:
    23.967
    [​IMG]



  9. PECC1234

    PECC1234 Thành viên gắn bó với f319.com

    Tham gia ngày:
    31/08/2010
    Đã được thích:
    194
  10. Hoa_Sim

    Hoa_Sim Thành viên gắn bó với f319.com

    Tham gia ngày:
    27/11/2010
    Đã được thích:
    23.967
    [​IMG]


Trạng thái chủ đề:
Đã khóa

Chia sẻ trang này