This document provides an overview of creating an interactive prototype in Adobe Flash (now called Animate). It discusses setting up a Flash file and introducing basic concepts like drawing shapes, converting objects to symbols, adding frames and keyframes, using layers, and introducing basic ActionScript. It then covers adding animations using tweens, filters and color effects, and creating looping movie clips. The goal is to learn the fundamentals of Flash to quickly prototype applications without extensive programming knowledge.

1. Apps in a Flash
A presentation for the Stockton University Computer Society
Created By: Jonathan Goldman

2. Welcome to Adobe Flash “Animate”
• An animator friendly multimedia and software platform used for
creating vector graphics, animation, browser games, web
applications, and mobile applications.
• Embeddable on many platforms (HTML5, Mobile, etc.).
• Formerly known as:
• FutureSplash Animator
• Macromedia Flash
• Shockwave Flash
• Adobe Flash
• Initially designed purely as an animation tool, ActionScript as introduced
after the fact in 2000 with Flash 5.
• Absorbed by Adobe in 2005.
• Adobe Flash CC was recently rebranded as Adobe Animate in 2016, it’s
identical to the 2011-2015 versions of “Adobe Flash Professional” except
in name. This was mainly for marketing purposes.

3. Setting Up Flash
• Our college provides Flash in some of the
computer labs: D2, D18, D19, AS203, AS234.
• If the room you are in has it installed, you can
find the Adobe CC folder located in the
Windows “Applications” folder on the desktop,
and proceed to run Adobe Flash Professional.
• If you would like to try out Flash CC on your
own computer, Adobe provides a 30-day trial:
• http://www.adobe.com/products/animate.html
If you need more assistance in obtaining Flash for personal
use, email me at goldmanj@go.stockton.edu

4. Setting Up Flash
• You will notice Flash gives you
many options for creating a new
flash document for many
different platforms.
• We want to test our application
on flash player locally, so select
“Actionscript 3.0” to create new
document.

5. Setting Up Flash
• Make sure that you can
locate these 6 tab groups:
• Tools (1)
• Timeline (2)
• Library (3)
• Actions (4)
• Code Snippets (5)
• Properties (6)
• They can be checked off
under the Windows menu.
(1)
(2)(3)
(4) (5)
(6)
Windows>Workspaces (7) will give you other default menu configurations
(7)

6. Setting Up Flash
• Properties – You can leave
these on default if you wish:
• Canvas Size (Resolution)
• Stage Color
• Frames Per second (FPS)
• Enable Grid (Optional):
• View>Grid>Show Grid
• View>Snapping>Snap To
Grid

7. Setting Up Flash
• Flash compiles your application
(.swf) file every time you test your
flash.
• The application file (.swf) will be in
the same location that you saved
your flash document (.fla).
• Save (CTRL-S) when you’re ready.
• To test your flash, click “Test” under
the control menu.
• When you are done testing your
application, it can be closed with
the x button. It runs independently
of the editor.
File>Save: Save Flash document (creates .fla)
Control>Test – Will test and compile application (creates .swf)
File>Publish Settings…: Change .swf’s settings

8. Learning Objectives - Part 1
• Learn to create a prototype user interface through the
following methods:
• Drawing and creating your own symbols (buttons)
• Understanding Frames and Keyframes
• Basic Actionscript
• By knowing the basics of Flash, you will be able to
prototype applications on the fly without the need to
understand a lot of complex programming. Flash is a very
viable platform for a variety of online media.

9. Tools - Drawing Shapes
• Locate the Tools Tab
• Click Rectangle Button
• Notice the properties tab changes to
reflect that shape tools can be changed
• Under Rectangle Options, you can give
your rectangle curves rather than sharp
edges when it is drawn.
• Click/Drag in the middle of your
canvas to draw a rectangle
• Dotted shading indicates that an image
is selected
• Images are the most modifiable to edit
graphically, but are not interactive with
the script by default
Most tools and features have their own properties

10. Making our Graphic Interactive
• Click the selection tool in the Tools
tab. You will generally want to go
back to the selection tool when you
are finished using another tool.
• If your rectangle isn’t selected, drag
a box around it to select it.
• With your rectangle selected, right
click it and select ”Convert to
Symbol…”
• Select “Button” in dropdown box and
then hit create
• You may also give your symbol a name,
such as “Button”
• Make sure button is selected,
indicated by blue box surrounding it
• Under properties, give button the
instance name: “button1”
This instance name is how ActionScript will
communicate with the button symbol. Avoid
duplicate instance names.
Your Library will store newly created symbols for
future use. Simply drag and drop a symbol from
it onto the canvas to create duplicates. The
instance name, however, will be blank by default.

