Kỹ thuật tạo đồ họa chuyển động trong sản xuất video truyền thông

 Khoa, v a là hành động thi t th c hâ đ d g h o g độ g 
h ởng ng l i kêu gọi c a Th ng Chính u đ đ hụ h h i à ghé hà h mộ 
ph “ h ng d h h h ng giặ ” B ng hình ộ him Mỗi hu g ả h à mộ ả h mộ 
ả h đồ họ i h động, những ch đề gầ gũi độ g i g à hi i mộ h i ụ 
 h : Vi u Corona và cách phòng ch g; ảm gi h hâ h 
ch lây nhiễm bệnh viêm phổi đ ng hô hấp hu độ g [7] Ngà i đ i 
cấp do ch ng m i c a virus Corona; Phân biệt m ả h à hầ mềm hu h 
 m h ng và bệnh Covid-19 (tác giả phụ Photoshop, Illustrator, Premier, After 
trách); Cần làm gì sau khi ti p xúc v i g i Effect, thì iệ o id o ả h hu 
nghi nhiễm o o ; Ă g đ phòng ch ng độ g ẽ dễ dà g h hu à hô g 
Covid-19 trở đ giản, dễ hi u, dễ ghi đ dụ g hổ i 
nh h huỗi video bao gồm 3 phiên bản: 2.2. Hoạt hình flash 
video truyề hô g hô g h ng, video dành 
 ệ h g h ho h h à h g 
 ho g i khi m thính và phiên bản video 
 đ u i đ h d g wf à ầ h h 
ti g Lào đ đ g ải truyền thông trên 
 i g đ h Do h đ giả o g ả uấ 
f g f oo g Đ i học CNTT&TT 
 à h h ệ hấ hiều do h ghiệ đ 
và Khoa Truyề hô g đ h g iện. Và 
 dụ g o i id o đồ họ hu độ g à đ 
đặc biệt nhóm xây d g đ ất thành công v i 
 quả g o I Ho h h f h 
các video dành riêng cho cộ g đồng s dụng 
 dụ g ả h đồ họ o ả h 
ngôn ngữ ký hiệu. Việc chuy đổi à đ 
 h đ o gi i ấ ỳ h h mà 
nh đ c s ng hộ tích c c không chỉ c a 
 hô g àm giảm hấ g Đ i i 
riêng cộ g đồ g g i khuy t t t mà còn 
 h g h đ ghi hu g h h 
nh đ c s cổ ũ h h ệ rất l n t đô g 
 hi h đ hu g đ h d g hoặ 
đảo cộ g đồng m ng. 
 h g iệ h h him hoặ h h ả h 
2. Phương pháp tạo đồ họa động hu Ngoài hu g h h h đ 
T o g u ề hô g, đ h đ đ hiệu hi h g o g hi h ho g i 
 g h h h g đ g i d g h ội d g u i [8] 
du g u ề ải hải õ à g qu à dễ 2.3. Chuyển động 2D 
hi u hiều h g h đ o đồ họ 
 Ph g h à h à mộ g 
độ g h g mỗi o i ẽ hữ g u h 
 hấ đ h h h ả h đ h ầ i 
đi m i g 
 độ đ h Đ h d g ổi i g hấ 
2.1. Ảnh ghép chuyển động 2D i à à GIF GIF đ h i 
 o g ( ắ ghé ả h) à mộ hu g m 987 à đ h d g à u dữ iệu h h 
 o ghệ hu h u dụ g o g ghệ ả h g h dụ g màu i d d ghĩ 
 hu h gi . Mộ h m o g gồm à mỗi h h ả h h o gồm 256 màu H h 
 hữ g đ i g đ ắ d độ g GIF ấ đ giả dễ g h h à ẽ 
394  Email: jst@tnu.edu.vn 
 Ph Th và Đtg T h HOA HỌ & ÔNG NGHỆ ĐHTN 225(07): 392 - 399 
 độ g đ h i hầu h h g 3D i g ẽ Nh dễ dà g o hu 
