Coding

Flash CS4: Phương pháp Motion Tween

 1. Chuyển về vùng làm việc mặc định

Bạn bấm chọn vùng Essentials để chọn lại vùng làm việc mặc định của Flash, tiếp đến bấm chọn Reset Essentials để khôi phục vùng làm việc mặc định này và bắt đầu vào bài thực hành 2. (Xem bài thực hành 1 về vùng làm việc)

2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document)

3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document)

Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên 002_motion_mask.fla

4. Sử dụng Text Tool để viết một đoạn text.

4.1. Bấm chọn vào Text Tool trên thanh công cụ bên phải:

 

 

4.2. Nhấp chuột vào chỗ 12.0pt trên Property Inspector:

 

 

4.3. Đổi số 12 thành 50 rồi nhấn phím ENTER để chấp nhận giá trị mới:

 

 

4.4. Bấm chuột vào Stage và gõ vào dòng chữ TUỔI TRẺ ONLINE:

 

 

4.5. Bấm phí ESCAPE để thoát khỏi khung text, lúc này cả đoạn text đã được chọn và có một khung hình chữ nhật bao quanh:

 

 

4.6. Để canh giữa đoạn text này trên Stage, trước hết chọn Edit>Cut từ menu:

 

 

Kế đến chọn Edit>Paste in Center từ menu:

 

 

Bạn thu được dòng chữ được canh giữa Stage như sau:

 

 

5. Thêm một layer vào Timeline.

5.1 Bấm chuột vào nút New Layer để thêm một layer vào Timeline:

 

 

5.2 Bấm đúp vào Layer 2 và đổi tên thành mask:

 

 

6.Chọn Rectangle Tool để vẽ hình chữ nhật.

6.1 Bấm chọn Rectangle Tool từ thanh công cụ:

 

 

Chuột sẽ đổi hình dáng từ mũi tên sang chữ thập + .

6.2 Kéo chuột từ góc trên bên trái sang góc dưới bên phải để bao phủ chữ TUỔI TRẺ ONLINE:

 

 

Bạn thu được một hình chữ nhật màu xanh bao phủ chữ TUỔI TRẺ ONLINE:

 

 

7. Sử dụng Selection Tool để chọn hình chữ nhật và tạo motion tween.

7.1 Bấm chọn Selection Tool trên thanh công cụ bên phải:

 

 

7.2 Bấm chọn hình chữ nhật. Khi đã được chọn, hình chữ nhật chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều:

 

 

7.3 Bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween:

 

 

7.4 Do hình chữ nhật vừa tạo ra không phải là một symbol nên flash thông báo cần phải chuyển nó sang symbol để tạo tween (xem thêm phần tìm hiểu về symbol ở cuối bài). Bạn bấm OK để đồng ý:

 

 

Sau khi bấm chọn OK, bạn thấy một số thay đổi như sau:

1. Hình chữ nhật không còn những hạt li ti nữa vì đã được chuyển thành symbol.

2. Trên Property Inspector xuất hiện biểu tượng symbol (hình bánh xe) là Movie Clip với dòng chữInstance of: Symbol 1. (xem thêm phần tìm hiểu về symbol ở cuối bài)

3. Trong khu vực frame của Timeline, Flash đã tự động bổ sung số frame thành 24 frame (mặc định cho motion tween hoàn thành trong một giây - theo mặc định Flash CS4 thiết lập tốc độ 24 fps). Đồng thờiPlayhead được di chuyển đến frame số 24. Bên cạnh đó bạn còn thấy các frame từ 1 đến 24 đã được đổi sang màu xanh nhạt đặc trưng của motion tween của Flash CS4.

 

 

7.5 Bấm F6 để chèn keyframe vào vị trí frame 24 (Xem bài thực hành 1- cách chèn keyframe), tại frame này xuất hiện một hình thoi màu đen. Đây là đặc trưng của motion tween mới của Flash CS4.

 

 

