Create an Image Tween Animation

Tạo ra một hình ảnh Tween hoạt hình

Have you ever thought about directly change one image to another in your Flash movies, like a magician giving performance on the stage? Now I can tell you that the Sothink SWF Quicker V3.0 will help you to realize your dream. 

Bạn đã bao giờ nghĩ về trực tiếp thay đổi một hình ảnh khác trong phim Flash của bạn, như một nhà ảo thuật cho hiệu suất trên sân khấu? Bây giờ tôi có thể nói với bạn rằng Sothink SWF Quicker v3.0 sẽ giúp bạn thực hiện ước mơ của bạn. 

Link SWF: http://www.sothink.com/images/fck/flash/SWFQuicker/imagetween.swf


Series: SWF Quicker 3.0
Estimated Time of Completion: 45 minutes
Description: In this course, you'll mainly learn how to create image tween animations, however, the functions like creating motion tween animations, adding texts and creating fade in/out effects are also involved.

Prepare:
1. Click imagetween.zip (42.9 KB) to download the images required in this tutorial, and extract them to a local folder named as imagetween.
2. Launch Sothink SWF Quicker and new a blank document.


Step One: Create image tween animation – Change a goat to a giraffe
1. In Properties panel, set Width to 470, and set Height to 212.
2. In timeline, rename "Layer1" to "image". Then add a new layer and name it as "background".
3. In frame 1 of the "background" layer, import the background.png from the imagetween folder, and set its X, Y values to 235,105.5 from the Transform panel. In frame 90, press F6 to insert a keyframe.
4. In frame 1 of "image" layer, import the pic_1.jpg from the imagetween folder. From the Transform panel, set X, Y values of this image to 175,105.
5. In frame 15 of "image" layer, insert a blank keyframe and import pic_2.jpg to this frame. Set its X, Y values to 175,105.
Ước lượng thời gian hoàn thành: 45 phút 
Mô tả: Trong khóa học này, bạn sẽ chủ yếu là học cách để tạo ra hình ảnh tween hình ảnh động, tuy nhiên, các chức năng như tạo chuyển động tween hình ảnh động, thêm văn bản và tạo ra mờ dần vào / ra hiệu ứng . cũng tham gia 
Chuẩn bị: 1. Nhấpimagetween.zip (42,9 KB) để tải về các hình ảnh cần thiết trong hướng dẫn này, và giải nén chúng vào một thư mục có tên là imagetween. 2. Khởi động Sothink SWF Quicker và mới một tài liệu trống. 
Bước Một: Tạo hình ảnh hoạt hình tween - Thay đổi một con dê vào một con hươu cao cổ 1. Trong bảng Properties, thiết lập Width là 470, và thiết lập Height là 212. 2. Trong thời gian, đổi tên "Layer1" thành "hình ảnh". Sau đó thêm một layer mới và đặt tên là "nền".3. Trong frame 1 của layer "nền", nhập khẩu các background.png từ thư mục imagetween, và thiết lập X, giá trị Y để 235,105.5 từ bảng Transform. Trong frame 90, nhấn F6 để chèn một keyframe. 4. Trong frame 1 của layer "hình ảnh", nhập khẩu các pic_1.jpg từ thư mục imagetween. Từ bảng điều khiển chuyển đổi, tập X, giá trị Y của hình ảnh này đến 175.105. 5. Trong frame 15 của layer "hình ảnh", chèn một keyframe trống và nhập khẩu pic_2.jpg vào khung này. Thiết lập X, giá trị Y 175.105.

6. Right click any frame between frame 1 and 15 of the "image" layer, and choose Create Image Tween from the context menu. Now this image tween animation of changing a goat to a giraffe is almost completed. You can click the preview button to see the effect.
7. After previewing the effect, you may find that the transform process is a little rough, so you should take more time to configure the effect to be more exquisite.
8. Click any frame between frame 1 and 15 of the "image" layer, and click Configure the Tween… in the Properties panel to open the Image Tween Editor dialog box.
9. In the Image Tween Editor dialog box, click to add hint points in the Source window. And adjust positions for corresponding hint points appeared in the Destination window.
10. Finally, click OK to save the transform process. Now you can click preview button to see the goat changes to a giraffe.

