انیمیشن

اصول استوری‌بورد و timing در انیمیشن

ریتم، spacing و staging قبل از keyframe تعیین می‌کنند انیمیشن خوانا باشد یا گیج‌کننده — پایه حرفه‌ای هر پروژه Animate.

تیم Nova Lab · · ۱۵ دقیقه مطالعه

استوری‌بورد: نقشه قبل از حرکت

استوری‌بورد اولین جایی است که ایده از ذهن به فضای قابل بحث تبدیل می‌شود. قبل از باز کردن Adobe Animate، باید بدانید داستان بصری شما چند shot دارد، camera angle کجاست، و action اصلی در هر فریم چیست. استوری‌بورد خوب لزوماً نقاشی حرفه‌ای نیست؛ واضح بودن مهم‌تر از زیبایی است.

برای دانشجویان Nova Lab، template ساده استوری‌بورد شامل: شماره shot، sketch، توضیح action، duration تقریبی، و note برای sound/dialogue کافی است. حتی thumbnailهای ۳۰ ثانیه‌ای روی کاغذ A4 می‌توانند ساعت‌ها iterate بی‌هدف در timeline را جلوگیری کنند.

در پروژه‌های محصول (onboarding، explainer)، استوری‌بورد با script یا copywriter هماهنگ می‌شود. هر panel باید یک message واحد داشته باشد. اگر در یک shot هم «معرفی feature» و هم «CTA» دارید، split کنید. clarity در storyboard = clarity در animation نهایی.

timing: ریتم و احساس حرکت

timing یعنی چند frame یک action طول می‌کشد. همین عدد ساده، احساس weight، energy و emotion را تعیین می‌کند. حرکت سریع = surprise، energy، lightness. حرکت کند = weight، sadness، importance. در Animate، frame rate پروژه (معمولاً ۲۴fps برای cinematic، ۳۰ یا ۶۰fps برای UI) baseline شماست.

قانون practical: action اصلی (anticipation → action → follow-through) باید readable باشد. اگر ball bounce در ۶ frame تمام شود، روی ۲۴fps فقط ۰.۲۵ ثانیه است — برای comedy خوب، برای instruction بد. برای tutorial UI، ۱۲–۱۸ frame (۰.۵–۰.۷۵ ثانیه) اغلب مناسب‌تر است.

timing sheet جدولی است که frame number هر key pose را ثبت می‌کند. قبل از tween در Animate، timing sheet بکشید. وقتی director یا client بگوید «کمی سریع‌تر»، می‌دانید دقیقاً کدام keyframeها را جابه‌جا کنید — نه حدس زدن random.

spacing: فاصله بین poseها

spacing مکمل timing است. دو animation با timing یکسان می‌توانند spacing متفاوت داشته باشند و کاملاً متفاوت به نظر برسند. spacing tight = acceleration، urgency. spacing wide = float، ease، deceleration. در classic animation، spacing با فاصله فیزیکی drawingها بین keyframe کنترل می‌شود؛ در digital tween، با easing curve.

در Adobe Animate، Classic Tween و Motion Tween easing presets دارند (ease in، ease out، custom bezier). اما preset کافی نیست — باید graph editor یا manual keyframe adjustment را یاد بگیرید. slow-in و slow-out (ease at start/end of action) تقریباً همیشه natural‌تر از linear motion است.

تمرین پیشنهادی Nova Lab: یک ball drop از ارتفاع ثابت را سه بار animate کنید — linear spacing، ease-in heavy spacing، و bouncy overshoot spacing. side-by-side compare کنید. این exercise ساده درک spacing را عمیق‌تر از ساعت‌ها theory می‌کند.

anticipation، action و follow-through

سه اصل پایه Disney که هنوز در motion design مدرن معتبرند. anticipation: حرکت کوچک مخالف قبل از action اصلی (کم کردن قبل از jump). action: حرکت اصلی. follow-through: ادامه inertia بعد از stop (موهای character، لباس، tail).