du ệ w độ g à ắ i i h u hà h h h ả h 
Đ o ho h h 2D h g dụ g hoà hỉ h g mộ " ộ hu g" ảo 
đ i g i g ẻ à o g u i g 
 iệ S u đ ộ h h hâ mắ 
miệ g quầ o  hâ ẽ đ 
 hà hi ho h h àm ho hu 
độ g Keyframe (khung hình chính). 
Mộ huỗi f m h h à hữ g g 
 g i m m à hu độ g. Mỗi 
Keyf m mô ả mộ g h i đ i g 
 à hà h độ g h ẽ đ m h h Hình 4. Tạo chuyển động cho đối tượng 
 o giữ 2 Keyframe. Hình 3 ho hấ mộ 
 3. Các yếu tố ảnh hưởng, yếu tố trực quan 
 g i àm him ho h h ẽ ắ đầu i iệ 
 hi h i hoặ f m h h (hoặ 3.1. Các yếu tố ảnh hưởng và các thành 
 hiều h huộ ào đ i g à qu phần của đồ họa chuyển động 
 h hu đổi) hi đ đ h ho u đồ họ ở đâ o gồm hiều đ i 
h h ẽ h m hu g u g gi đ o g h h ả h uấ h đi m à hữ g hi 
qu h hu đổi à o ảo ả h i ụ ề g hầ mềm 2D h g h à h h 
 hu độ g đ i g. ả h ụ h à ũ g h hỉ à hữ g mả g 
 h i đ g é  h g gồm hoặ hiều 
 h h huộ ào ý ở g à âu hu ệ 
 mà đ g mu mi h họ h hiệ hô g 
 qua Motion Graphics. 
 3.1.1. Kịch bản 
 Việ ý ở g à i h ả đ ả uấ 
 id o h à mộ qu ọ g à đầ 
 h h đâ à ô g đo ả h h ở g 
 i đ ả h m ũ g h qu h ả uấ 
 Hình 3. Phương pháp frame by frame 
 id o hi i h ả ầ đ h õ mụ 
2.4. Chuyển động 3D 
 i u đ i g mu h g i; ội du g gắ 
 hu độ g 3D hi i hô g gi đ gọ õ à g đ giả à ắm đ u 
 hiều o ho g i m ảm gi h Do hả ầ đ hấ m h h à u h h 
 g o h h h i h h ả h h đ h i o g id o mu u ề ải Qua ô g ụ 
mắ à h g hồ g h u đ đ h độ 
 Wistia (wistia.com) - hầ mềm i h id o 
 âu môi g h mô hỏ g môi 
 ho do h ghiệ h g h i đ u 
 g 3D o g o g h hi h h i h h 
 h g âm ý g i d g hi m id o hô g 
ả h đồ g h i ho mỗi mắ Đ àm h 
 hà ả uấ ghi i h h ả h 3D ụ h h i qu iệ hâ h họ dà h o hi u h i gi 
đi m m à h V g h đ m id o họ hấ d g à i ụ 
dụ g mộ hi đặ iệ h hi h h i khi nào. 
h h ả h à i g iệ ho g mắ h giả T o g h h 5 hấ m độ ỏ g g 
 h m h h ả h h o h hoà oà 3D h giả hi xem một video quảng cáo có sự 
[10]. Trong Hình 4 h g h hấ ộ sụt giảm đặc biệt chỉ sau 2 phút. T đ h 
 h ( h mắ mũi à ổ ) hâ ho hấ g h g â d g ội du g 
 ho h h 3D đ â d g à đ i id o à g gắ à g h g hải đảm ảo 
 Email: jst@tnu.edu.vn 395 
 Ph Th và Đtg T h HOA HỌ & ÔNG NGHỆ ĐHTN 225(07): 392 - 399 
 u ề ải đ đầ đ à đ g hô g điệ i m id o đồ họ độ g g gấ 3 ầ 
 g i m id o MV g h u id o 
 ũ g g gấ 6 ầ id o MV 
 Bảng 1. Mức độ tiếp cận của người xem video 
 Hình thức Lượt xem Bình luận 
 Motion graphic 48.485.336 24.193 
 Quay MV 3.747.946 4.199 
 H h ả h à âm h h i qu đ ảm 
 gi h h o g i à h gi à h h 
 giác. V o g mộ h m đồ họ độ g 
 u h h ả h hấ dẫ h h giả ẽ 
 u g ào h h ả h; à o g mộ h m đồ 
 Hình 5. Minh họa mức độ xem của khán giả họ độ g o g đ âm h h hấ dẫ h 
