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