Creating Animated Icons for the Web in Flash
In this series of Flash tutorials, we'll be creating animated icons that can be published as HTML5 canvas documents. Software required: Flash CC 2014.
What you'll learn
In this series of Flash tutorials, we'll be creating animated icons that can be published as HTML5 canvas documents. We'll start by creating a simple looping animation that the user can control. We'll use ActionScript to allow mouse-over events to play and stop the animation. Then, we'll learn how to take an ActionScript document and convert it to an HTML5 canvas document. Next, we'll create a more complex animation that has a few more stops along the timeline that we'll navigate. We'll copy and paste frames of our animation to create a backwards playing effect and create code that will control the animation. We'll end by creating an animated icon that uses a mask to conceal portions of a layer to create a great effect. This course goes over the process of creating animations in Flash and using actions to control them. By the end of this Flash training, you'll be familiar with the drawing tools, the timeline, and the actions and snippets panels. Software required: Flash CC 2014.
Table of contents
- Creating a Simple Icon 10m
- Adding Action Script to Create Interactivity 11m
- Converting Your Action Script to an HTML5 Canvas Doc 9m
- Creating a More Complex Animated Icon 9m
- Creating Our Rain Animation 11m
- Creating Actions for Our Weather Icon 8m
- Utilizing a Layer Mask with an Animated Icon 10m
- Creating the Mask and Animations for Our Email Icon 7m