Tool for Creating Rich Media Welcome to Flash! Tool for Creating Rich Media Adobe Flash has been around for a long time. It used to be the format for all videos on YouTube. It is used less now that HTML 5 allows some of the same capabilities, and YouTube has switched over to HTML 5 video completely. Flash has had some history with security vulnerabilities, which is why developers started moving away from using it, but the product still exists and provides a strong set of tools for animating and creating interactive animations.

What does Flash Create? Movies that can be streamed into a web browser Interactives Can also create stand-alone programs (but this is not our particular use) Flash allows you to develop animations. When paired with a scripting programming language, that is specific to it, called ActionScript, it can be used to build interactive media. Most flash projects are embedded in web pages, but Flash can also be used to create stand-alone programs.

Rich Media: Examples Note: Audio is important part of most of these, so turn it on or you will miss some of the fun Monoface: http://www.mono-1.com/monoface/main.html Weebl’s Magical Trevor: https://www.youtube.com/watch?v=au3-hk-pXsM Weebl’s Football Badgers: https://www.youtube.com/watch?v=jEb1Zh8eptg Interactive Snow Globe: http://www.xygames.com/flash/holiday-snow-globe Monoface is interactive and uses photos (instead of animated cartoons). A few years ago Weebl was an incredibly prolific artist who made so very many hilariously weird little Flash cartoons – he now posts his old stuff on YouTube. The interactive snow globe needs to be shaken to see the amazingness of it!

Files Types Associated with Flash Project .fla file Your working project – where you can still edit content .swf file The published final version of your project (created when you test movie or when you publish) When you start working on a Flash project, you will create a .fla file. This is where your editable content lives. Once you start testing your movie, another file, the .swf, will be created. This is your project in the form for viewers, but cannot be edited. If you publish, both the .swf and a web page in which it is embedded will be generated for you. .html file Contains embedded version of your movie (created when you publish)

Parts of the Flash Interface A Quick Overview The next set of slides will get you used to the parts of the interface (part you interact with) of Flash.

Setting File Information File…File Info. Fill in some basic information about your project file.

The Canvas – Items within this area appear in final movie The Stage Entire Area (gray + white) The Stage The Canvas – Items within this area appear in final movie The stage is where you can layout objects that make up your project. Only those objects on the canvas (the white part) will be visible in the final published project, but you can start objects off-canvas and animate them onto the screen. Items in the gray area can be positioned for entry, but will not appear unless they are moved to the canvas

The Timeline Layers Playhead Frame Numbers Total running time Flash works a little bit like the idea of a “flip-book.” There are frames where you show how something should look at a given moment. Flash rolls through them at a speed determined by the frame rate. By default, Flash movies will play on a loop. You can use layers to organize your project – each object you create should usually be assigned its own layer so it can be controlled individually. The little red playhead shows what part of your movie’s timeline you are currently seeing on the stage. Frame rate – frames displayed per second Frame # Where Playhead currently sits

The Timeline Turn layer’s visibility on or off Lock a layer (helps prevent accidental changes) Only show outlines of objects on layer (faster) Delete a layer You can add as many layers as you want to a project. You should choose a name for the layer that makes it easy to remember what you were doing on it later. You can hide layers you are not currently working on. You can lock layers you are finished working on so you don’t inadvertently mess up work you’ve already completed. If you have really complicated artwork, you can ask Flash to show only outlines, so you can see where something is on the screen, but your tests render faster. You can delete layers you no longer want. You can turn on onion skinning to see a ghost image of where an object was in the previous few frames (when you are trying to tweak animations in a specific way). Add a new layer (double click layer name to rename it) Turn Onion-Skinning on and off – lets you see a guide of where objects have been in previous frames

The Timeline Black dot – Keyframe (defines what exactly objects look like on that frame) Arrows indicate a tween – Flash has been allowed to guess the in-between steps of animation Blank frames – just continue to show objects as they were set on last keyframe Keyframes are used to specific exactly what an object looks like at a particular moment in time. You can add more to have tighter control, or you can let Flash guess at what animation will move between two keyframes.

Tools – used to create and edit content on stage and in library Tools & Menu Menus available Tools – used to create and edit content on stage and in library Tool are similar to those used in Illustrator, Photoshop, and Fireworks, but they have some quirks we will explore later in Flash.

Property Inspector Set the frame rate Set the canvas size The property inspector lets you examine properties of the current object selected. If you have no objects selected, it will show you the properties of the canvas. If you lose this panel, you can get it back from the Window menu. Will change based on currently selected item – here the stage itself is selected Set the canvas color

Library Panel Shows symbols that have been created for use in this project. You can drag them onto the stage from here. The library panel shows you a list of all the symbols you have created. It will also list pure files you have imported to use (.jpg, .png, etc.). If you lose this panel, you can get it back from the Window menu.

…and a lot more But that’s enough to get us started!