3.1.2. Chuyển động h giả ẽ u g ào âm h h [ ] 
 hu độ g đ hà hi o 3.1.4. Hình ảnh 
 g h h đổi ội du g hu g Khi chúng ta làm việc v i hình ảnh trong 
ả h i i h u hâ h di hu Mo io G hi ghĩ à h g àm 
qu g i ả h h h u đ h việc v i Visual (th giác). Mà Visual ở đâ 
đổi h h màu ắ h i iệm hu 
 không chỉ có hình mà còn là s k t h p giữa 
độ g h đ hi u hô g qu h h 
 Typography (ki u chữ), bi u ng, thông tin 
 h h dụ g ặ i mộ u 
 theo một cấu trúc, tr t t ghĩ Đ t o nên 
 h gi o g hu độ g; h hu 
 s ghĩ à h g ần phải tìm hi u 
độ g ặ đi ặ i mộ g n trên màn 
 về các ki n th c, nguyên lý c a nghệ thu t th 
h h o hà h mộ o i h điệu [ ] 
 giác và quá trình hình thành giao ti p th giác 
3.1.3. Âm thanh [12]. Theo th ng kê c a Hubspot (công ty t i 
T h 7 % ả h h ở g h m đồ M về phát tri n và kinh doanh phần mềm 
họ hu độ g h g đ h hiệ ở đ h phục vụ cho ti p th và bán hàng) trên trang 
d g quả g o h g m i hoặ đ h bigstarmedia.vn cho thấy bộ o o g i 
d g g đ o ởi âm h h Mặ x lý hình ảnh nhanh gấp 60.000 lần x lý 
d hiệu g h h ả h à hu độ g đồ họ ả 9 % hô g i đ c x lý trong não 
hoà hảo h g ẽ hô g hiệu quả u 
 bộ o g i là thông tin hình ảnh, và 93% 
 h g hô g đi èm i âm h h h h 
 giao ti p giữ o g i v i o g i là 
Và hi â d g id o h h g họ 
 hình ảnh. Đ thấ động tích c c c a hình 
 hữ g gi i điệu âm h h ui i hộ h , 
 ảnh v i o g i, tác giả ti n hành khảo sát 
 dụ h h hi đ g 
 f g g Đ i học Công nghệ thông tin 
 ổi  Qu hảo id o ài h “Gh ô 
 ” (d g o Việ S hoẻ ghề và Truyền thông c (Hình 6) và sau (Hình 
 ghiệ à môi g h i h ĩ 7) hi đ g ải 5 id o đồ họa chuy n động 
 hắ H g ĩ Mi à ĩ E ik - tuyên truyền về Covid-19. Ta thấy s t 
https://www.youtube.com/watch?v=BtulL3oA g i fan g g khá rõ. Cụ th , 
rQw) đ h à d i d g id o đồ họ u 2 h g đ g ải thì s t click vào xem 
độ g à id o qu MV đ g ải ou u id o g 72 % éo h o t thích 
 gà 2 -23/4/2 2 h hấ g m độ g g 24% g i h o dõi g g 
 i g i m g đ i o ở id o đồ 127%, s g i ti p c n bài vi g 7 % 
