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
Top Related