¿Cómo crear una animación de barra de carga en Flash?

Flash es una plataforma de creación multimedia que permite a los usuarios crear animaciones interactivas para varias plataformas como televisión, pantallas móviles, etc. Está construido usando diferentes lenguajes de programación como Action Script, Javascript, Python, C++, etc. El crédito de desarrollo de flash va a futuras olas, Macromedia y Adobe. Está disponible en muchos idiomas para diferentes sistemas operativos.

Animación de la barra de carga

Una barra de carga se puede animar en muchos estilos, como una carga circular simple o una carga de barra horizontal, pero animaremos ambas simultáneamente. La animación de la barra de carga se usa en proyectos en los que necesitamos mostrar la carga de ciertos procesos, crear una barra de carga es realmente fácil, así que vamos a animarla. Siga los pasos a continuación para animar una barra de carga.

Paso 1: Abra un nuevo proyecto en Adobe Flash.

Open-a-new-project

Paso 2: Usando la herramienta primitiva de rectángulo, dibuje un rectángulo con esquinas redondeadas en el escenario.

Draw-a-rectangle

Paso 3: Conviértelo en un símbolo.

Convert-it-into-a-symbol

Paso 4: haga doble clic para ingresar dentro del símbolo y agregue tres capas más y nómbrelas como Máscara, porcentaje y degradado de color.

Double-click-to-enter-inside-the-symbol

Paso 5: en la capa de porcentaje, haga un círculo con la herramienta ovalada.

On-percentage-layer-make-a-circle

Paso 6: en la capa de degradado de color, haga una copia de la barra de carga y rellénela con color.

Make-a-copy-of-the-loading-bar

Paso 7: En la capa de la máscara, haga una copia de la barra de carga y colóquela en el lado izquierdo.

Make-a-copy-of-the-loading-bar-and-place-it-on-the-left-side

Paso 8: En la capa de degradado de color y la capa gris, agregue un marco en el marco 105.

Insert-a-frame

Paso 9: inserte un fotograma clave en el fotograma 100 en porcentaje y capa de máscara.

Insert-a-keyframe-at-frame-100

Paso 10: en la capa de máscara en el cuadro 100, coloque la barra de carga exactamente en la barra de carga gris y coloque el círculo al final de la barra de carga.

Place-the-circle-on-the-end-of-the-loading-bar

Paso 11: ahora seleccione el marco central y aplique la interpolación clásica en la capa de máscara y porcentaje.

Apply-classic-tween

Paso 12: haga clic con el botón derecho en la capa Máscara y seleccione la opción Máscara.

Select-the-Mask-Option

Paso 13: Ahora seleccione el círculo y conviértalo en un símbolo.

Convert-to-symbol

Paso 14: haga doble clic para ingresar dentro del símbolo y agregue una nueva capa, asígnele el nombre Layer_2.

Enter-inside-the-symbol

Paso 15: En Layer_2 usa la herramienta de texto para escribir 0% en el círculo.

On-Layer_2-use-the-text-tool-to-write-0%-on-the-circle

Paso 16: ahora inserte fotogramas clave en los fotogramas 5, 10, 15… hasta el 100, y en cada fotograma clave escriba 5 %, 10 %, 15 %, y así sucesivamente hasta el 100 %.

Insert-keyframes