That file type contains all the information needed to generate an animation in a smaller file size.
File types that you will be seeing include:
.fla - the native format which is a vestige of the Flash app.
.js - JavaScript - the primary scripting language for web pages to use.
.html - Hypertext Markup Language - these are text files containing the layout of a web page.
.png - Portable Network Graphics - image files that are optimized for graphic shapes
.as - ActionScript - the native scripting language of Animate.
Introduction to Animation in Adobe Animate
To animate something is change one or more of its features or characteristics over time.
Animation can include modifying over time things such as:
position(s)
size
color
opacity
rotation
...and much, much more
When you use Adobe Animate to create an animation it can be done with any one of these three primary methods:
Frame-by-frame animation.
This requires the animator to move some of the parts in the image in each step, or frame, of the animation.
It is not automated, it does not use the computer to calculate any aspect of the animation.
It is all done manually and is almost always the most time-consuming method of animation.
This is the method that was used when animation was first successfully done in the late 1800's and even before that with various mechanical devices such as the zoetrope and flip book.
It is the method used for the old Disney animations such as Fantasia and Mickey Mouse. Images needed to be created for each animated part of a single frame, or cel.
Note that frames are the individual images that are shown to the viewer at a fast enough rate to allow their brain to assemble the animated images as a continuous motion. The more images that are shown per second, the smoother the motion will appear. But there are many, many factors that need to be taken into consideration.
Tweening
The process of tweening requires you establish keyframe (important) positions over time and then Adobe Animate will interpolate (calculate) the in-between frames (thus, tweening).
There are three types of tweening available in Adobe Animate:
Shape tweening
There are two types of motion tween:
Motion Tween (the default standard) where the animation characteristics are assigned to the shapes that move.
Classic Motion Tween - where keyframes capture the important positions.
About Shape Tweening
Shape tweening allows you to morph shapes, to change their shapes organically.
The shape and its positions are captured by Adobe Animate for each frame.
About Motion Tweening
Motion tweening is the most commonly used method for animation in Adobe Animate.
There are two types of Motion Tween:
One is named, simply, Motion Tween.
The animation information is stored in the shape that animates.
A motion path for the shape is created.
The path can be easily changed.
Other changes to the shape can be made over time in addition to the path it follows, such as tint, size, rotation, and so forth.
Classic Motion Tween (which we will use)
This method requires,keyframes to contain the information about the changes made to a shape over time. There is more information about keyframes later in this document.
You will be using Classic Tweens for your animation in this exercise.
Using motion tweening of either type you can animate many aspects of a shape, BUT you cannot morph (blend) one shape into another. That can only be done with shape tweens.
You can animate position, rotation, magnification, tint, opacity, and many other characteristics of a shape and its motion.
Symbols and Instances
Both types of motion tweens require the creation of a symbol for any object that you want to animate.
First the shape that you want to animate must be created on the stage. It could be a group of shapes that you have made and joined together to make a boat.
The entire group of shapes is then sleeted and saved as a symbol.
Looking at the stage it will appear as if nothing has changed.
However, the shape is an instance of the symbol. It is not the original object and its parts. That is now kept in the Library ( Window > Library ).
Instances of the same symbol can be used as many times as needed.
However, you can only have one motion tween animation sequence per layer.
The original shape that was used as the basis for a symbol can be changed by editing the shape in the Library. However, when you change the original shape in the Library, all instances of it will change, too!
When using classic tweens, a discrete instance of the same symbol is used in each frame where one or more characteristics of the animation or shape is changed, such as position, rotation, tint, and so forth.
Each of those frames is referred to as a keyframe.
As soon as you add a shape of any kind to the stage an initial keyframe is created on the first frame of the selected layer.
When a new keyframe is created on a subsequent frame on the same layer, a copy of the instance in the prior keyframe is automatically put on the new keyframe. The first and new keyframes will look the same, but they each contain a discrete instance on each keyframe.
Later you will see that keyframes have a small circle on them in the Timeline.
Introduction to the Exercise
In this exercise you will use Adobe Animate to:
Change the size of the letters of your name from being very large and transparent to becoming legible and a solid color.
The example at the top demonstrates this.
Change the position of each letter from being huge and in the center, superimposed with the other letters, to being arranged side by side to form your name properly and legibly.
Insert some script to make the animation stop, to prevent it from repeating endlessly (which is the default behavior for animations created with Adobe Animate).
The theatrical aspect of Adobe Animate!
Adobe Animate postures itself as if it were a creator of stage plays!
For example:
The background, or what most users would consider to be the background, is referred to as the stage.
The process of generating the files needed to put an animation on a web page is not referred to as exporting but rather as publishing, which is the term used for the release of printed versions of plays.
RECOVER_ files
You may see an .fla file with the same name as the .fla file you were working on but with RECOVER_ at the start of the file name. For example, RECOVER_myAnimation.fla
It is related to Animate's automatic back-ups.
These files are supposed to disappear when you quit Animate if you have successfully your file.
If Animate or your computer crashes the RECOVER_ file may appear.
When this happens to me, my original .fla file still exists and seems correct.
To be safe I would keep RECOVER_ files but work on the original .fla file.
Warning Messages
During the exercise, you may get one or more messages in the Output panel similar to the following:
Warnings generated while copying/importing in zoom-down-lastname-firstname.fla:
* AntiAlias is not supported in HTML5 Canvas document, and has been converted to CanvasFonts in an instance of Text.
WARNINGS:
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (6)
Note that other similar output messages may appear. They are often inscrutable but can generally be ignored unless they relate to some impediment to your progress.
Return to the Timeline panel using the Window> Timeline (it is near the top of the menu).
IMPORTANT NOTE:
The Output panel is in the same panel group as the Timeline panel.
Whenever the Output panel is displayed you will need to click on the Timeline panel tab to return to the Timeline, which is where most of your work on this assignment will be done.
FYI: the following is more information about top warning concerning the ActionScript AntiAlias class and the topic of anti-aliasing, if you are interested:
I am not sure of its exact meaning of the warning, and other folks don't seem to know either, including Adobe. The little that I found out about it was not that useful other than suggesting it be ignored (as of 2019).
AntiAlias is an ActionScript class (ActionScript is the native scripting language used by Adobe Animate).
It is a method for addressing the problem of anti-aliasing.
Anti-aliasing is a way to create the illusion of smooth curves and diagonals on letters and shapes to counter the jagged edges created by the inherent square shape of pixels.
If there is an anti-aliasing issue, I do not see it. With the large text that you will use in this exercise the problem will probably not be visible. Ignore the warning in this case. However, note that small text can appear blurry if too much anti-aliasing is applied to it.
More than you want to know!
In the context of the visual appearance of any bit-mapped (pixel based) hard-edged shape (for example geometric shapes and text) the term anti-aliasing refers to image processing algorithms used diminish the unsightly appearance of jagged edges protruding from curved or diagonal line segments which are the result of the corners of pixels (which are square) that run along the edges of the shapes.
These jagged edges are sometimes referred to as (surprise!) jaggies.
They may be hard to detect by the untrained eye but can have a negative subliminal impact.
The HTML5 <canvas> element is used as the container for Adobe Animate canvas animations.
Exercise Procedure
I suggest that download these demo files if you want to see completed example files.
Start Adobe Animate
If you want to use a lighter or darker interface:
Make this menu selection:
Windows: Edit > Preferences
Mac: Animate > Preferences
In the Preferences dialog box in the category of General > UI Theme > ...try the different themes.
I use Dark but don't really like any of them because the Timeline frame boxes can be hard to discern.
The illustrations in this tutorial use the Dark theme.
As with any computer work, during the exercise save your file periodically. Get into this habit if you aren't already otherwise you may lose hours of work:
File > Save or...
Ctrl-S (Windows) or ⌘-S (Mac)
Next, make this menu selection: Window > Workspaces > Classic
To ensure that your interface will match the illustrations in this tutorial: reset the Classic workspace:
Window > Workspaces > Reset Classic...
A dialog box will open asking you: Are you sure that you want to reset 'Classic' to its original layout?
Click Yes
Note that you can save a customized workspace for your own projects.
For example, if your project involves extensive use of a few panels, position them to your liking.
Then use the button illustrated on the top right side of the Animate app as shown in the illustration.
In the New Workspace field, enter an appropriate name for your new workspace such as the project name. Then, click the down-pointing arrow-in-a-box to save your new workspace.
You will note that there is a restore button in the selected Classic row. This will reset your user interface to the default Classic layout when needed.
Next, select: File > New >
The New Document dialog box will open.
Make the following settings: (see illustration)
Select Web in the top row.
In the Details section on the right side enter the following settings:
Width: 550
Height: 400
Platform Type: HTML5 Canvas
Click Create
Then save the file.
By default the file will be saved in the native format of Adobe Animate .fla
fla is a vestige of the Flash app which was the basis of Animate.
File menu > Save
During the file save process, create a new folder to contain the files related to this assignment.
Name that folder zoom-down-yourlastname-yourfirstname ...in lowercase letters.
Replace yourlastname and yourfirstname with YOUR last and first names!
For example, I would name my folder:
zoom-down-vaughan-daniel
Now, you will use that new folder to save your .fla file in.
Name the file the same as the folder name:
zoom-down-yourlastname-yourfirstname.fla
Replace yourlastname and yourfirstname using YOUR last and first names.
For example, I would name my file:
zoom-down-vaughan-daniel.fla
You will be animating your name for this exercise.
Determine what form of your first (given) name you want to use for this exercise.
Limit the letters to a minimum of three but no more than seven letters, otherwise you will have to do more work than required.
I recommend that you use four to five letters, all upper case.
You do not need to use your exact name.
You can use your familiar or "nick" name.
For example, my name is, formally, Daniel.
But my friends call me Dan or Danny. I could use any of those three spellings.
If my name were Alexander I may want to use Alex.
In the next several steps you will be creating what will result in the end position of the animation of the letters of your name, the point where your name is zoomed down and spelled out into the positions you create next.
Select the Text Tool tool in the toolbar, the vertical panel on the left side of the Animate app, or use the keyboard shortcut "T".
On the right side of the UI (user interface) you will see the Properties panel.
If not, Window > Properties
Select the Tool tab at the top of the Properties panel.
Make the following settings pertaining to the text tool. These are also as seen in the illustration:
Tool: Static Text
Character: Arial Black
Note that you can use any font, but I recommend that you use Arial Black or a similar sans-serif bold font.
Size: 150px
You will be able to easily change the size and the position of the font subsequently using the Free Transform tool, as will be shown.
Fill: select black
Click on the Stage (that is, the background - the big white area).
An insertion box will appear.
Enter the name you decided to use.
After you have created the letters, select the Free Transform tool.
It is the second tool from the top of the toolbar which is on the left of the UI.
Click on your name to select it.
A bounding box will now surround your name (see illustration below).
There will be nine handles on the edges of the bounding box.
Click-drag on any corner or mid-line handle of the bounding box to increase or decrease the text size. The letters will remain sharp because they are actually mathematical lines.
Adjust the size of the name to be as big as possible without going beyond the edges of the white background.
Continue to use the Free Transform tool to position your name.
Next, you will divide up your name into individual letters.
With the letters still selected make this menu selection: Modify > Break Apart
The letters will all be selected after they are broken apart. Leave them selected.
Then right click on any of the letters.
In the context menu that appears, select Distribute to Layers
Each letter will now be on its own layer and the layer will be named for the letter it contains.
Look at the list of layer names on the left side of the Timeline panel.
Note that the stacking order of the letters, from top to bottom, is in the reverse order of the spelling.
In the illustration below you will see that the letters in my name are listed in the Layer panel from top to bottom: YNNAD.
For the purposes of this exercise, it will be better to have the letters in the proper order from top to bottom.
Therefore, click and drag on the individual layers to move it up and down as needed so that your name is spelled properly from top to bottom as I have done in the illustration.
NOTE: Below is information about how to add numbers to the layer names when there are more than one of a letter.
If you have two of the same letter in you name, as I do (DANNY) with the letter "N" twice, name the layers discretely so they can be more readily identified and properly positioned in the list of layers. This is particularly important if the letters are adjacent.
First, make sure that the letters in the list of layers actually does correspond with the position of the letters in your name.
For example, when I re-stacked the layers containing the letters of my name I had the two letter "N"s in reverse order. This would adversely affect the smoothness of the zoom down.
The way to test the positions of the letters of your name is by clicking in a layer directly under the slash/eye icon .
Then that same icon will appear on the layer to indicate that its content is hidden. Please see illustration:
Using this method you can see the relative positions of the letters.
Then you can re-stack the layers as needed to get the letters in the in the proper stacking order.
I had to switch from the original "Break Apart" positions the two "N" layers in my name so that they would be in the proper order, top to bottom.
NOTE: Do not move the letters to accomplish the proper position because without more experience you may have difficulty precisely positioning them.
Double-click on the layer name of the layers that have the same letters in them and add a number after the letter that indicates its relative position in your name.
Example: See the illustration above. It demonstrates how the two "N" layers got renamed: N1 N2
Be sure to UN-hide any hidden layers.
Next, you will use the Move tool (shortcut key: V) to position individual letters so that their position looks correct relative to the other letters. It is important to enhance the visual appearance of words by adjusting the distances between them when the word(s) are large and prominent. The term for adjusting the gap is kerning.
To do this, click on a letter that you want to move, but do not move it with your mouse because that will be imprecise.
Instead, use the left and right arrow keys on your keyboard to reposition the letter horizontally, left or right.
Use only the left and right arrow keys to ensure that the movement will only be horizontal, not up or down.
That will result in the letter(s) remaining on the same baseline as the other letters, that is, the bottoms of all the letters will remain aligned vertically.
If the arrow key does not move the letter quickly enough for you, hold down the Shift key at the same time. This will move the letter 10 pixels with each press on the left or right arrow key, instead of only one pixel.
Next, you will convert each letter into a symbol.
Symbols facilitate the animation process.
Click on the first letter.
Press F8 (or Modify > Convert to Symbol)
Name each symbol for the letter that it contains.
As soon as you create a symbol from a letter the letter on the stage becomes an instance of the symbol.
To see the actual symbol: Window > Library
In the Library the symbols will be listed in alpha-numeric order, not in the order of the spelling of your name.
You will not need to use the Library for this exercise.
In the Timeline, carefully click in your top layer, under the 85 to select frame 85 in that first layer.
Then, hold down the Shift key and click on frame 85 in your bottom layer.
This will select frame 85 in all of your layers (see illustration).
Then select Insert > Timeline > Keyframe
This will create a single keyframe in frame 85 in each of the layers.
Creating the keyframes here makes duplicates of the instances of the letters in frame 1 of each layer and puts those duplicate instances in frame 85 in each respective layer.
Frame 85 now contains unique, different instances of the same symbols (the letters).
Visually, the letter in frame 85 will look identical to the letter in frame 1 on the same layer, but they are different, discrete instances that got created automatically when you created the keyframes in frame 85.
When a keyframe is created it will make a duplicate of the content of the immediately preceding keyframe on that layer.
In this case, the new keyframe made a duplicate instance of the instance of the letter in frame 1, which is the closest preceding keyframe on that layer.
The duplicate instance was put into frame 85. Again, it is not the same instance as the one in frame one but rather an instance created in the same location of the stage but saved in frame 85.
Therefore, each of the two keyframes on the layer will have a different instance of the same symbol on them.
I know that symbols and instances can be a difficult concept to comprehend. It took me some time to grasp it.
The keyframes on frame 85 also establish the end position of the zoom-down of your name. We have not yet created the frame 1 positions for the letters to zoom down from.
In addition to the creation of the keyframes in frame 85, you will see that the space in the Timeline between frame 1 and frame 84 is now filled with gray.
These are referred to simply as frames which is somewhat a misnomer because they do not actually have visual information in them. Their purpose is to maintain the visibility of the keyframe before it in the Timeline (to is left).
This perpetuates the appearance of the instances of the letters in frame 1 through frame 84.
More about keyframes:
Keyframes are used to store objects and information that can be used for an animation.
This includes information, such as positions, that can be used as the basis of calculations (interpolations) for creating the images that will be seen in subsequent frames.
A keyframe is visually indicated by a small black circle near the bottom of the rectangular shape of a frame.
The little black circle indicates that the frame has content.
If the circle is hollow it would indicate that there is no content in that frame.
This is referred to as an empty keyframe.
Anything in the Timeline layer that had been visible before the empty keyframe (such as an instance of a letter symbol) would no longer be visible from the empty keyframe forward in time (unless another keyframe with content were put in the same layer in a subsequent frame).
Next, you will modify the positions in frame one to establish the starting positions for the animation:
Click above the first frame in the Timeline.
This will bring the playhead to the first frame.
The playhead is a light blue vertical rectangle that has a pointer indicating the current frame number.
Select all the instances in frame 1:
Edit >Ctrl-A (⌘-A Mac)
This will select all of the instances of letters in the first frame.
It will also temporarily add a blue color to all the frames in the Timeline up to, but not including, the end keyframes in frame 85.
Note that I am not aware of what the purpose is of highlighting those frames other than it may convey that those frames are a part of the first frame in the sense that the content in frame 1 remains visible though frame 84 but not frame 85.
You will now align the letters in frame 1 so that they are on top of one another.
Open the Align panel: Window > Align
First, enable (check) Align to stage (see illustration).
The Align to stage checkbox ensures that the letters will be centered relative to the stage and not to other letters.
Then click on the middle button in each of the two top groups of three, as indicated in the illustration, Those two top align buttons will center the letters:
Relative to the vertical center of the stage.
Relative to the horizontal center of the stage.
The alignment puts the letters in front of one another so that they occupy the same space.
All of the instances ought to remain selected, if not press Ctrl-A (⌘-A Mac).
Before you continue, I suggest you temporarily zoom away from the stage so that you can see how big the letters will be for the start of the animation:
In the upper right corner of the stage area, beneath the Timeline, there are three buttons and a field for specifying the magnification of the stage area.
Manually enter how much you want to zoom back from the image.
I suggest 15% magnification for this.
Return to 100% magnification or larger when done viewing the larger letter sizes you will create in the next steps.
Do not confuse this with the zoom-down of the letters we will be creating.
This is merely a viewing tool.
Next, from the menu bar select Modify > Transform > Scale and Rotate
In the Scale field enter 800%
The white stage area ought to be invisible now because it is covered with the enlarged, solid black letters.
We will now make the letters in the first keyframes totally transparent for the start of the animation.
When we add classic tweens (further down on this page) the result will be that the transparent letters will gradually become opaque as they move down into their final position.
Press Ctrl-A (⌘-A Mac) once again to ensure that all the letter instances in frame 1 are selected.
The Properties panel ought to be open, if not: Window > Properties
In the Properties panel > Object > Color Effects > Alpha
Use the slider to set the Alpha value to 0%
The letters will now be invisible. This is temporary.
Next, you will select a few of the ordinary, non-keyframes, in the top layer and drag down to the bottom layer so that you have selected a few ordinary frames in all the layers:
Do not include keyframes in this selection.
In the Timelineclick and hold on a few frames anywhere in the first layer and then continue to hold down on your mouse button and drag down to the last layer.
You could also click an ordinary frame in the top layer, hold down Shift, then click a frame in the bottom layer to select frames in all the layers.
You can have more than one frame selected in each of the layers.
You need to have at least one frame in each layer selected but no keyframes.
Right-click on any of the selected frames.
In the contextual menu that appears, select: Create Classic Tween
A purple color with an arrow will appear in each layer to indicate there is a classic tween.
You can preview your animation using Adobe Animate two basic ways:
Press the Enter key (Mac: Return key). This will play the animation only once inside Adobe Animate. Repeat using that method as needed.
You can use Adobe Animate to preview your animation in your browser.
Press Ctrl-Enter (Mac: ⌘-Return) in Animate.
The animation will play repeatedly because that is the default behavior. You will be limiting it to play only once later in this tutorial.
If you do play the animation in your browser you may get the following warning in the Output tab. As far as I know, this warning can be ignored.
If you do get this warning, click on the Timeline tab to return to the Timeline panel in order to continue your work.
The warning means that the JavaScript code used for any non-linear (not equally divided) animation speed (referred to as an "ease"- meaning it tapers the speed of the zoom-down) begins its frame count at 0. Our animation is linear.
Next, you will take steps to cause each individual animated letter to start its zoom down, and also its arrival at its end position, at discrete 5 frame intervals, starting with the first letter and ending with the last.
This will be done so that the first letter will zoom down and arrive at its final position before the other letters do.
The other letters will move likewise but at increasingly delayed intervals thus staggering start and end of each letters animation.
Doing this will make the animation more interesting.
The animation at the top of this page was accomplished using this technique.
To do this, you will need to do the following for each keyframe, one at a time.
Read the following steps first before doing them!
Note that you will not move the keyframe on the right end of your bottom layer.
To reposition a keyframe, click on the keyframe to select it, then release the mouse button. Then click-drag it to the new location you want it to be in, being sure to keep it within the same layer.
Move each keyframe to be in positions similar to those shown in the bottom illustration which shows the final state of my animation.
Each keyframe is to be moved in increments of 5 frames, move the keyframes in frame 1 to the right. Move the keyframes in the end positions to the left.
Please note:
You will not yet have the actions layer that is shown at the top of the Timeline in that illustration. That special layer will be created in subsequent steps.
Also, you may have a different amount of layers depending on the amount of letters in your name.
When done, the animations of each letter ought to be staggered in time (offset in time relative to each other).
That offsetting is depicted in the illustration at the end of the page.
Please note that when you are done, the last frame in all of the layers except the bottom layer (layer Y in the illustration) will not be a keyframe. They will be ordinary frames. At the end of each will be a little vertical rectangle them. They represent the end of the visibility of the content of that layer. In our Timeline it is frame 85.
Now you will add a layer at the top of the Layers panel and add a keyframe at the end to contain some ActionScript to stop the animation from repeating.
ActionScript is the native scripting language of Adobe Animate (and previously for Flash). For anyone familiar with scripting it looks similar to other scripting languages.
Note that the repeating can be accomplished by using File > Publish Settings > PUBLISH > JavaScript/HTML > Basic > uncheck Loop Timeline.
However, for the purpose of introducing you to applying an Action to a frame, I am having you do this. It would also serve as a failsafe method to stop the animation in the event that the publish setting was inadvertently changed.
Click anywhere in the top layer.
Then execute: Insert > Timeline > Layer
The top layer is traditionally used for containing ActionScript
We could add the action to an existing keyframe in our content layers. However, having a discrete layer for actions provides an easy way to locate frame actions.
Double-click on the name of the new layer and change the name to actions.
In the new layer, click beneath the 85 in your new actions layer.
Then execute: Insert > Timeline > Blank Keyframe
A blank keyframe can hold content but does not have any in it yet. Ordinary frames cannot contain content.
Blank keyframes can also be used to end the visibility of content in a prior keyframe.
With that blank keyframe still selected, use the menu to select: Window > Actions
The Actions panel will open. This is used to help write ActionScript. It has two modes, one is totally manual and the other is an assisted Wizard mode.
Near the top of the Actions panel click on: Add using wizard.
The dialog box will change. There will now be a Select an action menu.
Select Stop - you may need to scroll down in that menu to see it.
Then the option This timeline will appear. It is a button but may not seem to be. Click on it.
Then click on Next
Then click on With this frame - this is also a button.
Then click on Finish and add
Now there ought to be a little white a in the keyframe:
When you use Ctrl-Enter (Mac: ⌘-Return) to preview the animation in your browser, the animation should stop at the last frame and not loop (keep repeating).
Note that your Output panel might, once again, have the following message, which in, my experience, is safe to ignore, unless you are working on a critical site in which case you will need to use software that can test it in many different browsers, resolutions, platforms, and so forth. Prices for such software vary from very cheap to hugely expensive.
WARNINGS:
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls.
Save your file: File > Save
Next, prepare to publish your work - which means to export the various files needed to make it viewable in a browser.
File > Publish Settings...
This will open the Publish Settings dialog box. Read instructions below.
On the left side, enable (check) JavaScript/HTML
There will be three main sections to the right. Make the settings indicated:
Basic
Output Name:
This will be the root name of the files that get published. Use the same name as used previously: zoom-down-lastname-firstname
Select the folder for where you want the published files to go. Select the folder you created for this assignment that uses the same name: zoom-down-lastname-firstname
Make Responsive
This setting means that the animation will shrink or expand if the container it is in does likewise.
However, it will only change size if the container it is in becomes smaller than the original file dimensions. Then it will shrink gracefully and the image will remain sharp as it does.
Scale to fit visible area will do precisely that, usually making it much larger as in a desktop browser.
Export image assets
Enable this and accept the default settings of putting the images into an images folder that will be created within your project folder.
Also, leave Texture selected.
Note that .png files with transparency will be created for each letter in your name.
Those files will be named CachedBmp_1.png - the number at the end of the file name of each .png file will go up incrementally to the amount of letters you have in your name.
Those .png images are animated by the JavaScript file that will be created when you publish. You may want to open one or more of the images in Photoshop if you are curious.
HTML/JS
Use the settings in the illustration which, as far as I know, are the default settings.
Image Settings
Again, use the settings in the illustration which, as far as I know, are the default settings.
You MUST test your animation before submitting it by opening the HTML file in a web browser. To do this:
Open a new tab in your browser.
Press Ctrl-O (⌘-O Mac).
A file browser will open.
Locate your file and select it, then open it.
Be sure that the animation works before you send it to me.
If it looks correct, submit your work as follows:
Your exercise folder ought to contain .fla, .html and .js files and an images folder.
The .fla, .html and .js files ought to have the same root name but with the three different file extensions.
Compress that folder into a .zip or .rar file.
The zip file ought to have the same name as the root name. If not, please change it to match.