Tips:
1) The more hint points you added, the more exquisite the transform process will be.
2) To judge whether the hint points are added correctly and efficiently, you can see that if the image in the Preview window become clearer and clearer.
3) Right click a hint point may delete it.
6. Kích chuột phải vào bất kỳ khung giữa frame 1 và 15 của layer "hình ảnh", và chọn Create Image Tween từ menu ngữ cảnh. Bây giờ hình ảnh này tween hình ảnh động của việc thay đổi một con dê vào một con hươu cao cổ là gần như hoàn tất. Bạn có thể nhấn vào nút Preview để xem trước hiệu ứng. 
7. Sau khi xem trước hiệu ứng, bạn có thể thấy rằng quá trình biến đổi là một chút thô, vì vậy bạn nên dành thời gian nhiều hơn để cấu hình các hiệu ứng để được tinh tế hơn. 
8. Nhấp vào bất kỳ khung giữa frame 1 và 15 của layer "hình ảnh", và nhấn Configure Tween ... trong bảng Properties để mở hình ảnh Tween biên tập hộp thoại. 
9. Trong ảnh Tween biên tập hộp thoại, bấm vào để thêm điểm gợi ý trong cửa sổ Source. Và điều chỉnh vị trí cho điểm gợi ý tương ứng xuất hiện trong cửa sổ Destination. 
10. Cuối cùng, nhấn OK để lưu các quá trình biến đổi. Bây giờ bạn có thể nhấp vào nút Preview để xem trước những thay đổi con dê vào một con hươu cao cổ.
Lời khuyên: 1) Các điểm hơn bạn gợi ý thêm, tinh tế hơn quá trình chuyển đổi sẽ được. 2) Để đánh giá liệu các điểm gợi ý được thêm vào một cách chính xác và hiệu quả, bạn có thể thấy rằng nếu hình ảnh trong cửa sổ xem trước trở nên rõ ràng hơn và rõ ràng hơn. 3) Nhấp chuột phải vào một điểm gợi ý có thể xóa nó. 

Link SWF: http://www.sothink.com/images/fck/flash/SWFQuicker/addhintfile4.swf


Step Two: Create image tween animation – Change a giraffe to a lion
1. In frame 18 of the "image" layer, press F6 to insert a keyframe. So the second image will be remained for a while before changing to a lion, which will make your animation to be visually smooth.
2. In frame 27 of the same layer, press F5 to insert a blank keyframe, and import the pic_3.jpg from the imagetween folder. From the Transform panel, set X, Y values of this image to 175,105.
3. Right click any frame between frame 18 and 27, and choose Create Image Tween from the context menu. Now this image tween animation of changing a giraffe to a lion is almost completed. You can click the preview button to see the effect.
Bước hai: Tạo hình ảnh hoạt hình tween - Thay đổi một con hươu cao cổ để một con sư tử 
1. Trong khung 18 của lớp "hình ảnh", nhấn F6 để chèn một keyframe. Vì vậy, hình ảnh thứ hai sẽ được duy trì trong một thời gian trước khi chuyển sang một con sư tử, mà sẽ làm cho hình ảnh của bạn được trực quan trơn tru. 
2. Trong khung 27 của cùng một lớp, nhấn F5 để chèn một keyframe trống, và nhập khẩu các pic_3.jpg từ thư mục imagetween. Từ bảng điều khiển chuyển đổi, tập X, giá trị Y của hình ảnh này đến 175.105. 
3. Kích chuột phải vào bất kỳ khung giữa frame 18 và 27, và chọn Create Image Tween từ menu ngữ cảnh. Bây giờ hình ảnh này tween hình ảnh động của việc thay đổi một con hươu cao cổ để một con sư tử gần như hoàn tất. Bạn có thể nhấn vào nút Preview để xem trước hiệu ứng.

4. To further configure the transform process, please refer to step one for details.
5. Finally, click OK to save the transform process. Now you can click preview button to see the giraffe changes to a lion.



Step Three: The lion is faded out
1. In frame 30 of the "image" layer, press F6 to insert a keyframe. So the third image will be remained for a while before fading out, which will make your animation to be visually smooth.
2. Press F6 in frame 45 to insert a keyframe.
3. In frame 45, choose the Selection tool from the Tools panel, and then click to select the pic_3.jpg on the stage. Go to the Transform panel, select Alpha from the Color transform drop down list, and set alpha value to 70%.
4. Right click any frame between frame 30 and 45, and choose Create Motion Tween from the context menu.
5. Press F6 to insert a keyframe in frame 90 where the movie is planned to be ended.



