robotic money: adobe flash 101

FLASH 101 T h e b u i l d i n g b l o c k s o f o n l i n e i n t e r a c t i v i t y.

FLASH INTRODUCTION A d o b e F l a s h 1 0 1

ADOBE FLASH

� What i s F lash �  Used to add animation, video and interactivity to web pages �  Most common uses are advertising banners and games

�  More recently a tool to create Rich Internet Applications (RIA)

�  Manipulates both vector and bitmap graphics �  Used to stream video because of its quality to size ratio. �  Has ActionScript (object oriented language) lets you build complex

flash animations

THE FLASH ENVIRONMENT

Stage

Timeline/Layers

Workspace/Tools

Properties Panel/ Library

FLASH TOOLBAR � Drawing Too l s

�  Many different options to draw graphics

� View Too l s �  Zoom/move around stage

� Colors �  Choose stroke and fill color

� Opt ions �  Options for selected tools

SHAPES, GRAPHICS & TEXT F l a s h 1 0 1

DRAWING SHAPES � Rectang le (R)

�  Create rectangles/squares

� Oval Tools �  Circular shapes

� PolyStar Tool �  Create multiple sided shapes

DRAWING SHAPES � F i l l /S troke

�  Can change weight/style of stroke

�  Options to create rounded rectangles

Tip: When drawing shapes, the stroke and fill are 2 separate objects, letting you have more control over the shape. Select whole shape and press Ctrl + G to combine stroke and fill

DRAWING SHAPES � Pen Too l

�  Used to create custom shapes via anchor points �  Creates vector graphics

� Add Anchor Po in t Too l �  Add an anchor point to an existing vector

� Dele te Anchor Po in t Too l �  Delete an anchor point on an existing vector

� Conver t Anchor Po in t Too l �  Makes a straight line curved (really powerful)

DRAWING SHAPES � Trans form Shapes

�  Lets your transform the shape �  Scale, rotate, skew,

�  Shortcut key ‘Q’

�  Hit Ctrl +T to get more advanced

DRAWING SHAPES � Penc i l Tool

�  Lets you draw freehand

�  Shortcut key ‘Y’

�  Can specify how your shape’s line will work �  Smooth

�  Straighten

�  Ink

CREATING TEXT � Text Tool (T)

�  3 different types �  Static – plain text

�  Dynamic – display external text in box

�  Input – user input text box

�  Same text formatting options as other programs

�  Can add filters and effects

FLASH & GRAPHICS �  You can impor t externa l media f i les (Ctr l+R)

�  Any type of file (jpg, png, ai, mp3)

�  Adobe Illustrator files (ai) are the best since it is vector based

�  By default automatically put on the stage and library

�  Option to break apart graphic to a shape that is editable �  Can be very tricky, if you need to edit file, do it in the original program you made it in.

SYMBOLS F l a s h 1 0 1

SYMBOLS �  What are symbols?

�  Any object or combination of objects that are reusable �  Each symbol is called an instance

�  Symbols are stored in the Library

�  Makes your life easier when you want to use an object more than one

�  Advantage: significantly reduces file size �  Rather than store each instance you use in the library, Flash refers to the one symbol

�  Building blocks of complex graphics/animation

SYMBOLS �  3 t y pe s o f s ymbo l s

�  Graphic Symbol �  Simple symbol, used mostly for static objects (backgrounds, graphics)

�  Movie Clip �  A movie inside a movie, has its own timeline �  Can be manipulated by interactive controls using ActonScript (AS)

�  Crucial for complex and interactive animations

�  Button �  Same as on the internet, perform an action when click �  Can add movie clips and graphics to buttons

�  Buttons have different states – up, over, down and hit

THE LIBRARY � Centra l i zed locat ion where

you can v iew, browse , add , de lete and organ ize symbols

Symbols

Preview Symbol

Movie Clip

Graphic

Button

SYMBOL MANIPULATION � Pos i t ion & S ize

�  Can change multiple properties of symbols �  Width

�  Height

�  X-position

�  Y-position

�  Z-position (when working in 3D)

SYMBOL MANIPULATION � Color E f fects

�  Brightness – adjusts the lightness/darkness of symbol

�  Tint – colors the symbol instance with the same hue (color saturation)

�  Alpha – adjusts the transparency of the symbol instance

�  Advanced – separately adjusts the red, green, blue and transparency of symbol instance

SYMBOL MANIPULATION � F i l ters

�  Let you add visual effects to your symbols �  Can be Animated

Bevel Blur Shadow

ANIMATION F l a s h 1 0 1

FLASH ANIMATION � Animat ion

�  What flash was was originally designed for

�  Based on the principles of traditional frame animation

�  Based on the idea of Keyframes �  Keyframe = a frame where you want something to change/happen

�  Put symbols on keyframes

�  Can tween the frames to make advanced animations

�  Change frame speed to alter animation

FRAMES � 3 Types o f f rames

�  Keyframe – frame where action/change happens

�  Frame – no action occurs

�  Blank Keyframe – blank keyframe, nothing

Keyframe

Frame Blank Keyframe

TWEENING �  The stu f f that happens between key frames � 3 types o f Tweens

�  Motion Tween – used to animate changes in position, size and transparency of symbol instances

�  Shape Tween – used to animate non-symbols (shapes) �  Best practice is to not use lines when shape tweening

�  Classic Tween – same as motion except you animate first/last keyframes instead of in between frames (old way to animate)

