View
217
Download
0
Category
Tags:
Preview:
Citation preview
Inside Flash MX 2004March 2004
Gary Grossman, Director of Engineering, Flash
The Essence of Flash
What is the essence of Flash?That is, what are the key values that led to the
product’s extraordinary success?
Flash is
freedom of designrich interactivity
compact, ubiquitous player
Flash is the only product thatbrings
design and developmenttogether
What’s in a SWF file?
SWF is tag-based file format What is a tag?
Uniform data block for easy parsing Perform basic operations in Flash Player “Machine code” of Flash Player
What are typical tags? stagDefineShape stagPlaceObject stagShowFrame
SWF file format is documented athttp://www.macromedia.com/software/flash/open/licensing/fileformat/
Best illustrated by a simple example...
Motion Tween SWF
simple shape
tweened tomovefrom left, toright, to leftagain in loop
Deconstructing Motion Tween SWF
shapes and sprites are characters each character has a unique ID (#1, #2) shape #1 is defined sprite #2 (movie clip) is defined using the shape initial place tag creates instance of sprite each timeline frame is delimited by show frame subsequent place tags move the existing instance main timeline automatically loops when end of SWF tag
stream is reached
Flash execution model
Flash Player starts at beginning of SWF and executes tags one after the other, like reading a tape
Entire SWF resides in memory, but playback can start when only one frame is loaded, so SWF’s can stream
Player tries to display graphics on Frame 1 even when not completely loaded; results in some quirks
When a showFrame tag is hit, the frame is displayed to the user
Rewinding on a long Timeline can be slow, because entire SWF must be re-parsed from beginning to the desired point
Motion Tween: A touch of ActionScript
Addedstop()action:animationwill stopafter oneiteration
How doesit look inthe SWF?
ActionScript in the SWF file
some tags contain action records action records contain stream of
action bytecodes Flash compiles ActionScript source
code into stream of action bytecodes action bytecodes can represent
simple actions (stop), up to sophisticated scripts
FLASM is a tool that can disassemble the bytecodes in a SWFhttp://flasm.sourceforge.net
ActionScript execution model
Frame actions, on/onClipEvent, callbacks and listeners are all queued up and executed before frame is displayed
Flash Player is not multi-threaded Typically runs in same thread as browser, via
system timer callback Scripts must exit nicely, thus 15 seconds
warning if they don’t One reason we don’t have “updateStage” like
Director
Do frames ever get skipped?
Frame rate is not guaranteed Frames are dropped only when
using streaming sound, to maintain sync All ActionScript is executed, even on
dropped frames
Interval timers
Does setInterval guarantee millisecond accuracy? No. There is a system timer used for all
timeline execution. The same timer is used for all setIntervals.
Accuracy is typically to 10X frame rate and no more
In future, setInterval may be more accurate
onEnterFrame may give smoother results
Unicode
Software and Web are becoming global commodities Growing number of companies deliver products in
many languages Example: Flash MX 2004 available in 11 languages
SWF file format has been Unicode (UTF-8) since Flash Player 6
Flash MX 2004 authoring tool is now fully Unicode Create multilingual content without switching system
languages
Font Chaining
Over 1.1 million Unicode characters Font chaining is means of avoiding
gibberish characters If a needed glyph is not in the selected
font, another font is found which has it Operating system determines which font
is used for chained glyphs Eliminates need for language-specific
device fonts Can use _sans, _serif, _typewriter instead
System.useCodePage
Means of working with data in non-Unicode encodings (EUC-KR)
Must be set on Frame 1 and not changed later.Behavior is undefined if you alter it later!
All client/server communication will be conducted in system code page: XML XMLSocket LoadVars loadVariables
Internally, everything is still converted to Unicode.
Alias Text
A key advantage of Flash over HTML has always been ability to use any fonts you desire, and embed them in the SWF
Flash text looks blurry at small point sizes due to lack of hint information
Solution has been to use device fonts for small text Alias Text feature makes small text crisp & readable Backwards compatible: Flash Player 7 not required!
Example: Lucida Sans Unicode, 10 point text, zoomed 400%
ActionScript optimizations: Register allocation
ActionScript interpreter is called “AVM”, ActionScript VM
AVM is stack machine and also has registers 4 initial registers were added in Flash 5 but not
used heavily by compiler until Flash MX 2004 Flash MX 2004 uses registers to get massive
performance boost for ActionScript code Flash Player 6 r65 and Flash Player 7 support up
to 256 registers to further boost performance
Flash Player 6 register allocation
Only 4 registers in AVM for Flash Player 6 r:0, r:1, r:2, r:3 r:0 reserved for compiler use So, 3 registers available for local variables
Compiler determines 3 most popular variables and allocates to registers
If you open a Flash MX FLA file in FMX 2004 and export... It will run faster! Even if “Optimize for r65” is not checked
Optimizing for Flash Player 6 r65
New checkbox in Publish Settings...What’s with it?
Flash Player r65 Player release code named “Firefox” Added “defineFunction2” opcode, making large
performance boost possible w/ 256 registers Need Flash MX 2004 to export SWF’s that
leverage Flash Player 6 r65 Higher penetration than Flash Player 7 (for now) Use new Flash Player Detection feature to
check for minor version r65
Performance gains in Flash Player 7
New performance features like register allocation
Flash Player 7 has been fine-tuned for performance throughout Performance work done by Flash Player team
“raises all boats” ... even existing content that hasn’t been re-exported now runs faster!
For supercharged performance, target your Flash movie to Flash Player 7!
Local variables
function factorial(x:Number):Number {
var sum:Number = 1; for (var i:Number=2; i<=x; i++) { sum *= i;
} return sum;
}
Use local variables (var) Good programming practice Compiler can optimize local variables to
registers Significant performance benefits In following example, every variable and
parameter can be optimized into a register
Variable names
It used to improve performance to use shorter variable names
Still true for timeline variables and object members
Not true for local variables allocated to registers Name of variable doesn’t even go in SWF Also, harder to decompile your SWF
Best practice:Use variable names that are reasonable but not overly verbose
The Dot or Slash Notation Debate
Dot notation (Flash 5 and later):results.obj.value
Slash notation (Flash 4):results/obj:value
Some Flashcoders discovered that slash notation is sometimes faster than dot notation
Not necessarily true now, because slash notation cannot take advantage of register allocation
Slash notation had to be taken out of AS2 to support strong typing
Common sub-expression elimination
The following code contains common sub-expressions:
for (var i=0; i<srcItems.length; i++) { destItems[i].name = srcItems[i].name; destItems[i].value = srcItems[i].value; destItems[i].id = srcItems[i].id; destItems[i].data = srcItems[i].data; }
The code runs faster if we factor out the CSE’s:
for (var i=0; i<srcItems.length; i++) { var destItem = destItems[i]; var srcItem = srcItems[i]; destItem.name = srcItem.name; destItem.value = srcItem.value; destItem.id = srcItem.id; destItem.data = srcItem.data; }
Many compilers can factor out CSE’s automatically.ActionScript can’t do this yet, so factoring CSE’s yourself will
provide performance benefits.Expect to see many compiler optimizations in the future.
ActionScript 2.0
Real OOP much better for managing complexity Cleaner, easier to read code Greater maintainability
Demo: Puzzle, TipCalculator examples
AS2 compiles down to AS1, so it is backwards compatible to Flash Player 6
In future, compiler will optimize for language model
One can go crazy and “overengineer” with too many classes. One must strike the right balance.
Benefits of Typed Variables
Consider the following AS1 code:
var myXML = new XML();myXML.loadd("menu.xml");
The compiler will not detect any error.
In AS2, you can specify variable type:
var myXML:XML = new XML();myXML.loadd("menu.xml");
The compiler will detect that "loadd" is not a method of XML, saving you debugging time.
Pitfalls of Typed Variables
This code uses a common AS1 pattern:
class Menu{ public function initXML() { var myXML:XML = new XML(); myXML.owner = this; myXML.onLoad = function () { this.owner.callback(); } myXML.load("menu.xml"); }public function callback() { ... }
}
The compiler will give error on "owner“because owner is not a member of XML.
How to solve?
Pitfalls of Typed Variables: Solution
One solution is to leverage variable scoping rules
class Menu{ public function initXML() { var myXML:XML = new XML(); var owner = this; myXML.onLoad = function () { owner.callback(); } myXML.load("menu.xml"); }public function callback() { ... }
}
Local variable "owner" is visible to function defined within a function
V2 components
Built in AS2 for use in AS2 Macromedia HALO look and feel Advanced features for Rich Internet Application
development Focus Manager Depth Manager Popup Manager CSS styles Accessibility Integrated with Data Binding
For small use cases, updated V1 components available as extension on Flash support center:http://www.macromedia.com/cfusion/exchange/index.cfm?view=sn111&extID=1009423
V2 Components: Event Model
Listener/broadcaster pattern More flexible, scalable, and object-
oriented than V1 callback function approach
Centralize event handling code in AS2 classes
Pitfalls of V2 Event Model
This code has two common errors
class Menu extends mx.screens.Form{var myButton:mx.controls.Button;
function Menu() { myButton.addEventListener(“click”, onButtonClicked);
}public function onButtonClicked() { ... }
}
Constructor is too early to add event listeners... wait until onLoad
Due to behavior of ActionScript function references, onButtonClicked will be executed in myButton’s context, which is not desired behavior.
Pitfalls of V2 Event Model: Solution
Many different strategies exist for event handling
One approach is EventProxy,posted on Mike Chambers’s bloghttp://www.markme.com/mesh/archives/004286.cfm
class Menu extends mx.screens.Form{var myButton:mx.controls.Button;
public function onLoad() { myButton.addEventListener(“click”, new EventProxy(this, onButtonClicked));
}public function onButtonClicked() { ... }
}
Integrating Flash into production environment
The new JSAPI in Flash MX 2004 offers lots of possibilities for automating Flash
Example:Command-line compilation with FlashCommand by Mike Chambershttp://www.markme.com/mesh/archives/003656.cfm
FlashCommand can be used to create an automated build system for a team developing with Flash
Code Security
Many people want to know:How can I prevent people from decompiling my SWF?
As the SWF specification is open, it is not possible to prevent decompilers like ASV.
Suggestions: Obfuscation by register allocation will help a little. All client/server communication should require proper
authentication on the server side Push sensitive logic that could be harmfully spoofed up
to the server side; Flash should be “presentation tier” only.
Macromedia is aware of this issue and is looking for solutions.
Dynamic Generation of SWF
Demo
Questions?
Recommended