Step Four: Adding question marks
1. Add two layers in timeline and respectively name them as "questionmark1" and "questionmark2".
2. In frame 35 of the "questionmark1" layer, press F6 to insert a keyframe. Choose Text tool from the Tools panel, and then go to the Properties panel, set font type to Arial, font size to 30, font color to white, and choose Bold. Finally, drag a rectangle box on the stage and input a "?" sign. Adjust the "?" to appropriately locate on the lion's nose, and drag the center point of the "?" to its center.
3. In frame 42 of the "questionmark1" layer, press F6 to insert a keyframe. Choose Transform tool from the Tools panel, click to select the "?" on the stage, and scale it to a larger size.
4. Right click any frame between frame 35 and frame 42 and choose Create Motion Tween from the context menu. Then go to the Properties panel, Set Rotate to CCW and Times to 5. Press F6 in frame 90 to add a keyframe. Now the first question mark is completed.
5. In frame 45 of the "questionmark2" layer, press F6 to insert a keyframe. Copy the "?" sign in frame 42 of the "questionmark1" layer, and paste it to the same position in frame 45 of the "questionmark2" layer by choosing "Paste in Place" option.
6. Press F6 to insert a keyframe in frame 54 of the "questionmark2" layer, and scale the "?" on the stage to a larger size. Then go to the Transform panel, select Alpha from the Color transform drop down list, and set alpha value to 50%.
4. Hơn nữa cấu hình quá trình chuyển đổi, xin vui lòng tham khảo bước một để biết chi tiết. 
5. Cuối cùng, nhấn OK để lưu các quá trình biến đổi. Bây giờ bạn có thể nhấp vào nút Preview để xem trước những thay đổi con hươu cao cổ để một con sư tử.Bước ba: sư tử dần dần biến mất 1. Trong frame 30 của layer "hình ảnh", nhấn F6 để chèn một keyframe. Vì vậy, hình ảnh thứ ba sẽ được duy trì trong một thời gian trước khi mờ dần ra, mà sẽ làm cho hình ảnh của bạn được trực quan trơn tru. 2. Nhấn F6 trong khung 45 để chèn một keyframe. 3. Trong khung 45, chọn công cụ Selection Tool từ bảng điều khiển công cụ, và sau đó bấm vào để chọn pic_3.jpg trên sân khấu. Đi vào bảng chuyển đổi, chọn Alpha từ màu chuyển đổi danh sách thả xuống, và đặt giá trị alpha đến 70%. 4. Kích chuột phải vào bất kỳ khung giữa frame 30 và 45, và chọn Create Motion Tween từ menu ngữ cảnh. 5. Nhấn F6 để chèn một keyframe ở frame 90, nơi bộ phim dự kiến sẽ được kết thúc. Bước Bốn: Thêm dấu hỏi 1. Thêm hai lớp trong thời gian tương ứng và đặt tên chúng là "questionmark1" và "questionmark2". 2. Trong khung 35 của "questionmark1" lớp, nhấn phím F6 để chèn một keyframe. Chọn công cụ văn bản từ bảng điều khiển công cụ, và sau đó đi đến bảng điều tiết, thiết lập loại phông chữ Arial, cỡ chữ 30, màu chữ là màu trắng, và chọn Bold. Cuối cùng, kéo một hộp hình chữ nhật trên sân khấu và một đầu vào "?" ký. Điều chỉnh "?" để xác định vị trí thích hợp trên mũi của sư tử, và kéo các điểm trung tâm của "?" đến trung tâm của nó. 3. Trong khung 42 của "questionmark1" lớp, nhấn phím F6 để chèn một keyframe. Chọn công cụ chuyển đổi từ bảng điều khiển công cụ, bấm vào để chọn "?" trên sân khấu, và quy mô nó đến một kích thước lớn hơn. 4. Kích chuột phải vào bất kỳ khung giữa frame 35 và frame 42 và chọn Create Motion Tween từ menu ngữ cảnh. Sau đó đi vào bảng Properties, đặt xoay vào bên trái và lần đến 5. Nhấn F6 trong khung 90 để thêm một keyframe. Bây giờ các dấu hỏi đầu tiên được hoàn thành. 5. Trong frame 45 của layer "questionmark2", nhấn F6 để chèn một keyframe. Sao chép "?" đăng nhập vào khung 42 của lớp "questionmark1", và dán nó vào vị trí tương tự trong frame 45 của layer "questionmark2" bằng cách chọn "Paste in Place" tùy chọn. 6. Nhấn phím F6 để chèn một keyframe ở khung 54 của lớp "questionmark2", và quy mô "?" trên sân khấu đến một kích thước lớn hơn. Sau đó đi vào bảng chuyển đổi, chọn Alpha từ màu chuyển đổi danh sách thả xuống, và đặt giá trị alpha đến 50%.

7. Right click any frame between frame 45 and frame 54 of the "questionmark2" layer and choose Create Motion Tween.