11. Adding frames to our Button
• Adding frames of animation to our button will give
interactive feedback to the user
• To make our button animated
• Double Click Button
• Right click the 2nd frame in the timeline,
“Over”, and select insert keyframe.
• Whenever we insert a keyframe, the properties
window will change to frame properties
• Click the Painter Bucker Tool and select a color
in the properties tab
• Color the button a lighter shade with the tool, make
sure to click the Bucket tool again every time after
you insert a keyframe to bring up the bucket tool
properties
• Selecting the button with the cursor tool will also
bring up color options in your properties window
Notice that the different looking timeline indicates
we’re editing the button’s frames rather than the
scene’s frames.
Each symbol has their own frames and timeline like
your scene. You should think of your scene timeline
as you main timeline

12. Adding Frames to our Button
• You can repeat this process for
the 3rd frame, 4th frame is
optional
• Double click anywhere in the
canvas to go back to the scene.
• All edits made inside symbols
(buttons) will apply to all
frames in your main timeline.
• Save and Test Movie
This section under your timeline indicates
the symbol you are editing. Think of it like
the folder your in your Windows File Explorer

13. Adding Frames to the Scene
• On your main timeline, Insert keyframes
into frame 20 and 40. Do this the same
way you inserted keyframes into your
button.
• A Keyframe, indicated by the dots in the
timeline, is where the frame begins,
every non-Keyframe that follows will
share all the same properties as the
Keyframe.
• Inserting a keyframe will create a clone of
the previous frame, but now changes
made in the new keyframe will not apply
to the previous frames.
• The instance name for your button needs
to be different for each keyframe,
otherwise the actionscript will not work
(button1, button2, button 3…)
The number in the red box indicated the frame your timeline
is currently on.
Imagine normal frames as extension of a keyframe.

14. Layers
• Layers can allow you to edit
and animate individual objects
on your scene.
• For this tutorial, I strongly
recommend creating a new
layer for every object we
create.
• Let’s insert a new layer for our
text objects. Press the button
on the bottom left of your
timeline that looks like a page.

15. Layers
• Select the first frame newly
created layer
• Go to your Tools tab and select
the Text button, indicated by a
“T”
• Click/Drag a box towards the
top of your canvas.
• The blinking cursor indicates
you can type text into your text
box, let’s type “Screen 1”
• Once you’re done, click your
selection cursor tool again.
Layers can be renamed by double clicking the current
name. This will be useful for keeping our layers
organized.

16. Layers
• You may then create two new
keyframes on the new layer, in
identical places as your first layer
(frames 20 and 40).
• Select frame 20 and then double
click your text box. This will
automatically change your tool to
the text tool.
• Change the text to “Screen 2”
• This text will give feedback on
which screen the user is on.
• Repeat this process for frame 40,
and name the text “Screen 3”
You also have the ability to lock or hide layers when you
wish to edit one layer at a time without editing the
others accidentally.

17. Layers
• You can also add layers inside of
symbols.
• For example, if you want to add
text onto your button, you can
double click the button again to
edit it, and then add a layer that
will appear on top of the button’s
graphic.
• Try this now if you want, applying
what you have learned so far
(Optional).
Empty rectangles on your timeline indicate the last normal frame
in that layer. Changes made to that frame will apply to every
previous frame leading to the keyframe.
So in other words, your text will be the same throughout the
button’s animation, while your button’s color will change.

18. Actionscript
• Return to your main timeline, and
make sure your timeline is on frame 1:
• Find the Code Snippets Menu
• “Actionscript”>”Timeline Navigation”
• Double Click “stop at this frame” - you
should now see the code generated in your
“actions window”, which will tell our
application to stop at that screen.
• You will notice Flash has created a new
layer for you called actions.
Existing Actionscript is indicated by the “a”.
Newly inserted keyframes will not duplicate script.
Code snippets will automatically insert themselves into this
layer, however, ActionScript can be manually coded into any
frame.

19. Actionscript
• Select your Menu Button on the
same frame
• Go to Code Snippets > ActionScript
> Timeline Navigation again
• Double Click “Go to frame and
play”
• Inside the Actions window, change
“gotoandplay(5)” to your desired
frame, which will be 20Despite using “Gotoandplay”, the flash should
stop on any given frame that we give our “stop
at this frame” code snippet

