Com531 multimedia technologies
1 / 74

COM531 Multimedia Technologies - PowerPoint PPT Presentation

  • Uploaded on

COM531 Multimedia Technologies. Lecture 7 – Flash AS and Flash Catalyst. What is Interactivity?. Automated response to user activity Example applications Reactive elements Simulations Tutorials Quizzes Interactivity in Flash: Events call actions to be performed on targets

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'COM531 Multimedia Technologies' - belle

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Com531 multimedia technologies

COM531 Multimedia Technologies

Lecture 7 –

Flash AS and Flash Catalyst

What is interactivity
What is Interactivity?

  • Automated response to user activity

  • Example applications

    • Reactive elements

    • Simulations

    • Tutorials

    • Quizzes

  • Interactivity in Flash:

    • Events call actions to be performed on targets

    • Defined using ActionScript

Managing flash projects
Managing Flash Projects

  • Scenes

    • Divide timeline into manageable sections

      e.g. Introduction, conclusion, index, etc.

    • Useful for long/complex movies

  • Libraries

    • Organise assets using folders

    • Share assets between projects

      • e.g. logos, audio/video

  • Movie Explorer

    • Overview of project structure

    • Access and edit assets

Testing flash movies
Testing Flash Movies

  • Bandwidth profiler

    • Test delivery with differentbandwidths

    • Identify download delays

    • Show streaming

  • Debug Movie

    • For validating complex scripts

    • Real time values for variables, movie clip properties…

  • Test manually

    • Different platforms and browsers

    • Different connections (e.g. modem)

Publish settings
Publish Settings

  • Select formats for publication

    • Range of formats supported

    • Flash, HTML, GIF, QuickTime…

  • Configure settings for each format

    • Filenames

    • Alignment

    • Size

    • Looping

    • Quality

  • Publish preview for each format

    • Test appearance and functionality

Publish as html
Publish as HTML

  • HTML is native language of web

  • Flash can automatically create HTML

    • Based on range of built-in templates

  • HTML produced not always appropriate

    • Change HTML of each page

      • Manually or with an authoring tool

    • Customise Flash templates

      • Affects all published pages

Flash accessibility
Flash Accessibility

  • Web content should be accessible to all users

    • Regardless of ability/disability

  • Issues

    • Visual, time-based media not suitable for all users

    • Requires Flash player (plug-in)

    • Limited support for screenreaders

  • Benefits

    • Animation can be more accessible to some users

    • Supports multiple media (audio, video, text…)

    • Vector graphics scale without deterioration

    • Allows keyboard access

    • Player ensures cross-platform consistency

Improving accessibility
Improving Accessibility

  • Provide text equivalents in HTML

    • For entire movie using [d]link

  • Provide text equivalents in Flash

    • Increases accessibility to screen readers

    • Specific software required to process

    • Only for movie clips

  • Provide keyboard controls to movies (play, stop…)

  • Publish movie content in range of formats

    • Images, text, audio/video…

Object oriented scripting
Object-Oriented Scripting

  • ActionScript is an object-oriented scripting language

  • Scripting languages organise information into groups called classes

  • Classes and objects are just ways to group together chunks of information


  • Class

  • Instance

  • Object

Classes objects
Classes & objects

  • Classes are groups of objects that share characteristics, e.g. rectangles

  • Shared characteristics allow you to create a blueprint for those objects

  • A software blueprint for an object is called a class

Object oriented scripting1
Object-Oriented Scripting

You can create multiple instances of these

classes, which are called objects

Real-world analogy: “Bicycle" class

You can have many objects of the same kind (e.g. A bicycle, your bicycle is just one of many bicycles in the world)

Using object-oriented terminology, we say that your

bicycle object is an instance of the class of objects

known as bicycles

Object oriented terminology
Object-oriented terminology

Class: Defines the common

characteristics of a bicycle.

Like a plan

Objects: Physical manifestation of bicycle class.

Each object is a instance of the bicycle class


Using the bicycle class, you can create any

number of bicycle objects from the class

When you create an instance of a class each

instance gets its own copy of all the instance

variables defined in the class

Classes objects1
Classes & objects

  • Bicycles have states (current gear)

  • Bicycles have behaviors (change gears, brake) in common

    However, each bicycle's state is independent of

    and can be different from that of other bicycles

Objects vs classes
Objects vs. Classes

  • Objects and classes seem very similar

  • In the real world, it's obvious that classes are not themselves but the objects they describe

  • A blueprint of a bicycle is not a bicycle

Classes objects2
Classes & objects

  • Classes are groups of objects that share characteristics i.e. software blueprint

  • Object is the physical manifestation of a class

  • Each object is an instance of the class

