Unit1 Introduction 2011 08 09 [Compatibility Mode]

Unit 1: Introduction

3D Modelling & Animation Module F21MA

Unit1: Introduction

Mike Chantler, 9/8/2010

Unit contents

• What is animation? • Outline of first half of course • Getting started with Adobe Flex • Notes on compilation • Recommended documentation • Lab

1 Unit 1: Introduction

What is animation?

• Animation: rapid display of a sequence of images … in order to create an illusion of movement. [Wilipedia] • e.g. flickbook & traditional ‘cartoon’ motion picture

Frame 1

2 Unit 1: Introduction

Frame 2

Frame 3

3 Unit 1: Introduction

Frame 4

Frame 5

4 Unit 1: Introduction

Frame 6

Frame 7

5 Unit 1: Introduction

Animate by displaying 1 image at a time

• Can be synchronous – Constant period between frames (traditional) • Asynchronous – Variable interframe period (may be dependent upon animation events)

Repeated drawings

6 Unit 1: Introduction

Program-controlled animation

• Synchronous – Constant frame-rate – Procedure • On entering frame assume frame period has passed • Calculate new position of objects • Draw at new position • Repeat

3D Modelling & Animation Module F21MA

Outline of 1 st half of course

7 Unit 1: Introduction

Outline

• Mainly 2D computer animation • Program controlled • Assume syncronous frame rate • Uses Flex for Flash player delivery • Uses very simple physics • Project – Simple Flash game

3D Modelling & Animation Module F21MA

Getting started with Adobe Flex (now Flash Bilder 4)

8 Unit 1: Introduction

Adobe Flex • Programming environment for creating content for Adobe’s Flash player. • c.f. Flash CS3 (aimed at designers – has time-line) • Comprises: – MXML • XML-based layout language – ActionScript • Similar to Java script etc. • Based on ECMAScript v4 standard • Use to create behaviours – Flash(Flex) builder (IDE) • Built on Eclipse workbench

Mxml

• XML based layout language • Transformed into ActionScript • 1 line mxml ≈ 3-4 lines AS

9 Unit 1: Introduction

A first mxml example

Open FlexBuilder

• Find and open Flas Builder 4

• was

10 Unit 1: Introduction

Open FlexBuilder

Create a new project • Navigate: File>New>Flex Project – Call it twoMXMLbuttons – Change project location to desired directory – And hit ‘finish’

11 Unit 1: Introduction

Inspect the source file

• Finish and you should have:

Inspect listing in Package Explorer Panel

Double click

12 Unit 1: Introduction

Inspect the source file

Switch to design mode

13 Unit 1: Introduction

Add some components

• Drag 2 buttons and a label from the components panel onto the design area.

Modify the components

• Use the “Flex Properties” window to change the names of the buttons and the ID of the Label field

myLabel

14 Unit 1: Introduction

Add behaviours

• Change the “On Click:” field of Button One to myTextField.text=‘B1 pressed’ • Do similar for Button two • Hit Ctrl+F11 to run

Inspect the code

15 Unit 1: Introduction

Edit code

• Add click behaviours to the buttons:

Run

16 Unit 1: Introduction

Add an ActionScript section

Run

17 Unit 1: Introduction

Run

MXML vx ActionScript

• To start: – Use MXML for layout only – Use ActionScript for behaviour

18 Unit 1: Introduction

Notes

• The basic animation class in ActionScript is the ‘sprite’ • The basic animation class in MXML is the UIComponent. • Confusingly in both of the examples you could of used ‘this.addChild();’

Notes

• To use ‘sprites’ in Flex you need a few more properties and methods are required – hence you need to use the ‘UIComponent’ class. • You can also use AddRawChild – although Flex doesn’t handle the drawing very well so this is not recommended.

19 Unit 1: Introduction

3D Modelling & Animation Module F21MA

Notes on compilation

• Flex Builder is free for educational use – See Mike’s Web pages • The command line compiler mxmlc.exe is free from Adobe’s website • FlexDevelop is an independent free IDE – Visit: http://www.flashdevelop.org • Compiling using MXML seems to add significantly to the size of the .swf but provides lots of advantages

20 Unit 1: Introduction

Notes on debugging • To use the debug features of Flexbuilder you must have the debug version of the Flash player installed • This normally comes with the standard installation but only works in stand alone (non-html) mode • To switch to non-html mode use project > properties > Flex Compiler and untick the HTML Wrapper tick-box • Then use Run > Debug or the shortcut symbol

3D Modelling & Animation Module F21MA