Client side technologies Flash Marvin Hoffmann, Sven Middelberg, Dennis Guck, Marius Klein Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/11 1 The slides are licensed under a Creative Commons Attribution 3.0 License
Client side technologiesFlash
Marvin Hoffmann, Sven Middelberg,Dennis Guck, Marius Klein
Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111The slides are licensed under a
Creative Commons Attribution 3.0 License
Overview1. History
2. Format and Requirement
3. Applications
4. Flash Basics
5. Actionscript
6. Demo
7. Security
8. Conclusion
Web Technologies2
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
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
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
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 createanimation
Keyframes are frames in which theanimation changes
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 yourFlash movie
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 andanimated seperatly
Eases the creation of complex movies consisting of manyindependent symbols
Symbols in lower levels are concealed by objects in higher levels
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
Adobe Flash Professional CS5
Web Technologies10
Demo
Motion Tween
Actionscript
Web Technologies11
Scripting language that allows for interactive Flashanimations
Java-similar syntax
Fully event-driven
No typing
Object-oriented
User-Generated Events
Web Technologies12
Mouse movement, pressing/releasing a button, keyboardinput, …
Events: press, release, rollOver, keyPress“K“, …
Example (Stop-Button):
on(press)
{
_parent.movieclip.stop();
_parent.movieclip.gotoAndPlay(1);
}
Self-Releasing Events
Web Technologies13
Keyframe and movieclip events
Movieclip events: load, unload, enterFrame, …
Example:
onClipEvent(load)
{
this.stop();
}
Adobe Flash Professional CS5
Web Technologies14
Demo
Motion Tween
ActionScript
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
Pros
Web Technologies16
More flexible than HTML
Effects and animation
ActionScript
Video playback supported
Eventbased sound
Vector animation
Closed source
Hardware support
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
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