در UI motion، anticipation می‌تواند subtle باشد: دکمه قبل از expand کمی shrink می‌کند. follow-through در modal open: content کمی overshoot then settle. بدون اینها، animation robotic و cheap به نظر می‌رسد — حتی اگر technically correct باشد.

در timeline Animate، anticipation را ۲–۴ frame قبل از main action قرار دهید. follow-through ۳–۸ frame بعد از contact. این range starting point است؛ style پروژه (playful vs corporate) تنظیم می‌کند.

staging و readability

staging یعنی present کردن action به شکلی که audience (یا user) بدون سردرگمی بفهمد چه اتفاقی می‌افتد. silhouette واضح، یک focal point در هر shot، contrast بین foreground/background، و camera angle مناسب همگی staging هستند.

در explainer animation، متن و icon نباید با character compete کنند. rule of thirds و negative space کمک می‌کند. اگر دو element مهم همزمان move کنند، eye tracking سخت می‌شود — sequence کنید: اول A، pause کوتاه، بعد B.

برای storyboard review، thumbnail را کوچک کنید (مثلاً ۱۰٪ size). اگر silhouette و focal point هنوز readable است، staging موفق است. اگر blur شد، redesign قبل از animate.

از storyboard به timeline Animate

workflow پیشنهادی: storyboard → animatic (storyboard + timing rough در Animate یا video editor) → feedback → final animation. animatic ارزان است برای iterate؛ final animation گران. client/stakeholder را روی animatic approve کنید.

در Animate، هر storyboard panel = یک scene یا labeled section در timeline. layer structure را early تعریف کنید: background، midground، character، FX، UI overlay. naming convention مثل «char_arm_L» به جای «Layer 47» در پروژه ۱۰۰+ layer حیاتی است.

reference video برای complex motion (walk cycle، liquid pour) ضبط کنید و frame-by-frame analyze کنید. timing واقعی physics را به animation inject می‌کند. در Nova Lab، exercise walk cycle با reference video بخش استاندارد دوره است.

اشتباهات رایج و چک‌لیست قبل از تحویل

اشتباه ۱: شروع مستقیم در timeline بدون plan — منجر به over-animation و inconsistency. اشتباه ۲: timing یکنواخت everywhere — همه چیز linear و boring. اشتباه ۳: ignore hold — هر frame moving = exhausting. hold (pause on pose) به audience زمان digest می‌دهد.

چک‌لیست: آیا storyboard approve شده؟ timing sheet نوشته شده؟ spacing natural است (slow-in/out)؟ staging readable در thumbnail کوچک؟ anticipation/follow-through وجود دارد؟ duration کل با brief همخوان است؟

اصول storyboard و timing skillهای lifetime هستند. هر پروژه Animate — چه character animation، چه motion graphic — روی همین پایه بنا می‌شود. invest در pre-production، production را سریع‌تر و حرفه‌ای‌تر می‌کند.

سوالات متداول

frame rate پروژه Animate را چند انتخاب کنم؟

برای animation سینمایی و character: ۲۴fps. برای UI motion و web: ۳۰fps یا ۶۰fps. consistency در کل پروژه مهم است؛ mid-project تغییر fps باعث مشکل timing می‌شود.

آیا باید hand-drawn storyboard بکشم؟

نه الزاماً. digital sketch در Procreate، Figma یا حتی rough drawing در Animate کافی است. هدف clarity و communication است، نه artistic masterpiece.

timing sheet چه فرمتی دارد؟

جدول ساده: ستون shot number، action description، frame start، frame end، duration (ثانیه)، notes. می‌توانید در Google Sheet یا Notion template بسازید و برای هر پروژه replicate کنید.

چطور timing را برای audience غیرفارسی تنظیم کنم؟

timing visual language است و به زبان وابسته نیست، اما text reveal باید با reading speed هماهنگ باشد. برای copy انگلیسی، duration text hold را با native speaker یا readability guideline (مثلاً ۲۰۰ WPM) calibrate کنید.