Executar e publicar animações

Apresentação

UC02242 (25h · 2,25 pts) do curso Técnico de Multimédia. Foca a fase de publicação: escolher os formatos certos, otimizar peso vs qualidade, adaptar a cada média (web, redes, ecrã, app), respeitar direitos e arquivar. Continua a UC02631 (2D) e UC02209 (3D) e dialoga com a UC02633 (edição de vídeo). Reaproveita lógica da UC00504 (imagens).

Destinos e exigências

Produzir = adaptar a cada destino, não exportar tudo igual.

Linear vs interativa

• Linear — toca do início ao fim sem interação (vídeo, GIF, loop). Codecs de vídeo / animados.
• Interativa — reage ao utilizador (play/pause/segmentos), pode ser controlada por código. Tecnologias: Lottie (JSON), CSS/SVG, WebGL/Three.js, jogos (Unity/Godot). Liga à UC02249 (multimédia interativo).

Formatos

Vídeo (codec + contentor)

Áudio: AAC (MP4) ou Opus (WebM).

Animação leve / imagens animadas

Para microinterações de UI/UX e ilustrações leves animadas, Lottie é o padrão moderno (exportado a partir de After Effects via Bodymovin ou de Rive).

Otimização

Vídeo

Parâmetros essenciais e como pensá-los:

• Resolução — ajustada ao destino real (1080p chega em quase tudo; 4K só com motivo).
• fps — manter o do projeto; constante (não misturar).
• Bitrate — equilíbrio peso/qualidade. 2-pass encoding dá melhor relação qualidade/peso ao bitrate-alvo.
• GOP / keyframes — manter padrão; aumentar intervalo de keyframes pode reduzir peso mas dificulta scrub.
• Áudio — AAC 128-192 kbps fala/normal; 192-320 música. Loudness ~ −14 LUFS (UC02630/UC02633).
• Filtros — exportar limpo (sem ruído/banding) reduz peso e melhora a compressão.

Lottie

• Otimização do AE — usar só recursos suportados (shape layers > imagens raster sempre que possível); evitar efeitos não exportáveis.
• Subset de animação — segmentar para tocar partes (intro/loop/outro).
• Cores e tracking de marca controlados por código (alterar sem re-exportar).

Acessibilidade e UX web

• Legendas/subtítulos (SRT/embutidos).
• Não autoplay com som; permitir mute por defeito.
• Poster/cover estático (atributo poster em <video>).
• prefers-reduced-motion — desligar/atenuar animações para utilizadores sensíveis (vestibular/epilepsia).
• Sem flashes intensos rápidos (≤ 3 Hz idealmente).
• Descrição alternativa para audiodescrição quando crítico.

Publicar por plataforma

YouTube / streaming

• MP4 H.264 (ou H.265), 1080p/4K, fps do projeto, bitrate alto, AAC 192-320 kbps.
• Capa/thumbnail própria, título e descrição.
• Legendas (.srt) — acessibilidade + SEO.
• Loudness do canal (~ −14 LUFS).

Instagram / TikTok / Reels / Shorts

• 9:16 (1080×1920), curto.
• Safe areas das plataformas (não tapar com UI).
• Maioria visto sem som — legendar e fazer a comunicação visual.
• Capa que prenda nos primeiros frames.

Site próprio

<video controls poster="capa.jpg" preload="metadata"
       width="1280" height="720">
  <source src="anim.webm" type="video/webm">
  <source src="anim.mp4"  type="video/mp4">
  <track kind="subtitles" src="legendas.vtt" srclang="pt" label="PT">
</video>

• WebM + MP4 para cobrir browsers.
• preload="metadata" para não puxar o ficheiro inteiro.
• <track> para legendas WebVTT.
• Lottie:

<lottie-player src="anim.json" autoplay loop></lottie-player>

App / desktop

• Lottie (web/app), MP4 embutido (player), sequências PNG em apresentações (sem dependência de codec).
• Em jogos/AR: sprites/atlas, skeletal animation (Spine), animação 3D no engine.

Direitos e licenças

• Música e SFX — bibliotecas licenciadas (UC02630): YouTube Audio Library, Free Music Archive, ccMixter, freesound; respeitar atribuição (CC-BY).
• Imagens — Poly Haven, AmbientCG, Unsplash, Pixabay; verificar licença (CC0 vs CC-BY vs comercial).
• Pessoas reais — autorização (RGPD; menores → encarregados).
• Marcas/IP — não usar sem permissão; logos próprios apenas.
• Content ID (YouTube) — músicas comerciais detetam e bloqueiam/desmonetizam.

Arquivo, nomenclatura e versões

• Preservar o mestre (alta qualidade, sem compressão acumulada).
• Derivar todas as versões a partir do mestre (não de um MP4 já comprimido — perdas acumulam).
• Nomes consistentes: projeto_titulo_v01_1080p.mp4, ..._story_9x16.mp4, ..._lottie.json.
• Pastas por destino.
• Backup 3-2-1 (3 cópias, 2 suportes, 1 fora do local).

Medir e iterar

Publicar não é o fim — observa-se o resultado:

• Plataformas: retenção, watch time, taxa de cliques (CTR), partilhas.
• Web: Core Web Vitals (LCP/INP/CLS), peso da página, taxa de play, bounce.
• A/B testing de capas/títulos/durações.
• Acessibilidade: validar legendas, contraste, reduced motion.
• Iterar: o que reteve / o que perdeu o público.

Workflow

1. Definir destinos e os requisitos de cada.
2. Mestre de alta qualidade (preservado).
3. Derivar versões por destino (codec, resolução, proporção).
4. Otimizar/comprimir com critério (testar peso vs qualidade).
5. Publicar — capa, descrição, legendas, safe areas, acessibilidade.
6. Medir desempenho.
7. Arquivar projeto + mestre + versões; backup.

Apêndices

A · Cheatsheet por destino

YouTube/streaming  MP4 H.264, 1080p/4K, AAC 192k+, legendas, −14 LUFS
Redes 9:16         MP4 1080×1920, safe area, sem som assumido, legendas
Site (auto-host)   <video> WebM+MP4 + poster + track .vtt
Web microinteração Lottie (JSON), respeitar prefers-reduced-motion
Email              link → vídeo (não MP4 inline); thumbnail
Mestre/arquivo     ProRes/DNxHR, originais + projeto, backup 3-2-1

B · Glossário

APNG. PNG animado (alternativa ao GIF). Bitrate. Bits por segundo do vídeo (qualidade/peso). Lottie. Formato JSON para animação vetorial. Poster. Imagem estática mostrada antes do play. ProRes / DNxHR. Codecs de mestre/arquivo. Safe area. Zona segura num formato/plataforma. WebVTT (.vtt). Formato de legendas web.

C · Recursos

• HandBrake · handbrake.fr — transcoding com presets.
• FFmpeg · ffmpeg.org — conversão por CLI.
• Squoosh · squoosh.app — imagens.
• LottieFiles · lottiefiles.com — biblioteca e player.
• Mozilla MDN · <video>, <track>, prefers-reduced-motion.