7.6 Đưa chuột đến keyframe 1 của motion tween và bấm chọn keyframe 1 khi nhìn thấy phía dưới chuột xuất hiện một khung chữ nhật mờ, playhead sẽ chuyển đến keyframe 1

 

 

7.7. Đưa chuột vào mép phải của hình chữ nhật, bấm và di chuyển hình chữ nhật sang trái, giữ phím Shift để hình chữ nhật di chuyển theo chiều ngang.

 

 

Khi nhả chuột ra, bạn thu được sự thay đổi như hình vẽ.

 

 

Trên hình bạn thấy một đường thẳng có các chấm dọc theo đường thể hiện vị trí của các frame, đây là điểm đặc trưng của motion tween cho đối tượng của Flash CS4, hoàn toàn khác với motion tween của các phiên bản Flash trước đây (Flash CS4 gọi motion tween theo cách cũ là Classic motion tween)

7.8 Motion tween kéo dài 24 frame, trong khi đoạn text chỉ kéo dài 1 frame, bạn bổ sung frame cho layer chứa đoạn text bằng cách bấm chuột vào frame số 24 của layer chứa đoạn text.

Để chèn thêm frame vào Timeline bạn chọn Insert > Timeline > Frame từ menu (hoặc bấm phím tắt F5):

 

 

Kết quả thu được như sau:

 

 

7.9. Bấm phím phải chuột vào layer mask để xuất hiện menu ngữ cảnh và chọn Mask. Biểu tượng của các layer sẽ biến đổi như phần bên phải của hình dưới đây đồng thời cả hai layer này bị khóa lại.

 

 

Lúc này trên Stage dòng chữ TUỔI TRẺ ONLINE bị hình chữ nhật che khuất đã xuất hiện đầy đủ. (Xem thêm phần Tìm hiểu về Mask layer ở cuối bài)

8. Xem thử animation lúc đang biên soạn

Để xem thử kết quả lúc đang biên soạn, bạn nhấn phím ENTER. Chữ TUỔI TRẺ ONLINE với từng ký tự xuất hiện nhanh qua màn hình.

9. Xuất file thành flash movie

Để xuất file thành flash movie, bạn chọn Control > Test Movie từ menu:

 

 

Flash sẽ xuất thành file 002_motion_mask.swf:

 

 

Tuy nhiên, file flash movie lặp lại liên tục gây cảm giác không thoải mái khi xem. Bạn bổ sung số frame để khi Flash tạo được dòng chữ TUỔI TRẺ ONLINE hoàn chỉnh thì sẽ dừng lại 2 giây.

Đóng file flash movie lại bằng cách bấm vào dấu X .

Tốc độ của bài đang thiết lập là 24 fps, để dừng lại 2 giây bạn bổ sung 48 frame. Số frame hiện có là 24, bạn chọn frame số 72 trên Timeline.

 

 

Để chèn thêm frame vào Timeline, bạn chọn Insert > Timeline > Frame từ menu (hoặc bấm phím tắt F5).

 

 

 

Thực hiện tương tự cho layer còn lại, kết quả thu được như sau:

 

 

Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả.

 

 

Lần này Flash sẽ dừng lại 2 giây để người xem có thời gian thưởng thức tác phẩm của bạn.