họ hu độ g quả bả g ho hấ , và s g i bài vi g 97% 
396  Email: jst@tnu.edu.vn 
 Ph Th và Đtg T h HOA HỌ & ÔNG NGHỆ ĐHTN 225(07): 392 - 399 
 i độ g đ ảm h g i m 
 Màu ắ hả g đặ iệ ả h h ở g đ 
 âm g g i m à gâ hữ g 
 ảm h h u d ề h à 
 hâ họ hi u g ào ả hấ 
 âm o g i ầm qu ọ g màu 
 ắ ở õ à g [ 4] 
 3.1.6. Ánh sáng 
 Á h g à mộ u qu đ h o g uộ 
 Hình 6. Số liệu trước khi đăng tải video g o g i Vào m 2 4 mộ 
 ghi u h Tâm họ g i i u 
 d g đ h hiệ g h g à g m h 
 ảm o g i à g ả h h ở g à 
 gi g ả mặ h ẫ i u Nghi 
 u gồm u h ghiệm i m m i i hệ 
 giữ ảm à độ g u g qu h ảm 
 gi ấm g hi hữ g g i h m gi 
 đ i i h g ắ đỏ ảm 
 gi i u g hi h g h 
 Hình 7. Số liệu sau khi đăng tải video hi m u h Á h g à g ỡ ảm 
D ý hu à h độ g h h hữ g g i h m gi à g ở nên mãnh 
ả h hà i h à hà hi đều h iệ ả g độ à màu ắ h g đều 
 ầm qu ọ g iệ dụ g hấ iệu ả h h ở g đ âm g o g i Việ 
h h ả h o g hi i h Mộ h h dụ g h hu hi u g h h u ẽ 
ả h ắ mắ à g o uô à hấ iệu u ệ àm ho g h ở g g [ 5] 
 i đ o mộ ả h m hấ g D 3.2. Các yếu tố trực quan của đồ họa động 
 h h âm ý họ hội u h và vai trò của chúng trong truyền thông 
“H h ả h điều hi âm ” [ 3] lý giải điều Đồ họ h h ả h à ộ u h h ả h 
g o hữ g h h ả h u ề ải hô g o g đồ họ hu độ g h gi ải 
điệ hi h h hà g ảm h i ở g hiệ hấ g h m à g 
mu ắm à h đổi ả hâ T đ ẽ đ m độ hổ i ho h giả hoặ 
đ h h o h h ả h à hô g điệ g i Nhữ g h h ả h qu hải 
 u ề hô g hiệu quả đ hi h h i ý ở g mo g 
. H h ả h + hu độ g / ghĩ = mu à i u h h giả đ chúng h 
video u ề đ hô g điệ qu mộ h 
. H h ả h + hu độ g h h g/ hấ Nhiều hà hi h đ h gi đ g 
 i à ả h h ở g h u 
 ghĩ = id o ẫ 
 à o g iệ hu h ô g h g , họ 
. H h ả h ệ/ ấu/ hô g ý ghĩ + hu 
 h o đ h m đồ họ độ g hấ 
độ g = id o h hắ h id o ệ 
 g o 
3.1.5. Màu sắc 
 Nhữ g đi m h h o g gô gữ h h ả h 
Màu ắ à mộ hầ o g uộ g và hà h hầ đ dụ g o g đồ họ 
 h g à đ i i mộ g i hi h hu độ g [ 6] đ iệ d i đâ : 
màu ắ ô g qu ọ g Mộ ả h m 1 - u qu h h (đ g h h 
đẹ à h i h hoà hảo ụ à d g màu ắ h g ); 2 - Thà h hầ ; 
màu ắ Do đ màu ắ h h ẽ àm ho 3 - Các ph g h o gô gữ h h ả h; 
 hi ở i h độ g ắ mắ à 4 - hu o h gi 
 Email: jst@tnu.edu.vn 397 
 Ph Th và Đtg T h HOA HỌ & ÔNG NGHỆ ĐHTN 225(07): 392 - 399 
3.2.1. Bố cục Nhữ g đ ng Line dày th hiện s c ng cáp 
 ụ đ g i qu ọ g o g hi à h g d g đ nhấn m nh một chi ti t 
đồ họ h g đề đ ụ h ào đ o i tổng th . Mộ đ ng thẳng 
h h ả h ả à hà h hầ ụ à đ ng t trên xu g d i, t o cảm giác vững 
 iệ dụ g mẫu đồ họ à hô g gi đ chắ đ i ng n m song song v i mặt 
 o mộ hi ảm à o g đất luôn t o cảm giác yên bình, c đ ng 
 N à mộ o g hữ g ô g ụ õi chéo bi u hiện c a s di chuy à đ nh 
 hi đồ họ N u ụ hô g h ý h h g hà h động, nhữ g đ ng cong t o cảm 
 ả h m ẽ hô g h u ề đ đ h h giác thoải mái, an toàn, g i cảm  
 ội du g u ề thông à ẽ g h hi Việ hâ hi ắ hoả g h giữ 
 h quả g o đ i i do h ghiệ [ 5]. đ g Li ũ g o ảm gi ề hu 
