export برای وب و ویدیو
فرمتهای خروجی و بهینهسازی حجم.
قدم اول: Publish Settings overview
File > Publish Settings پنجره اصلی export است. Targets مختلف: HTML5 Canvas (JavaScript + Canvas برای وب interactive)، JavaScript/HTML (CreateJS/EaselJS legacy)، Animated GIF، PNG sequence، QuickTime MOV. هر target format و use case متفاوت دارد — انتخاب wrong target = rework.
HTML5 Canvas برای landing animation، interactive banner، و vector sharp at any size توصیه میشود. JavaScript/HTML legacy است اما بعضی پروژههای قدیمی هنوز EaselJS استفاده میکنند. برای پروژه جدید Nova Lab، HTML5 Canvas default است.
Default output: .html + .js + folder assets (images، sounds). Include hidden layers را unchecked بگذارید — layer مخفی برای reference در .fla OK است اما export نباید بیاید. Compress movie در publish settings quality/size tradeoff دارد.
Bitmap compression: هر bitmap در Library > Properties resolution و JPEG/PNG quality تنظیم میشود. Import bitmap at 72 DPI برای screen کافی است — 300 DPI print quality در web فقط file size inflate میکند. Vector complexity هم js render size را affect میکند.
قبل از اول publish، Document Type را verify کنید (HTML5 Canvas vs ActionScript). تغییر document type mid-project ممکن است اما بعضی features migrate نمیشوند — از ابتدا target را مشخص کنید.
در تیمهای محصول، export decision معمولاً با developer و marketing align میشود: developer میپرسد interactive لازم است؟ marketing میپرسد autoplay muted در landing OK است؟ پاسخ این سؤالات قبل از Publish Settings وقت save میکند — rework export گرانتر از rework design است.
قدم دوم: export HTML5 برای وب
Document type HTML5 Canvas. Publish با Ctrl+Enter یا File > Publish. Output folder شامل index.html، یک .js bundle، و subfolder assets. index.html را در browser باز کنید — animation باید play شود. اگر blank page، browser console (F12) error را check کنید — معمولاً path یا CORS issue است.
Responsive: در Publish Settings > Make Responsive — Width/Height percent یا fit viewport. Test resize browser window — animation باید scale شود نه crop. برای embed در WordPress یا landing page، iframe با responsive wrapper common pattern است.
Hosting: upload کل output folder به server — relative paths break اگر فقط .html upload شود بدون assets. CDN برای .js library اگر bundle split شده. local test با Live Server (VS Code) یا python -m http.server — file:// protocol گاهی js block میکند.
Preloader: frame ۱ loading animation (spinner یا logo)، frame ۲+ main content. Properties > Include preloader در publish. برای heavy animation، preloader UX critical است — user بدون feedback blank screen میبیند.
Interactive HTML5: button symbols و simple ActionScript/JavaScript click handler برای CTA. static animation → MP4 سادهتر است؛ interactive (click، hover) → HTML5 لازم. scope را قبل از export مشخص کنید.
دسترسیپذیری HTML5: اگر animation informational است، alt text یا aria-label در embed wrapper بنویسید. autoplay بیصدا (muted) معمولاً policy browser را رعایت میکند؛ autoplay با sound block میشود. برای user با reduced motion preference، CSS media query prefers-reduced-motion میتواند animation را pause کند — در handoff به dev mention کنید.
قدم سوم: export ویدیو MP4/MOV
File > Export > Export Video یا Export Media (بسته به نسخه Animate). Adobe Media Encoder workflow: queue composition، format H.264 MP4 — universal playback iOS، Android، desktop. MOV برای editing در Premiere/Resolve.
Resolution match stage (1920×1080) یا 2x برای retina display. Frame rate match timeline (24 یا 30) — resample بعد export quality از دست میدهد. Bitrate 8-15 Mbps برای 1080p balance quality/size؛ 5 Mbps برای web embed کوچکتر.
Transparent background: Animate direct MP4 alpha ندارد. workflow: export PNG sequence با alpha (یا MOV Animation codec — file huge)، composite در After Effects یا Premiere روی background. practical alternative: render روی solid color (green screen) و key در post.
Audio: Stream sound در timeline — verify include در video export. Scrub و listen sync — lip sync یا music beat off-by-one-frame محسوس است. export test clip ۵ ثانیه قبل full render — save time اگر مشکل باشد.
برای social: square 1080×1080 (Instagram feed)، vertical 1080×1920 (Stories/Reels/TikTok). stage resize قبل export یا crop در post — safe zone برای text و logo در center نگه دارید.
Media Encoder preset: YouTube 1080p، Vimeo، یا custom H.264. two-pass encoding quality بهتر با زمان render بیشتر. برای iteration سریع، draft preset (lower bitrate) export کنید؛ final delivery با preset بالاتر. watermark یا logo burn-in را در Animate layer جدا بگذارید تا در post بدون re-render Animate قابل toggle باشد.
قدم چهارم: بهینهسازی حجم
Symbol optimization: Merge redundant shapes (Modify > Combine Objects). Remove unused Library items: File > Manage Assets یا manual delete. هر unused bitmap در export js bundle inflate میکند حتی اگر stage visible نباشد.
Bitmap: Import at appropriate size — اگر display 200px است، 400px (2x retina) max import کنید، نه 2000px. Compress PNG/JPEG در Photoshop یا Squoosh before import. PNG-8 برای flat color، JPEG برای photo texture.
Vector complexity: Simplify paths — Object > Shape > Optimize یا manually delete excess anchor points. Fewer points = smaller js و faster render. gradient و filter expensive هستند — flat color برای web banner lightweightتر.
Sprite sheet: برای game export، Publish sprite sheet — single atlas GPU friendly. Texture Packer external alternative. frame count و resolution sprite sheet size را dominate میکند — ۱۶ frame 128px در مقابل ۶۴ frame 512px تفاوت چند مگابایتی ایجاد میکند.
Budget example: web banner < 200KB js + assets؛ landing hero animation < 2MB total. Lighthouse/PageSpeed بعد deploy — target LCP acceptable. اگر over budget، bitmap compress اول، سپس vector simplify، سپس frame count reduce.
Cache strategy: filename با hash در build pipeline (مثلاً anim.v2.js) تا browser cache bust شود وقتی update deploy میکنید. بدون versioning، user animation قدیمی میبیند یا hard refresh لازم است — در README handoff versioning policy را document کنید.
قدم پنجم: GIF و social formats
File > Export > Export Animated GIF. Colors 128-256 — کمتر = file کوچکتر، banding بیشتر. Dither diffusion banding را reduce میکند. Width 480-800px برای Twitter/Discord — platform limit معمولاً 5-15MB.
Loop count: infinite برای ambient animation، once برای notification-style. FPS 12 برای GIF کافی — 24 fps file size double بدون benefit visible در GIF palette limit. Trim duration — ۳-۵ ثانیه loop بهتر از ۳۰ ثانیه one-shot.
Square 1:1 Instagram: stage 1080×1080 قبل export. Vertical 9:16 Stories: 1080×1920. LinkedIn و Facebook video: MP4 upload quality بهتر از GIF — platform transcode GIF به video anyway.
Alternative workflow: export MP4 از Animate، upload native به Instagram/TikTok — quality، color depth، و file efficiency بهتر. GIF فقط وقتی autoplay loop بدون sound control لازم است (مثلاً Slack emoji، email embed محدود).
Poster frame: یک PNG still از key frame برای thumbnail و og:image. social preview often static — poster frame باید readable و brand-aligned باشد.
Platform-specific limits را check کنید: Discord 8MB GIF، email client اغلب animation block. وقتی limit tight است، duration کوتاه + palette 64 color + width 480px معمولاً fit میکند. A/B test: همان animation به صورت MP4 و GIF در یک channel — engagement metric often MP4 برنده است.
قدم ششم: workflow حرفهای و QA
Master .fla archive — never overwrite source با فقط export. Version naming: project_v01.fla، v02.fla یا date-based. Git LFS برای .fla large files اگر team workflow دارید. export folder generated است — .gitignore کنید، .fla commit.
QA checklist: audio sync ✓، loop seamless ✓، mobile performance (test phone browser برای HTML5) ✓، file size under budget ✓، transparent/crop correct ✓، text readable at target size ✓. checklist printed یا در MR description — skip QA = client revision.
Lighthouse/PageSpeed برای HTML5: lazy load animation below fold — Intersection Observer یا loading="lazy" iframe. defer js اگر blocking. CDN برای static assets. First Contentful Paint مهمتر از perfect animation برای SEO landing.
Deliverables pack client handoff: source .fla، exported MP4 (1080p)، web folder (HTML5)، poster PNG، و README کوتاه (browser support، file list، update instruction). professional handoff = repeat business.
تمرین پایانی Nova Lab: همان Ball MC از lesson ۱ را HTML5 و MP4 export کنید، file size compare کنید، و یک paragraph بنویسید کدام format برای landing page static hero و کدام برای interactive CTA مناسبتر است — decision framework export را consolidate میکند.
Revision workflow: client feedback روی timing اغلب در .fla fix میشود نه در exported file. export را «render pass» بدانید — source .fla همیشه master. وقتی client «۲ ثانیه کوتاهتر» میخواهد، timeline edit و re-export؛ never edit MP4 in place as primary workflow.
سوالات متداول
HTML5 یا MP4 برای وب؟
MP4 با video tag سادهتر embed، predictable file size، و universal autoplay policy (muted). HTML5 interactive و vector infinite scale اما js payload و render cost. static animation (no click) → MP4؛ interactive (button، hover state) → HTML5. hybrid: MP4 hero + HTML5 micro-interaction.
حجم HTML5 export زیاد است؟
Bitmap compress و resize، vector simplify paths، unused Library delete، minify js در post (اگر Animate minify نکرد). Host assets on CDN. split: critical animation inline، secondary lazy load. target < 500KB first load برای banner، < 2MB برای full landing.
transparent GIF ممکن است؟
GIF یک رنگ transparent دارد — halos و jagged edges دور anti-aliased shape. PNG sequence یا WebM VP9 alpha quality بهتر. practical: MP4 روی solid brand background یا green screen key در post. transparent GIF فقط icon ساده flat color.
Frame rate export را تغییر دهم؟
Timeline fps را قبل export set کنید — Document Properties > Frame Rate. Resample در Media Encoder یا After Effects بعدی motion blur و timing alter میکند. 24 cinematic، 30 web/TV standard، 60 rare برای smooth UI micro-motion. consistency source و export.