User Group Meeting PaperVision3D


Published on

Flash and Flex Israel user group meeting about PaperVision3D

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

User Group Meeting PaperVision3D

  1. 1. Flash and Flex Israel User Group Meeting Papervision3D 30-12-09
  2. 2. <ul><ul><li>An interactive developer & designer specializing in Flash, Flex, Web, Adobe Air, 3D Experiences, and Mobile Devices. </li></ul></ul><ul><ul><li>Associate's degree in Interactive Communications and over 4 years of Flash development and design experience. </li></ul></ul><ul><ul><li>Originally from Las Vegas currently based in Israel, been evolved in the community for the past 5+ years I attend and speak at conference. Run and mange Flash & Flex Israel “Adobe User Group” </li></ul></ul><ul><ul><li>My site and blog - </li></ul></ul><ul><ul><li>Twitter @almogdesign </li></ul></ul>Almog Koren “Almog Design” Interactive Developer & Designer
  3. 3. <ul><ul><li>1. Introduction: About Flash and Flex Israel </li></ul></ul><ul><ul><ul><ul><li>About the UG </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Adobe and Quicksoft </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Why ? </li></ul></ul></ul></ul><ul><ul><ul><ul><li>What to Expect </li></ul></ul></ul></ul><ul><ul><li>2. Flash and 3D </li></ul></ul><ul><ul><ul><ul><li>Flash Player 10 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Open Source Engines </li></ul></ul></ul></ul><ul><ul><li>3. What can be done (Examples) </li></ul></ul><ul><ul><ul><ul><li>15 Great Examples </li></ul></ul></ul></ul><ul><ul><ul><ul><li>5 Bad Examples </li></ul></ul></ul></ul>Agenda Table of Contents
  4. 4. <ul><ul><li>4. Designing for 3D </li></ul></ul><ul><ul><ul><ul><li>What to Consider </li></ul></ul></ul></ul><ul><ul><ul><ul><li>User Interface </li></ul></ul></ul></ul><ul><ul><ul><ul><li>User Experience and Interaction </li></ul></ul></ul></ul><ul><ul><li>5. Introduction to Papervision3D </li></ul></ul><ul><ul><ul><ul><li>Why I use Papervision3D </li></ul></ul></ul></ul><ul><ul><ul><ul><li>The Good the Bad and the Ugly </li></ul></ul></ul></ul><ul><ul><li>6. Getting Started </li></ul></ul><ul><ul><ul><ul><li>Compiled and Non-compiled Source Code </li></ul></ul></ul></ul><ul><ul><ul><ul><li>SWC, ZIP, or SVN </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Downloading (SVN) </li></ul></ul></ul></ul>Agenda Continued Table of Contents
  5. 5. <ul><ul><li>7. Getting Ready to Code </li></ul></ul><ul><ul><ul><ul><li>IDE Setup </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Object-Oriented Programming </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Document Class </li></ul></ul></ul></ul><ul><ul><li>9 .Your first application </li></ul></ul><ul><ul><ul><ul><li>Scene, Camera, Viewport, 3D objects, Material, Render Engine </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Left-handed Cartesian Coordinate System </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Lets code - Example 1 (Basic) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Example 2 – 3D carousel </li></ul></ul></ul></ul>Agenda Continued Table of Contents
  7. 7. Flash and Flex Israel is an official user group for Israel Tel Aviv Area. It is also the official Adobe user group for Flash and Flex in Israel. Flash and Flex Israel consists of professionals of all skill levels who gather monthly to share information and to stay on top of what is new in our ever- changing industry, to learn experience's new ideas and concepts. Are discussion topics including Flash, Flex, RIA, Web Design/Development, Mobile, Air, and much more. Meetings regularly feature local and national speakers, networking, Q&A, seminars, and webinars. About the UG Introduction: About Flash and Flex Israel
  8. 8. Adobe provides support to user groups and user groups mangers, they do not control the user group but to be sponsored or officially under Adobe the user group must meet a number of requirements. As a user group we have full control of are agenda! Adobe created the user group program to allocate one location for the user groups to better help both the community and Adobe. Adobe and Quicksoft Introduction: About Flash and Flex Israel
  9. 9. I wanted to create and mange a user group to be part of the community, to push forward the community in Israel. I don’t get paid and everything is done on my own time. Why should be a part of Flash and Flex Israel, other then shown befits of giveaways, networking opportunities, learning opportunities it gives you a chance to socialize on subject that interest you and your work. It gives a chance to stay up to date with the environment that we work in. On a side note, attending meeting is one of the most import thing in keeping the user group alive but I would like everyone to be a part of the group. Why? Introduction: About Flash and Flex Israel
  10. 10. Each meeting will be at least 4 hours and be considered more of a workshop, well cover topics that interest you so speak up. Some meetings will be pure design oriented while others will be programming oriented in general I will try to mix the subjects up. We will not cover the basics of everything but if you’re a beginner ask questions. Each meeting will be posted on the user group site a brief agenda will be posted. Remember I’m developer just like so I do make mistake What to Expect Introduction: About Flash and Flex Israel
  11. 11. FLASH AND 3D
  12. 12. Flash Player 10 has native 3D support. It’s not as robust as Papervision3D or Away3D, and in fact was not designed to compete with those engines. Rather than that, it contains classes that perform 3D calculations and allows BASIC 3D manipulation of display objects. (Postcards in Space) No support for the collada or shader format. FP10 wins in terms of performance. This make sense when you consider that the 3D math is being handled internally. FP10 wins in terms of SWF size Papervision 3D has to load in all the 3D code externally. Flash Player 10 Flash and 3D
  13. 13. FP10 3D has no concept of depth sort. Depth sort must be handled manually. For simple scenes this is trivial, but once you get many polygons intersecting, depth sort can become a complex problem. For simple 3D scenes flash player 10 gives much better performance. Examples Flash Player 10 Continued Flash and 3D
  14. 14. <ul><li>Papervision 3D </li></ul><ul><li>Away 3D originally derived from Papervision3D </li></ul><ul><li>Sandy 3D Sandy is a Flash 3D engine, available in 3 versions: AS2, AS3 and haXe </li></ul><ul><li>Alternativa platform Not free </li></ul><ul><li>WOWEngine offline - open source physics engine </li></ul>Open Source Engines Flash and 3D
  15. 15. 15+ Great Examples What can be done (examples) Flash and 3D
  16. 16. 5 Bad Examples What can be done (examples) continued Flash and 3D
  17. 17. DESIGNING FOR 3D
  18. 18. <ul><li>Consider that showing 3D to a client is much harder then a basic web site try using , , </li></ul><ul><li>Time for design and development can be much longer </li></ul><ul><li>User interaction can be a lot mote complex, putting into a understandable design is a lot harder </li></ul><ul><li>There is only so much room, within the animation, screen and objects. </li></ul><ul><li>You might have 3D objects </li></ul><ul><li>You might have materials, and shads. </li></ul><ul><li>Loading times: design your preorders make them interesting ( ), </li></ul><ul><li>consider the user once the site loads get right to the point. </li></ul><ul><li>Part of the interface can or will be the 3D object. </li></ul>What to Consider Designing for 3D
  19. 19. Clarity. The interface avoids ambiguity, making everything clear through language, flow, hierarchy and metaphors for visual elements. “Clear interfaces don’t need manuals” Familiarity. Use real-life metaphors to communicate meaning Responsiveness. Speed a good interface should not feel sluggish, provide good feedback to the user about what's happening and so on. Consistency. Keeping your interface consistent Efficiency. Make the user more productive User Interface Designing for 3D
  20. 20. User appreciate quality and credibility. Give them high quality content . User don’t read they scan. User search for some fixed points or anchors that can guide them. User are impatient and insist on instant gratification. The higher the cognitive load needed by the users to process, and the less intuitive the navigation.. The user will leave. User follow their intuition. In most case, users muddle through on their own rather than read the information. User want to have control. They want to user the back button (use SWFAddress) . User Experience and Interaction Designing for 3D
  22. 22. Strong community - , Great documentation - Its easy to learn Plenty of tutorials - , Its open source Why I use Papervision3D Introduction to Papervision3D
  23. 23. It runs on Flash Player 9 Memory leakage Can crash a browser very easy Everything is done in code The Good the Bad and the Ugly Introduction to Papervision3D
  25. 25. Downloading papervision3D can be done via Subversion, ZIP, and SWF Downloading the non-compiled source means that you will get the folders and classes, just as they are without them being compiled in any format. (Very helpfully in the process of learning) The SWF contains source code that has already compiled, like a SWF file in this case the classes are hidden. **What is Subversion? Subversion also known as SVN, is an open source version control system. It allows developers, or teams of developers, to upload and download current and historical versions of the project they’re working on. Compiled and Non-Compiled Source Code Getting Started
  26. 26. The zip file contains non-compiled source code, Where the SVN server always contains the most recent revision, the zip file tends to be more or less outdated. Due to the constant changes that are being made to an open source project , the code new features even bugs. The SWC file is the same as the zip but you will not be able to see the source code. The SWF contains source code that has already compiled, like a SWF file in this case the classes are hidden. SWC, ZIP, or SVN Getting Started SWF (Compiled) ZIP (Non-Compiled) SVN (Non-Compiled) Flash CS4 - + + Flex Builder 3 + + + Flash Builder 4 + + + Probably Stable + + - Up to date - - +
  27. 27. <ul><li>On windows: TortoiseSVN </li></ul><ul><li>On Mac svnX: </li></ul><ul><li>Create a folder somewhere on your computer (Papervision3D_Source) </li></ul><ul><li>Launch your SVN </li></ul><ul><li>Select Repositories </li></ul><ul><li>Add a new project </li></ul><ul><li>URL = </li></ul><ul><li>SVN Checkout </li></ul><ul><li>Working copy = Paervision3D </li></ul>Downloading (SVN) Getting Started
  29. 29. You need to tell Flash or your IDE where the Papervision3D folders are located at, if your using a SWC file you need to set the path I will show this. IDE Setup Getting Started
  30. 30. You should be familiar with object oriented programming What are class, noting more than a set of functions (methods) and variables(properties) grouped together then a single file IE var mySprite:Sprite = new Sprite(); An ActionScript class is basically a text-based file with an .as extension stored somewhere on your computer, containing ActionScript code. Object-Oriented Programming (Basic) Getting Started
  32. 32. Scene . Entire composition of 3D objects in a 3D space. Think of it as your stage in Flash with three axes – x,y,z. Camera . Defines the point of view from which you are viewing the scene. Viewport . Container sprite on your stage, and shows the output of what the camera sees. 3D objects . A shape in 3D space is called a 3D object, or DisplayObject3D in Papervision3D. Material . The texture that is printed on an object. When an object doesn’t have a material applied, it will be invisible. Render Engine . A rolling camera Scene, Camera, Viewport, 3D objects, Material, Render engine Your First Application
  33. 33. <ul><li>Flash, as well as Papervison3D, make use of the Cartesian coordinate system. In Flash, a regular visual object can be positioned on the stage by entering an x and y value. The object will be positioned on the stage according to these values and relative to the upper left corner of the stage. </li></ul><ul><li>Papervision3D there are the following differences </li></ul><ul><ul><li>Flash use Cartesian coordinates on two axes, whereas Papervision3D makes use of them on three axes. </li></ul></ul><ul><ul><li>The y-axis in Flash in inversed compared to the y-axis in Papervision3D. </li></ul></ul>Left-handed Cartesian Coordinate System Getting Started
  34. 34. <ul><li>Papervision3D Essentials, Pail Tondeur and Jeff Winder </li></ul><ul><li>The Smashing Book </li></ul><ul><li>Papervision3D - </li></ul><ul><li>Papervision3D Showcase - </li></ul><ul><li>AIRTIGHT INTERACTIVE - </li></ul>Reference Reference
  35. 35. THANK YOU