1 Bình luận

  1. xiaoou nói:

    20181015 xiaoou

    michael kors outlet online

    cheap ray ban sunglasses

    ugg boots

    polo outlet online

    nike shoes outlet

    canada goose outlet store

    los angeles lakers jerseys

    coach factory outlet

    kate spade sale

    denver broncos jersey

    canada goose jackets outlet

    longchamp handbags

    coach outlet

    mulberry handbags

    supreme clothing uk

    michael kors outlet clearance

    ferragamo shoes

    christian louboutin shoes

    ugg outlet

    moncler coats

    christian louboutin shoes

    coach outlet online

    swarovski outlet store

    ralph lauren outlet

    mulberry handbags

    pandora outlet

    ugg outlet

    tory burch outlet online

    chrome hearts online store

    coach outlet online

    michael kors handbags

    canada goose jackets

    ralph lauren femme

    mbt

    ray ban sunglasses outlet

    ray ban sunglasses outlet

    michael kors outlet clearance

    giuseppe zanotti shoes

    louboutin shoes

    uggs outlet

    adidas nmd r1

    ugg boots clearance

    gucci outlet online

    tory burch outlet stores

    michael kors outlet

    canada goose outlet

    cheap ugg boots

    cheap jordan shoes

    coach handbags outlet

    kate spade handbags

    cheap jerseys wholesale

    nike air force 1

    cheap jerseys wholesale

    coach outlet online

    mbt outlet

    cheap ugg boots

    polo ralph lauren

    longchamp bags

    ugg outlet

    coach outlet

    jimmy choo shoes

    ralph lauren uk

    coach outlet online

    canada goose jackets

    uggs outlet

    fitflops sale clearance

    canada goose jackets

    polo ralph lauren outlet

    moncler jackets

    uggs outlet

    moncler outlet online

    longchamp handbags

    puma shoes

    coach outlet online

    suicoke sandals

    wellensteyn outlet

    cheap jordan shoes

    polo ralph lauren outlet

    christian louboutin shoes

    canada goose coats

    cheap ugg boots

    cazal outlet

    jordan shoes

    montblanc pens outlet

    off white clothing

    ugg boots clearance

    nhl jerseys

    birkenstock shoes

    ralph lauren shirts

    canada goose outlet

    michael kors outlet online

    true religion outlet

    jordan 3

    christian louboutin shoes

    burberry canada

    light up shoes

    cartier bracelet

    coach outlet store online

    ralph lauren outlet

    michael kors outlet online

    michael kors

    nike factory store

    air jordan shoes

    red bottoms

    gucci bags

    ugg outlet

    michael kors handbags outlet

    uggs outlet

    coach outlet online

    air jordan shoes

    canada goose jackets

    adidas outlet online

    tory burch outlet online

    salomon outlet

    snapbacks wholesale

    prada shoes for men

    kate spade handbags

    canada goose jackets outlet

    adidas y3 shoes

    uggs clearance

    canada goose outlet

    canada goose outlet store

    cheap oakley sunglasses

    ugg boots clearance

    canada goose outlet store

    nobis jackets

    canada goose outlet

    longchamp outlet store

    tory burch outlet online

    ugg boots clearance

    cheap ray ban sunglasses

    coach outlet

    michael kors outlet online

    kate spade outlet online

    pandora charms sale clearance

    moncler jackets

    ugg outlet

    mulberry uk

    kate spade handbags

    christian louboutin shoes

    pandora jewelry

    air jordan retro

    ralph lauren outlet

    pandora charms sale clearance

    adidas outlet online

    true religion jeans

    chrome hearts online store

    blackhawks jerseys

    michael kors outlet clearance

    foamposite shoes

    michael kors outlet online

    coach outlet

    ray ban sunglasses outlet

    air max 90

    north face outlet

    polo ralph lauren shirts

    longchamp pliage

    ugg boots clearance

    adidas wings shoes

    michael kors outlet clearance

    ugg boots

    canada goose jackets

    mulberry handbags

    mlb jerseys

    nike air max 90

    ferragamo outlet

    jordan shoes

    ugg boots clearance

    herve leger dresses

    tory burch outlet

    michael kors outlet

    prada sunglasses for women

    cheap jordan shoes

    uggs outlet

    uggs outlet

    cheap ray ban sunglasses

    mont blanc pens

    nike revolution

    kobe bryants shoes

    christian louboutin shoes

    christian louboutin shoes

    lebron shoes

    ralph lauren polo

    cheap jordan shoes

    ralph lauren shirts

    cheap oakley sunglasses

    canada goose coats

    coach outlet online

    ralph lauren outlet

    north face outlet

    nfl jersey wholesale

    fitflops shoes

    longchamp pliage

    louboutin shoes

    nike air max 1

    canada goose outlet store

    nike shoes outlet

    michael kors outlet online

    fitflops

    polo ralph lauren outlet

    michael kors outlet clearance

    jordan shoes

    michael kors outlet online

    michael kors outlet

    christian louboutin shoes

    cheap oakley sunglasses

    true religion outlet

    coach outlet

    new york knicks

    burberry outlet store

    coach outlet online

    longchamp outlet online

    stussy hoodie

    true religion outlet uk

    pandora charms sale clearance

    cheap ray ban sunglasses

    michael kors outlet online

    kd shoes

    oakley sunglasses wholesale

    ugg outlet

    toms outlet

    nike blazer pas cher

    cheap football shirts

    hermes belts

    supra shoes sale

    nfl jerseys

    golden state warriors

    michael kors bags

    coach handbags on sale

    burberry outlet sale

    polo ralph lauren

    pandora charms sale clearance

    ugg boots on sale

    ugg boots clearance

    pandora charms

    bottega veneta outlet online

    canada goose jackets outlet

    coach outlet store

    fitflops sale clearance

    moncler outlet online

    michael kors canada

    coach outlet online

    mbt

    jordan retro

    cheap jordan shoes

    fitflops

    christian louboutin shoes

    coach factory outlet

    coach outlet clearance

    mulberry outlet,mulberry handbags outlet

    canada goose outlet store

    new balance outlet

    cheap jordan shoes

    reebok shoes

    pandora outlet

    cheap nhl jerseys

    canada goose jackets sale

    canada goose jackets

    cheap oakley sunglasses

    fitflops

    cheap jordans free shipping

    uggs outlet

    cheap ugg boots

    lacoste polo

    uggs outlet

    michael?kors?outlet?online

    nike roshe run

    polo ralph lauren outlet

    kate spade sale

    christian louboutin shoes

    cheap oakley sunglasses

    true religion uk

    michael kors outlet

    adidas yeezy boost

    louboutin outlet

    longchamp handbags sale

    coach outlet online

    michael kors outlet online

    adidas shoes

    nfl jerseys

    canada goose jackets

    pandora charms sale clearance

    moncler outlet store

    cheap ray ban sunglasses

    true religion outlet

    pandora charms sale clearance

    christian louboutin outlet

    mizuno shoes

    nike outlet store

    swarovski outlet store

    ugg outlet stores

    mbt

    mulberry handbags sale

    michael kors outlet online

    nike air huarache

    michael kors outlet clearance

    michael kors outlet

    links of london jewellery

    christian louboutin shoes

    tory burch handbags

    coach factory outlet

    ferragamo shoes sale

    fitflops shoes

    broncos jerseys

    michael kors factory outlet

    coach outlet

    pandora outlet

    michael kors outlet online

    san antonio spurs

    canada goose outlet online

    ugg outlet

    cheap nhl jerseys

    cheap jordans for sale

    uggs outlet

    nike air max 90

    michael kors uk

    balenciaga shoes

    uggs outlet

    true religion outlet

    miu miu shoes

    cheap jordans

    michael kors outlet clearance

    kate spade

    canada goose outlet store

    michael kors outlet online

    christian louboutin shoes

    pandora charms sale clearance

    jordan shoes

    cheap jordan shoes

    kate spade handbags

    texans jerseys

    swarovski jewelry

    air jordan shoes

    ralph lauren outlet

    christian louboutin shoes

    uggs outlet

    asics running shoes

    nike outlet online

    coach outlet store

    adidas crazy

    cheap jerseys wholesale

    valentino shoes

    mlb jerseys

    michael kors outlet online

    coach factory outlet

    coach canada

    coach factory outlet

    jordan shoes

    christian louboutin shoes

    pandora jewelry

    uggs outlet

    michael kors outlet

    canada goose jackets

    moncler jackets

    ray ban sunglasses

    longchamp outlet

    uggs outlet

    adidas nmd runner

    undefeated shoes

    lacoste shirts

    cheap nba jerseys

    oakley sunglasses wholesale

    49ers jersey

    true religion outlet

    ugg outlet

    uggs outlet

    coach outlet

    ferragamo shoes

    hermes birkin bag

    fred perry polo

    cheap basketball shoes

    moncler outlet store

    supreme t shirts

    marc jacobs sale

    ugg boots

    pandora charms sale clearance

    michael kors outlet online

    coach factory store

    oakley sunglasses wholesale

    christian louboutin shoes

    air jordan shoes

    polo ralph lauren shirts

    canada goose outlet store

    cheap jordans

    hermes outlet store

    tory burch outlet online

    canada goose

    tory burch outlet online

    christian louboutin outlet

    ralph lauren polo

    air jordan shoes

    ralph lauren polo

    mcm backpacks

    nike air max

    true religion outlet

    toms outlet

    supreme t shirts

    givenchy handbags

    mishka snapbacks

    yeezy boost 350

    pandora charms sale clearance

    uggs outlet

    ugg boots clearance

    michael kors outlet online

    kobe shoes

    true religion outlet

    gucci outlet online

    pandora charms

    uggs outlet

    coach factory outlet

    swarovski uk

    supreme t shirts

    adidas store

    ralph lauren polo

    coach outlet

    coach outlet online

    canada goose outlet store

    michael kors outlet online

    canada goose outlet store

    longchamp pas cher

    prada outlet online

    mulberry bags

    moncler coats

    soccer jerseys wholesale

    2018 world cup jerseys

    polo ralph lauren

    vans sneakers

    chrome hearts outlet store

    coach outlet

    jordan 12

    pandora outlet

    coach outlet online

    cheap ray ban sunglasses

    canada goose outlet

    pandora jewelry

    ferragamo shoes

    coach outlet online

    ugg outlet

    malone souliers

    football shirts

    north face denail jacket clearance

    kobe 9 elite

    polo ralph lauren outlet

    michael kors outlet online

    coach outlet online

    fitflops sale clearance

    nike air max 2017

    canada goose outlet store

    coach outlet

    ysl outlet online

    true religion jeans

    kate spade sale

    uggs outlet

    air jordan shoes

    true religion outlet

    christian louboutin shoes

    michael kors wallets for women

    tods outlet online

    uggs outlet

    jordan 4

    ferragamo shoes

    van cleef arpels jewelry

    canada goose jackets

    swarovski outlet store

    mulberry uk

    polo outlet factory store

    ralph lauren outlet

    ferragamo shoes

    michael kors uk

    mulberry bags

    nike shoes outlet

    pandora outlet

    under armour outlet

    ugg outlet

    cheap ray ban sunglasses

    kate spade sale

    canada goose outlet store

    michael kors outlet online

    cleveland cavaliers jerseys

    coach outlet online

    tory burch outlet online

    kate spade sale

    oakley sunglasses wholesale

    christian louboutin pas cher

    colts jerseys

    michael kors outlet online

    michael kors outlet online

    nike shoes outlet

    bvlgari outlet

    coach outlet store online

    coach outlet online

    michael kors outlet online

    nfl jerseys

    canada goose jackets

    toms outlet

    swarovski jewellery

    true religion outlet store

    uggs outlet

    tory burch outlet online

    adidas yeezy boost

    michael kors outlet clearance

    nike shoes outlet

    ralph lauren polo

    air force 1 shoes

    canada goose jackets

    cheap jordans

    ed hardy outlet

    christian louboutin shoes

    canada goose outlet

    ugg outlet

    gucci outlet online

    barbour women jackets

    birkenstock shoes

    fitflops sale clearance

    moncler outlet online

    michael kors outlet clearance

    jordan 4

    cheap nba jerseys

    burberry outlet online

    nike air max 97

    canada goose outlet store

    ugg outlet

    coach outlet online

    gucci outlet store

    kate spade outlet online

    Trả lời

Trở về
  • HTML5 Canvas
  • HTML5 Canvas

     The <canvas> element is used to draw graphics, on the fly, on a web page. Draw a red rectangle, a gradient rectangle,...