SWF: The Flash File Format

BY:DALILA HUSNA YUNARDI M.SC SLIDES ARE SIMPLIFIED FROM THE BOOK: PERL GRAPHICS PROGRAMMING BY SHAWN WALLACE . Outline

 What is SWF file?  History of Flash and SWF  Format and Function of SWF  SWF Data Types  8 Minute Presentation From Each Group What is SWF file?

 An SWF file, or commonly known as a movie, is a depiction of animation by defining objects, such as vector graphic shapes, buttons and bitmaps which are placed in frames and encoding scripts that sets the order and frame rate of the movie.

 Flash movie are usually scriptable using ActionScript. Example of ActionScript

Follow this link for an example on how ActionScript works. http://flashjournalism.com/tutorials/actionscript/

History of Flash and SWF

 SWF format began in early 1996 as the file format used in a program used in FlashSplash Animator.  bought FutureSplash in 1996 to complement its multimedia platform.

 Hence the SWF file format, the acronym expands as ShockWave/Flash.  FutureSplash then became Flash 1.0  In 1998, Macromedia released the SWF file format specification as an open standard to the public.

History Flash and SWF

 To play back an SWF movie, you will need an SWF player, example: Macromedia Flash Player

 There are two Flash file type: .fla – a propriety file format generated by Flash editing tool. It is not playable Flash, but it is a working file format. .swt – a template file for Macromedia’s server-side Generator tool.

The Format and Function of SWF Files

 SWF is a binary tagged file format, just like PNG.

 Each movie begins with a header that encodes global information for the player, they are: frame rate, the dimensions of the movie etc.

 Header is usually followed by one or more tags and ends with a single end tag.

 Two types of tag: definition tags and control tags. Definition Tags

 A definition tag describes a reusable object that is to appear in the movie.

 Each of the objects has a unique ID associated with it that identifies it as a character in the movie.

 Some of the objects are: shapes, texts and fonts, bitmaps, buttons, sounds, morph shapes and sprites. Shapes

 A shape is defined by one of the 3 tags: DefineShape, DefineShape2 or DefineShape3.

 DefineShape2 allows the shape to have more styles and DefineShape3 allows you to use RGBA colours.

 A shape is defines as a collection of fill and line stules, followed by a list of instructions for setting active styles, moving pen, drawing straight or curves edges.

 Example: http://create-with-flash.com/flash-tutorials/how-to- create-a-shape-tween-in-flash-tutorial/

Texts and Fonts

 Fonts are described by DefineFonts tag, which encodes each of the individual glyph of a font.

 Since texts and fonts are very troublesome to transfer from other file format to SWF files, the fonts are encoded as glyphs.

 Glyphs will be stored as an SWF shape, therefore they can be easily rotates , scaled or morphed.

 Example: http://www.flashanimation.com/flash3content.html

Bitmaps

 You can still define bitmaps within an SWF file, even though an SWF file is primarily is a vector-graphic file format.

 DefineBits, DefineBitsJPEG2, and DefineBitsJPEG3 tags allow you to define bitmap objects within a JPEG formatted data. Buttons

 Buttons are objects that can react to user actions.  ActionScript are coded to the button.  DefineButton and DefineButton2 tags are created to create buttons.

 See example: http://flashjournalism.com/tutorials/actionscript/

Sounds

 You can embed sound in response of certain events (eg: when you click a button) by using the Sound tag.

 Or you can stream a sound continuously in the background by using the SoundStreamHead, SoundStreamHead2, and SoundStreamBlock tags.

 MP3 can also be attached to a movie.

 Simple example of using sound with button: http://www.kirupa.com/developer/actionscript/sound.htm

Morph Shapes

 Morph shapes are special kinds of shapes; it is actually defined in two parts, a start shape and an end shape.

 When the movie starts the current shape will morph from the start shape to the end shape.

 The rate of the morphing is created with the DefineMorphShape tag

 Example: http://www.republicofcode.com/tutorials/flash/morphing_bc/

Sprites

 Complete SWF movies can be encapsulated and included in other movies.  These encapsulates movies are called sprites.  Sprites are define by DefineSprite Tag.

Example of Tracing SWF Document Example Tag Anatomy

 Download the PDF “Tag Anatomy” file in my website for an explanation on tags usage.

 www.informatika.unsyiah.ac.id/dalila/Grafika.html

Control Tags

 The control tags define the script of the movie.

 A control tag indicates when a character to be added or to be removed from a frame, when a sound is to be played or when a piece of ActionScript code is to be execute.

 Control tags literally controls how things are done as well as control the sequence in which the frames are displayed. Control Tags

 PlaceObject – adds object to the current frame

 RemoveObject – removes object from the current frame

 ShowFrame – indicates that the frame is complete and ready to be rendered to the screen.

 DoAction – indicates that an ActionScript shuld be executed when the frame is complete.

 End - marks the end of the tag list.

 SetBackgroundColor – changes the background color

 Protect – indicaes that the file is password protected. Dictionary and Display List

 Dictionary list – a place where defined and waiting objects reside before placed on screen

 Display List – a place where references to the objects that are displayed on the screen are located. SWF Data Types

 There are three SWF data types that will be discussed today:  Integer fields  Bit fields  The coordinate system Integer fields in SWF files are represented in 8, 16, or 32 bits.

They can be signed or unsigned integers.

The SWF specification uses the notation on the table to the right.

Integer Fields Many of the structures of SWF files are stored in packed bit files in order to save space.

Bit Fields The Coordinate System

 The SWF coordinate system is a grid with the origin in the upper left hand corner.

 Some coordinates are expressed relative to the global coordinates system, for efficiency and some coordinates are expressed relative to the origin of the object. End of Lecture

GROUP PRESENTATION 5 MINUTES EACH GROUP CLASS B ARE WELCOMED TO STAY