Create a Robotic Arm Using Forward Kinematics – Active Premium
Premium members, rejoice! It’s time for another Activetuts+ Premium tutorial. This time, you’ll learn how to use forward kinematics to create a robotic arm – in this case, the example is for an excavator, but you can use the techniques you’ll learn in all sorts of situations. It follows on nicely from our previous tutorials on linear kinematics and inverse kinematics. Read on to see what you’ll learn…
Forward Kinematics (FK) is a positioning algorithm. It’s not as complicated as it sounds if you associate it to sequence of actions from an excavator operator’s point of view. Beginning with the node closest to it, the operator configures the orientation of each node in the hope that the scoop will reach the location intended. Often, several attempts are made before achieving success. FK is an algorithm to perform such task.
In this tutorial, we shall attempt the implementation of FK and apply it onto an excavator from a 2D side view. Having understood this algorithm, one can easily adapt it to a 3D environment. Enjoy!
Preview
Let’s take a look at the final result we will be working towards:
Press the space key to scroll through nodes (the current one is marked by a red bracket). While you are at it, press the arrow keys to change the angle.
This tutorial covers the following:
- Explanation for FK’s Mathematical background.
- Hard-coded implementation of the FK.
- Object-oriented class to implement FK algorithm.
- Demonstration of FK class used in a project.
- Graphics (as seen above) applied to the demonstration.
Active Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium, Photo Premium, and the new Mobile Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!
Also, don’t forget to follow @envatoactive on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
View full post on Activetuts+
Premium members, rejoice! It’s time for another Activetuts+ Premium tutorial. This time, you’ll learn how to use forward kinematics to create a robotic arm – in this case, the example is for an excavator, but you can use the techniques you’ll learn in all sorts of situations. It follows on nicely from our previous tutorials on linear kinematics and inverse kinematics. Read on to see what you’ll learn…
Preview
Let’s take a look at the final result we will be working towards:
Press the space key to scroll through nodes (the current one is marked by a red bracket). While you are at it, press the arrow keys to change the angle.
This tutorial covers the following:
Active Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium, Photo Premium, and the new Mobile Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!
Also, don’t forget to follow @envatoactive on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
Twice a month, we revisit some of our best posts from throughout the history of Activetuts+. This week’s retro-Active post as originally posted on the 8th of November, 2010; since then we’ve seen Microsoft announce that Windows 8 will support HTML5 for native apps, Adobe move further and further into the mobile area, and the release of HTML5 multimedia tools such as Edge. Things are certainly different – how have the experts’ predictions held up?
The subject of Flash, HTML5, Silverlight, RIAs and all that surrounds them continues to be debated across the net. It’s a sensitive issue as we’ve discovered; our recent roundup post certainly opened a can of worms and touched a raw nerve with a few folk!
Today, we’re going to put that behind us and approach the discussion in a more sensible fashion. Read on to see what some of the most respected members of our community have to say on the matter.
The Contributors
A huge thanks to everyone who gave up their time in contributing to this article. We’ve collected commentary from Authors, Designers, Developers, UI & UX Architects, Evangelists and Community Experts from all sides of the fence. Here they are, in no particular order.
Jump to any Section of this page quickly by following a link below:
Megaphone Icon by silenceplease available on GraphicRiver.
Alan Klement
Powerflasher Developer
Lately, it seems cooler heads are slowly prevailing when it comes to the “HTML5 vs Flash” debate. The consensus is shifting toward choosing “the right tool for the right job” and that is how it should be for everyone. We’re all craftsmen and professionals – not tool-smiths and laborers. Perhaps the most fun, and most intimidating, part of our job as creators is to be willing to explore new and better ways of engaging those who enjoy what we create. Does a painter use only one brush or a dentist use only a drill?
We are expected to be innovators and that means pushing ourselves outside of our comfort zones from time to time. The question to ask yourself is, ‘Am I choosing the best tool that fits the project’s needs?
Alan Klement
web: http://blog.alanklement.com
twitter: @alanklement
Keith Peters
Flash/ActionScript Developer, Author & Speaker
I think the whole argument of technology X vs. technology Y is stupid and childish and anyone who gets all defensive about their technology – or offensive about some other technology – is mainly showing off their own lack of confidence or certainty in their own future. I know Flash very well. I can do Flex. I can code up just about anything on the iPhone. I’ve dabbled in Android. I’m currently learning Silverlight and XNA for Windows Phone 7 development. You fear what you don’t understand. The more you learn, the less you fear.
HTML and JavaScript can currently do many things that you really needed Flash for years ago. That will only grow. I think the ideal of being able to do more things without relying on third party plugins is a good thing. But we are a long way from getting rid of them altogether. That said, I’d hate to have to do all my coding in JavaScript as it currently stands. While AS3 has a lot of room for improvement, it has grown a lot in the last decade. Coding in JS is like going back to AS1. If JavaScript looked more like AS3, I’d be a lot more interested in diving into HTML5.
Keith Peters
web: http://www.bit-101.com
twitter: @bit101
Bruce Lawson
Web Evangelist for Opera
The big misconception is that it’s either HTML5 or Flash/Silverlight. Flash in particular is part of the Web’s ecosystem, and we’ll need to be able to render Flash content for ever. It would be a tragedy if future generations were not able to enjoy the Kenya song.
HTML5 even legalises the <embed> tag so adding plugin content to HTML5 pages can be done without making the page invalid.
Some HTML5 technologies can replace some uses of Flash: scripted graphics can be achieved using <canvas> for example, and interacting with videos through script is (arguably) easier to achieve using HTML5. It’s important, though, that we now have a choice; previously, for video or animations you were pretty much limited to plugins; now there is an open standards choice as well.
Some things can’t be as easily achieved in HTML5 as they can using plugins. AS I alluded to in my Five things that carrots can do that HTML5 can’t video, the choice of technology should be based on what you’re trying to achieve. A professional developer evaluates the client, the task and the audience and chooses the tool accordingly.
Bruce Lawson
blog: http://www.brucelawson.co.uk
buy my book: http://introducinghtml5.com
twitter: @brucel
Jonathan Campos
Director of Software Development at Dedo Inc. & Adobe Community Professional
As a previous Javascript application developer and current Flash application developer I have followed the arguments about HTML5 with a passing interest and little more. HTML5 will carve out room on the RIA landscape, but as with every piece of technology, HTML5 has it’s strengths and it’s weaknesses. A switch to HTML5 doesn’t ensure you will be free of bugs, performance issues, or testing. It just means you will be checking for bugs, optimizing performance, and testing on a different base language and with different tool sets. Neither HTML5 nor Flash is without flaw.
As a Javascript developer turned Flash developer, I can say from my own experience that you can do almost everything you could do in Flash in Javascript. However, it takes longer, is more difficult, and requires more testing on multiple browsers and environments.
Working with the Flash Player on large scale multitouch devices and multiscreen development, I can tell you that there are things we do now that HTML5 just can’t do yet. As such, we will continue to watch HTML5 grow but for us we are happy with the capabilities provided to us through the Flash Player and Adobe AIR.
Jonathan Campos
work: http://www.dedoinc.com
blog: http://www.unitedmindset.com/jonbcampos
twitter: @jonbcampos
Stray
Flash & AIR Programmer
In the short term, I see HTML5 taking on Flash in creating over-designed ego-driven micro-sites. The clients we’ve been turning down on these projects for a couple of years don’t even bother us Flash devs anymore. They’re ruining the lives of HTML5 devs instead! Thanks Steve – we owe you for that one.
My little company mostly builds big Air apps – tuition and instruction for the engineering industry. These types of applications leverage the full power of flash development: a grown-up set of technologies and tools, and the incredible flexibility of the Flash timeline. This is Flash’s strength over HTML5 – audio, video, text, multilayer animation, interaction and the application they’re sitting in all playing together.
The other strength flash has is a mature tool set and some great frameworks and libraries. Increasingly generous open-source development is lifting the game of whole chunks of the community. A lot of us are really good at what we do and getting better every day.
Deciding the technology your users might want to use your site/app in is only the first step. Building real software is hard. And it’s different from building websites. The number of pathways through a really rich application or game is mind-blowing. Not blowing-our-own-minds building this stuff is what flash devs have become good at. We’ve learned through making a lot of mistakes – HTML5 devs haven’t had that opportunity yet.
I predict a lot of high-profile HTML5 project fails – anyone remember boo.com?
Stray
web: http://flair-flash-flex-air.blogspot.com
twitter: @stray_and_ruby
Tom Green
Flash Educationalist & Author
The jury is still out on whether HTML is a Flash-killer. Over the years, I have seen too many of these “emergent technologies” touted as the “App_Name_Goes_Here- killer” to get myself worked up about it.
I found it rather fascinating, though, to see a demo of an app during the “Sneaks” at Max this year that essentially recompiled a swf into an HTML5 file. Again, there is a lot of “perception” between demo and release (Macromedia/Adobe’s Fixation on on Flash Lite for Mobile a few years back, for example) to get myself too worked up. The implications of this sort of thing, though, are rather interesting.
The ability to cross-compile a swf to an HTML5 file gets Flash onto Apple’s devices without a lot of extra work and essentially gets Flash/Air/Flex projects driven by the Flash Player on to practically every device on the planet. Even then I truly see the “browser” as a doomed technology. We are undergoing a fundamental shift away from browser-based presentations to apps that don’t necessarily need to be delivered through an ethernet cable or viewed on a PC or laptop to be experienced.
The challenge around this multiscreen “environment” that just popped up is aimed more at designers than the codies. The codies quite rightfully claim they can “Write-Once/Deploy Everywhere” which is true because it is code and data. The danger in that is though it is true, it is also wrong. As I pointed out during a RIM Focus Group at Max when I asked this question: “Do you really think the app on your Blackberry Torch is going to look equally stunning on the 60″ inch Samsung monitor over there, my MacBook Pro, your Dell PC laptop and that guy’s Motorola?” What I was getting at is the real issue is a design issue because designers will have to play close attention to the Presentation layer than simply whipping something up in Flex. Think about it for a minute. Apps look great when they are on a screen roughly the size of a business card but you simply can’t expect that content to scale up in orders of magnitude without sacrificing quality or something else. I find it rather interesting that no one has started talking about this issue and I can pretty well guarantee it will come up later rather than sooner.
Tom Green
web: http://www.tomontheweb.ca
twitter: @TomGreen
Romin Irani
Software Developer
I think the biggest misconception is to think in terms of “Flash is going to die” or “HTML5 is not going to succeed” and so on. Given the way the world works, neither of them are going to be clear winners or losers. Every developer knows that to create a compelling application to reach out to as wide an audience as possible, you need to cater to both sides. For e.g. you cannot assume that HTML5 will be present on all browsers, similarly you cannot assume that Flash will be present everywhere. You have to design for a fallback mechanism and that I believe is ingrained.
Flash is powerful. The graphics capabilities, the Charting support and its current reach is excellent. Where I think it stands out and will stay its ground today is not in features but two things:
Both of these are well entrenched. HTML5 is still evolving, once it is finalized can one expect more tools.
In summary, HTML5 lowers my barrier to start creating powerful browser applications today. HTML, CSS and JS are all I need to get started. I am particularly excited by the set of Javascript APIs that come along with HTML5 i.e. Geolocation, Offline support, Storage, etc that allow me to address key architectural aspects in my application to make my browser apps more powerful. The other area I am waiting for wider acceptance is Web Sockets, that could be a game changer for a lot of gaming applications.
Romin Irani
blog: http://iromin.wordpress.com
check out: http://www.oreillynet.com
twitter: @iRomin
Joseph Labrecque
Senior Multimedia Application Developer & Adobe Education Leader
Ever since the inception of this debate, I’ve held the position that the majority of dialogue around “HTML vs. Flash” is an intentional misrepresentation of facts and usage. There is no better example of this than Steve Jobs’ counterfactual letter, “Thoughts on Flash”; a message clearly designed to provide ignorant media outlets and technology zealots with cleverly crafted soundbytes used to encourage a position against Flash as a viable platform on the web and on devices.
HTML5 is the natural progression of the HTML specification. As such, it poses no threat to the Flash Platform because HTML and Flash have always existed as complimentary technologies. Why would anyone expect HTML, as a specification, to stand still? In my opinion, it has done so for far too long and is overdue an abundance of rich, new features. Does this in any way harm Flash as a platform? Of course not; Flash advances at a much faster rate than HTML, unrestrained by standards bodies and bickering between opposing corporations. The addition of capabilities with HTML only augments embedded Flash in the browser, as these new capabilities (geolocation data, for example) can be fed into a Flash interface through local connection or via initialization variables.
I actually find it humorous that the fate of Flash is called into question at this time of great advances. Flash Player 10.1 took a long time to emerge since a massive rewrite was required to allow a good experience across desktops, mobile devices, and eventually the digital living room. Now that this foundation has been set, we are seeing some startling growth across numerous areas of platform implementation. The beginnings of which can be seen in the upcoming 3D “Molehill” APIs, the super-performant StageVideo classes, the first glimpses of multi-threading, and upcoming 64-bit runtimes across Windows, Linux, and Mac OS. This doesn’t even consider advances in the AIR runtime and associated frameworks.
It’s a great time to be a Flash developer – and a great time for HTML too!
Joseph Labrecque
blog: http://inflagrantedelicto.memoryspiral.com
twitter: @JosephLabrecque
Rich Clark
User Interaction Designer & Creator of html5doctor.com
Both Adobe & Microsoft seem to be working towards embracing HTML5. Just look at IE9, it’s come on leaps and bounds from previous versions of the browser. If Adobe can get on board and develop a decent IDE for working with <canvas> and SVG then they’ll be onto a winner as well.
There’s maybe not been a shift [in disciplines where Flash is used] but there likely will be a shift in the not too distant future. I don’t think that there’s much doubt that Flash will continue to push the boundaries of what’s possible online. Companies like Adobe can afford innovate, improve and release new products more rapidly in comparison to an organisation like the W3C who have to work with implementers, authors and users while still maintaining backwards compatibility. That’s why it’s likely proprietary solutions will always be somewhat ahead of the curve when compared to open standards – it’s the nature of the beast.
Video & Audio are the main areas that HTML5 will start to outgrow Flash I imagine. In fact, some would have you believe that a large percentage of HTML5 _compatible_ video already exists.
Probably the biggest misconception is defining HTML5. It seems to be whatever you want it to be – that annoys me. Especially when people lump together CSS3, Web Fonts, SVG, etc all into HTML5. It would be preferable for people to use the phrase ‘Open Standards’ or similar but we’re probably too far down the line for that now. When you see daily newspapers using the term ‘HTML5′ you know it ain’t gonna happen
[I'm looking forward to] the fact that the web will move away from the need for proprietary plugins (and associated software) that are replaced by Open Standards that anyone with a text editor can work with.
Rich Clark
web: http://richclarkdesign.com
twitter: @rich_clark
Jack Doyle
Founder of GreenSock Tweening Platform
The HTML5 vs. Flash topic has become far too divisive. HTML5 is an evolving standard that promises some exciting capabilities, but it is most definitely not a Flash killer. HTML and Flash have always coexisted but I believe that 3 things are primarily responsible for the recent crusade against Flash: Apple’s refusal to support it in iOS, HTML5’s proposed <Video> tag, and CSS3’s animation capabilities. I’ve addressed each one in the full article on my site (cut here for brevity).
True craftsmen use different tools for different tasks. Developers are no different. Consider the objectives of each project and choose the appropriate technology. Don’t avoid Flash just because Steve Jobs insulted it or because it’s the trendy thing to do. And don’t use Flash just because it is what you’re comfortable with. I have seen plenty of sites which have been built 100% in Flash for no apparent reason. That’s absurd. Likewise, some developers burn through insane amounts of hours trying to accomplish something with HTML/CSS/JavaScript, making lots of compromises just to avoid Flash. Use Flash if it does the job better (and the reality is that Flash is far superior to HTML/CSS/JavaScript for certain tasks). Otherwise, stick with HTML/CSS/JavaScript which are more search engine friendly and accessible. HTML5 is another great tool for our toolbox, but it certainly doesn’t supplant Flash altogether.
For the Flash developers out there, the sky isn’t falling. In fact, despite the hype around HTML5, Flash is doing great. Better than ever. I firmly believe that it will continue to be a major player in web and mobile development. Adobe has got some great stuff up their sleeve too, so stay tuned.
For more thoughts check out Flash vs. HTML5: Faux Drama on my site.
Jack Doyle
web: http://blog.greensock.com
twitter: @tweenlite
Rich Tretola
Adobe Community Expert, Author & Speaker
The rise of HTML5 is an exciting one as it will continue the transformation of the web to a much more rich and interactive experience. Although there is a perception that Adobe and Microsoft both have technologies that compete with HTML5, in my opinion Flash and Silverlight should be used to compliment and not compete with HTML5.
There’s certainly been a shift in disciplines where Flash is used; Apple’s decision not to include the Flash player on iOS (iPhone, iPad) has led to many companies reconsidering the use of Flash for creating content that can also be created with HTML. This decision is a simple one based on cost of development; by going with HTML5 over Flash, a single application can be created to target all major platforms.
Before Adobe MAX 2010, I would have argued that HTML5 is ideal for building rich web applications where Adobe Flex currently resides as a tool of choice for many developers. However, after seeing the Adobe sneak peeks and what Adobe has been able to accomplish in the conversion of Flash animation to traditional assets, CSS, and JavaScript it appears the sky is the limit for what can be transitioned to HTML5.
Since the Flash player will continue to evolve at a much faster pace than HTML5 (which has taken years and is still in progress), it will always offer more options for developers. I also believe that Apple will eventually agree to allow the Flash player on its iOS which will reverse the trend I mentioned earlier.
Eventually though, Flash and HTML5 will redefine their space in web development with each being used for what it does best. I look forward to the merging of these technologies into a collaborative development space which will ultimately continue to make the user experience a more interactive one.
Rich Tretola
web: http://blog.everythingflex.com
check out: http://twittapolls.com
twitter: @richtretola
Paul Neave
Interaction Designer
There’s no such battle as Flash vs HTML. It’s Flash and HTML. Flash is just one of the many tools in the toolbox, and like any tool it needs to be used in the right way for the right job. And it’s the role of the developer to decide which tool is appropriate.
The thing I love about Flash most is its cross-platform nature. But its major problem is that it’s a plug-in. It’s a closed off black box and not a native part of the web, despite what Adobe says when it refers to the “full web”. Flash is an augmentation; an extension to add features originally missing from HTML. There was a technological land grab and Flash got there first. But HTML/CSS/JavaScript is encroaching on Flash’s territory fast and within a year we’ll have a web that can do pretty much everything Flash can, if not more. Even 3D is coming to the web soon with WebGL. The only major thing lacking will be device support for webcams and microphones, but that’s on the roadmap.
So why on earth would anyone write code for a plug-in when the browser can handle it all natively? You could argue that Adobe’s tooling is better. But more often than not, this is when Flash developers get emotional and call JavaScript a “toy language”, and HTML/CSS a cesspool of hacks and incompatibility. But that isn’t true, and it certainly isn’t going to help.
The Flash work I do these days is mostly device specific rather than generic. Perhaps Flash is becoming less cross-platform and more niche. We now have more devices, browsers and operating systems to deal with than ever before. The good news is that Flash is not going to go away. Flash may become more niche, but it’s relevance will simply shift, not shrink.
To Flash developers I say: remember why you’re doing this. It’s not about the tools or the platform, it’s about the idea. Never stop creating, and never stop learning!
Paul Neave
web: http://www.neave.com
twitter: @neave
Rob Larsen
Interface Architect, Isobar
Personally, I come at this from two angles. There’s the part of me that wants to expand the use of web standards wherever possible and wants to put those technologies to use early and often. That guy is excited by how far HTML5 has come over the past couple of years, with hundreds of developers working long hours to fill in the implementation gaps, allowing us to use some of the most exciting technologies, like Canvas, today. I’m working on a project right now that utilizes a Canvas charting component. That would have been Flash just a couple of years ago. That’s exciting.
There’s another part of me, the pragmatist, that realizes there’s a limit to what we SHOULD be doing with HTML5 right now, at least in a production environment and a limit to what we will be able to do in the future. I’m responsible to clients, co-workers and users to get the best site or application out the door as efficiently as possible. From that perspective, Flash is a powerful, mature option that I’d be silly to ignore.
Rob Larsen
web: http://htmlcssjavascript.com
twitter: @robreact
Kevin Suttle
Flash Platform User Experience Developer
When I first started in this industry, the tech tabloids hadn’t yet skewed it with terms like “technology wars” and other poorly-researched sensationalism. We just saw the web as a single, wide-open medium, and you know what? It still is.
HTML5/CSS3 is beginning to extend the web experience for many desktop and mobile browsers. The Flash Platform continues daily to push the limits of desktop applications, mobile devices, tablets, television, and hardware that doesn’t really fit in any one category. As both developers and users, we need to ignore the hype, use the right tool for the job, and remember that we’re all working together towards the same goal: the best possible content experiences for our users.
Kevin Suttle
web: http://kevinsuttle.com
twitter: @kevinSuttle
Mike Taulty
Microsoft UK
It’s common to see “HTML5″ browsers and RIA frameworks like Silverlight presented as an “either/or” choice with the success of one necessitating the hasty demise of the other. The reality is that Silverlight occupies a strong position even in a future world where every user has an “HTML5″ capable browser.
Silverlight applications can run both in and outside of the browser and offer elevated trust options. The runtime remains cross-browser (IE6,IE7,IE8,IE9, Safari, Chrome, FireFox) and cross-platform (Windows7,Vista,XP,OS X) where it provides a consistent experience. Silverlight also provides a framework for building apps for the new Windows Phone 7 devices to get re-use of code and skills.
Today, HTML based clients offer the greatest possibility of a client reaching across devices and platforms as HTML browsers are ubiquitous albeit with challenges around using a single set of markup in all browsers. Microsoft’s committed to web standards and is doing a tonne of work in IE9 around “HTML5″ to build a performant implementation in a clean, safe browser that does more to enable this idea of “one markup”.
As that works gets released and IE9 and other “HTML5″ browsers become the default over time, then developers will be able to take this reach approach across those new HTML5 features like video, audio, canvas, offline storage and so on.
However, there are still a rich set of capabilities that an “HTML5″ browser doesn’t have which show up in a framework like Silverlight and those sit in 3 main areas of premium media experiences, casual gaming and business applications. Applications need those kinds of capabilities even in an “HTML5″ world and Silverlight will take that forward, innovating at pace.
For more detailed information on the future of Silverlight – see this longer post from the Silverlight team.
Mike Taulty
blog: http://mtaulty.com
twitter: @mtaulty
Steve Fulton
8bitrocket
Adobe needs to make tools to create HTML5 content, that’s just obvious. I’d like to see the Flash IDE export both .swfs and HTML5/JavaScipt/Canvas. Obviously you would have to make concessions for what the HTML5 Canvas can support, but for things like ad units and animations with click-through it should be a no-brainer. Adobe’s reaction though has been a bit defensive, which I think is a mistake. Microsoft is embracing HTML5 in IE 9, but I’m still not sure how much they really believe in it. They have many enterprise customers, and the concept of using Visual Studio to build both your front and backend of the web site is very compelling for them.
From what I’ve seen, Adobe is taking Flash into the games market in a big way. There are things they showed at Max this year that would be extremely difficult to do in HTML5, and even if you could do them, they would only be supported by a very small subset of browsers. I would also look to Adobe focusing on Air as the delivery mechanism for content to multiple platforms.
Saying that, I do think HTML5 will take some ground from Flash. For example, content that is consumable by mobile devices where developers currently use Flash to develop only because there is no better alternative. Ad units, simple (and I do mean simple) audio and video players, drop-down navigation, animated overlays, etc. Flash will retain its position in the Games market and Air applications, Flex based apps, e-learning, and applications where the content and code needs to be secure for monetization.
Biggest misconceptions? Flash is dead. HTML5 sucks. Silverlight is lame. Hyperbole is the realm of the Steve Jobs in the world, developer’s don’t need it. We should think about how we can make use of any decent technology to solve problems.
Steve Fulton
web: http://www.8bitrocket.com
twitter: @8bitrocket
Remy Sharp
All Round Supporter of Make Believe Animals
Both Flash and HTML5 haters are going to be left behind, and frankly good riddance. Flash for a long time has been plugging the holes in browsers for us via custom fonts, drawing APIs, SVG support, sockets, video and much more. HTML5 and related specs, for the most part formalises those technologies so that we don’t have to rely on plugins to play a video – and seriously how many flash developers think “Flash” amounts to being able to play a video?
The biggest misconception I run into is that HTML5 is this single silver bullet that will return the unicorns to the fields and the phoenix to the skies. It’s not. In fact the HTML5 specification is a collection of APIs (the HTML component aside), so it’s not the silver bullet, nor do we need browsers to support every single API before we start making use of just one of them, such as the canvas API, video or perhaps the history API. We should use the right technology for the job, and that’s still true if Flash is the right technology for the job.
Remy Sharp
web: http://remysharp.com
buy my book: http://introducinghtml5.com
twitter: @rem
James Whittaker
UI/UX Architect TweetDeck Inc. & Adobe Community Professional
HTML5 and Flash. Both have really passionate communities surrounding them who actively promote and enjoy sharing code, techniques and solutions. The Flash Platform community is amazing and from personal experience many Flash and Flex dev’s are keen to get a more detailed understanding of HTML5 and JavaScript, they are always looking to learn new stuff, be challenged and see how it could fit into their workflow. Also, don’t forget that many people, including myself, love working with both technologies.
At TweetDeck our flagship desktop application is built using Adobe Flex and deployed cross platform using Adobe AIR. Adobe AIR was the best and fastest way to build consistent cross platform apps that integrated with the OS using either Flash or HTML. Our application is one of the largest distributed AIR apps in existence and we have really pushed what the platform can do and been amazed with the results.
We are also busy building an HTML5 version of TweetDeck for deployment as a web app using the Google Chrome Web Store. This will pack the same (if not more!) detailed feature set as the AIR client so it’s giving us a real sense of how these two technologies stack up against each other. For me, the new CSS3 animations and transitions have been really fun to try out.
Flash has been around for a long time. From animations to tacky skip intro screens it is now a credible platform for building enterprise level apps for desktop and mobile. HTML5 is still very new, I’m hoping that as developers and designers we have learnt from all the bad things that were done in the early days of Flash and don’t repeat them in HTML5.
Let’s stop arguing and get down to creating amazing experiences.
James Whittaker
blog: http://JamesWhittaker.com
work: http://www.TweetDeck.com
check out: http://RefreshingApps.com
twitter: @jmwhittaker
Your Turn
You’ve heard it from the horses’ mouths, now let’s see how you feel about what they’ve had to say. We want to hear your comments! Let’s try and keep this discussion civil though..
Remember, this roundup was originally posted in November, 2010. A lot can change in that time!
We’ll be looking at how to create a XMPP chat application that can be used in many different scenarios. You’ll learn how to integrate an external database with Ignite Realtime’s Openfire Jabber Server and how to use the XIFF library to create custom XMPP extensions that can be used to send custom data across a network.
You could use this to build a standard standard chat room app, with a page devoted to it, or you could run it alongside another piece of Flash content, like Kongregate does with its games.
Final Result Preview
Let’s take a look at the interface of the final result we will be working towards (this demo does not function as an actual chat client):
Here’s a video demo that shows it in action:
Step 1: Prerequisites
This tutorial assumes that you have some experience with PHP. You must be have Wamp Server installed on your system and you should also be somewhat familiar with PhpMyAdmin. If you do not have WAMP you can download it here. You will also need to download the Openfire Jabber Server and the XIFF API library from the Ignite Realtime website. I will walk you through the Openfire installation process. Finally you will need the latest version of Java installed on your operating system and Flash CS4 or later. I will be using Flash CS5 Professional in this tutorial. If you do not have the latest version of Java, you can download the latest version here.
Step 2: Setting Up Our Database
Make sure that Wamp Server is running on your computer and navigate to http://localhost/phpmyadmin/ in your web browser.
Create a new database called
MyContentSiteusing PhpMyAdmin.Create a new table in the
MyContentSitedatabase calledmyMemberswith eight fields.After the
myMemberstable has been sucessfully created by PhpMyAdmin, create the following fields:Your screen should look as follows:
Let me break down each field. The
uidfield should be of typeINT. You can change the field’s type from theTypecolumn. Make this field the primary index and set this field to auto-increment itself. Do this by selecting thePRIMARYoption underneath theINDEXcolumn within this fields row. Then check the checkbox under theAuto-Incrementcolumn. This field represents the userID of the current member of our website. Thefirst_name,last_name,my_username,my_password,email, andcountryfields should be have the datatype orVARCHARand theLength/Valueshould be set to 255.Note: The
my_passwordfields shown in the images hold anMD5of the user’s password. You may choose to store passwords plain without any encryption but for this tutorial I will be using hashed passwords.Finally, the
status_messagefield should be of the of typeMEDIUMTEXT.Once you have created the all of the fields click the
savebutton.Now we are ready to create two dummy accounts that we will use to login to our website and join chat rooms later in this tutorial. Click on the
Inserttab. You will be presented with a form for creating a new row in the table.Leave the
uidfield empty because we want this field to automatically increment itself. Set thefirst_nameto Jane and thelast_namefield to Doe. Set themy_usernameto janedoe with all lower cass letters. For themy_passwordfield, we’ll be using the hashed value for our password which is tutsplus in all lower case letters. Type ca28ad0733a3dde9dc1f30e32718d209 into themy_passwordfield. You can set theemailfield to an email address of your choosing and thestatus_messagefield to whatever you’d like. Set thecountryfield to whatever country you’d like as well. When you are finished click on the save button . Repeat this process to create an account for a John Doe with themy_usernamefield set to johndoe123 in all lower case letters. Use the same password as before.Step 2: Installing Openfire
Once you have downloaded Openfire from the Ignite Realtime website, run the installation exe file (or dmg file if you are using a Mac).
Select your langauge.
Click Next to continue.
Accept the License Agreement.
Choose a directory and click Next to continue.
Select a Start Menu folder.
Click Next to begin the installation.
Once the installation has completed, click Finish to to run Openfire. The Openfire service will start automatically when the program is run. Click the Launch Admin button when Openfire has finished booting.
Now we will set up Openfire. Select your preferred language and click Continue.
Leave the Admin Console Port field and Secure Admin Console Port field to their default values. For this tutorial leave the Domain field to it’s default value as well. You can change this later to your website’s domain. Click Continue.
Select the Standard Database Connection option and click Continue.
Under Database Driver Presets, choose MySQL. Type com.mysql.jdbc.Driver in the JDBC Driver Class field. Change
[host-name]to localhost and change[database-name]to mycontentsite in the Database URL field. Set Username and Password to your MySQL database’s username and password. For this tutorial I used the default username for MySQL which is root and the Password field remains blank. Click Continue to move on.Leave the Profile Settings to Default. Click Continue to move on.
Choose an email address for your Administrator Account and a password then continue.
We are now done the setup process. You may now login to the admin console. Use the default username admin and the password the you chose during setup.
Step 3: Setting Up the Chat Rooms
Our application allow users to communicate within chat rooms. But for this to happen our users must have chat rooms to join. Let’s create the chat rooms using the Openfire Admin Console. If you haven’t already, start Openfire Server. Log in the Openfire’s Admin Console. Navigate to the Group Chat Rooms page by clicking on the Group Chat tab.
Click Create New Room on the left hand side of the screen. Fill out the details as you see them in the image below.
When you are finished, click on the Save Changes button. If the room was created successfully, you should see a message and a Green check.
Follow the same steps to create two more chat rooms.
Step 4: Integrating Openfire with MySQL
In this tutorial, our make-believe website uses a MySQL database to store data about each user. Openfire can be integrated with an external database, a MySQL database in this case. First we must configure Openfire to do this.
Open the openfire.xml file using Notepad or preferrably a rich text editor such as Notepad++ as I mentioned before. The file will be located in the Openfire/conf/ folder within the Program Files directory folder on your PC.
<?xml version="1.0" encoding="UTF-8"?> <!-- This file stores bootstrap properties needed by Openfire. Property names must be in the format: "prop.name.is.blah=value" That will be stored as: <prop> <name> <is> <blah>value</blah> </is> </name> </prop> Most properties are stored in the Openfire database. A property viewer and editor is included in the admin console. --> <!-- root element, all properties must be under this element --> <jive> <adminConsole> <!-- Disable either port by setting the value to -1 --> <port>9090</port> <securePort>9091</securePort> </adminConsole> <locale>en</locale> <!-- Network settings. By default, Openfire will bind to all network interfaces. Alternatively, you can specify a specific network interfaces that the server will listen on. For example, 127.0.0.1. This setting is generally only useful on multi-homed servers. --> <!-- <network> <interface></interface> </network> --> <connectionProvider> <className>org.jivesoftware.database.EmbeddedConnectionProvider</className> </connectionProvider> <database> <defaultProvider> <driver>com.mysql.jdbc.Driver</driver> <serverURL>jdbc:mysql://localhost:3306/mycontentsite</serverURL> <username>root</username> <password/> <testSQL>select 1</testSQL> <testBeforeUse>true</testBeforeUse> <testAfterUse>true</testAfterUse> <minConnections>5</minConnections> <maxConnections>25</maxConnections> <connectionTimeout>1.0</connectionTimeout> </defaultProvider> </database> <setup>true</setup> </jive>This is what my openfire.xml file looks like. Your openfire.xml file should look similar to mine. Here is a link to the Openfire Custom Database Integration Guide on the Ignite Realtime website. You will noticed that you are instructed to make changes directly to the openfire.xml configuration file in this guide.
Do not make any changes to this file unless it does not resemble mine.
Note: It is very likely that your openfire.xml file will be using
DefaultConnectionProvider. If it is, you may have trouble logging in to the Admin Console. Try to log in with the default first. If the password you specified during setup doesn’t work, use the default password to login. The default username isadminand the default password isadminas well.If you can’t log in, change
DefaultConnectionProvidertoEmbeddedConnectionProvider. Then restart Openfire and try to log in again. If you are still having trouble, run the setup to Openfire again. Change thesetuptag’s value from false to true within the openfire.xml file. Then restart Openfire to run the setup again. Do this as a last resort – this shouldn’t be necessary.I have followed the steps on the Ignite Realtime website countless times only to find myself in a hole later on. One of the problems I faced was that users couldn’t connect to the server and when I tried to fix the problem in the admin console, I couldn’t log in. In fact the only thing I can conceive of that might be more frustrating than the problems that I faced was being stuck inside of a Saw trap.
I don’t want you to go through what I had to so please follow the following steps carefully. Openfire has a brilliant way of editing and creating properties that I find to be a lot more efficient than having to edit an xml file on your system.
Log into Openfire’s Admin Console. Click the System Properties link on the right hand side of the main page.
Your server’s System Properties page should look something like this.
Important: If your System Properties page is missing some or all of the properties within the image below, you can add the properties in manually. When we modify a property in the tutorial, if you don’t have the property that we are modifying, just use the same steps that you would to modify a property to create the property instead. Otherwise, if you already have a property that we are creating, just modify the property with the values that I specify.
Towards the bottom of the screen you will see a section with the title Add new property. It has two fields. The first field Property Name. The second field is Property Value. Within the Property Name field, type in jdbcProvider.driver and within the Property Value field, type com.mysql.jdbc.Driver into the field. Click on the Save Property button when you are finished. You will be following these steps to create more properties as well as to modify existing properties.
Create a property called jdbcProvider.connectionString with the value jdbc:mysql://localhost/mycontentsite?user=root&password=.
Now we are going to make our first modification to an existing property. Click on the Edit link that correspondes to the
provider.auth.classNameproperty. Change its value to org.jivesoftware.openfire.auth.JDBCAuthProvider using the Edit property table. Click the Save Property button when you are finished.Create a new property with the name jdbcAuthProvider.passwordSQL. Give it a value of SELECT my_password FROM mymembers WHERE my_username=?. This property’s value is the MySQL query string that will be used to authenticate a user.
Note: Notice that it contains a question mark (?). The question mark will be replaced with the value inside the username field.
Create a new property called jdbcAuthProvider.passwordType. Give it a value of md5.
Note: The jdbcAuthProvider properties will be hidden if you have followed the steps correctly.
Create a new property called admin.authorizedUsernames. The value should be the jid of the usernames that you would like to be able to log into the Admin Console with.
Note: Look at the image below. Notice that the Jane and John Doe’s jid’s are their usernames concatenated with an @ sign and the server’s XMPP domain.
Modify the property
provider.user.classNameby changing its value to org.jivesoftware.openfire.user.JDBCUserProvider.Create a new property called jdbcUserProvider.loadUserSQL with the value SELECT first_name,email FROM mymembers WHERE my_username=?.
Create a new property called jdbcUserProvider.userCountSQL and give it the value SELECT COUNT(*) FROM mymembers.
Create a new property called jdbcUserProvider.allUsersSQL. Set the value to SELECT my_username FROM mymembers.
Create a new property called jdbcUserProvider.searchSQL. Give it the value SELECT my_username FROM mymembers.
Create a new property called usernameField. Set its value to my_username.
Create a new property called nameField. Set its value to first_name.
Create a new property called emailField. Set its value to email.
Now that we have added and modified the properties needed we can log out of the Admin Console. Restart Openfire and attempt to log back into the Admin Console with an actual user.
Access denied!
Now try to log in with the username, admin.
Access denied again! What’s going on here?
Let’s take a look at the openfire.xml file. Yours should look the same as it did before. We need to add the modifications to the xml file. I have found that by making modifications in the Admin Console first, then changing the openfire.xml file after, is more consistent than just making changes to the xml. As I described before, I just couldn’t log in using a client or into the Admin Console after I had made these modifications.
Change your openfire.xml file so that it looks like this.
<?xml version="1.0" encoding="UTF-8"?> <!-- This file stores bootstrap properties needed by Openfire. Property names must be in the format: "prop.name.is.blah=value" That will be stored as: <prop> <name> <is> <blah>value</blah> </is> </name> </prop> Most properties are stored in the Openfire database. A property viewer and editor is included in the admin console. --> <!-- root element, all properties must be under this element --> <jive> <adminConsole> <!-- Disable either port by setting the value to -1 --> <port>9090</port> <securePort>9091</securePort> </adminConsole> <locale>en</locale> <!-- Network settings. By default, Openfire will bind to all network interfaces. Alternatively, you can specify a specific network interfaces that the server will listen on. For example, 127.0.0.1. This setting is generally only useful on multi-homed servers. --> <!-- <network> <interface></interface> </network> --> <connectionProvider> <className>org.jivesoftware.database.DefaultConnectionProvider</className> </connectionProvider> <database> <defaultProvider> <driver>com.mysql.jdbc.Driver</driver> <serverURL>jdbc:mysql://localhost:3306/mycontentsite?user=root&password=</serverURL> <username>root</username> <password/> <testSQL>select 1</testSQL> <testBeforeUse>true</testBeforeUse> <testAfterUse>true</testAfterUse> <minConnections>5</minConnections> <maxConnections>25</maxConnections> <connectionTimeout>1.0</connectionTimeout> </defaultProvider> </database> <jdbcProvider> <driver>com.mysql.jdbc.Driver</driver> <connectionString>jdbc:mysql://localhost/mycontentsite?user=root&password=</connectionString> </jdbcProvider> <provider> <auth> <className>org.jivesoftware.openfire.auth.JDBCAuthProvider</className> </auth> <user> <className>org.jivesoftware.openfire.user.JDBCUserProvider</className> </user> </provider> <jdbcAuthProvider> <passwordSQL>SELECT my_password FROM mymembers WHERE my_username=?</passwordSQL> <passwordType>md5</passwordType> </jdbcAuthProvider> <jdbcUserProvider> <loadUserSQL>SELECT first_name,email FROM mymembers WHERE my_username=?</loadUserSQL> <userCountSQL>SELECT COUNT(*) FROM mymembers</userCountSQL> <allUsersSQL>SELECT my_username FROM mymembers</allUsersSQL> <searchSQL>SELECT my_username FROM mymembers WHERE</searchSQL> <usernameField>my_username</usernameField> <nameField>first_name</nameField> <emailField>email</emailField> </jdbcUserProvider> <setup>true</setup> <admin> <authorizedUsernames>janedoe, johndoe123</authorizedUsernames> </admin> </jive>Make sure to change you are using the
DefaultConnectionProviderinstead of theEmbeddedConnectionProviderthen close Openfire and restart it. Attempt to log into the Admin Console as a member from your website’s database. I logged in as John Doe. If done correctly, you should be back in the Admin Console and the username should be in the top right hand corner of the home page.Note: Before moving on, make sure that all of the properties within the openfire.xml file are showing up on the System Properties of the Admin Console. If they aren’t you now know how to add them in manually.
Step 5: PHP
We need to use PHP to grab data from a MySQL database and present the data to Flash. For those of you who are new to PHP I will briefly explain what each script accomplishes. Let’s start with the
MySQLConnectionclass.The
MySQLConnectionclass connects to and disconnects from a MySQL database.class MySQLConnection { private $db_host = "localhost"; // Your Websites domain private $db_user = "root"; // Your databases username private $db_pass = ""; // Your databases password private $db_name = "mycontentsite"; // The name of your database private $connected = 0; public function connect() { mysql_connect($this->db_host, $this->db_user, $this->db_pass) or die ( "Error: Script aborted. Could not connect to database." ); mysql_select_db($this->db_name) or die ( "Error: Script aborted. No database selected." ); $this->connected = 1; session_start(); } public function close() { mysql_close(); $this->connected = 0; } public function get_connected() { return $this->connected; } }The
LoginManagerclass handles user logins. A user can be authenticated then logged in and out with this class.require_once "MySQLConnection.php"; class LoginManager { public function __construct() { } public function login( $username, $password ) { $username = strip_tags( $username ); $username = stripslashes( $username ); $username = mysql_real_escape_string( $username ); $passHash = md5( $password ); // Applies MD5 encoded hash to the password $connection = new MySQLConnection(); $connection->connect(); $sql = "SELECT * FROM mymembers WHERE my_username = '$username' AND my_password = '$passHash' LIMIT 1"; $query = mysql_query( $sql ); if ($query) { $count = mysql_num_rows( $query ); } else { die ( mysql_error() ); } if ( $count > 0 ) { while ( $row = mysql_fetch_array( $query ) ) { $_SESSION['username'] = $username; $_SESSION['pw'] = $password; $uid = $row['uid']; session_name( $username . $uid ); setcookie( session_name(), '', time() + 42000, '/' ); $connection->close(); die ( "login=1" ); } die ( "login=0&error=Invalid username or password" ); } else { $connection->close(); die ( "login=0&error=Invalid username or password" ); } } public function checkLogin() { if ( isset ( $_SESSION['username'] ) && isset ( $_SESSION['pw'] ) ) { $user = $_SESSION['username']; $pw = $_SESSION['pw']; die ( "login=1&username=$user&password=$pw" ); } else { die ( "login=0" ); } } public function logout() { setcookie(session_name(), '', time() - 42000, '/'); if ( isset( $_SESSION['username'] ) ) unset( $_SESSION['username'] ); if ( isset( $_SESSION['pw'] ) ) unset( $_SESSION['pw'] ); //Destroy session session_destroy(); //return result to Flash (swf) die ("logout=1"); } }We call upon login.php to log the user in and logout.php to log the user out using the
LoginManagerclass. To check to see if a user is logged in we call the check_login.php script.// login.php require_once "classes/LoginManager.php"; if (isset($_POST['username']) && $_POST['password']) { login(); } function login() { $username = $_POST['username']; $password = $_POST['password']; unset($_POST['username']); unset($_POST['password']); $login = new LoginManager(); $login->login( $username, $password) ; }// logout.php require_once "classes/LoginManager.php"; $login = new LoginManager(); $login->logout();// check_login.php require_once "classes/LoginManager.php"; session_start(); $login = new LoginManager(); $login->checkLogin(); exit();The final script that is called from ActionScript is the grab_user_data.php script that is used to select the user’s data from our MySQL database.
require_once "classes/MySQLConnection.php"; if ( isset( $_POST['username'] ) ) { $connection = new MySQLConnection(); $connection->connect(); $username = $_POST['username']; $sql = "SELECT * FROM mymembers WHERE my_username = '$username' LIMIT 1"; $query = mysql_query( $sql ); while ( $row = mysql_fetch_array( $query ) ) { $uid = $row['uid']; $xml = '<user id="' . $uid . '">' . "\n"; $xml .= " <firstName>" . $row['first_name'] . "</firstName>\n"; $xml .= " <lastName>" . $row['last_name'] . "</lastName>\n"; $xml .= " <country>" . $row['country'] . "</country>\n"; $xml .= " <statusMessage>" . $row['status_message'] . "</statusMessage>\n"; $xml .= "</user>\n"; } echo $xml; $connection->close(); exit(); }These PHP scripts serve a very important role in our application but are very basic.
Step 6: Setting Up Flash
Open up Flash Professional. Set the document class to ChatApp. Set the size of the
stageto 550 x 400.Note: I like to use a framerate of 30 FPS but our application doesn’t have any animation so you can use whatever framerate works best for you.
Step 7: Build the Client’s User Interface
From the Components panel, select and drag a
Buttoncomponent on to thestage. Position the button so that it sits in the top right corner of thestage. Set the instance name of the button tologoutBtn. Add another button in the bottom right of thestageand set its instance name tosendBtn.Add a
Listcompenent to the stage. Position it directly beneathlogoutBtnand resize the component so that it fits nicely between both buttons. Set its instance name tolist.We’ll be using
logoutBtnto logout of the user’s session andsendBtnto allow our users to send messages. TheListwill display all of the online users within the current chat room. When an item in the list is clicked, the user’s profile will be loaded.Now we need a component that will display incoming and outgoing chat messages as well as a textfield that our users can use to input new messages. Add a
TextAreacomponent to thestage. Resize and position it to take up most of the remainder of thestage, leaving room for an input textfield at the bottom that is the same height assendBtn. Set the instance name todisplayTxt.Finally we need to add a
TextInputcomponent to thestage. Position the component directly beneathdisplayTxtand to the left ofsendBtn. Set the instance name toinputTxt.Select all of the components on the
stage. Convert the selection to a symbol. The symbol should be aMovieClipnamedUserInterface. Select the Export for ActionScript option. The Class field should read UserInterface. Set the instance name to our new symbol toui. Finally name the current layer of the main timeline interface. This will help you organize your project better.Step 8: The Login Screen
Our chat application would be useless if user’s couldn’t log in to our application. Let’s build the login screen. Create a new layer on the Main Timeline. Name the layer login.
Using the Rectangle tool, draw a rectangle on the
stagethat is the same size as thestage. The rectangle’s stoke should be set to0. The rectangle should not have a line and should be filled black with a tranparency of 50%.Highlight the black rectangle and convert it to a new
MovieClipsymbol called DarkBox. We will use this object to darken the screen while the log in components are being displayed. Set the instance name of theDarkBoxobject todarkBox.Add two
InputTextcomponents, twoLabelcomponents, and aButtoncomponent to thestage. Make sure you aren’t adding these objects on top of the interface layer. Position the components as they are in the image below with the username field first then the password field.Set the instance name of the first lable to
userLabeland set the instance name of the second label topassLabel. Set the instance name for the first input text field tousernameTxtand set the instance name of the second input text field topasswordTxt. Set the instance name of the button tologinBtn.Use the Text tool to add a Dynamic TextField to the
stage. Set the text size to 18 and make the text color Red. Set the instance name toerrorTxt. PositionerrorTxtbeneathloginBtnas seen below.We are going to convert everything on the login layer to a single new
MovieClipsymbol named LoginScreen but before we can do this we need to lock everything on the interface layer so we do not accidently select an object of that layer. Lock the interface layer by selecting the Lock Layer button next to the layer. When the layer is locked you will see a symbol of a lock next to the layer.You may now safely select all of the objects on the
loginlayer that we just created, and convert the selection to a symbol with a linkage ofLoginScreen. Set the instance name tologinScreen.Step 9: Creating the Profile Window
Lock and hide all of the current layers on the
Main Timeline. Create a new layer and call it profile info.Note: This is just a layer that we will use for development. You may delete this layer at the end of this step if you wish.
Using the Rectangle tool, draw a rectangle with the radius of each corner set to 10.00. The rectangle should have a fill identical to the
DarkBoxobject (Black with a transpareny of 50%) and a fully opaque White line with a stroke value of4.00. I set the color of the stage to a Burnt Orange in the image below so that you can see how everything should look more clearly.Add a
Dynamic Textto thestagedirectly on top of the rectangle. Position and resize the text field so that it takes up most of the rectangle’s area but leaves room for a button. Set the instance name of the text field totxt. Make sure that the text color is White and the size of the text is at least18px.Add a new
Buttoncomponent on top of the rectangle and set the instance name tocloseBtn.Select all of the object’s on the profile info layer and convert them to a
MovieClipsymbol namedProfileWindow. Check the field Export for ActionScript so that this symbol has a linkage ofProfileWindow. Now remove theProfileWindowobject from thestage. We will be instantiating this object with code.Step 10: Our First ActionScript Code
Create a new ActionScript file and name it ChatApp.as. Add the following lines of code to the class.
package { import flash.display.Sprite; import flash.events.Event; import flash.events.ErrorEvent; import flash.display.StageScaleMode; import flash.display.StageAlign; import flash.events.TimerEvent; import flash.utils.Timer; import flash.system.Security; import flash.external.ExternalInterface; import org.igniterealtime.xiff.core.XMPPConnection; import org.igniterealtime.xiff.events.ConnectionSuccessEvent; import org.igniterealtime.xiff.events.LoginEvent; import org.igniterealtime.xiff.events.DisconnectionEvent; import org.igniterealtime.xiff.events.XIFFErrorEvent; import org.igniterealtime.xiff.events.RoomEvent; import org.igniterealtime.xiff.events.IncomingDataEvent; import org.igniterealtime.xiff.events.OutgoingDataEvent; public class ChatApp extends Sprite { private static const SERVER:String = "tutorial-f5d57edaa";//= "[host name] // Your server's host name here private static const PORT:Number = 5222; // Your servers public port here private static const RESOURCE:String = "MyContentSite";//[resource name] // Resource name ex.: ==> MyJabberApp private static const DEFAULT_ROOM:String = "Main Lobby"; private var grabber:LoginCredentialsGrabber; private var userData:UserDataGrabber; private var connection:XMPPConnection; private var requireLogin:Boolean; private var roomName:String; public function ChatApp() { super(); if (stage) init() else addEventListener(Event.ADDED_TO_STAGE, onAdded); } private function init():void { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; loginScreen.visible = false; loginScreen.userLabel.text = "username"; loginScreen.passLabel.text = "password"; ui.visible = false; UserDataExtension.enable(); grabber = new LoginCredentialsGrabber(); userData = new UserDataGrabber(); var flashVars:Object = this.loaderInfo.parameters; if ( flashVars.hasOwnProperty( "room" ) ) { roomName = flashVars.room; } checkLogin(); } private function onAdded( e:Event ):void { removeEventListener(Event.ADDED_TO_STAGE, onAdded); init(); } } }Within the code above we check to see if the stage exists in the class constructor. If the stage does not exist, we listen for the
ADDED_TO_STAGEevent and theonAddedevent handler method is called when the stage is available. TheonAddedmethod simply stops listening for theADDED_TO_STAGEevent and calls theinitmethod. If the stage exists we skip this first step and just call theinitmethod which initialized our application.We initialize the
stageand theloginScreen, and we make theUserInterfaceobject (ui) invisible. You may notice theenablemethod from theUserDataExtensionclass being called. We will write this class later but for now just know that it is very important to remember to always call this method when instantiating the application. Theenablemethod registers our custom extension(the class) with theExtensionClassRegistryclass in the XIFF library. We’ll talk more about this later.Instantiate a new instance of the
LoginCredentialsGrabberclass and assign it to thegrabbervariable. Also instantiate a new instance of theUserDataGrabberclass and assign it to theuserDatavariable. We will write these classes later also. When our SWF file is embeded in a web page we want our application to connect to a specific chat room that is related to the content on the page. Later we are going to pass the name of the chat room, that our app should connect to, into the flashVars parameter at embed time. But for now we’ll just first check to see if the variable exists and then we grab the value and assign it to theroomNamevariable. Finally we run thecheckLoginmethod which is self-explanatory.Step 11: Checking Whether the User Is Logged In
Write the
checkLoginmethod in the Document Class(ChatApp).private function checkLogin():void { grabber.addEventListener( Event.COMPLETE, onLoginCredentials ); grabber.grab(); }As you can see the method is very simple. This is because all of the functionality is encapsulated within the
LoginCredentialsGrabberclass. Listen for theCOMPLETEevent to be dispatched so that theonLoginCredentialsevent handler method can be called. Call thegrabmethod onLoginCredentialsGrabberobject. This methods checks to see whether the user is logged in – or, more specifically, it checks to see whether the user’s session exists.Next, we’ll write the
onLoginCredentialsmethod.(Note: We are still in the Document class.)
private function onLoginCredentials( e:Event ):void { grabber.removeEventListener( Event.COMPLETE, onLoginCredentials ); if ( grabber.isLoggedIn ) { // Connect to Openfire ui.visible = true; connect( grabber.username, grabber.password ); } else { // Display login displayLogin(); } }This method is also really simple. The
LoginCredentialsGrabberchecks to see if the user is logged in by grabbing the session cookies using PHP. PHP renders out data to theLoginCredentialsGrabberobject and the data is parsed.Note: We will be writing the
LoginCredentialsGrabberclass next. All we need to do now is check to see if the user is logged in. If they are we display the user interface and call theconnectmethod to connect to Openfire. We pass the user’s username and password into theconnectmethod as required parameters. If the user is not logged in we display the Login Screen.Step 12: Grabbing Login Credentials
Write the
LoginCredentialsGrabberclass.package { import flash.events.Event; import flash.events.EventDispatcher; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLVariables; import flash.net.URLRequestMethod; public class LoginCredentialsGrabber extends EventDispatcher { private static const PASSCODE:String = "letmein123"; private static const SOURCE:String = "http://localhost/mycontentsite/scripts/check_login.php"; private var _data:*; private var _username:String; private var _password:String; private var _isLoggedIn:Boolean; public function LoginCredentialsGrabber() { super(); } public function grab():void { var loader:URLLoader = new URLLoader(); var req:URLRequest = new URLRequest( SOURCE + "?cb=" + new Date().time ); loader.addEventListener( Event.COMPLETE, onComplete ); loader.load( req ); } private function onComplete( e:Event ):void { e.target.removeEventListener( Event.COMPLETE, onComplete ); _data = e.target.data; var results:URLVariables = new URLVariables( _data.toString() ); if ( results.login == "1" ) { _isLoggedIn = true; _username = results.username; _password = results.password; } else { _isLoggedIn = false; } dispatchEvent( new Event( Event.COMPLETE ) ); } public function get data():* { return _data; } public function get isLoggedIn():Boolean { return _isLoggedIn; } public function get username():String { return _username; } public function get password():String { return _password; } } }We have two constants and four read-only properties before the constructor method. The
SOURCEconstant is aStringthat represents the location of the PHP script that checks to see if the user is logged in. We also store the passcode needed to execute the PHP script in a constant. When the grab method is called theURLLoaderobject loads the PHP script passing the passcode with theURLRequestand the script returns data back to flash. The data is a set of url variables that we can parse using theURLVariablesclass. If a user is logged in, the PHP script will give us the user’s username and password so that we can use this information to connect the user to Openfire. Finally we provide getter methods to grant read-only access to outside code.Step 13: Display the Login Screen
Write the
displayLoginmethod in the Document class(ChatApp.as).private function displayLogin():void { // Displays the login screen loginScreen.visible = true; loginScreen.addEventListener( LoginManager.LOGIN, onLoggingIn ); }We set the
loginScreen‘s visible property totrueand wait for theloginScreento dispatchLOGINevent. Then theonLoggingInmethod is called. Let’s write this method now.private function onLoggingIn( e:Event ):void { ui.visible = true; connect( loginScreen.manager.username, loginScreen.manager.password ); }We make the user interface visible and then we call the connect method.
Important: Notice that we are using the username and password from the
loginScreen‘smanagerobject(loginScreen.manager) instead of thegrabberobject’s username and password as we did in theonLoginCredentialsmethod.Step 14: Connecting to Openfire
At last, we can write the
connectmethod. The method accepts two required parameters: the first is the user’s username and the second is the users’s password.private function connect( username:String, password:String ):void { connection = new XMPPConnection(); connection.username = username; connection.password = password; connection.server = SERVER; connection.port = PORT; connection.resource = RESOURCE; connection.addEventListener( ConnectionSuccessEvent.CONNECT_SUCCESS, onConnected ); connection.addEventListener( LoginEvent.LOGIN, onLogin ); connection.addEventListener( DisconnectionEvent.DISCONNECT, onDisconnected ); connection.addEventListener( XIFFErrorEvent.XIFF_ERROR, onXiffError ); connection.addEventListener( IncomingDataEvent.INCOMING_DATA, onIncomingData ); connection.addEventListener( OutgoingDataEvent.OUTGOING_DATA, onOutgoingData ); connection.connect( XMPPConnection.STREAM_TYPE_FLASH ); }Instantiate the
XMPPConnectionobject and assign it to theconnectionvariable. Set the user’s username and password along with the server(SERVER) and theresource(RESOURCE). Then add event listeners to the connection object. Finally we call theconnectmethod on theXMPPConnectionobject.Write the following methods:
private function onConnected( e:ConnectionSuccessEvent ):void { trace( "connected" ); } private function onLogin( e:LoginEvent ):void { trace( "logged in" ); ui.connection = connection; grabUserData(); startTimer(); } private function onDisconnected( e:DisconnectionEvent ):void { trace( "disconnected" ); loginScreen.visible = true; ui.visible = false; loginScreen.displayError( "disconnected" ); } private function onXiffError( e:XIFFErrorEvent ):void { trace("Error: " + e.errorMessage); if ( loginScreen.visible ) loginScreen.displayError( e.errorMessage ); } private function onIncomingData( e:IncomingDataEvent ):void { trace( e.data.toString() ); } private function onOutgoingData( e:OutgoingDataEvent ):void { trace( e.data.toString() ); }The
onConnected,onIncomingData, andonOutgoingDatamethods can have many different uses but for this tutorial we will only use them to trace output so that we can debug our application when and if we need to(specifically if their is a problem connecting to the server). TheonDisconnectedmethod makes theloginScreenvisible and displays an error to the user notifying them that their connection was lost. TheonLoginmethod prepares the User Interface for XMPP chat by assigning theXMPPConnectionobject to theconnectionproperty within theuiobject. This allows theUserInterfaceobject to call methods directly from theXMPPConnectionobject through a reference. Now that the user is logged into the Jabber server(Openfire), we can start working toward logging the user into a chat room but first we need to identify exactly who our user is. We call thegrabUserDatamethod to do so. Finally we call thestartTimermethod.Step 15: Grabbing User Data
By now the user’s session cookie is stored in the user’s browser and the user is logged into the Jabber server. Now we need to grab basic information about our user. We know the user’s username, so we can use it to access additional information about the user that is stored in our MySQL database. Create the
grabUserDatamethod in the Document class.private function grabUserData():void { userData.addEventListener( Event.COMPLETE, joinRoom ); userData.grab( connection.username ); }All of the magic happens within the
UserDataGrabberclass. All we have to do is call thegrabmethod and listen for theCOMPLETEevent. Note that thegrabmethod on theUserDataGrabberobject accepts one parameter: the user’s username. Use the user’s username from theconnectioninstance.This class wouldn’t have any magic right now because it doesn’t exist yet. Let’s write this class now. Create a new class called
UserDataGrabberthat extendsflash.events.EventDispatcher.package { import flash.events.Event; import flash.events.EventDispatcher; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLVariables; public class UserDataGrabber extends EventDispatcher { private static const SOURCE:String = "http://localhost/mycontentsite/scripts/grab_user_data.php"; // Replace with your own php script private var _data:*; private var _uid:String; private var _firstName:String; private var _lastName:String; private var _username:String; private var _country:String; private var _statusMessage:String; public function UserDataGrabber() { super(); } public function grab( username:String ):void { var loader:URLLoader = new URLLoader(); var req:URLRequest = new URLRequest( SOURCE + "?cb=" + new Date().time ); var vars:URLVariables = new URLVariables(); _username = username; vars.username = username; req.data = vars; req.method = "POST"; loader.addEventListener( Event.COMPLETE, onComplete ); loader.load( req ); } private function onComplete( e:Event ):void { e.target.removeEventListener( Event.COMPLETE, onComplete ); _data = e.target.data; trace( "User Data:\n" + data ); var user:XML = new XML( _data ); _uid = user.@id.toString(); _firstName = user.firstName.toString(); _lastName = user.lastName.toString(); _country = user.country.toString(); _statusMessage = user.statusMessage.toString(); dispatchEvent( new Event( Event.COMPLETE ) ); } public function get data():* { return _data; } public function get uid():String { return _uid; } public function get firstName():String { return _firstName; } public function get lastName():String { return _lastName; } public function get username():String { return _username; } public function get country():String { return _country; } public function get statusMessage():String { return _statusMessage; } } }First we create a const that stores the location to the PHP script as a string. We created the grab_user_data.php script earlier. This is the script that performs a query in the database using a specified username to fetch and echo out the user’s data as xml.
Next we create our variables. I always place an underscore (
_) in front of the name of any private or protected variable (property) that will be read-only – o,r in some rare cases, write-only. All of the variables in this class read-only. We use getter methods to permit read-only access to each variable.All variables are set when the xml data, which is rendered out from the php file, is parsed with the exception of the
_usernamevariable which is set from theusernameparameter of thegrabmethod.Now for the
grabmethod. Nothing complicating here. Create a newURLLoaderobject, a newURLRequestobject and a newURLVariablesobject. TheURLRequestconstructor accepts one parameter, the url that you would like to load data from. In this case, the url is stored in theSOURCEconstant. I’m sure by now you’ve noticed that the the string ?cb= concatenated with the current time has been concatenated with theSOURCE. The cb stands for cache buster. This prevents our script from being loaded from out of a cache (memory).Initialize
URLRequestobject and theURLVariablesobject. TheURLVariablesobject holds that theusernamevariable that the php script needs to perform a query in the database. This variable is passed along with theURLRequest. Call theURLLoader‘sloadmethod and listen for theCOMPLETEevent to be dispatched fromloaderso that theonCompleteevent handler method can be called.In the
onCompletemethod, create a newXMLobject. Pass the data assigned from theURLLoaderobject(e.targetin this case) into the constructor’s parameter. Set the class’s variables and dispatch theCOMPLETEevent.Step 16: The LoginScreen Class
Up to this point, we have assumed that the user is already logged in. If the user isn’t logged in we display the
loginScreen. TheLoginScreenclass will have methods encapsulated within it that handle the user’s login status. Create the LoginScreen class. The class must extend theMovieClipclass since it is linked to a library symbol of that type.package { import flash.display.MovieClip; import flash.events.MouseEvent; import flash.events.Event; import flash.events.ErrorEvent; import flash.events.KeyboardEvent; importIt’s Premium tutorial time! In this tutorial, available exclusively to members of Tuts+ Premium, you’ll learn how to create your own version of the classic Whack-a-Mole game – only, our unfortunate creatures of choice will be worms. You’ll be able to modify the speed of the game and the hit boxes of the worms.
Preview
Let’s take a look at the final result we will be working towards:
Click the worms to whack ‘em! You can alter the speed and the hit box size in the Options menu. Of course, if you follow the tutorial, you’ll have much more control over these settings.
Active Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium, Photo Premium, and the new Mobile Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!
Also, don’t forget to follow @envatoactive on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
In this tutorial, we will draw a selection rectangle with the mouse (as seen in strategy games such as StarCraft and Command and Conquer), and we will also learn how to select units with the rectangle!
Final Result Preview
Let’s take a look at the final result we will be working towards:
Click and drag with your mouse to draw a rectangle that will select any soldier that it touches.
Step 1: The Setup
If you are using Flash, create a new ActionScript 3.0 file with the size ’550 x 400′. However, if you are not using the Flash IDE and are using another such as FlashDevelop or Flash Builder, this tutorial contains the SWC files so you can use MovieClips from within your IDE of preference. If you are curious on how to import MovieClips with your IDE, check out the Beginner’s Guide to FlashDevelop and Beginner’s Guide to FDT!
I should also note that I have included the FLA file in case you do not wish to draw any of your own material.
Step 2: Creating the Document Class
Ok, now you may be a little confused if you haven’t really worked with classes before. If you wish to learn more about why classes are important in programming, check out this article by kirupa, or this guide to the document class.
Create a new ‘ActionScript 3.0 Class’ and give it the name ‘SelectionDemo’. When the file has been created, save it as ‘SelectionDemo.as’. You should save files all the time. I can not stress this enough but the amount of times I have forgot to save work that I have done and lost it all doesn’t bear thinking about. So please, do save the files!
If you are using an IDE that generates the code for you when you create the class, you should have most of the code below. However, you must still add the lines that I have highlighted:
package { import flash.display.MovieClip; public class SelectionDemo extends MovieClip { public function SelectionDemo() { } } }We are not done yet however! If you are using the Flash IDE, navigate to the ‘Properties Panel’ and set the ‘DocumentClass’ to ‘SelectionDemo’. If you are wondering what that does, it means that when your application/game is run by the Flash Player, this Class will be the Main class that manages the game. Cool, huh?
Run the program; if you get no errors then you should be good to go!
Step 3: Creating the Rectangle
Now we should be ready to make the Rectangle! This part will contain a few functions, that’s all. Below is the code for drawing the rectangle:
package { // IMPORTING THE CLASSES WE NEED import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; public class SelectionDemo extends MovieClip { public var selectionRect:Rectangle; // Will hold the data for our rectangle. public var selectionSprite:Sprite = new Sprite(); // Making a new Sprite to draw the rectangle. public function SelectionDemo() { //Adding listeners stage.addEventListener(MouseEvent.MOUSE_DOWN, SetStartPoint); } public function SetStartPoint( me:MouseEvent ):void { selectionRect = new Rectangle( stage.mouseX, stage.mouseY ); // Creating the selection rectangle. } } }Now, it’s kind of useless having a rectangle that we cannot see, right? Exactly, so let’s get started!
Step 4: Drawing the Rectangle
Great, now we must draw the rectangle to the screen using the
selectionSpritevariable you seen in the last snippet. Why use a sprite, you ask? All Sprites contain agraphicsobject, which in turn contains a method calleddrawRect()this allows us to easily draw a rectangle dynamically in AS3.Below, I have placed the code for drawing the rectangle, with comments:
package { // IMPORTING THE CLASSES WE NEED import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; import flash.events.Event; public class SelectionDemo extends MovieClip { public var selectionRect:Rectangle; // Will hold the data for our rectangle. public var selectionSprite:Sprite = new Sprite(); // Making a new Sprite to draw the rectangle. public var isMouseHeld:Boolean; // Will tell us whether the mouse button is Up/Down public function SelectionDemo() { //Initializing isMouseHeld = false; // The mouse is not held yet. stage.addChild(selectionSprite); // Adding the selectionSprite to the stage. stage.addEventListener(MouseEvent.MOUSE_DOWN, SetStartPoint); // Listen for mouse hold. stage.addEventListener(MouseEvent.MOUSE_UP, RemoveRectangle); // Listen for mouse release. stage.addEventListener(Event.ENTER_FRAME, UpdateGame); // Run this function every frame (24 FPS). } public function SetStartPoint( me:MouseEvent ):void { selectionRect = new Rectangle( stage.mouseX, stage.mouseY ); // Creating the selection rectangle. isMouseHeld = true; // The mouse is now held. } public function RemoveRectangle( me:MouseEvent ):void { isMouseHeld = false; // The mouse is no longer held. } public function UpdateGame( e:Event ):void { selectionSprite.graphics.clear(); // Clear the rectangle so it is ready to be drawn again. if( isMouseHeld ) { selectionRect.width = stage.mouseX - selectionRect.x; // Set the width of the rectangle. selectionRect.height = stage.mouseY - selectionRect.y; // Set the height of the rectangle. selectionSprite.graphics.lineStyle(3, 0x3B5323, 0.6); // Set the border of the rectangle. selectionSprite.graphics.beginFill( 0x458B00, 0.4 ); // Set the fill and transparency of the rectangle. selectionSprite.graphics.drawRect( selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height ); // Draw the rectangle to the stage! selectionSprite.graphics.endFill(); // Stop filling the rectangle. } } } }If you have that code, run your application and watch it work!
Step 5: Draw a Unit
In flash, create a new MovieClip and draw a Unit. In the first frame, just draw a unit; in the second frame, add a green circle under the unit or anything that lets the player know that the unit has been selected. It should look something like this:
I also just drew a quick grassy background on the stage to make it look nice
Step 6: Exporting the Unit
Now you have created the MovieClip, right-click the symbol in your Library and select Properties. Check the boxes that say ‘Export to ActionScript’ and ‘Export in Frame 1′. Then, give it the name ‘Unit’. Your properties should look something like this:
Note: when you click ‘OK’, you may get a warning because no such class “Unit” exists yet. If so, click OK and we shall fix this now by making a new class!
Step 7: Creating the Unit Class
Remember before when you exported the Unit MovieClip? This is where we create the class for that MovieClip. So create a new ActionScript class file named ‘Unit.as’ and place this code within the class:
package { import flash.display.MovieClip; public class Unit extends MovieClip { public var isActive:Boolean; // Tells us whether the unit is selected or not. public function Unit() { isActive = false; // The unit has not been selected yet. gotoAndStop(1); // Go to and stay on the first frame ( no selection ring ). } } }Ahead, comrades!
Step 8: Placing the Units
Now it is time to add the Units to the stage and give them a position. Also, we are going to place each Unit in an ‘Array’. An array is basically a list which allows us to access the things inside it using an index. A great example of arrays is right at Republic of Code; they’ve also been explained here in AS3 101: Arrays.
Here is the updated code for ‘SelectionDemo.as’. First, we add a new public Array called
unitListjust after the other variables:Then, we update the
Mainfunction by placing a function calledPlaceUnits(15);. We will create this in a moment.public function SelectionDemo() { //Initializing isMouseHeld = false; // The mouse is not held yet. stage.addChild(selectionSprite); // Adding the selectionSprite to the stage. PlaceUnits(15); // Calling a function to place the units on the stage. //Adding listeners stage.addEventListener(MouseEvent.MOUSE_DOWN, SetStartPoint); // Listen for mouse hold. stage.addEventListener(MouseEvent.MOUSE_UP, RemoveRectangle); // Listen for mouse release. stage.addEventListener(Event.ENTER_FRAME, UpdateGame); // Run this function every frame (24 FPS). }Time to make the function! Ok, we will place this function after the
UpdateGame(e:Event):voidfunction and what this function will do is add the amount of units you specified in the brackets to the stage. We will also add the units to the list and give them random positions on the stage while making sure they cannot spawn off the stage.public function PlaceUnits( amount:int ):void { unitList = new Array(); //Making a new Array(list) to hold all the Units. for( var i:int = 0; i < amount; i++ ) // Run whatever is inside the brackets 'amount' times. { var unit:Unit = new Unit(); // Creating a new unit. unit.x = Math.random() * (550 - unit.width); // Setting a random X Position. unit.y = Math.random() * (400 - unit.height); // Setting a random Y Position. stage.addChild(unit); // Adding the new unit to the stage. unitList.push( unit ); // Placing the unit in the Array(list). } }When you run this, you should have 15 units randomly placed. Time to move on and program the unit selection.
Step 9: Z-Sorting!
When you run the game, you will probably see that there is a strange overlap of the units. Let’s fix it! This is extremely easy and will only require a small change to the
PlaceUnits()function.Basically, what we need to do is add all the units to an Array (list) and then sort the list based on the Y (vertical position) of the units. The lower the Y property, the further backwards it should be. We will change the
PlaceUnits()function to:public function PlaceUnits( amount:int ):void { unitList = new Array(); //Making a new Array(list) to hold all the Units. for( var i:int = 0; i < amount; i++ ) // Run whatever is inside the brackets 'amount' times. { var unit:Unit = new Unit(); // Creating a new unit. unit.x = Math.random() * (550 - unit.width); // Setting a random X Position. unit.y = Math.random() * (400 - unit.height); // Setting a random Y Position. unitList.push( unit ); // Placing the unit in the Array(list). } unitList.sortOn("y", Array.NUMERIC); // Sorting the list in order of the 'y' properties! for( var j:int = 0; j < amount; j++ ) // We will run through this loop again to add the units. { stage.addChild( unitList[j] ); // This adds the 'sorted' unit to the stage. } }There we have it… no more overlaps!
Step 10: Selecting Units
Now, each frame we will check whether any units have been selected; if they have then we will make their selection ring appear.
Edit the
UpdateGame()function to the following:public function UpdateGame( e:Event ):void { selectionSprite.graphics.clear(); // Clear the rectangle so it is ready to be drawn again. if( isMouseHeld ) { selectionRect.width = stage.mouseX - selectionRect.x; // Set the width of the rectangle. selectionRect.height = stage.mouseY - selectionRect.y; // Set the height of the rectangle. selectionSprite.graphics.lineStyle(3, 0x3B5323, 0.6); // Set the border of the rectangle. selectionSprite.graphics.beginFill( 0x458B00, 0.4 ); // Set the fill and transparency of the rectangle. selectionSprite.graphics.drawRect( selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height ); // Draw the rectangle to the stage! selectionSprite.graphics.endFill(); // Stop filling the rectangle. CheckForSelection(); // We will check to see if any units have been selected. } }As you can see, we added a function called
CheckForSelection(). Let’s create that function after the others:public function CheckForSelection():void { for each( var unit:Unit in unitList ) // For every unit that is in the Unit Array(list)... { if( unit.hitTestObject( selectionSprite ) ) // If the selectionSprite is touching the Unit. { unit.select(); // Make the unit selected. } else { unit.deselect(); // De-select the unit. } } }As you can see in the highlighted lines, the
select()anddeselect()functions do not exist. Open up ‘Unit.as’ and let’s put them in:package { import flash.display.MovieClip; public class Unit extends MovieClip { public var isActive:Boolean; // Tells us whether the unit is selected or not. public function Unit() { isActive = false; // The unit has not been selected yet. gotoAndStop(1); // Go to and stay on the first frame ( no selection ring ). } public function select():void { isActive = true; // The unit is selected. gotoAndStop(2); // Show the ring. } public function deselect():void { isActive = false; // The unit is not selected. gotoAndStop(1); // Do not show the ring. } } }Run the game and all should be working!
Step 11: Challenges
Now that you have sucessfully completed this tutorial, I now have some challenges for you to follow. Feel free to skip them, but following them will help you learn.
Beginner:
Intermediate:
Advanced:
Only do the challenges you feel comfortable with!
Conclusion
Thankyou for reading this tutorial and I hope you learned something new. Also, I would also like to thank Tomas Banzas for the art he did!
If you have completed some of the challenges and would like to show off the results, please post a link in the comments – I’d love to see them!
We’re immensely pleased to announce that, after months of waiting, a new member of the AppStorm network has landed: Windows.AppStorm! Read on to find out more about what this fantastic new site has to offer…
Complimenting Mac.AppStorm, Web.AppStorm, iPhone.AppStorm, iPad.AppStorm, and Android.AppStorm, our new Windows site will be offering reviews and roundups covering the entire Windows ecosystem, including Windows Phone 7, and games, along with tips and tricks to get the most from Windows.
We know that many Tuts+ readers use Windows devices every day and want to provide you with a fantastic resource for everything Windows related. We’re incredibly excited to bring you excellent Windows content of the high quality you’ve come to expect from AppStorm – daily reviews, how-to’s, roundups, news, and opinion.
Subscribe and Stay Up-to-Date!
We have some absolutely fantastic posts lined up over the coming weeks, and we’d hate for you to miss out… There are a few different ways to subscribe to Windows.AppStorm – hopefully one of the following options will work for you!
Get Stuck In
As a treat for all newcomers to Windows.AppStorm here are a some links to articles published in the interim, you won’t be disappointed!
Head over to Windows.AppStorm…
Are you an RIA developer? Do you make Flash games or Unity games? Do you know some cool tips or techniques that you’re always surprised your colleagues don’t know? You sound like the perfect person to contribute to Activetuts+!
We’re on the lookout for new writers and screencasters, so read on to find out more…
What We’re Looking For
Right now, we’re putting out a general call for Quick Tips.
A Quick Tip is a short article or screencast – we’re talking about a thousand words, five steps, or a few minutes – that covers one bite-size subject.
For example, a Quick Tip could cover a small library, one or two components, or a technique – each a useful topic for which a full tutorial would be overkill.
We’ve also published Quick Tips that cover individual design patterns or error messages. You can see a full list on our Tips page.
As you can see, we’re really low on Unity, Silverlight, and HTML5 Quick Tips, and even our Flash stockpile has dried up over the last few weeks. We pay $50 for every Quick Tip that we publish, and if you submit an idea now there’s a good chance we’ll even be able to publish it this month!
Pitch a Quick Tip
Got an idea? Great! Pitch it to us (in about a paragraph or so) using the following form:
Pitch your Quick Tip idea
You can read more about the sort of topics we cover on Activetuts+ in our Author Guidelines – though if you’ve been reading the site for a while, you’ve probably got a good idea already.
As long as you’ve got an original, useful idea and can string a decent English sentence together, there’s a high chance your Quick Tip pitch will be accepted, so don’t be shy.
(For longer-form tutorial pitches, we do prefer to see some example of your previous work: projects you’ve worked on, blog posts you’ve written, presentations you’ve given, and so on. For Quick Tips, this isn’t necessary – although we’re still interested!)
We’re looking forward to reading your pitches.
ActiveDen’s latest community-organised contest has just taken place. The theme was “Widget/Apps” and we had a number of outstanding entries, with $1,450 prize money up for grabs. We had a lot of fun with the contest and are thrilled to be offering the entries for free exclusively here on Activetuts+!
The Winner: Lion’s NeatList AIR App
Lion’s NeatList is a cool AIR app to keep track of your daily tasks. It also took home $1,000 for first prize!
Check out Lion’s ActiveDen Portfolio
RimV’s Flickr Box AIR App
Flickr Box is a cross platform AIR mobile app that runs on Android, iOS and RIM Playbook. Built by 3D legend RimV.
Check out RimV’s ActiveDen Portfolio
FlashEdge’s 3D Flickr Gallery
Coming in third was this amazing 3D gallery built by FlashEdge.
Check out FlashEdge’s ActiveDen Portfolio
Kontrast’s Survey/Feedback/Quiz Form
Build your own interactive form with this great entry from Kontrast.
Check out Kontrast’s ActiveDen Portfolio
RubenBristian’s Media Love Widget
Create an online YouTube Poll with this awesome widget by RubenBristian.
Check out Ruben’s ActiveDen Portfolio
PezFlash’s Snakes & Apples
Catch the dreaded Apples with this fun game by PezFlash.
Check out PezFlash’s ActiveDen Portfolio
RabidFlash’s YouTube Comment Widget
Load YouTube comments with this cool widget by RabidFlash.
Check out RabidFlash’s ActiveDen Portfolio
Zefs’ Envato API AIR App
View ActiveDen forum threads, the latest featured files and so much more with this awesome AIR app from Zefs.
Check out Zefs’ ActiveDen Portfolio
ZoomIt’s Flash Testimonial Rotator
Create a cool Flash Testimonial Rotator with this XML driven widget from Zoomit.
Check out ZoomIt’s ActiveDen Portfolio
Sergibh’s Flash Horoscope Widget
Present daily horoscopes with this neat component from Sergibh. Mobile App included.
Check out Sergibh’s ActiveDen Portfolio
CodingJack’s ChangeStar Envato API AIR App
Track your Envato marketplace file ratings with this easy to use AIR app.
Check out CodingJack’s ActiveDen Portfolio
More Info
Some entries do not include ActionScript source. Feel free to use the entries in your client projects but resale of any kind is not permitted.
Want to read more about the fun we had? Check out the competition threads over on the ActiveDen forums here and here.
The Competition Sponsors
Big thanks to all of these guys for sponsoring the competition:
Special thanks to Zefs and PatrickJansen for their amazing work on the competition banner!
Last reminder: These courses start tomorrow!
Artificial intelligence is a popular programming topic, with obvious applications in game development, and machine learning is a branch of AI focused on creating code that can learn based on past experiences. Databases are perhaps not as stereotypically cool to study, but still very important for any programmer. Stanford University is offering free, online, undergraduate-level courses in each subject. Read on to find out how you can enroll…
Are These Proper University Courses?
Yes and no. The courses are online versions of those which actual Stanford students will take (other than being delayed by a couple of weeks), and so will be taught and graded at university level – but studying online won’t get you a Stanford certificate or university credit, so you won’t be able to put “attended Stanford university” on your CV.
Still, you’ll get the lectures (in video format) and the homework and exams (which you can submit and have graded electronically), so you’ll be learning the same material as the Stanford students!
What’s Being Taught?
Three courses are on offer:
Introduction to Artificial Intelligence
You’ll need to brush up on your probability and linear algebra skills (perhaps you could try Khan Academy).
For more information, and to enroll, visit ai-class.com.
Machine Learning
Again, you’ll need to be familiar with basic probability theory and linear algebra.
For more information, and to enroll, visit ml-class.com.
Introduction to Databases
This isn’t just about relational databases and SQL; it also covers XML (including XPath, XQuery and XSLT), UML, and “NoSQL” systems.
For more information, and to enroll, visit db-class.com.
Is There a Deadline?
Yes. This isn’t like Tuts+ Premium, where you sign up and have access to courses and tutorials to read at your leisure; everybody taking the online course starts at the same time, with new lectures released each week and homework assignments due in on certain dates.
The courses all start on the 10th of October, and end in mid-December, so you should enroll today if you are interested at all.
If you don’t have time, or simply don’t want, to do the homework assignments, you can opt to take the “basic track” – in the AI course at least – which has the same material, but without the homework or exams. You can downgrade to this at any time, so there’s no harm in signing up to the “advanced track” for now.
If you’re interested in programming, I hope you’ll sign up to at least one of the courses – not just because of the content, but because this should be a really interesting experiment in online learning.
Here’s the concluding part of our tutorial about creating a multi-state car using a finite state machine. In this part, you will see how easy it is to add more states as well as new features to the car. When finished, you’ll know exactly how to structure control for your FSM Object, which will be demonstrated when we add animation and sound.
Final Result Preview
Check out the final result we’ll be working towards:
Step 1: Continuing Where We Left Off – Additional States
Here’s the State Transition Table (STT) we drew in the first part of the tutorial:
When you need to add more states, always start with your STT. Here are the new states we’ll be working towards, with room to add the new actions required:
Try putting in the right actions for the newly added states.
I assume it’s been a while since you read the first part of this tutorial, so take your time. Once you finish, compare your STT with the image shown below.
Step 2: Retouching the IState Interface
The very next thing you need to do is add the two new state actions to your IState interface.
Open IState.as in FD and include the code below. I would add it just after the
driveForward()method.Now run the application and see what happens next.
Any modification to the IState inteface needs to be reflected in all the classes that implement it. This is the great advantage of using an interface; I really like how it reminds you to add them for each existing state class.
Add the following code to all the existing state classes. Put it right below the
driveForward()method. Let’s have them callprint(this + "apply action here")to remind us that we need to get back to them after creating the other two state classes.public function driveBackward ():void { _car.print (this + " apply action here"); } public function driveReallyFast ():void { _car.print (this + " apply action here"); }You shouldn’t get anymore errors when you run the application again.
Step 3: Creating the Two State Classes
Open the Car class, navigate to the
initializeStates()method and add the code below.Neither the variables nor the classes exist but we’ll fix that. First, get inside the word “EngineDriveBackward”, then press “CTRL + SHIFT + 1″; highlight “Create new class” then press “ENTER”.
Make sure to match all the info above before you click “OK”. You should have something similar to the code below. Don’t forget to add the
_carvariable before the constructor and add that “$” symbol for the parameter. Then do the assignment inside the constructor.package com.activeTuts.fsm { public class EngineDriveBackward implements IState { private var _car:Car; public function EngineDriveBackward($car:Car) { _car = $car; } /* INTERFACE com.activeTuts.fsm.IState */ public function turnKeyOff():void { } public function turnKeyOn():void { } public function driveForward():void { } public function driveBackward():void { } public function driveReallyFast():void { } public function reFuel():void { } public function update($tick:Number):void { } public function toString():String { } } }Okay. Now go back to the Car class where we left off and put your cursor inside the
_engineDriveBackwardStatevariable and press “CTRL + SHIFT + 1″; choose “Declare private variable” then hit “ENTER”. This will add it as the last variable before the constructor. Change its type to “IState”. I would move it to where the other state variables are but that’s optional.Follow the same procedure to create the
EngineDriveReallyFastclass.You’ll get an error if you run the application about the
toString()method for the two new classes not returning a value.The Car will also need to provide external access to control for the two new actions. Add the code below after the
driveForward()method.public function driveBackward (e:Event = null):void { _currentState.driveBackward (); } public function driveReallyFast (e:Event = null):void { _currentState.driveReallyFast (); }Lastly, add the explicit getters at the lower section of your Car class just above the
changeState()method.public function getEngineDriveBackwardState ():IState { return _engineDriveBackwardState; } public function getEngineDriveReallyFastState ():IState { return _engineDriveReallyFastState; }Step 4: The EngineDriveBackward State
Refer back to your STT and start adding code from the top of the IState method implementations. You’ll run into a snag somewhere but try to do it anyway. You may also use your own words for the
print()method. Once you finish, compare your code with the class listing below.package com.activeTuts.fsm { public class EngineDriveBackward implements IState { private var _car:Car; public function EngineDriveBackward($car:Car) { _car = $car; } /* INTERFACE com.activeTuts.fsm.IState */ public function turnKeyOff ():void { _car.print ("click... rolling to a stop in reverse...the engine has been turned off."); _car.changeState (_car.getEngineOffState ()); } public function turnKeyOn ():void { _car.print ("you're driving in reverse, no need to crank the ignition!"); } public function driveForward ():void { _car.print ("click, switching from reverse to drive..."); _car.changeState (_car.getEngineDriveForwardState ()); } public function driveBackward ():void { _car.print ("...already driving in reverse."); } public function driveReallyFast ():void { _car.print ("click, changing gears from reverse to turbo!!!"); _car.changeState (_car.getEngineDriveReallyFastState ()); } public function reFuel ():void { if (_car.hasFullTank () == false) { _car.print ("stopping the car from driving in reverse, changing gear to park, turning the key to the off position, getting out of the car and adding " + Number (_car.refillWithFuel ()).toFixed (2) + " gallon(s) of fuel."); _car.changeState (_car.getEngineOffState ()); } } public function update ($tick:Number):void { _car.engineTimer += $tick; if (_car.engineTimer >= Car.ONE_SIXTH_SECONDS) { _car.engineTimer -= Car.ONE_SIXTH_SECONDS; _car.consumeFuel (Car.REVERSE_FUEL_CONSUMPTION);///25 seconds gas supply } } public function toString ():String { return 'driving backward'; } } }The
update()method requires an additional property for the Car. Place your cursor inside theREVERSE_FUEL_CONSUMPTION, press “CTRL + SHIFT + 1″, choose “Declare constant”, then hit “ENTER”. This adds the constant at the top of the Car class with the default type of String. Change its type to Number and assign it a value of.0066. This gives 25 seconds of driving in reverse with a full tank of one gallon. You may move it to be with the other fuel consumption constants.While you’re there, you might as well add the
TURBO_FUEL_CONSUMPTIONconstant with the value of .016 (10 seconds on turbo for one gallon). We’ll use that later for theEngineDriveReallyFaststate class.It’s that simple. Go ahead and finish up the
EngineDriveReallyFastclass. If you get stuck, go back and check with your STT. Or you can just open the completed class inside the “StatePatternPartial2″ folder included with the source download and see what you missed.Step 5: More Testing
Add the new state actions (
_car.driveBackward()and_car.driveReallyFast()into the test sections in your “Main” class then run the app.Check your print out against the test actions if they match.
Notice where it says “off apply action here”? That tells us we forgot to get back and add behavior for the newly added Car functions of the other state classes. Go back to each of them and apply the behavior based on your STT.
The app should run perfectly now. If you like, you can still match your work with the classes included with the source download. As mentioned earlier, they’re inside the “StatePatternPartial2″ folder.
Step 6: Adding Media Assets
With the source download is a folder named “media”, drag that into the “bin” folder of your CarFSM project. It contains all the sound effects and graphics.
Next, also with the source download, you’ll find a folder named “code”, get inside that and into the “StatePatternComplete” folder. Don’t touch anything except the “Media.as” class. Drag it into your “com.activeTuts.fsm” folder together with the rest of the classes you’ve made.
It’s important you know how this class works so you can add to it later should you choose to try the homework of adding one other car functionality of returning back to park. So go over it at least once; I’ll also explain its responsibilities:
It takes care of pretty much everything media-wise, from embedding media assets to allowing control over them. The first thing it does is embed all graphic and sound files inside the “media” folder. Animation, visual output, and sound are all controlled by the different state classes through the car instance which in turn passes the request to the media instance. When instantiated, this class does five things – It adds itself as a child of the car, it creates the car’s visual assets, sounds, buttons, and then visual output.
Sound manipulation is usually handled with two functions; for example, when the car is running, if you select the “drive” radio button, the car calls
playParkToDrive()which plays the sound of the car increasing power, thenplayPeakDrive()when the sound finishes for constant speed driving sound.Step 7: Extending the Car’s Responsibilities – Variables
Starting at the top of the Car class, add the following code after the
_currentStatevariable declaration. These properties came up as features were added to the Car. For example, I wanted to bring back the gear to park after one second when the car is either off or out of fuel so there it is. Another example would be cleaning up the visual output display after 10 seconds of printing a statement.Be sure to add
_media = new Media (this);inside theinit()method right after theinitializeStates()method call.Step 8: Extending the Car’s Responsibilities – Car Functions
Now get inside the
update()method and change it to match the code that follows.public function update ($tick:Number):void { _currentState.update ($tick); _media.setTitle (_currentState.toString ()); if (_currentState == _engineOutOfFuelState || _currentState == _engineOffState) { if (_currentRollSpeed == 0) //or add this test for the update method of the two states { _media.stopRollSound (); } } //clean up the output panel after 10 seconds if ((_cleanUpTimer += $tick) >= TEN_SECONDS) { _cleanUpTimer -= TEN_SECONDS; _media.cleanUp (); } }Remember – the changes in the methods, however complex, only manipulate sound and animation. If you plan on doing the homework later (allowing the car to return to park from any of the drive states), here’s the method you need to work on. Paste it before the
turnKeyOn()method. This method gets called when the “park” radio button is clicked (if enabled). SeeaddButtons()in the Media class.public function returnToPark (e:Event = null):void { //homework }From
turnKeyOn()all the way down toreFuel()add_cleanUpTimer = 0before the current state delegation. And that’s how the visual output panel gets cleared after 10 seconds.consumeFuel()andrefillWithFuel()also need to be updated, as shown here:public function consumeFuel ($consumption:Number):void { if ((_fuelSupply -= $consumption) <= 0) { _fuelSupply = 0; _cleanUpTimer = 0; stopEngine (); if (currentRollSpeed != 0) { playRoll (); print ("the engine has stopped, no more fuel to run...rolling to a stop."); } else print ("the engine has stopped, no more fuel to run..."); _media.setColor (0xFF0000); changeState (_engineOutOfFuelState); } } public function refillWithFuel ():Number { if (_currentRollSpeed != 0) playRoll (); var neededSupply:Number = _fuelCapacity - _fuelSupply; _fuelSupply += neededSupply; _media.setColor (); return neededSupply; }I just kept adding whatever feature I could think of to show the State Pattern’s flexibility.
Replace what’s inside the
print()method with_media.print ($text);.Step 9: Extending the Car’s Responsibilities – Sound Control
Go one line after the
toString()method at the bottom of the class and paste the list below.///Sound control public function startEngine ():void { _media.startEngine (); } public function startEngineNoFuel ():void { _media.startEngineNoFuel (); } public function startEngineWhileRunning ():void { _media.startEngineWhileRunning (); } public function keyOffClick ():void { _media.keyOffClick (); } public function stopEngine ():void { _media.stopEngine (); } public function playParkToDrive (e:Event = null):void { _media.playParkToDrive (e); } public function playDriveToTurbo (e:Event = null):void { _media.playDriveToTurbo (e); } public function playParkToReverse (e:Event = null):void { _media.playParkToReverse (e); } public function playReverseToDrive ():void { _media.playReverseToDrive (); } public function playDriveToReverse ():void { _media.playDriveToReverse (); } public function playReverseToTurbo ():void { _media.playReverseToTurbo (); } public function playTurboToReverse ():void { _media.playTurboToReverse (); } public function playTurboToDrive ():void { _media.playTurboToDrive (); } public function playRoll ():void { _media.playRoll (); }Since properties don’t change when playing sound, we just delegate the work from car to media. For animation, the properties are manipulated inside the state classes which is then applied via access of the media through the car.
It might start to get a little confusing but just think of it this way – the Car is your central control hub with its logic contained inside the state classes. The current state has its own specific behavior for the called action, in response, it then calls specific functions in the Car to accomplish the required result.
Next comes control for the “park” radio button. We need these methods to automatically return the gear to park if the engine is either off or out of fuel (after one second). Don’t get it confused with the
returnToPark()method which is triggered by the radio button (see Step 29). Paste the code next. You’ll see how these methods were conceived when we start adding to the state classes.public function switchToPark ():void { _media.parked = true; } public function isParked ():Boolean { return _media.parked; }Step 10: Extending the Car’s Responsibilities – Animation Control
The code below completes the class. Add it at the end and save your work.
///Animation control public function get currentRollSpeed ():Number { return _currentRollSpeed; } public function set currentRollSpeed ($value:Number):void { _currentRollSpeed = $value; } public function get carFrontWheel ():Sprite { return _media.carFrontWheel; } public function get carRearWheel ():Sprite { return _media.carRearWheel; } public function get carBody ():Sprite { return _media.carBody; } public function get carBlurEffect ():Sprite { return _media.carBlurEffect; } public function get angle ():Number { return _angle; } public function set angle (value:Number):void { _angle = value; } public function get reallyFastRollSpeed ():Number { return _reallyFastRollSpeed; } public function get reverseRollSpeed ():Number { return _reverseRollSpeed; } public function get driveRollSpeed ():Number { return _driveRollSpeed; }That was a lot of added code. Compare your classes with the ones included with the source download if you run into errors when testing the app later.
Step 11: Controlling Media From EngineDriveReallyFast
For adding effects (in this case, handling visual manipulation), I’ve learned to always start where things change most. We could start working on the default state
EngineOff– but then how do we know what animation should happen there unless we know what animation it might be coming back from? If we start there, we only know that the wheels shouldn’t be rolling at all. But the Car may be coming from turbo.Review and compare the IState method implementations for your current
EngineDriveReallyFastversion with the code below.public function turnKeyOff ():void { _car.print ("click... rolling to a stop from turbo...the engine has been turned off."); _car.stopEngine (); _car.keyOffClick (); if (_car.currentRollSpeed != 0) _car.playRoll (); _car.changeState (_car.getEngineOffState ()); } public function turnKeyOn ():void { _car.print ("man, we're on turbo, don't crank the ignition!"); _car.startEngineWhileRunning (); } public function driveForward ():void { _car.print ("slowing down to regular driving speed..."); _car.playTurboToDrive (); _car.changeState (_car.getEngineDriveForwardState ()); } public function driveBackward():void { _car.print ("click, switching the gears from turbo to reverse..."); _car.playTurboToReverse (); _car.changeState (_car.getEngineDriveBackwardState ()); } public function driveReallyFast ():void { _car.print ("We can't drive any faster than this, no changes..."); } public function reFuel ():void { if (_car.hasFullTank () == false) { _car.stopEngine (); _car.print ("hitting the brakes!, stopping the car, switching gear to park, turning the key to the off position, getting out of the car and adding " + Number (_car.refillWithFuel ()).toFixed (2) + " gallon(s) of fuel."); _car.changeState (_car.getEngineOffState ()); } } public function update ($tick:Number):void { _car.engineTimer += $tick; //if the speed goes over regular driving speed, show the turbo blur effect if (_car.currentRollSpeed > _car.driveRollSpeed) { if (_car.carBlurEffect.alpha < .6) _car.carBlurEffect.alpha += .01; if (_car.carBlurEffect.x > -30) _car.carBlurEffect.x += -.01; //rotate the car body clockwise a little if (_car.carBody.rotation < 7) _car.carBody.rotation += .05; //move the car body a little to the left if (_car.carBody.x > -5) _car.carBody.x += -.02; } //slowly increase speed if not maxed if (_car.currentRollSpeed < _car.reallyFastRollSpeed) _car.currentRollSpeed += .2; else _car.currentRollSpeed = _car.reallyFastRollSpeed; _car.carFrontWheel.rotation += _car.currentRollSpeed; _car.carRearWheel.rotation += _car.currentRollSpeed; //bobbing motion _car.carBody.y = Math.sin (_car.angle += .05) * 2; if (_car.engineTimer >= Car.ONE_SIXTH_SECONDS) { _car.engineTimer -= Car.ONE_SIXTH_SECONDS; _car.consumeFuel (Car.TURBO_FUEL_CONSUMPTION); } }I’ve excluded the constructor as well as the
toString()method since they’re not doing anything with the media.We’re not making any changes to the state classes, we’re only adding features for controlling sound and animation. You can copy the listing and replace all those methods in your
EngineDriveReallyFaststate or you can just add the missing pieces. It’s up to you. The important part is we’ve abstracted the logic away from the Car object. Now we can make it as complex as we want. The focus is sharp. We know what we’re working on and there’s no mix-up.Animation is handled through the
update()method. The rest just takes care of playing sound.Step 12: Animation for EngineDriveBackward
Now for the opposite end.
Review, compare then make changes just like we did for the EngineDriveReallyFast state.
public function turnKeyOff ():void { _car.print ("click... rolling to a stop in reverse...the engine has been turned off."); _car.stopEngine (); _car.keyOffClick (); if (_car.currentRollSpeed != 0) _car.playRoll (); _car.changeState (_car.getEngineOffState ()); } public function turnKeyOn ():void { _car.print ("you're driving in reverse, no need to crank the ignition!"); _car.startEngineWhileRunning (); } public function driveForward ():void { _car.print ("click, switching from reverse to drive..."); _car.playReverseToDrive (); _car.changeState (_car.getEngineDriveForwardState ()); } public function driveBackward ():void { _car.print ("...already driving in reverse."); } public function driveReallyFast ():void { _car.print ("click, changing gears from reverse to turbo!!!"); _car.playReverseToTurbo (); _car.changeState (_car.getEngineDriveReallyFastState ()); } public function reFuel ():void { if (_car.hasFullTank () == false) { _car.stopEngine (); _car.print ("stopping the car from driving in reverse, changing gear to park, turning the key to the off position, getting out of the car and adding " + Number (_car.refillWithFuel ()).toFixed (2) + " gallon(s) of fuel."); _car.changeState (_car.getEngineOffState ()); } } public function update ($tick:Number):void { _car.engineTimer += $tick; ///visual if (_car.carBlurEffect.alpha > 0) _car.carBlurEffect.alpha += -.01; if (_car.carBlurEffect.x < 0) _car.carBlurEffect.x += .01; if (_car.carBody.rotation > -5) _car.carBody.rotation += -.03; if (_car.carBody.x < 3) _car.carBody.x += .02; if (_car.currentRollSpeed > _car.reverseRollSpeed) _car.currentRollSpeed += -.4; else _car.currentRollSpeed = _car.reverseRollSpeed; _car.carFrontWheel.rotation += _car.currentRollSpeed; _car.carRearWheel.rotation += _car.currentRollSpeed; _car.carBody.y = Math.sin (_car.angle += .1) * 1; if (_car.engineTimer >= Car.ONE_SIXTH_SECONDS) { _car.engineTimer -= Car.ONE_SIXTH_SECONDS; _car.consumeFuel (Car.REVERSE_FUEL_CONSUMPTION); } }Nothing fancy, we’re just making it seem like the car’s going in reverse. Since the previous state could be
EngineDriveReallyFast, we have to make sure that the turbo blur effect is taken away (lines 51-52).Step 13: The EngineDriveForward State
public function turnKeyOff ():void { _car.print ("click... rolling to a stop...the engine has been turned off."); _car.stopEngine (); _car.keyOffClick (); if (_car.currentRollSpeed != 0) _car.playRoll (); _car.changeState (_car.getEngineOffState ()); } public function turnKeyOn ():void { _car.print ("you're driving so don't crank the ignition!"); _car.startEngineWhileRunning (); } public function driveForward ():void { _car.print ("already driving - no need to change anything..."); } public function driveBackward():void { _car.print ("click, changing the gear from drive to reverse..."); _car.playDriveToReverse (); _car.changeState (_car.getEngineDriveBackwardState ()); } public function driveReallyFast ():void { _car.print ("switching from drive to turbo!!!"); _car.playDriveToTurbo (); _car.changeState (_car.getEngineDriveReallyFastState ()); } public function reFuel ():void { if (_car.hasFullTank () == false) { _car.stopEngine (); _car.print ("stopping the car, changing gears to park, turning the key to the off position, getting out of the car and adding " + Number (_car.refillWithFuel ()).toFixed (2) + " gallon(s) of fuel."); _car.changeState (_car.getEngineOffState ()); } } public function update ($tick:Number):void { _car.engineTimer += $tick; ///visual if (_car.carBlurEffect.alpha > 0) _car.carBlurEffect.alpha += -.01; //if coming from turbo, remove blur effect if (_car.carBlurEffect.x < 0) _car.carBlurEffect.x += .01; if (_car.carBody.rotation < 5) _car.carBody.rotation += .01; else if (_car.carBody.rotation > 5) _car.carBody.rotation += -.01; if (_car.carBody.x > -3) _car.carBody.x += -.01; else if (_car.carBody.x < -3) _car.carBody.x += .01; if (_car.currentRollSpeed < _car.driveRollSpeed) _car.currentRollSpeed += .2; //from reverse or park else if (_car.currentRollSpeed > _car.driveRollSpeed) _car.currentRollSpeed += -.2; //from turbo else _car.currentRollSpeed = _car.driveRollSpeed; _car.carFrontWheel.rotation += _car.currentRollSpeed; _car.carRearWheel.rotation += _car.currentRollSpeed; _car.carBody.y = Math.sin (_car.angle += .1) * 2; if (_car.engineTimer >= Car.ONE_SIXTH_SECONDS) { _car.engineTimer -= Car.ONE_SIXTH_SECONDS; _car.consumeFuel (Car.DRIVE_FUEL_CONSUMPTION); } }Here, we check whether the Car came from the reverse, park, or turbo state and adjust the rolling of the wheels appropriately. The rest of the changes are similar to the other states.
Step 14: The EngineOn State
public function turnKeyOff ():void { _car.print ("click... the engine has been turned off from park."); ///visual _car.carBody.rotation = 0; _car.carBody.x = 0; _car.stopEngine (); _car.keyOffClick (); _car.changeState (_car.getEngineOffState ()); } public function turnKeyOn ():void { _car.print ("the engine's already running you didn't have to crank the ignition!"); _car.startEngineWhileRunning (); } public function driveForward ():void { _car.print ("click, changing gears to drive ...now were going somewhere..."); _car.playParkToDrive (); _car.changeState (_car.getEngineDriveForwardState ()); } public function driveBackward():void { _car.print ("click, changing gears from park to reverse..."); _car.playParkToReverse (); _car.changeState (_car.getEngineDriveBackwardState ()); } public function driveReallyFast ():void { _car.print ("click, going on turbo...woohoo!!!"); _car.playDriveToTurbo (); _car.changeState (_car.getEngineDriveReallyFastState ()); } public function reFuel ():void { if (_car.hasFullTank () == false) { _car.stopEngine (); _car.print ("turning the car off, getting out and adding " + Number (_car.refillWithFuel ()).toFixed (2) + " gallon(s) of fuel."); _car.changeState (_car.getEngineOffState ()); } } public function update ($tick:Number):void { _car.engineTimer += $tick; ///visual _car.angle += 2; //vibration effect _car.carBody.rotation = Math.cos (_car.angle) * .8; if (_car.carBlurEffect.alpha > 0) _car.carBlurEffect.alpha += -.005; if (_car.carBlurEffect.x < 0) _car.carBlurEffect.x += .01; if (_car.currentRollSpeed > .3) _car.currentRollSpeed += -.3; else if (_car.currentRollSpeed < -.3) _car.currentRollSpeed += .3; else _car.currentRollSpeed = 0; if (_car.currentRollSpeed == 0) _car.switchToPark (); _car.carFrontWheel.rotation += _car.currentRollSpeed; _car.carRearWheel.rotation += _car.currentRollSpeed; if (_car.engineTimer >= Car.ONE_SIXTH_SECONDS) { _car.engineTimer -= Car.ONE_SIXTH_SECONDS; _car.consumeFuel (Car.IDLE_FUEL_CONSUMPTION); } }A pattern’s starting to show. Get to know the changes then apply them to your class.
Step 15: Out of Fuel Animation
public function turnKeyOff ():void { _car.print ("you already did this when the fuel ran out earlier..."); } public function turnKeyOn ():void { _car.print ("no fuel - the car will not start, get some fuel before anything. Returning the key to the off position."); _car.startEngineNoFuel (); } public function driveForward ():void { _car.engineTimer = 0; _car.print ("click, changing the gear to drive doesn't do anything...the car has no fuel, returning the gear to park..."); } public function driveBackward ():void { _car.engineTimer = 0; _car.print ("click, changing the gear to reverse won't do anything either...the car has no fuel, returning the gear to park..."); } public function driveReallyFast ():void { _car.engineTimer = 0; _car.print ("click, changed gear to turbo, no change, the car is not running, try to get som fuel, returning the gear to park."); } public function reFuel ():void { if (_car.hasFullTank () == false) { _car.print ("getting out of the car and adding " + _car.refillWithFuel () + " gallon(s) of fuel.\n"); _car.changeState (_car.getEngineOffState ()); } } public function update ($tick:Number):void { if (_car.currentRollSpeed == 0) { if (! _car.isParked ()) { _car.engineTimer += $tick; if (_car.engineTimer >= Car.ONE_SECOND) { _car.switchToPark (); } } } if (_car.carBlurEffect.alpha > 0) _car.carBlurEffect.alpha += -.005; if (_car.carBlurEffect.x < 0) _car.carBlurEffect.x += .01; if (_car.carBody.rotation > 0) _car.carBody.rotation += -.02; else if (_car.carBody.rotation < 0) _car.carBody.rotation += .02; if (_car.carBody.x < 0) _car.carBody.x += .02; else if (_car.carBody.x > 0) _car.carBody.x += -.02; if (_car.currentRollSpeed > 0.3) _car.currentRollSpeed += -.3; else if (_car.currentRollSpeed < -0.3) _car.currentRollSpeed += .3; else _car.currentRollSpeed = 0; _car.carFrontWheel.rotation += _car.currentRollSpeed; _car.carRearWheel.rotation += _car.currentRollSpeed;; }One more State… =)
Step 16: Animation When the Car Is Turned Off
public function turnKeyOff ():void { _car.print ("The car's already off, you can't turn the key counter-clockwise any further..."); } public function turnKeyOn ():void { _car.print ("Turning the car on...the engine is now running!"); _car.startEngine (); _car.changeState (_car.getEngineOnState ()); } public function driveForward ():void { _car.engineTimer = 0; _car.print ("click, changing the gear to drive doesn't do anything...the car is not running, returning the gear to park..."); } public function driveBackward ():void { _car.engineTimer = 0; _car.print ("click, changing the gear to reverse does nothing, the car is not running, returning the gear to park..."); } public function driveReallyFast ():void { _car.engineTimer = 0; _car.print ("click, changing the gear to turbo, nothing happens, the engine's off, returning the gear to park..."); } public function reFuel ():void { if (_car.hasFullTank () == false) { _car.print ("getting out of the car and adding " + Number (_car.refillWithFuel ()).toFixed (2) + " gallon(s) of fuel."); } } public function update ($tick:Number):void { if (_car.currentRollSpeed == 0) { if (! _car.isParked ()) { _car.engineTimer += $tick; if (_car.engineTimer >= Car.ONE_SECOND) { _car.switchToPark (); } } } if (_car.carBlurEffect.alpha > 0) _car.carBlurEffect.alpha += -.005; if (_car.carBlurEffect.x < 0) _car.carBlurEffect.x += .01; if (_car.carBody.rotation > 0) _car.carBody.rotation += -.02; else if (_car.carBody.rotation < 0) _car.carBody.rotation += .02; if (_car.carBody.x < 0) _car.carBody.x += .02; else if (_car.carBody.x > 0) _car.carBody.x += -.02; if (_car.currentRollSpeed > 0.3) _car.currentRollSpeed += -.3; else if (_car.currentRollSpeed < -0.3) _car.currentRollSpeed += .3; else _car.currentRollSpeed = 0; _car.carFrontWheel.rotation += _car.currentRollSpeed; _car.carRearWheel.rotation += _car.currentRollSpeed; }The last two state classes have the same response when you try to switch gears. Also, you know what possible animation it could be coming from and apply adjustment for it.
Step 17: Final Changes to Main
Replace the contents of your Main.as class with the code below.
package com.activeTuts.fsm { import flash.display.Sprite; import flash.events.Event; import flash.utils.getTimer; [SWF (width = 500, height = 350, frameRate = 60, backgroundColor = 0xFFFFFF)] public class Main extends Sprite { private var _past:Number; private var _present:Number; private var _tick:Number; private var _car:Car; public function Main () { init (); } private function init():void { _present = getTimer (); _past = _present; addCar (); addEventListener (Event.ENTER_FRAME, update); } private function addCar ():void { _car = new Car; _car.x = stage.stageWidth * .5; _car.y = stage.stageHeight * .5; addChild (_car); } private function update (e:Event):void { _present = getTimer (); _tick = (_present - _past) * .001; ///converted to 1/1000 _past = _present; _car.update (_tick); } } }All we do is add the car and call its
update()method at every enter frame event. You should see the car and the visual output when you run the application.You’ll notice the Car runs out of gas too soon. Change the value of
_fuelCapacityto3inside Car (variable declaration), and then test the Car thoroughly.Congratulations! You finished the tutorial.
Summary
Let’s now go over the whole procedure of creating a full featured FSM object from scratch.
Care to do the homework? Hint: You won’t need to create another state.
Until next time! Thank you so much for reading!! =)
Comments are always welcome. Please post them below.