3.2.2. Typograph (Kiểu chữ) độ g ảm gi h gi ở o g i ấ h 
T og h à mộ hầ hô g h hi u ảm i độ g âm ý à gi ghệ 
 o g hi T o g đồ họ hu độ g thì hu đ g Li o g mộ hu g h h 
Typography ẽ đ hà hi o V đ dụ g đ g mộ h hiệu 
 hu độ g g h di hu hô g qu quả h h g hải ắm đ đặ đi m 
 i đổi h o h i gi à hô g gi h o đ g Line ũ g h i g đ g 
đ g hẳ g đ g o g  [2] Tu hi Li à u ả h h ở g hấ à đ 
 hi đ ào đồ họ hu độ g g i dụ g hiều hấ o g đồ họ độ g à đ 
dụ g đôi „ i i‟ hô g i dụ g ở d g h h u i ý ghĩ 
h fo ào ho h h i hâ ả h khác nhau [17]. 
 h i hi ĩ h T og h o g 4. Kết luận 
Motion Graphics hỉ uấ hiệ o g mộ Đồ họ hu độ g à mộ h g h h 
 hoả g h i gi ấ gắ V hữ o g hiệ à gi o i i h giả qu h đề 
 id o h g u i o i fo hữ dễ à ĩ h độ đ o g iệ dụ g hiệu 
đọ h ou u N N u g đồ họ Trong đồ họ hu độ g, các 
G dho  à h h hữ g o i fo hữ u h gi gồm ý hiệu i u g đ 
qu mỏ g ẽ h m h hữ g fo h ộ i ý ở g h h ả h gồm h 
 hữ h g o ẽ àm g i m điệu hấ m h à độ g hả u đ 
 i mắ hi nhìn lâu [17]. h cùng âm th h à hu độ g u i 
3.2.3. Không gian trắng cùng, g g o hà hi khán 
 hô g gi ắ g à hầ qu ọ g o g giả ẽ đ h ở g h hữ g ả h m hấ 
mọi ụ hoả g g hô g ghĩ à g o. Đi m qu ọ g đ i i đồ họ 
 hỉ màu ắ g; đ gọi à „ hô g gi hu độ g o i h m đồ họ h 
âm‟ à hô g gi giữ hầ ội du g à hiệ diệ hu độ g à âm h h 
giữ d g h h m h hầ goài ề à u hiệu quả o g qu h ả h h ở g 
 hô g gi ắ g gi hi h hầ h đ âm h giả Đâ à mộ đi m mà 
nhau à o hài h ho hi [14]. hầu h h m đồ họ hi u Điều à 
3.2.4. Lines (các đường) giải o đồ họ hu độ g hả g 
Trong Animation (diễn ho t hình ảnh), Line hu độ g à m g i hiệu quả u ề 
đ c s dụ g đ t o ra s g động và hành hô g h h h h ghệ hu h 
động c a nhân v t giúp khán giả hi u õ h gi đ h h . 
về tình hu ng mà nhân v đ g h m gi T h đ n th i đi m hiện nay, thì Khoa Truyền 
Nhữ g đ ng Line mỏ g h ng mong manh, hô g đ h g iệ g Đ i học 
 h g h h p đ t o ra s nhẹ nhàng tinh t . NTT&TT à đ đầu tiên xây d ng thành 
398  Email: jst@tnu.edu.vn 
 Ph Th và Đtg T h HOA HỌ & ÔNG NGHỆ ĐHTN 225(07): 392 - 399 
