Com531 multimedia technologies
This presentation is the property of its rightful owner.
Sponsored Links
1 / 74

COM531 Multimedia Technologies PowerPoint PPT Presentation


  • 65 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

COM531 Multimedia Technologies

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


Terminology

Terminology

  • 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


Instances

Instances

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


Instances1

Instances


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


Objects vs classes1

Objects vs. Classes


Class instances in flash

Class & Instances in Flash


Class instance in flash

Class & Instance in Flash


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 }


Actionscript

Target

Event

on (press) {

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

}

100

Action

MyTarget

50

MyTarget

ActionScript

  • 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

    • 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


    Actions

    Actions

    • 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…)


    Targets

    myTarget2

    myTarget3

    myTarget1

    Targets

    • 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 and frame actions1

    Object and Frame 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


    Event handlers1

    Event handlers


    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

      OnmouseDown

      {

      startDrag(this);

      }


    Object actions drag fish

    Object Actions Drag fish


    Methods

    Methods

    • startDrag is what's called a method

    • A method does something

      In this case drag what was clicked


    Methods1

    Methods

    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


    Targets1

    Targets

    • 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


    Object actions buttons2

    Object Actions Buttons


    Object actions buttons3

    Object Actions: Buttons


    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 actions1

    Frame Actions


    Frame actions2

    Frame Actions


    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

    _root.santa_claus.red_shirt


    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.movieClip_one.clip_a.square1


    Relative absolute paths

    Relative & Absolute Paths


    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


    Properties

    Properties

    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)


    Properties1

    Properties

    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

    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 catalyst

    Flash Catalyst


    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

    • https://www.adobe.com/cfusion/entitlement/index.cfm?returnurl=http://tv.adobe.com/watch/flash-catalyst-cs5-feature-tour/top-5-flash-catalyst-cs5-features/&e=adobetv&loc=en


    Features

    Features

    • 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

    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


    Projects

    Projects

    • 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)

    • http://www.eclipse.org/


    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


  • Login