Action script
Action Script

Script applied to an action

Basic structure of an action

whenSomethingHappens (input variables)

{ do stuff }




on (press) {

setProperty ("MyTarget", _height, "100");








  • Scripting language used in Flash to create advanced interactivity and animation

  • Allows the execution of different actions in a movie depending on what a user does or on what frame of the movie is being played

  • Similar structure and syntax to JavaScript

  • Example script:

Creating actionscript
Creating ActionScript

  • Does not require:

    • Detailed understanding of language

    • Hand-coding of scripts

  • Actions panel

    • Graphical interface to ActionScript

    • Build custom scripts using pre-written pieces of code

    • Define events, targets and actions

    • Scripts are validated automatically

Actionscript fundamentals
Actionscript Fundamentals

  • ActionScript is a programming language

  • Subject to usual programming language constraints

  • Has its own syntax and structure

Some uses of actionscript
Some uses of ActionScript

  • Create multiplayer games

  • Create engaging, user-aware navigation

  • Send data to middleware, like PHP and Cold Fusion

  • Communicate with JavaScript

Benefits of using actionscript
Benefits of using ActionScript

  • Allow for a more responsive Web site

  • Allows inclusion of dynamic data

  • Make your site more accessible to readers

Actionscript limitations
ActionScript limitations

  • ActionScript can't talk directly to a database. Middleware like PHP, Cold Fusion, or ASP is needed to do this.**

  • Can't use exception handling i.e. try, throw, or catch (Error handling in Javascript)

  • Exceptions provide error-handling capabilities for programs. An exception is an event that

    occurs during the execution of a program that

    disrupts the normal flow of instructions

    **This functionality can now be achieved using Macromedia Flash Remoting

Actionscript functionality
ActionScript Functionality

Two ways to add ActionScript to Flash movie

  • Frame Actions – code associated with particular keyframes of the movie

  • Custom classes – code that resides in an external file

  • Flash component interactions create events and the associated actions are programmed as event handler functions

  • Event model used is DOM2, so event handlers are registered with addEventListener

  • Events

    • Events call an action

      • Dependent on user activity or autonomous

      • Single event can trigger multiple actions

    • Mouse events

      • Mouse movement, button clicks

    • Keyboard events

      • Keystrokes, text entry

    • Frame events

      • Occur automatically on entering frame

      • Attached to timeline of movie or movie-clip


    • Wide range of pre-defined actions

      • Movie control

        • Stop, play, go to frame, etc.

      • Movie Clip control

        • Set property, play/stop, etc.

      • Parameters can be customised

    • Actions can be:

      • Performed on multiple targets

      • Conditional (If, then, else…)






    • Target is object on which action is performed

      • Current movie

      • Movie-clip instances

      • External applications – e.g. browsers

    • Defining targets

      • If no target defined action affects current object

      • Movie clip instances require unique name

      • Define path from current object to target

    Learning interactions
    Learning Interactions

    • Templates for creating interactive assessment

    • Range of question types available

      • MCQ, drag-and-drop, hotspot, etc.

    • Parameters can be customised

      • Question, answers, feedback, etc.

      • Use Clip Parameters panel

    • Submissions can be tracked

      • Data sent to LMS

    • Quiz templates

      • Integrate a set of learning interactions

    Action buttons
    Action Buttons

    • Means of providing movie controls

      • e.g. Play, Stop, Rewind

    • Button states

      • Pre-defined keyframes in timeline

      • Can contain layers, animation, images, etc.

    • Built-in actions can be attached to buttons

    • Range of button sets provided by Macromedia

    Object and frame actions
    Object and Frame Actions

    Two basic kinds of actions in Flash

    • Object actions

    • Frame actions

    Object actions movie clips
    Object Actions - Movie Clips

    • Object actions are chunks of ActionScript code that are attached to an object

    • Usually an object is a symbol that is either a button or a movie clip

    • Graphic symbols don’t have actions

    Object actions
    Object Actions

    An object action is associated with an instance

    of a symbol, not with the symbol itself

    Object actions1
    Object Actions

    Both shapes are instances of the same movie

    clip symbol, but only one of them has an action

    attached to it

    The function is always attached to this object

    instance, no matter where in the movie it appears

    Object actions aren’t concerned with what frame the

    movie is currently on (as long as the object actually

    exists in the movie at that frame)

    Event handlers
    Event handlers

    The function you saw was a “onClipEvent”

    and is known as an event handler

    An event is something that happens: i.e. a

    movie loads, user presses a mouse button

    An event handler constantly looks for events

    and lets ActionScript know when one of them occurs

    Typical event handler
    Typical Event handler

    • OnmouseDown refers to what the mouse button is doing

    • If mouse button was pressed, then onClip-Event(mouseDown) is called, and everything inside the first set of curly braces is executed






    • startDrag is what's called a method

    • A method does something

      In this case drag what was clicked


    A method is something an object can do or something

    you can do to an object. For example, here are some

    things methods can do:

    • Stop a movie clip

    • Go to a certain frame and start playing there

    • See if a movie clip is over another movie clip

    • Hide the mouse cursor

    • Set the volume of a sound being played


    • Notice that we didn't use startDrag(), but used startDrag(this).

    • The startDrag method requires a target i.e., it needs to know what it should start dragging

    This command
    this” command

    • The easiest way to reference the current object is just to call it “this”

    • The other way to refer to the object is absolute i.e. startDrag(_root.drag_fish)

    • Where drag_fish is the name of the instance of the fish symbol

    • The _root part means "start looking from the top of the movie hierarchy"

    Object actions onclipevent
    Object actions: onClipEvent

    Object actions on a movie clip have to be inside of an

    onClipEvent. Possible events are:

    • load

    • unload

    • enterFrame

    • mouseMove

    • mouseDown

    • mouseUp

    • keyDown

    • keyUp

    Object actions buttons
    Object Actions: Buttons

    The only real difference between actions that

    are attached to buttons instead of movie clips is

    that the event handler for buttons is “on”

    instead of onClipEvent

    Otherwise, they're pretty much the same

    Object actions buttons1
    Object Actions Buttons

    The events for on are:

    • press

    • release

    • releaseOutside

    • rollOver

    • rollOut

    • dragOver

    • dragOut

    • keyPress

    Frame actions
    Frame Actions

    • Frame actions are like object actions, except that the actions are associated with a certain spot in the timeline instead of an object

    • If a frame has some actions associated with it, those actions are carried when the playhead enters that frame

    Frame actions3
    Frame Actions

    • Frame actions only allowed on a keyframe!!!

      Hint: Place all of your frame actions on a

      separate layer—it makes organization easier

    Actionscript syntax
    Actionscript Syntax

    ActionScript uses what is called dot syntax.

    For example, if you have a movie clip called

    red_shirt inside of the movie clip called

    santa_claus, then one way to access that

    object is


    Dot syntax
    Dot Syntax

    To write paths actionscript uses what is called dot syntax.

    E.g. to access the movie highlighted the path would be


    Root properties
    Root & Properties

    _root is the base of all Flash movies. If you

    want to find out where red_shirt is on the stage,

    you could use

    xPosition = _root.santa_claus.red_shirt._x;

    _x is a property that returns the horizontal position of the object

    Root properties1
    Root & Properties

    Its analogous to an absolute URL: You start at

    the top and specify your way down


    A property is an attribute of an object. Movie clip

    examples include

    • how wide it is (_width)

    • where it is on the stage (_x and _y)

    • what frame is currently being played (_currentframe)

    • how transparent it is (_alpha)

    • its name (_name)

    • whether it's visible or not (_visible)


    Most properties can be read or altered. For

    example, let's see how wide a movie clip called

    clue is:

    _root.clue._width = 110

    _root.clue._width = 40

    underscore (_)

    All movie clip properties start with an

    underscore (_)

    That's just how Flash is

    Flash overview
    Flash Overview

    • Interactive movies created with ActionScript

    • Simple interactivity

      • Does not require complete understanding of language

      • Build custom scripts from pre-written commands

      • Attach to buttons to provide user controls

    • Sophisticated interactivity

      • Customise elements provided by Macromedia

        • e.g. learning interactions, components

    Flash catalyst1
    Flash Catalyst

    • Adobe Flash Catalyst (formerly known by its codename Thermo) is a designers' tool for creating the user interface for Rich Internet Applications

    • With Flash Catalyst, user interface architects can create the user interface for Adobe Flex applications using Adobe graphic software. Then developers can use the result to build the rest of the application in Flex



    • Flash Catalyst can import Adobe Photoshop, Adobe Illustrator, or Adobe Fireworks files keeping all their features

    • Convert artwork into functional UI components (creating Flex component skins)

    • Create and edit behaviours (mouse event handling, etc.) without writing code

    • Create animated transitions

    • Return to Photoshop or Illustrator to modify the artwork, while preserving the behaviours, animation, etc. that were created in Catalyst

    • Create UIs to handle dynamic data without having access to the actual data source

    • Use design-time data placeholders when marking up an application, testing interactivity, and choreographing motion

    • Compatible with Flash Builder (formerly called "Flex Builder"), using the same project format

    Flash builder
    Flash Builder

    • Adobe Flash Builder (previously known as Adobe Flex Builder)[3] is an integrated development environment (IDE) built on the Eclipse platform and speeds development of RIAs and cross-platform desktop applications, particularly for the Adobe Flash platform

    • Adobe Flash Builder offers built-in code editors for MXML (Macromedia/Magic) and ActionScript and a WYSIWYG editor for modifying MXML applications

    • It includes an interactive debugger allowing developers to step through code execution while inspecting variables and watching expressions

    • It contains added support for performance analysis. The profiling view displays statistical information about memory use in addition to function call execution time

    • Prior to version 4, this product was known as Flex Builder. The name change is meant to signify its connection to other products in the Adobe Flash Platform and to create a clear distinction between the Flex SDK and the IDE

    Flex sdk
    Flex SDK

    • Adobe Flex is a software development kit (SDK)  for the development and deployment of cross-platform RIAs based on the Adobe Flash platform. Flex applications can be written using Adobe Flash Builder or by using the freely available Flex compiler from Adobe

    • In March 2004 Macromedia release included an SDK, an Integrated development environment (IDE), and a Java EE (Enterprise Edition) integration application known as Flex Data Services (now a separate product rebranded as LiveCycle Data Services

    • An alternative to Adobe LiveCycle Data Services is BlazeDS, an open-source project that started with code contributed in 2007 by Adobe

    • In February 2008, Adobe released the Flex 3 SDK under the open source Mozilla Public License and so Flex applications can be developed using any standard IDE, for example Eclipse


    • Eclipse is an open source community whose projects are focused on building an extensible development platform, runtimes and application frameworks for building, deploying and managing software across the entire software lifecycle

    • Eclipse is a multi-language software development environment comprising an integrated development environment (IDE) and an extensible plug-in system. It is written mostly in Java and can be used to develop applications in Java and, by means of various plug-ins, other programming languages including Ada, C, C++, COBOL, Perl, PHP, Python, Ruby (including Ruby on Rails framework), Scala, Clojure, Scheme

    • The IDE is often called Eclipse ADT for Ada, Eclipse CDT for C/C++, Eclipse JDT for Java, and Eclipse PDT for PHP


    • The Eclipse open source community has over 60 open source projects. These projects can be conceptually organized into seven different "pillars" or categories

      • Enterprise Development

      • Embedded and Device Development

      • Rich Client Platform

      • Rich Internet Applications

      • Application Frameworks

      • Application Lifecycle Management (ALM)

      • Service Oriented Architecture (SOA)


    Project examples
    Project examples

    Core projects

    • Rich Client Platform is the core framework that all other Eclipse projects are built on

    • Java Development Tools (JDT) provides support for core Java SE – includes a standalone fast incremental compiler

      Tools projects

    • Plug-in Development Environment (PDE) provides tools to create, develop, test, debug, build and deploy Eclipse plug-ins, fragments and features

    • C/C++ Development Tools (CDT) adds support for C/C++ syntax highlighting, code formatting, debugger integration and project structures

    • Mylyn is a task-focused interface for Eclipse designed to reduce information overload and make multi-tasking easier.

    • Graphical Editing Framework (GEF) allows developers to build standalone graphical tools. Example use include circuit diagram design tools, activity diagram editors and WYSIWYG document editors

    • Buckminster adds support for Component Assemblies

    • WindowBuilder is a powerful and easy to use bi-directional Java GUI designer

      Web projects

    • J2EE Standard Tools (JST) extends the core JDT to include support for Java EE projects - includes EJBs, JSPs and Servlets.

    • PHP Development Tools (PDT)

    • Web Standard Tools (WST) adds standards compliant web development tools. These tools include editors for XML, HTML and CSS

    Examples 2
    Examples (2)

    Modelling projects

    • Eclipse Modeling Framework (EMF) a modeling framework and code generation facility for building tools and other applications based on a structured data model, from a model specification described in XMI

    • Graphical Modeling Framework (GMF) is a generative component and runtime infrastructure for developing graphical editors based on EMF and GEF

      Technology projects

    • g-Eclipse which provides a middleware independent framework and exemplary implementations for users, developers, and administrators accessing Computing Grids

    • Subversive - SVN Team Provider (Subversive) is aimed at providing Subversion support in Eclipse similar to that previously provided for CVS

      Other projects

    • Test and Performance Tools Platform (TPTP) which provides a platform that allows software developers to build test and performance tools, such as debuggers, profilers and benchmarking applications

    • Business Intelligence and Reporting Tools Project (BIRT), an Eclipse-based  open source reporting system for web applications, especially those based on Java EE

    • Data Tools Platform Project (DTP) provides relational database connectivity and SQL design tools.

    • Application Lifecycle Framework a closed project of the Eclipse Foundation