công 05 video truyề hô g d i d g đồ họa TÀI LIỆU THAM HẢO/ REFERENCES 
độ g đ c chuy n th sang ngôn ngữ ký hiệu [1]. M. Betancourt, The Origins of Motion 
giúp cộ g đồ g g i khi m thính nh n bi t Graphics, Cinegraphic, 2012. 
và có k g ảo vệ s c khoẻ đ i d ch [2]. N. Babic, J. Pibernik, and N. Mrvac, “Media 
 Study: Motion Graphics,” 2008 50th 
Covid- 9 Đi h h à id o “Vi u Corona International Symposium ELMAR, IEEE 
và cách phòng ch ng” đ đ g ải trên Xplor, 2009. 
fanpage c T ng Đ i học Công nghệ [3]. J. Cone, The History of Motion Graphics, 
 Wildside Press, 2013. 
thông tin và Truyền thông Đ i học Thái [4]. M. Betancourt, Saul Bass - Animating 
Nguyên (Hình 8) sau 03 tuần đ g ải đ h n Modernist Design, Cinegraphic, 2011. 
đ h 7 5 t xem, 177 chia sẻ và hàng [5]. S. Skjulstad, “Communication design and 
 motion graphics on the Web,” Journal of Media 
 m g Practice, vol. 8, no. 3, pp. 359-378, 2007. 
 [6]. Snyder, and Sandra, “Fractals and collage 
 theorem expository paper,” Master of Arts in 
 Teaching with a Specialization in the 
 Teaching of Middle Level Math Ematics in 
 the Department of Mathematics, 2006. 
 [7]. M. Ternan, Stop Motion Animation: How to 
 Make & Share Creative Videos, Publisher 
 B.E.S, 2013. 
 [8]. G. Kirkpatrick, and K. Peaty, Flash Cartoon 
 Animation, Apress, Berkeley, CA, 2002. 
 [9]. T. Gasek, Frame-By-Frame Stop Motion: The 
 Guide to Non-Traditional Animation 
 Hình 8. Video sau 3 tuần đăng tải Techniques, Focal Press, 2011. 
 [10]. B. Byrne , 3D Motion Graphics for 2D 
Ngoài ra, các video này đ c các báo l n Artists:Conquering the Third Dimension, 
 h : Th h i ; Vi m ; Kênh 14; VOV Publisher Focal Press, 2011. 
 [11]. Woolman, Matt, Motion Design: Moving 
giao thông; báo Pháp lu t; báo Tiền Phong; Graphics for Television, Music Video, 
Nh p s ng s ; Nh p s ng th i đ i đ i Cinema, and Digital Interface, Rotovision, 
 United Kingdom, 2004. 
V i những k t quả đ đ c, nghiên c u đ [12]. U. Huy, Visual arts and basics (in 
phác thảo đ c b c tranh tổng quan về đồ họa Vietnamese), Art Publishing, 2019. 
chuy n động hỗ tr giảng viên, sinh viên [13]. Andrews, V. Leeuwen, and V. Baaren, 
 Visual control of mind - 30 techniques of 
Khoa Truyề hô g đ h g iện c a psychological control in communication, 
 g Đ i học Công nghệ thông tin và Labor Publishing, 2019. 
Truyền thông trong giảng d y và học t p, [14]. Braha, Yael, and B. Byrne, Creative Motion 
 Graphic Titling for Film, Video, and the Web, 
 ũ g h đ h đ c những y u t ch New York, Taylor & Francis, 2011. 
y u ả h h ở g đ n việc xây d ng sản ph m [15]. M. Furniss, Art in motion: Animation 
đồ họ đ h g iện c a sinh viên. T đ Aesthetics, John Libbey Publishing, 2008. 
 [16]. C. Nandi, Principles of Communication, Ess 
gi hà ng có những giải pháp nh m Publication, 2016. 
nâng cao chấ ng giảng d y, th c hiện mục [17]. J. A. Brandão, “Motion Graphics 
tiêu và nhiệm vụ đ đề đ có th xây d ng Ergonomics: Animated Semantic System, for 
 Typographical Communication Efficiency,” 
đ c những sản ph m có ích cho cộ g đồng. Elsevier Journal, vol. 3, pp. 6376-6379, 2015. 
 Email: jst@tnu.edu.vn 399