1 / 24

Introduction to ActionScript and MXML: GUI Lab Overview

This lab focuses on the fundamentals of ActionScript and MXML to create interactive user interfaces. Attendees will learn about variables, functions, and conditions in ActionScript, contrasting with MXML's declarative approach. Key goals include understanding object declaration, layout, and creating simple shapes like rectangles. Coding examples demonstrate how to generate event handlers, utilize different namespaces, and manage animation and interactive components. Students will be equipped to finalize projects and explore further resources related to ActionScript and MXML programming.

manny
Télécharger la présentation

Introduction to ActionScript and MXML: GUI Lab Overview

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lab 3: Actionscript User Interface Lab: GUI Lab Sep. 11th, 2012

  2. Hw1a • Due now!

  3. Project 1b • TBA • Uses actionscript(this lab) • Due by 9:00am, 9/25 (in two weeks)

  4. Lab 3 goals • MXML: a more general perspective • Basic actionscript • Variables • Functions • Conditions

  5. MXML Actionscript Declarative language Imperative language Write imperative statement that get run top to bottom Other example: javascript Good for interactivity • Declare objects and layout between objects • Other example: HTML • Good for layout declaration Example: Creating a rectangle that is 100 x 100 <s:Rectwidth=“100” height=“100” /> varrect1:Rectangle = new Rectangle; rect1.width = 100; rect1.height = 100; this.contentGroup.addElement(rect1);

  6. MXML Actionscript Declarative language Imperative language Write imperative statement that get run top to botttom Other example: javascript Good for interactivity • Declare objects and layout between objects • Other example: HTML • Good for layout declaration Example: Creating a rectangle that is 100 x 100 <s:Rectwidth=“100” height=“100” /> varrect1:Rectangle = new Rectangle; rect1.width = 100; rect1.height = 100; this.contentGroup.addElement(rect1);

  7. MXML Components: Namespaces • mx – Halo • s – Spark (Halo + skinning) • fx – Language (programming) • map – Google Maps

  8. MXML syntax <s:Rect> </s:Rect> Opening tag Closing tag

  9. MXML syntax <s:Rectwidth=“150”> Opening tag Attribute name Attribute value • </s:Rect> Closing tag

  10. MXML syntax <s:Rectwidth=“150” height=“150”> Attribute Opening tag Attribute • </s:Rect> Closing tag

  11. MXML syntax Opening tag Attribute Attribute <s:Rectwidth=“150” height=“150”> • <s:fill> Child tag • <s:SolidColorcolor=“#FF0000” /> • </s:fill> • </s:Rect> Closing tag

  12. MXML: Layouts • Containers • Organizers • Positioning

  13. MSML Actionscript Declarative language Imperative language Write imperative statement that get run top to bottom Other example: javascript Good for interactivity • Declare objects and layout between objects • Other example: HTML • Good for layout declaration Example: Creating a rectangle that is 100 x 100 <s:Rectwidth=“100” height=“100” /> varrect1:Rectangle = new Rectangle; rect1.width = 100; rect1.height = 100; this.contentGroup.addElement(rect1);

  14. Tag Don’t interpret as MXML <fx:Script> <![CDATA[ // code goes here ]]> </s:Script>

  15. Declare a script in your application

  16. Actionscript public varmyInt:int; public varmyStr:String= “hi”; Name Type Value Access control Declaration

  17. Declare a date object • Name: startTime • Type: Date • Initial value set to: new Date()

  18. Declare a date object

  19. Add a button, generate event handler • Label: “Click me!” • Under “On click:”, click “Generate Event Handler”

  20. Pop up an alert on click Test your program

  21. Show how many seconds since the app started Test your program

  22. Show if the current time is the GUI lab time Test your program

  23. Where to Explore? • ActionScript referenceshttp://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html • Example Projects: Tour de Flexhttp://www.adobe.com/devnet/flex/tourdeflex.html • Google!!

More Related