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 <mx:Button x=" 39 " y=" 31 " label=" Button one " click="myTextField.text= 'B1 pressed' "/> 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 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 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 Recommended documentation 21 Unit 1: Introduction Recommended documentation • Course webpages: http://www.macs.hw.ac.uk/~mjc/tea ching/Animation/ • Keith Peters, "Foundation Actionscript 3.0 Animation: Making Things Move!“ Note that examples are in ‘Sprite’ ActionScript!! Adobe Documentation • See Mike’s F21MA web pages 22 Unit 1: Introduction 3D Modelling & Animation Module F21MA Before the Lab Watch two Adobe videos • Google ‘ Flex in a Week’ (url below) • In ‘Day 1’ watch the two videos indicated below in the red box http://www.adobe.com/devnet/flex/videotraining 23 Unit 1: Introduction Watch Mike’s videos • Goto Mike’s Vidios on my website • Watch the video for Unit 1, Lab 1 • And Unit 2, Lab 2 parts 1 & 2 3D Modelling & Animation Module F21MA Lab 24 Unit 1: Introduction Lab • Create and run the MXML examples described in this unit. 3D Modelling & Animation Module F21MA End 25.