Step Five: Adding texts
1. Add two layers in timeline and respectively name them as "text1" and "text2".
2. Press F6 in frame 45 of the "text1" layer. Choose Text tool from the Tools panel, then go to the Properties panel, set font type to Arial, font size to 20, font color to white, and choose bold.
3. Drag a rectangle box on the stage and input "What's the next?". Set X, Y values of the text to 119, 181 from the Transform panel. Select Alpha from the Color transform drop down list, and set alpha value to 30%.
4. Press F6 to insert a keyframe in frame 54. Select the text on the stage and set its alpha value to 100%. Right click any frame between frame 45 and frame 54 and choose Create Motion Tween.
5. Press F6 to insert a keyframe in frame 90. Now the text 1 is completed.
6. Go to frame 1 of "text2" layer, Choose Text tool from the Tools panel, then go to the Properties panel, set font type to Century Gothic, font size to 18, and choose bold.
7. Drag a rectangle box on the stage and input "Easily get an image tween effect by Quicker 3.0". Choose "Easily get an image tween effect by" and set its color to #CC9900 from the Properties panel; Choose "Quicker 3.0" and set its color to #CC0000.
8. Name this text symbol as "bottom" and set its X, Y values to 290, 50.
9. Duplicate the "bottom" symbol in the Library and name the new one as "top".
10. Choose frame 1 of the "text2" layer, drag the "top" symbol to the stage.
11. Choose the Text tool, and then click to choose "Easily get an image tween effect by" in "top" symbol, go to the Properties panel, set color of the selected texts to white.
7. Kích chuột phải vào bất kỳ khung giữa frame 45 và frame 54 của layer "questionmark2" và chọn Create Motion Tween. Bước năm: Thêm văn bản 1. Thêm hai lớp trong thời gian tương ứng và đặt tên chúng là "text1" và "text2". 2. Nhấn phím F6 trong khung 45 của "text1" lớp. Chọn công cụ văn bản từ bảng điều khiển công cụ, sau đó đi đến bảng điều tiết, thiết lập loại phông chữ Arial, cỡ chữ 20, màu chữ là màu trắng, và chọn táo bạo. 3. Kéo một hộp hình chữ nhật trên sân khấu và đầu vào "Có gì tiếp theo?". X, Y giá trị của văn bản để 119, 181 từ bảng Transform. Chọn Alpha từ màu chuyển đổi danh sách thả xuống, và đặt giá trị alpha đến 30%. 4. Nhấn F6 để chèn một keyframe ở khung hình 54. Chọn văn bản trên sân khấu và thiết lập giá trị alpha của nó đến 100%. Kích chuột phải vào bất kỳ khung giữa frame 45 và frame 54 và chọn Create Motion Tween. 5. Nhấn F6 để chèn một keyframe ở frame 90. Nay là 1 văn bản được hoàn tất. 6. Tới frame 1 của layer "text2", Chọn công cụ văn bản từ bảng điều khiển công cụ, sau đó đi đến bảng điều tiết, thiết lập loại phông chữ Century Gothic, cỡ chữ 18, và lựa chọn táo bạo. 7. Kéo một hộp hình chữ nhật trên sân khấu và đầu vào "một cách dễ dàng có được một hiệu ứng hình ảnh bằng cách tween 3.0 nhanh hơn".Chọn "một cách dễ dàng có được một hiệu ứng hình ảnh bằng cách tween" và thiết lập màu là # CC9900 từ bảng Properties, chọn "nhanh hơn 3.0" và chọn màu là # CC0000. 8. Tên biểu tượng văn bản này là "đáy" và thiết lập X, Y giá trị đến 290, 50. 9. Lặp lại trong các biểu tượng "đáy" trong thư viện và đặt tên mới như "hàng đầu". 10. Chọn frame 1 của layer "text2", kéo biểu tượng "hàng đầu" trên sân khấu. 11. Chọn công cụ Text, và sau đó bấm vào để chọn "một cách dễ dàng có được một hiệu ứng hình ảnh bằng cách tween" trong biểu tượng "hàng đầu", đi vào bảng tính, thiết lập màu sắc của các văn bản được lựa chọn là màu trắng.

12. Set X, Y values of the "top" symbol to 289, 49.5.
13. Press F6 to insert a keyframe in frame 90 of "text2" layer.


That’s the end. Click preview button to see your artwork.
12. X, Y giá trị của biểu tượng "hàng đầu" để 289, 49.5. 
13. Nhấn F6 để chèn một keyframe ở frame 90 của layer "text2". Đó là kết thúc. Nhấp vào nút xem trước để xem tác phẩm nghệ thuật của bạn.

Link: http://www.sothink.com/tutorials/create-an-image-tween-animation.htm