Apps in a FlashA presentation for the Stockton University Computer Society

Created By: Jonathan Goldman

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.

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

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.

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)

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

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

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.

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

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.

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

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

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.

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.

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.

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.

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.

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.

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 20

Despite using “Gotoandplay”, the flash should stop on any given frame that we give our “stop at this frame” code snippet

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.

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

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”

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).

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).

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 clip).

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.

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.

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.

Congratulations

• Save the flash if you’re happy with the results.• Example File:

https://www.dropbox.com/s/wnhgs7py38jmj1f/part3animation.fla?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