ActionScript Essentials

ActionScript Essentials
Vorlesung: Dynamische Programmiersprachen
Sascha Wolter
wolter.biz | @saschawolter
Mai, 2015
Image source: http://www.comicvine.com/
Was ist Flash?
•
•
•
Leistungsfähiges Autorensystem mit den
Schwerpunkten Vektoranimation und Webdesign
Filmmetapher und objektorientierte
Herangehensweise
Programmiersprache ActionScript (optional)
Rich Applications
Image sources: http://en.wikipedia.org/wiki/File:Gateway_Of_India.jpg
Rich Application
•
Rich (Internet) Applications
Desktop (Applikationen)
Das Beste des Internets
(Inhalte)
• Austausch
• Leistungsfähig
• Integration
Der englische Begriff „rich“ steht dabei für
die „reichhaltigen“ Möglichkeiten wie z.B.
Drag-und-Drop-Fähigkeit oder
Bedienbarkeit über Tastenkürzel.
Außerdem ist auch die Leistungsfähigkeit
der Applikation gemeint, die z.B.
Berechnungen auf Clientseite ausführen
kann, ohne eine Anfrage zum Server
starten zu müssen. Dadurch lassen sich
RIAs viel flüssiger bedienen und geben
Rückmeldungen sofort zurück.
• Einfach
•Allgegenwärtig
• Standart
• Verbunden
Systemübergreifend
(Kommunikation)
• Echtzeit
• Personalisiert
• Übergreifend
Man könnte diese Anwendungen auch
"intelligente Clients" nennen. Natürlich sind
diese Anwendungen Internet-optimiert
(durch Komprimierung sowie StreamingTechniken). RIAs müssen zur Laufzeit
weniger Anfragen an den Server stellen.
LEGO-based Design Process
1.
2.
3.
4.
5.
6.
7.
Choose a problem: Build a LEGO ship.
Develop a vision: What sort of ship will it be? How big will it be? What
will it carry?
Build: Build the framework of the ship.
Fill in the details: Design and build the details of the ship, ramps,
doors, etc.
Test: Drive the cars around the ship and sail the ship while exploring
the house.
Refine: Take parts of the ship apart and make them better.
Learn: Take what you learned from building this ship and use it to build
a better one next time.
1993, Jonathan Gay: “The human mind is much too limited to
capture the entirety of a complex creation all at once. With
LEGO, you can start with the vision and work out the details of
the design as you progress.” (Quelle:
www.adobe.com/macromedia/events/john_gay)
Source: http://www.adobe.com/macromedia/events/john_gay/
SmartSketch bis Flash
•
•
•
1994: SmartSketch
1995: SmartKetch Animator,
anschließend Umbenennung in
CelAnimator und FutureWave
bietet Adobe den Kauf an
1996: FutureSplash Animator und
Player, anschließend Verkauf an
Macromedia und Flash 1
Aktionen

1997: Flash 2

Einfache Aktionen

Normalmodus

1999: Flash 4

Einfache Aktionen

Variablen und Werte

Kontrollstrukturen

Normalmodus
Screencasts unter
https://vimeo.com/channels/swf/
Wie Flash arbeitet!
Flash Professional
Browser
Timeline and
ActionScript
Flash Player
Flash Professional
Timeline
ActionScript
Data
Data
Web Server
Compile
XML/HTTP
REST
SOAP Web Services
Flash Remoting (AMF)
J2EE Application Server
.swf
Existing Applications and Infrastructure
Java / .NET / PHP / CGI
ActionScript 1


2000: Flash 5

ActionScript 1

„Vollwertige“
Programmiersprache

ECMA-262 konform

XML

OOP

Debugger

Expertenmodus
2002: Flash MX

ActionScript 1 (und ActionScript 2)

