1. Client side technologies
Flash
Marvin Hoffmann, Sven Middelberg,
Dennis Guck, Marius Klein
Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111
The slides are licensed under a
Creative Commons Attribution 3.0 License

2. Overview
1. History
2. Format and Requirement
3. Applications
4. Flash Basics
5. Actionscript
6. Demo
7. Security
8. Conclusion
Web Technologies2

3. History
1995
1996
1997
1999
2003
2005
2006
2008
2009
 Precursor of Flash: Smart Sketch
 First introduction of Flash by Macromedia
 Release of Flash and Shockwave Player
 Integration of Actionscript
 Actionscript 2
 Takeover of Macromedia by Adobe
 Actionscript 3
 Adobe opens Flash specifications
 Flash player for Smartphones
Web Technologies3

4. Formats & Requirement
Formats
 .swf (Shockwave Format)
 Flash Movies and Flash Games
 .flv (Flash Video Files)
 Display videos on a webpage
Requirements
 No native support
 Necessary to install a plugin
 No support on all platforms
 e.g. iOS
Web Technologies4

5. Applications
Intros
Games
Videos
eLearning
 Standard application in the beginning
 Games can be played directly in the
Browser
 Stream of videos via Flash (e.g. Youtube)
 Use Flash as an interaction technique for
eLearning (e.g. WebTech Slide Cast)
Web Technologies5

6. Flash Basics
Web Technologies6
Timeline
Frames
Playhead
Keyframes
 Flash movies are animated
 Animation controlled via the timeline
 Consists of single frames
 Playhead moves over the frames to create
animation
 Keyframes are frames in which the
animation changes

7. Symbols
Web Technologies7
Symbols
Graphics
Buttons
Movieclips
 Symbols are reusable objects
 Each Symbol has its own timeline
 Three kinds of symbols:
 Static graphics to create animations
 Buttons for timeline animation
 Movie clips to add Flash movies to your
Flash movie

8. Layers
Web Technologies8
 Layers are a way to organize your Flash animation in a
hierarchical structure
 Each layer has its own content and can be configured and
animated seperatly
 Eases the creation of complex movies consisting of many
independent symbols
 Symbols in lower levels are concealed by objects in
higher levels

9. Adobe Flash Professional CS5
Web Technologies9
 Authoring tool to create presentations or
applications with Flash
 Most popular tool for working with Flash
 Features
 Prebuilt drag-and-drop UI components
 Built-in motion effects
 Special effects for media data
 Full support for ActionScript
 Source code saved in XML-based FLA files

10. Adobe Flash Professional CS5
Web Technologies10
 Demo
 Motion Tween

11. Actionscript
Web Technologies11
 Scripting language that allows for interactive Flash
animations
 Java-similar syntax
 Fully event-driven
 No typing
 Object-oriented

12. User-Generated Events
Web Technologies12
 Mouse movement, pressing/releasing a button, keyboard
input, …
 Events: press, release, rollOver, keyPress“K“, …
 Example (Stop-Button):
on(press)
{
_parent.movieclip.stop();
_parent.movieclip.gotoAndPlay(1);
}

13. Self-Releasing Events
Web Technologies13
 Keyframe and movieclip events
 Movieclip events: load, unload, enterFrame, …
 Example:
onClipEvent(load)
{
this.stop();
}

14. Adobe Flash Professional CS5
Web Technologies14
 Demo
 Motion Tween
 ActionScript

15. Security
Web Technologies15
 Three security levels
 Programmer
 Webhoster
 User
 Every Flash program has its
per domain sandbox
 Cross site scripting is possible
 But can be disabled
 Access to webcam, microphone, flash cookies

16. Pros
Web Technologies16
 More flexible than HTML
 Effects and animation
 ActionScript
 Video playback supported
 Eventbased sound
 Vector animation
 Closed source
 Hardware support

17. Cons
Web Technologies17
 Flash plug-in required
 Content and layout are not separated
 Closed source
 Requires additional programming knowledge
 Not barrier-free
 Not scalable, e.g. mobile devices

18. Conclusion
Web Technologies18
 Flash is dominating in several areas:
 Advertisement
 (YouTube-) Videos
 Browser-games in real-time
 But: Websites that are completely based on Flash are
rather rare
 HTML 5 and JavaScript are able to replace parts of Flash