TWEENING �  M o t i o n - B l u e �  S h a p e - G re e n �  C l a s s i c - P u r p l e

KeyFrame 1 KeyFrame 2

Motion Tween Shape Tween Classic Tween

ADVANCED TWEENING � Eas ing

�  How the animation moves between frames �  Great for adding feeling to animations �  2 types of Easing

�  Ease In - goes from slow to fast (-) �  Ease Out - goes from fast to slow (+)

� Rotat ion �  Rotates symbol between frames

ADVANCED TWEENING �  Or ient to Path (mot ion gu ide)

�  Moves symbol in accordance to path �  Add realistic movement to animations

�  Sca le �  Animates change in size of symbol between frames

ADVANCED TWEENING � Mot ion Gu ide

�  Add them to layers �  A specific path a symbol will follow �  Lets your move objects any way your heart desires

Motion Guide

ADDING INTERACTIVITY F l a s h 1 0 1

ACTION SCRIPT � Object Or iented Programming Language

�  Built in language that controls your flash movie �  Control the playhead of a timeline

�  Move things around

�  Manipulate/control video

�  Manage data (xml, lists, etc)

�  Communicate with server-side applications (web servers)

ACTION SCRIPT � Where to put i t

�  On frames, button, movieclips

�  Put code in the actions panel

�  Putting code on symbols gives them specific actions

�  Better to put on frames than on the symbols

Actions Panel

ACTION SCRIPT � Examples

�  Timeline control �  Stop/play animation

�  play(); / stop();

�  Jump around timeline �  gotoAndPlay();

�  Previous/next frame �  prevFrame

Actions Panel

ACTION SCRIPT � Examples

�  Buttons �  Button Actions

�  OnRelease, OnPress, OnClick etc.

�  MovieClips �  Specific actions

�  OnClipEvent, startDrag, getProperty

Actions Panel

ACTION SCRIPT 2.0 VS 3.0 � AS 3 .0 i s new as o f F l a sh CS4

�  Did it to bring a more straight forward programming approach �  Cleaner code

�  Drawbacks �  No actions on symbols

�  A little more complicated to learn since it is based on a more ‘complicated’ coding structure

� We wi l l be Us ing AS 2 .0 �  Easer to understand, and will give you an idea of how AS 3.0 is done

FLASH & VIDEO F l a s h 1 0 1

FLASH VIDEO � More than a v ideo p layer

�  Flash video format is a robust development platform

�  Deploy many different types of rich media

� Necessar y tool for internet v ideo de l i ver y �  Anybody who does anything online needs to know how video in Flash works

�  Deliver video files in the ‘.flv’ format

�  Use Flash animation to customize video playback

FLASH VIDEO � 2 types o f FLV ’s

�  Spark Codec �  Uses Sorenson Spark codec that is compatible with Flash Player 7 +

�  Can accommodate more internet users (98.7% penetration rate)

�  Lets you record video from a webcam

�  VP6 Codec �  Uses on2 VP6 codec that is compatible with Flash Player 8+

�  Better compression (smaller file size, better quality)

�  Has alpha channel (transparency) video �  Used for composite video (blue/green screen) – video where a person walks across your website

FLASH VIDEO � 2 types o f FLV ’s

�  Spark Codec �  Uses Sorenson Spark codec that is compatible with Flash Player 7 +

�  Can accommodate more internet users (98.7% penetration rate)

�  Lets you record video from a webcam

�  VP6 Codec �  Uses on2 VP6 codec that is compatible with Flash Player 8+

�  Better compression (smaller file size, better quality)

�  Has alpha channel (transparency) video �  Used for composite video (blue/green screen) – video where a person walks across your website

FLASH VIDEO �  Encoding FLVs

�  Can use commercial options �  Adobe Flash Video Encoder

�  Sorensen Squeeze

�  On2 Flix Pro

�  Free option – RIVA encoder �  Allows you to transcode AVI, MPEG, Quicktime and WMV formats to FLV

�  Downside – only available on Windows; uses single pass encoding

FLASH VIDEO �  Encoding FLVs

�  2 ways to serve flash video over the internet �  Progressive Download

�  Served from web browser and plays as soon as it downloaded (cached)

�  Don’t need any special software if deployed this way

�  Streaming �  Instead of HTTP it use RTMP (Real Time Messaging Protocol) to transmit data

�  Its in real-time; video data is displayed as it is received, rather than cached

�  Must use server-side software to deploy streaming video

�  Adobe Flash Media Server, Wowza Media Server, Red5

FLASH VIDEO �  FLV P layback

�  Can use custom flash animation with AS to create custom video players �  Takes time to program

�  Use Video Components �  Flash ships with built in components �  Very easy way to get flash video up and running out

of the box

�  Lets you customize a lot, but you don’t have complete control

Flash Components

PUBLISHING YOUR ANIMATION F l a s h 1 0 1

PUBLISHING FLASH MOVIES �  An imat ion expor ted to a .SWF f i le � Options to pub l i sh SWF

�  AS 2 or AS 3

�  Flash Player Compatibility

�  Image/sound quality

�  Other Pub l i sh ing Opt ions �  Jpeg, png, html windows projector

NEXT STEPS �  Exper iment wi th more complex an imat ions

�  Complete Websites built in flash

�  Movie clips inside movie clips

�  Movie clips on different button states

�  Advanced scripting with AS 3

�  Understand how data can be transmitted/received through AS