Video
9
Design versus Code - Scripting sucks?
Trennen und Verheiraten
• Entwurfsmuster
–
–
–
–
–
View
Code Behind
Model View Controller
Presentation Model
MVVM
usw.
• Bindungen
– oneway, twoway
• Ereignisse
– Bubbling
– Weiterreichen an das Modell
– …oder gleich Methodenaufrufe!
• Behaviors
Model
http://www.martinfowler.com/eaaDev/PresentationModel.html
Vererbung 1.0
function Superclass() {}
prototype
Oberklasse
Prototyp
Unterklasse.prototype = new Oberklasse()
function Subclass () {}
Unterklasse
prototype
Prototyp
Instanz = new Klasse()
oder super
Instanz
__proto__
__proto__
ActionScript 2

2004: Flash MX 2004

ActionScript 2


abwärtskompatible zu Flash 6

Basiert auf ECMAScript 4

Klassenorientierte Programmierung

Typsicher zur Kompilierzeit

Normalmodus entfernt
2004: Flex 1.x und der Flex Builder

ActionScript 2
Vererbung 2.0
class Superclass {}
prototype
Oberklasse
Prototyp
Unterklasse.prototype = new Oberklasse()
class Subclass extends Superclass {}
Unterklasse
prototype
Prototyp
Instanz = new Klasse()
oder super
Instanz
__proto__
__proto__
ActionScript 3

2006: Flex 2.x, Flex Builder 2.x



MXML/ActionScript 3
2007: Flash CS3

ActionScript 3

AVM2 (ActionScript Virtual Machine,
kurz AVM)
2013: Flash CC

RIP AS1 und AS2
Screencast unter
http://www.vimeo.com/7782849
Flash Player: AVM1 vs. AVM2
“Classic”
AVM1
AVM2
Virtual Machine
“Classic”
Flash Player API
AS3
Flash Player API
Flash Player Capabilities
(Networking, Rendering, Text, Sound, etc.)
Browser / Operating System
Flash Player: AVM2
•
Arbeitsweise des Flash Players
–
–
–
–
–
–
–
–
–
–
–
–
–
Flash Player 9: AVM1 und AVM2 (komplett neu geschrieben)
Neuer Bytecode mit ActionScript 3
ECMA-262/ECMAScript 4 (ActionScript 3)
Namespaces
Optionale Parameter und rest Argumente (wie in Java 5)
Regular Expressions
E4X (ECMAScript for XML)
DOM Event Model (W3C DOM Events) und Function Closure
Low Level API (z. B. Binäre Sockets)
DisplayList
Effizientere Typen
Strenge Typisierung (dynamische Typisierung optional)
Verbesserte Performance und weniger Speicherverbrauch durch „echte“
Klassen
• Trait-Objekts (speicherschonend, schneller)
• Sealed Classes (versiegelte Klassen)
– Just In Time Compiler (JIT)
– Laufzeitfehler
– Laufzeit Typsicherheit
Class definition
Paket („Verzeichnis“)
Klasse
Basisklasse
Konstruktur
Methode
Methode
Die richtige Version wählen
Aktionen
ActionScript 1
ActionScript 2
ActionScript 3
2
5 (Flash Lite 1.x)
6 (Flash Lite 2.x)
9
Flash 2
Flash 5
Flash 6, MTASC
Flash CS3, Flex
SDK
-
ECMAScript 3
(JavaScript)
ECMAScript 4
(JavaScript 2)
ECMAScript 4
(JavaScript 2)
Bytecode
AVM1
AVM1
AVM1
AVM2
Performance
mittel
mittel
mittel
hoch
steil
steil
mittel
flach
-
ActionScript for
Communication
(SSAS)
-
-
Flash Player
Compiler
Basiert auf
Lernkurve
Ähnliche Sprachen
Finally, why? Reasons and Obstacles
Penetration: http://www.adobe.com/products/flashruntimes/statistics.html
Danke.
ActionScript Essentials
Sascha Wolter
wolter.biz | @saschawolter
Mai, 2015
Image source: http://www.comicvine.com/