20. Testing our Flash
• If you want to see if your script works,
test your flash. Pushing the button
should change the frame to 20.
• Insert keyframes into frame 20 and 40 on
your actions layer.
• Repeat the steps that we just did for
frames 20 and 40, except your
gotoandplay() code will point to frames
40 and 1 respectively.
• You should have a functioning UI that
will change between 3 screens now.
Save if you are happy with the results.

21. Conclusion of Part 1
This will conclude part 1 of the Adobe Flash CC.
Example file can be downloaded here:
• https://www.dropbox.com/s/v074aks0cf6dce2/part1button.fla?dl=0
Let’s continue onto part 2: Animations

22. Objectives for Part 2
• In this segment, we will be learning animation techniques to make
our UI stand out.
• Tweens
• Movie Clips
• Filters and Color
• More “Frame Logic”

23. Preparing our timeline for animations
• We will now be adding animations in between our keyframes as transitions:
• On every layer, add keyframes to frames:
• 2, 19, 21, and 39.
• Have your button actionscript on frames 1 and 20 go to and play the next frame
instead of their currently assigned frames.
• Frame 1: go to 2, Frame 20: go to 21
The keyframe placement on
the actions layer is
important, because we do
not want the flash to be
interactive in our animation
frames (2-19, 21-39).

24. Animation (Tweens)
• Only symbols can be tweened.
• Try to only have one symbol per layer,
since only one symbol can be part of a
tween.
• If you wanted to tween something like a
text or .bmp, it would need to be
converted into a symbol (movie clip,
graphic, or button).
• Right click in between frames 1 and 20
on your button layer, you will be given
an option to “create a classic tween”.
• Select that and you should see an arrow
pointing to the keyframe.
We only want animation frames to be part
of the tween, which is why we created
keyframes alongside our “actionscript”
frames.
Two linked keyframes must have the same
symbols in order for a tween to work (the
instance name can be different).

25. Animation (Tweens)
• If an arrow doesn’t appear, then make sure that frame
2 and 19 on the same layer contain the same symbol
and only that symbol.
• Select frame 19, and then move the button to the left,
right outside the canvas (in the grey area).
• This should make the button appear to be moving
• Selecting a tween in the timeline will bring up another
properties window.
• Ease in or out can add a smoothness to your tweens.
Experiment with tweening. Most
of the time, as long as your linked
keyframes have the same symbol,
any changes you make to that
symbol in one keyframe will have
a transition effect. Remember,
to tween text, it must be
converted into a symbol (movie

26. Color effects and filters
• Select frame 39.
• Select your button,
• Apply a color effect (alpha) from the properties menu.
• Set alpha to 0 percent, making the button transparent on
frame 39, but visible on frame 21.
• (Optional) You may also change your button on frame
40 to maintain the illusion.
• If you delete a button, make sure the actionscript for your
button is deleted also, only leaving the stop code.
Actionscript will return an error if it is referencing an instance
name that doesn’t exist on the frame.
• Test your flash
Filters such as drop shadow or blurring
can also be applied to symbols for
tweens.

27. Movie Clips (loops)
• For this example, we will demonstrate a
looping animation that would run inside our
scene, such as an animated logo.
• Create a new layer for a logo/icon
• Right click and insert a normal frame on frame 40
for the new layer if it doesn’t happen automatically
• Copy/paste an image off the internet or
create circle with the tools tab. Have the
image on a corner of your canvase.
• Covert it to a movie clip symbol and double click it
(like we did with the button), so it will let you edit
the frames inside of it.
Alternatively, you can create a new symbol from
the insert menu, and paste an image into it
there, then use it later by dragging it from your
library.

28. Movie Clips (loops)
• For a pasted image or drawn shape to be
tweened, it too must be converted into a symbol
– we will convert it into a movie clip.
• The transform tool (via tools) can be applied to
symbols in any way for tweening (rotating,
stretching, etc).
• Pressing enter inside your timeline will let you
preview an animation without testing your flash,
but playing your scene with a movie clip inside
will not show the movie clip playing. You will
have to test the flash to see its movement.
• When you’re happy with your looping animation,
test your flash file. You do not have to leave the
movie clip to test your .swf. The movie clip
should appear through your whole flash like the
button does.
Just like a scene, actionscripts and tweens can be
added in a movie clip. Have your logo or icon do
something that will ‘loop’, such as growing /
shrinking, or spinning around.

29. Congratulations
• Save the flash if you’re happy with the results.
• Example File:
https://www.dropbox.com/s/wnhgs7py38jmj1f/part3animation.fl
a?dl=0
• This will conclude the Flash Tutorial for HCI.
• Other tutorials
• https://www.youtube.com/results?search_query=Flash+CC+button
+movie+clip+text+tutorial&page=1