Animate Assignment 1

Method 1

1. Create a new .fla file using the HTML5 Canvas format. Set the document properties to a size of 1200 pixels wide, 800 pixels high, and a frame rate of 24 frames per second. Choose a Stage/background color other than white; or you can make it transparent. The format, document size, and frame rate can be set when you first create the document. These properties and the background can also be set inside the document by choosing Modify>Document.

2. Create a frame-by-frame animation or a tween consisting of 24 or more frames where there is a change in content among at least some of the frames. You can make this very simple or more complicated, whatever you choose. You may want to use one or more of the tools we have studied and any of the techniques we have studied.

3. Save the .fla file with an filename equal to your lastname in a folder called hw4.

4. Choose File>Publish Settings. and make sure that JavaScript/HTML is checked at the left. Uncheck the Loop Timeline checkbox at the right so your animation does not loop. Click on Publish to generate the html, JavaScript file, and the images folder (there may or may not be an images folder)
5. With a text editor such as Notepad++, Visual Studio Code, etc., add some content to the html file so you see how you can incorporate your Animate movie into a web page. You can add as little as one sentence if you like.
6. Upload the hw4 folder to your your mydrive or ite170.com webspace.

7. Zip the hw4 folder containing the fla file, the html file, the .js file, and the images folder (if there is one) and attach the zip file against the assignment on Canvas. Submit in Canvas the URL to your hw4 folder in myDrive or ite170.com.
8. In a text file that you attach to Canvas or in comments in Canvas, briefly explain your animation and what tools or techniques you used.

The most helpful items on the schedule page for this assignment will be the first two writeups on Animate that are linked to from the schedule page, i.e.

• Introduction to Animate and Animate Drawing Tools
• Frame by Frame Animation in Animate 2023

Method 2

There is a simpler way to put your animation on a web page.

• From your .fla file, export the animation to a .mp4 file
• Place your .mp4 file in your html page by using the following code (using the appropriate name for the .mp4 file)
• <video width="1200" height="800" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
  </video>

However, this second method will not work for Animate animations where cursoring over or clicking items causes things to happen. When one exports the animation to a .mp4 file, this interactivity is lost. So for this assignment, you should use Method 1 since it is a more general method.

You may also find the first few Animate videos useful - you can find them in the ITE170 Canvas course site.

Revised: March 20, 2023. Comments to William Pegram, bill@billpegram.com