How to Create a Loading Bar Animation in Flash?

Flash is a multi-media creation platform that allows users to create interactive animations for various platforms like television, mobile screens, etc. It is built using different programming languages like Action Script, Javascript, Python, C++, etc. The development credit of flash goes to future waves, Macromedia, and adobe. It is available in many languages for different operating systems.

Loading Bar Animation

A loading bar can be animated in many styles like a simple circle loading or a horizontal bar loading but we will animate both simultaneously. Loading bar animation is used in projects in which we need to show the loading of certain processes, creating a loading bar is really easy so let’s animate it. Follow the below steps to animate a loading bar.

Step 1: Open a new project in Adobe Flash.

Step 2: Using the rectangle primitive tool draw a rectangle with round corners on the stage.

Step 3: Convert it into a symbol.

Step 4: Double click to enter inside the symbol and add three more layers and name them as Mask, percentage, and color gradient.

Step 5: On percentage layer make a circle using the oval tool.

Step 6: On color gradient layer make a copy of the loading bar and fill it with color.

Step 7: On the mask layer make a copy of the loading bar and place it on the left side.

Step 8: On the color gradient layer and gray layer add a frame at frame 105.

Step 9: Insert a keyframe at frame 100 on percentage and mask layer.

Step 10: On the mask layer at frame 100, place the loading bar exactly on the gray loading bar and place the circle on the end of the loading bar.

Step 11: Now select the middle frame and apply classic tween on mask and percentage layer.

Step 12: Right-click on the Mask layer and select the Mask Option.

Step 13: Now select the circle and convert it into a symbol.

Step 14: Double click to enter inside the symbol and add a new layer name it Layer_2.

Step 15: On Layer_2 use the text tool to write 0% on the circle.

Step 16: Now insert keyframes at frames 5, 10, 15… till 100, and at each keyframe write 5%, 10%, 15%, and so on till 100%.

Step 17: Insert frame at frame 105 at both the layers.

Step 18: Double click to come out of the symbol and again double click to come out to the main stage.

Step 19: Insert a frame at frame 105.

Step 20: Press the run button to see the animation.

Congratulations your loading bar animation is ready now we can press Ctrl + Enter to see the final output of the animation.