How to Become a Writer for Activetuts+
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:
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.
View full post on Activetuts+
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.
MAX is Adobe’s annual conference, where they announce their new products and acquisitions, and give us all an idea of their current strategy. Last year they announced Flash’s 3D API, codenamed Molehill (now called Stage3D); AIR for TV; Edge, their new HTML5 animation tool; and more. There were also puppets. This year, long-time Activetuts+ writer Franci Zidar is at the event and will be filling us in on the details and sharing lots of photos. The second day’s keynote was aimed at developers – that means Flash and HTML5 news. Read on to find out more…
The Future of Flash
Flash is taking on a whole new life. With new technologies like HTML5 and CSS3 and advances in JavaScript, a lot of rich media delivery is going to be taken over by these standards. Adobe unveiled a demo of Unreal Tournament 3 working in Flash inside the browser (see below) and talked extensively about Flash as a gaming platform on all devices in 2D and 3D. The idea is to make Flash platform the “gaming console for the web”.
Editor’s note: Mouse-lock at last, hooray!
Flash’s Stage3D (previously codenamed Molehill – check out an introductory tutorial here) provides GPU acceleration for 3D and now through Starling Framework for 2D graphics within Flash Player.
The next iteration of Flash Professional (codenamed Ruben) will also let you create sprite sheets from vector animations to get GPU accelerated animations and provide some other GPU acceleration focused improvements.
Check out Unreal Tournament running in the Flash Player (sadly not ported to AS3!)
Other Technologies
A lot of the focus at MAX this year was on alternative technologies to Flash for rich media delivery. My guess is that you are already better off building sites requiring simple multimedia experiences with these other web standards since you’ll have a much easier job deploying them for mobile devices or they might, to some extent, work on them by default.
Adobe has also proposed two new features for CSS called CSS Regions and CSS Shaders. Regions allow the creation of scalable text regions of any shape that let text flow through or around them depending on screen size and Shaders create great looking effects and transitions for HTML elements.
Here’s some more info on CSS Shaders, including videos of them in action: http://www.adobe.com/devnet/html5/articles/css-shaders.html
While visually more intensive web experiences would still require Flash to be built in reasonable time, since the workflows are already established, and perform well at runtime, with software like Adobe Edge and HTML5 and JavaScript rendering getting better each month this could also be changing soon. Having played a bit with Edge and seeing some demonstrations it really seems this software is currently heading in the direction of a mix between After Effects and Flash. It’s still in preview stage and has limited scripting capabilities but in some ways it is quite similar to Flash.
The Future
The web is shifting again. New devices are changing the landscape for web deployment and there are a bunch of new solutions to deliver the content across all of them. HTML5 has been the buzz word for quite a while now, and while it does provide some welcome improvements and new features what is really helping developers deliver content across devices either online or offline is a combination of CSS, JavaScript and HTML. There are now many solutions for creating online content and offline apps and websites but the combination of CSS, JavaScript and HTML allows you to apply an already mastered set of skills to any of these methods of deployment. You could learn native development for Android, iOS, Windows Phone and all the other mobile platforms but that is unrealistic from the perspective of a freelance developer and hard even for a medium sized company.
So for anyone who finds this fragmented solution too much to handle, you can resort to new technologies like jQuery Mobile, PhoneGap, jQTouch, CSS3, HTML5 and others. All of these are incorporated in the new Dreamweaver so you can build websites for multiple platforms test them at different resolutions and orientations (landscape and portrait) and even deploy applications directly to Android or iOS.
PhoneGap is especially interesting since it allows developers to tap into native extensions of all major mobile platforms giving you access to things like geolocation, accelerometer, camera, dialer and many other phone features that were until now only available to native applications. Using PhoneGap it’s now easier than ever to build cross platform apps and websites that take full advantage of the mobile capabilities all with JavaScript, CSS and HTML.
Get Your Hands on the New Toys
For more information about everything announced on Day Two – as well as download links for AIR 3 and Flex 4.6 pre-release – head to http://adobe.com/go/maxday2
Good news, everyone. Everybody who works with arrays and vectors – so, all developers – will enjoy the new opportunities: since the late August 2011 build of Flash, Realaxy ActionScript Editor (RASE) supports the new Collections AS3 language extension. In this post we’ll show you what it can do.
A collection is a general term that means, roughly, “a bunch of similarly typed objects that are grouped together”. Building a collection in ActionScript 3.0 can be done by using arrays, vectors, dictionaries, or objects; they each have some of the makings of a perfect concept. However, if you have even a basic acquaintance with any modern and trendy language like Scala, Groovy or Ruby, you’ll definitely feel the lack of a functional approach in the pure AS3-way of processing Collections.
The Collections Language
Well, let’s introduce the Collections AS3 language extension that is available in RASE Beta 10, build 8177+.
A complete vocabulary of methods supplemented with samples is available here: one for lists and another one for maps (these are images; scroll them down, they are really HUGE).
In order to not get lost in this jungle, let’s take a look at some simple use cases. The first true-life sample demonstrates the conciseness of collection code:
We create a
list, which can contain onlyintvalues.where”).select”).select”).listand trace the result.Where,select,selectMany– these operations are easy to use when you’re building a query.Operations like
all,any,containsAll, andcontainswork perfectly in conditional phrases (“if” statements, etc).To modify a list, we have a wide range of weapons:
remove,removeAll,removeWhere,removeHead,removeTail, etc.For those persons who definitely have an eye for perversion we have prepared a bunch of operations like
foldLeft/foldRight,reduceLeft/reduceRight,intersect, etc.Simply said, there are plenty of operations suited to every fancy and almost every task. In some operations you just transmit one or more values to it, in some other ones you add a closure.
Lists and Maps
The collection language is intentionally simple. It supports two types:
ListandMap.Mapis quite similar to a trivialDictionarythat holds some useful methods –keys,values,containsKey,containsValue(useful for checks and conditions),pushMap(to merge values),removeKey,removeValue, etc.Maps are smart and fail-safe. They won’t let you add an incorrect key or value:
Maps work well with any lists and queries.
There are also conversion operations that can be utilized to facilitate embedding the new Collections extensions to your actual pure-ActionScript project. Just take a trivial array (or vector) and apply the
.toListoperation. After processing a list (or a map) you can always convert it back to the old-school AS3 style using.toArrayor.toVector.A Real World Example
To demonstrate how to get started with these collections, here’s a step-by-step guide based on a trivial situation. Suppose your task is to create a “suggested users” list for a Twitter account. We have to process a very long collection of hundreds or thousands of objects, to retrieve a short list (that match a number of criteria) and to apply some operation on every item in that short list.
We’ll not turn our attention to interacting with Twitter API, since our goal is only to show how to get started with the Collections language and to show advantages of a functional approach in working with collections in AS3.
Step 1: Creating a Project
Create a new project from scratch and name it Collections. If this is your first experience with the editor, we recommend you to read the Realaxy HelloWord Tutorial and/or Realaxy Overview For Beginners.
Step 2: Creating a Class (Beginning)
Now we need to create three classes to store the data structure:
User,TwitterAccountandMessage. We can do it from theGeneratemenu, which is available through right-clicking the code or pressing Ctrl+N.Step 3: Creating a Class (In Progress)
Type the class name in a pop-up box.
Step 4: Creating a Class (Adding Fields)
Jump to the
<<Field>>position and hitEnter.Step 5: Creating a Class (More Fields)
Add the following fields:
username,surnameandid. The code will look like this:Step 6: Adding Getters and Setters
Invoke the Ctrl+N menu again.
Step 7: Still Adding Getters and Setters
A new pop-up window will appear. Select all newly created fields and press OK.
Step 8: Adding a
.toString()MethodDon’t forget to add a text presentation to the
Userclass. Add.toString()method — item 5 from the Ctrl-N menu (same as on screenshot to Step 2 and 6).Step 9: Code Overview
The
Userclass is ready. Its code will look like this:Step 10: TwitterAccount and Message Classes
Using the same process as Steps 2-9 you have to create
TwitterAccountandMessageclasses.NB: To avoid a type error (like the one shown in the image above), you must import the
Collectionslanguage from the Ctrl+L menu:NB2: The
TwitterAccountandMessageclasses should be cross-linked. In order for this to happen, after importing theCollectionslanguage, you have to create theMessageclass, jump back to theTwitterAccountclass and complete the line that caused an error.NB3: Don’t forget to add getters, setters and a
.toString()method.Step 11: Main()
Now it’s time to write some code in
Main(). First, we need to add some fields.NB: Use the Smart Complete keyboard shortcut (Ctrl-Shift-Space) to save a little time while typing these phrases:
Since our tutorial is just a demo that shows a how to work with collections in AS3, we’ll skip the part that refers how to get this data from Twitter API.
Let’s just imagine that we already have:
followers,followedBefore,candidatesLongList,candidatesShortList, which is empty at the moment.The third collection can be extremly large, containing hundreds or even thousands of items. Our goal is to apply some sophisticated query and thus to cut off the needless items according to Buonarotti’s principle “I saw the angel in the marble and carved until I set him free.”
Step 12: Building the Query
Jump to
Main()constructor, and enter thecandidatesLongListwith its method “where” (hit Ctrl-Space to use autocompletion like in the screenshot below):The following phrase will appear:
Don’t be surprised, it’s just a
Closure, and “it” is just its parameter.Closures (a small lyrical digression)
A closure is, in fact, the same anonymous function, but with a number of small differences.
First, the
Closurehas a very concise syntax. Parameters don’t have a type declaration (to be more precise, they have it, but such declarations are hidden). The Closure has a special behavior – “the last statement is a return value&rdquo – which means you should use “1;” (in the last line) instead of “return 1;”Second, it has a special view for single-line closures – in such a closure a semi-colon on the end is omitted (for two reasons: readability and brevity).
Unlike an anonymous function (and also as a counter to the aforementioned
ArraysandVectors), a closure is type safe. That means that autocomplete and type-checking will work in closures.To conclude, a
Closureis a kind of function on steroids. It has a lot of tasty features that helps us to write everything quick and concise.Step 13: Building the Query
Let’s return to our unfinished closure. Add some code that will implement our “rules”. This code will return a cut-down version of
candidatesLongListthat doesn’t include any of our followers:Then add another criterion:
Theoretically, the Collections language allows you to nest a lot of different conditions one by one. Let’s add one more criterion (include users that have “Flash”, “ActionScript” or “Adobe” in their Biography field) using a regular expression:
Step 14: Obtaining the Result
Select the whole query and press Ctrl-Alt-V. A new variable will be introduced.
Now we are able to do whatever we want:
We would then copy the contents of
resultintocandidatesShortList.Step 15: Generating Pure AS3 Code
Build a module with Ctrl-F9 and take a look at the Output window. The generated pure AS3 code of
Main()will look like this:package com.example{ import com.realaxy.actionScript.collections.util.CollectionsLanguageUtil; import flash.display.Sprite; public class Main extends Sprite { private var followers : Array = new Array() ; private var followedBefore : Array = new Array() ; private var candidatesLongList : Array = new Array() ; private var candidatesShortList : Array = new Array() ; public function Main(){ //exclude our followers and users followed by us before //include people with "Flash", "ActionScript" and "Adobe" in their bio //add them all to the recommendations shortlist this.candidatesShortList = CollectionsLanguageUtil.where(CollectionsLanguageUtil.where(candidatesLongList, function ( n : TwitterAccount, stops : Object ) : Boolean { return !CollectionsLanguageUtil.any(followers, function ( f : TwitterAccount, stops : Object ) : Boolean { return f.user.id != n.user.id ; }, this, false) && !CollectionsLanguageUtil.any(followedBefore, function ( f : TwitterAccount, stops : Object ) : Boolean { return f.user.id != n.user.id ; }, this, false); }, this, false), function ( it : TwitterAccount, stops : Object ) : Boolean { return /Flash|ActionScript|Adobe/.test(it.bio) ; }, this, false); var names : Array = CollectionsLanguageUtil.select(candidatesShortList, function ( it : TwitterAccount, stops : Object ) : String { return it.user.username + ", " + it.user.surname ; }, this, false); CollectionsLanguageUtil.forEach(names, function ( m : String, stops : Object ) : void { //TODO: do something with 'm' }, this, false); } } }Seems a little bit unreadable, eh? Especially comparing with our DSL code:
Conclusion
The new Collections language extension allows you to:
MAX is Adobe’s annual conference, where they announce their new products and acquisitions, and give us all an idea of their current strategy. Last year they announced Flash’s 3D API, codenamed Molehill (now called Stage3D); AIR for TV; Edge, their new HTML5 animation tool; and more. There were also puppets. This year, long-time Activetuts+ writer Franci Zidar is at the event and will be filling us in on the details and sharing lots of photos. The first day’s keynote was all about the Creative side of things. Read on to find out more…
Creative Cloud and Touch Apps
This year Adobe is shifting its focus to mobile and cloud solutions. The first and the main Adobe keynote address was absent of any mention of Flash and very little if anything was mentioned about its other desktop web authoring software solutions. In fact, yesterday’s main focus was on Adobe’s new Creative Cloud and its new mobile touch applications.
The big news was that Adobe had just acquired TypeKit and PhoneGap and integrated TypeKit into its online service as a part of the Creative Cloud. This will allow its users to license any font from TypeKit library and use it in their projects by embedding the font from their server; to do this, you’ll pay an annual fee instead of having to buy each font for your project. Adobe applications will also be a part of the Creative Cloud service and you will be able to download and use the applications by buying the annual subscription early next year, which is supposed to be “very reasonable”. The applications will be updated directly in the cloud, so you’ll no longer have to wait for (and buy) the full release to receive any bigger updates, as the software will be directly updated through the cloud.
Adobe is now focusing on cloud solutions where all your work and applications can be gathered in one place. The creative community part of the cloud services will offer some interesting features, like sharing your work, including working files which can be previewed, with extracted Kuler color palettes, displayed and hidden layers in Photoshop files, identified fonts from InDesign files and so on. We’ll have to wait and see but the cloud services do seem promising.
Mobile touch applications were another focus of yesterday’s keynote. New applications presented were Photoshop Touch, Proto, Debut, Collage, Carousel and Kuler, all for tablet or mobile. You can check their features at Adobe mobile apps site. Proto was the only one I felt could be actually useful; it’s an application for prototyping websites, with a range of supported gestures. I could easily see myself sitting with a client prototyping the website on the fly on my tablet device. Using Photoshop, Kuler or any other design tool on the tablet… not so much, although the news that Adobe is collaborating with Samsung on creating pressure-sensitive stylus capable tablets is also quite interesting.
What About Flash?
There was a general sense after the keynote address that Adobe is not willing to commit to Flash as its platform of choice and is avoiding the issue while turning to alternative solutions for mobile deployment through PhoneGap and its other digital publishing solutions.
The Community Lounge at MAX
Flash and Molehill are going to be a part of today’s keynote, but is it too little too late. Molehill, with its Stage3D API that takes advantage of the GPU, could allow better 3D graphics inside the browser without installing another plugin (like Unity), but it won’t solve Flash’s performance problems on mobile devices. Flash is going to have a hard time staying in the game without a bigger commitment from Adobe; it could become a niche platform for gaming if the tools to create immersive experiences in CSS3, JavaScript and HTML like Adobe Edge continue to become more accessible, and Flash’s performance and accessibility issues for mobile and low CPU devices are not solved.
Come back tomorrow to find out what’s announced in this keynote, or tune in to it live at 10am PDT on the MAX website.
Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!
Psdtuts+ — Photoshop Tutorials
Create Animal Textured Typography
In this tutorial we are going to create fun, realistic, animal textured, 3D typography in Photoshop using CS5′s Repousse tool. Let’s get started!
Visit Article
Create a Detailed User Interface for an iPad Application
In this tutorial we will show you how to design a detailed user interface for an audio-themed iPad application. We will design this application using a retina display resolution and will make use of Photoshop’s shape layers and layer styles. Let’s get started!
Visit Article
How to Apply Light, Shading, and Shadow to Round Objects
Photoshop is an excellent tool for manipulating photographs but it can also be used as a means to create stunning digital art. This tutorial is part of a 25-part video tutorial series demonstrating everything you will need to know to start producing digital art in Photoshop. Digital Art for Beginners, by Adobe Certified Expert and Instructor, Martin Perhiniak will begin by teaching you how to draw in Photoshop. At the conclusion of this series you will know all you need to produce your own concept art and matte paintings in Photoshop.
Visit Article
Nettuts+ — Web Development Tutorials
Ways you can be Sure you’ve Married a Geek
Everyone knows that when you get married, your life changes. When Jeffrey and I recently tied the knot, we were advised by the older and wiser that the first year of marriage is the hardest. But so far, it has been fantastic. Dont get me wrong; just because married life is proving to be bliss does not mean there havent been any of those aforementioned changes. Recently, I realized that the ’married life changes” that I am adjusting to are all coincidentally related to the fact that Jeffrey is a web developer, a.k.a Geek.
Visit Article
Is Conference Pricing Out of Control?
You’ve surely experienced the letdown of registering for a conference, only to find that it costs $1,000 (or more) to attend (not including travel expenses). Isn’t that a bit extreme for two days worth of training? Then again, is that the only way the conference organizers can cover the high cost of planning such an event? Let’s see…
Visit Article
The Best Way to Learn JavaScript
Learning something new is scary. For me, the biggest issue with picking up a new skill is that I don’t know what I don’t know. Given that, it’s often useful to find a plan for learning whatever you’re interested in. That’s what this post is: your blueprint, your roadmap, your plan of action for learning JavaScript! You don’t have to worry about finding the best resources, sorting out the bad ones, and figuring out what to learn next. It’s all here. Just follow it, step by step.
Visit Article
Vectortuts+ — Illustrator Tutorials
Free, Vintage Vector, Medieval Heraldry Graphics
It’s free vector graphics time, my favorite hour of the day! We’ve roundup up a truckload of heraldry graphics available in EPS, SVG, AI and other vector formats for free download. These medieval packs are composed of emblems, crests, shields, dragons, knights, helms, armor, swords, flourishes, banners, and all sorts of vintage design elements. Whether you’re designing a stylish brochure for your favorite client or your personal portfolio website, these graphics could add the perfect stylish touch your project is needing.
Visit Article
Top Tips and Secrets from Talented Vector Artists
Today we share top tips and secrets from talented vector artists, which can help add insight into their processes and can give us the advice we need to improve in our own artwork.
Visit Article
Playing with Stationery Art Brushes and the Live Paint Bucket
In today’s tutorial I’m going to show you how to create some line art style stationery art brushes. You’ll then learn to combine them with the Live Paint Bucket to create a typography piece.
Visit Article
Webdesigntuts+ — Web Design Tutorials
A Beginner’s Guide to Successful Conversion
Converting visitors into valuable users is arguably the most fundamental element of managing a website. We’re going to take a closer look at conversion, discuss what it is, cover some common pitfalls, and tackle improving your site’s conversion rates.
Visit Article
Sign-in or Register: Form Design From Scratch (Day 1)
We deal with web forms all the time; when we log in to YouTube, Facebook, or any other web service, we have to get through a login or sign up process. Often this can be difficult because some forms are too long, or too cluttered. We’re going to build a stylish, straightforward login form, and today we’ll be looking at the Photoshop side of things.
Visit Article
Weekend Freebie! The Aureus Landing Page (PSD)
I originally designed the Aureus Landing Page for ThemeForest. However, I changed my mind and decided to share it with all of you guys instead – I love giving back to the design community!
Visit Article
Phototuts+ — Photography Tutorials
More than 60 Amazing Examples of Black & White Portraiture
The life of the monochrome portrait contains a rich history dating back to the birth of photography itself. Upon the invention of the camera, it was the portrait that took precedence. The opportunity to capture fellow man in a moment in time on film was finally a reality. So when put into context, appreciating the continued importance and wide scale exploitation of black and white portraiture today, it’s clear that the art is not lost and has survived the test of time.
Visit Article
Travel Portraits: Methods for Making a Connection
If you love to travel and take photographs, you have likely come across the dilemma of what to do when photographing people. Most see it as a catch 22. If you ask permission (as I believe is proper) then the person is not being ‘natural’ as they were before you asked, doing whatever it was that caught your eye. If you snap away, you risk being seen as rude and offending your subject which, for one reason or another, you thought of highly enough to take a photo. So what to do?
Visit Article
FlashMasters: Off-Camera Flash
Off-camera flash holds a tremendous amount of potential. With the ability to remove the flash from the same axis as the camera, off-camera lighting gives a photographer more creative options than ever before. Today, we’re going to learn about getting started with off-camera flash.
Visit Article
Cgtuts+ — Computer Graphics Tutorials
The Warrior” – Part 1
In this tutorial you’ll go through the entire character creation pipeline using Zbrush, Maya, UVLayout and Photoshop. We’ll go through the whole process of creating the “Warrior” character including texturing and rendering with Metalray. This tutorial is divided into 8 parts and in the first part, we’ll start blocking out the character in Zbrush using Zspheres.
Visit Article
Create A Realistic Candle & Flame In 3D Studio Max
In this tutorial, regular author Chandan Kumar will show you how to create a realistic candle and flame in 3d Studio Max. The candle’s flame will be made entirely in 3dsmax using built-in tools, rather then expensive third-party plugins! Let’s take a look!
Visit Article
An Introduction To Vue 9 xStream – Day 1
When you first start using a new software package, you’re a little bit lost. As you don’t really know where to start, what the options and parameters stand for, what the buttons do, etc… This tutorial series was made to introduce you to the best software for creating Natural 3D Environments, that software is: Vue 9 xStream. We’ll take a in-depth look of every aspect of Vue 9, starting with the user interface and working up to very complex environments!
Visit Article
Aetuts+ — After Effects Tutorials
Kaleidoscope Of Dancing Veggies Using Echospace – Day 1
Today’s tutorial is on how to create a colorful motion graphic piece meant for a food show or cooking program. With the often forgotten Trapcode Echospace you can turn as many photos as you want into one cheerful looking animation. I feel this two part tutorial has principles that could carry over into endless unique results. I hope you enjoy the tut!
Visit Article
A Look At Hollywood’s Biggest VFX – Part 1
This is a brief introduction of some of the most unbelievable Visual Effects in Hollywood’s biggest movies. This “Part 1″ will describe the making of movies: 2012, Avatar, Alice in Wonderland and The Lord of the Rings.
Visit Article
Walking Through 3d Text – AE Premium
In today’s tutorial we’re going show how to create the super popular effect of having a person walk right through a 3d logo or text. We’ll cover shooting tips, matchmoving principles, and a whole lot of other helpful info to pull this shot off right! We’ll also show you a way to create this effect without using ANY expensive 3rd party plug-ins!
Visit Article
Audiotuts+ — Audio & Production Tutorials
Dubstep for Beginners – Part 1: The Drums
With three equally important focal points, this tutorial series will initiate you each of these areas of dubstep and how to start producing your own grooves. This first tutorial will focus around the drum beats and what makes the dubstep beats unique. Get ready for some head nodding grooves!
Visit Article
How to Get The Most Out of Your Drum Loops
I’m really bad at creating beats. I prefer to use a real drummer, and when that isn’t an option, I try to use loops. When I’m sketching ideas for a song, trying to create an arrangement and such, I like to throw a few loops into the DAW and play over that. I’m really bad at using a metronome or a click track so a drum loop is a much more comfortable option for me.
After I’ve recorded the rough chords and arrangement into my audio program I like spicing up the drum tracks a little bit. Logic Pro makes this easy for me as they have all sorts of different loops and corresponding fills I can use. I usually throw some loops together to create a somewhat fluid arrangement and then create from there. I don’t really end up using those drum loops because I always want to record some actual drums instead, but during the creation process, using loops can really help.
Visit Article
Do Artists Really Need Managers Anymore?
Over time the music industry has been constantly evolving and managers have continued to play a pivotal role in the accomplishments of the artist they represent. But do artists really need managers anymore?
Visit Article
Activetuts+ — Flash, Flex & ActionScript Tutorials
Learn HTML5 With This Simple Avoider Game Tutorial
In this tutorial (the first of a series), you’ll learn the basics of HTML5 game development with JavaScript and the
<canvas>element. You don’t need to have any programming experience, or even any HTML experience (apart from this one article). Let’s get started!Visit Article
Exclusive Freebie: Tr.ace(), an Excellent AS3 Debugging Utility
We’ve got another Activetuts+ Exclusive Freebie for you! This time, Matt Stuttard (aka MSFX) is offering you his brand new debugging utility, Tr.ace(), which adds some very useful extra features to Flash’s
trace()function. Read on to find out more, and to download your copy.Visit Article
An Introduction to FlashPunk: The Basics
Learn the basics of how FlashPunk works – an amazing library to save you time and help you create the perfect game!
Visit Article
Wptuts+ — WordPress Tutorials
Customizing the WordPress Dashboard For Your Clients
Have you recently started using WordPress for your client’s project and want to further impress your client with better packaging? This article will focus on packaging WordPress so that, in just few minutes after completion of a project, it will feel more unique to the client and not have the generic feel.
Visit Article
Developing BuddyPress Themes – Part 1 : Working with the BuddyPress API and Loops
Last month, we looked at the basics of BuddyPress and how you can use it to increase social networking in your projects. The response was great and many requested theming tutorials. So, in this three part series, we’ll explain some core elements of the BuddyPress API and unpack how to create a custom child theme that will survive both BuddyPress and WordPress updates.
Visit Article
Steps to Securing Your WordPress Installation
WordPress is open source which means that everyone, including hackers with a malicious intent, can scour the source code looking for holes in its security. That is why I’m going to show you some good precautionary steps to take to protect you, your WordPress and most importantly, your users.
Visit Article
Mobiletuts+ — Mobile Development Tutorials
Android Futures: Preparing For Ice Cream Sandwich
The next major version of the Android SDK, codenamed Ice Cream Sandwich, is due out within the next couple of months. While were waiting for the release, here are some quick tips to future-proof your applications.
Visit Article
Full Screen Web Apps
One of the first problems encountered when building a mobile web app from scratch is the amount of space consumed by the browser’s address bar. This tutorial will demonstrate how to reclaim the screen real estate otherwise lost to the address bar while accounting for orientation changes, content height problems, and internal document links.
Visit Article
iOS SDK: Adding a Table of Contents to an iPad Reader
This is the third installment in a series on creating an iPad PDF reader for the book The War of the Worlds. In today’s tutorial, I will demonstrate how to add a Table of Contents to the project. In doing so, I’ll cover working with plist files, layering subviews, basic UIView animations, and manually creating interface components.
Visit Article
FreelanceSwitch — News, Tutorials & Jobs for Freelancers
Top 10 Free Online Storage Apps
Cloud computing oppens new opportunities for freelancers. One of them is free online file synchronization and storage. Nowadays you can sync your PC files and manage your documents on the go. Share files with your employer or other freelancers. Make an online backup or roll back to previous file version. All these actions are possible with modern online file sharing applications.
Visit Article
5 Ways to Find Freelancing Virtual Assistants
As a freelancer, I’m not really in a position to hire someone as a full-time employee and pay all the payroll taxes and other expenses that go along with such an arrangement. Hiring someone on a contract basis, like a virtual assistant, for just those hours that I need her, is the simplest solution. From there, it becomes a matter of finding the right virtual assistant.
Visit Article
7 Sins of Website Copywriting That Send Prospects Fleeing
Remember: your website is your virtual salesperson. The design is the way that salesperson is dressed. It makes the first impression. But the copy are the words coming out of that salesperson’s mouth: that’s what will make or break the sale.
When a prospect is looking at your site, they have a question in their mind: “Do I want to hire this person?” Your copy’s job is to make sure the answer is “Yes!” as often as possible.
Visit Article
Thanks for Reading!
We love bringing you the latest and greatest tutorials each month, and would like to take this opportunity to say thanks for reading, subscribing, and offering your feedback. If you have any suggestions for tutorials, or Tuts+ in general, feel free to leave them below in the comments!
As ever, the best way to support the sites (and get your hands on superb, industry-leading tutorials) is to join our Premium program. It costs just $9 per month, and will be the best few dollars you ever spend! There’s also no risk, thanks to our 100% money-back guarantee.
Yes, the ‘F’ in FOTB stands for Flash, but Flash on the Beach is so much more than a conference solely about the Flash Platform – or even one aimed specifically at Flash Developers. It is a rollercoaster of inspiration, education and downright good fun. Here are a few of my highlights from the latest and greatest FOTB. I’d love to write about everything I went to and experienced but it would take days; come next year and you’ll see what I mean…
This was my fourth consecutive year making the tweet-filled train journey to sunny Brighton for FOTB and John Davey (organiser) sure knows how to throw an awesome conference that brings you back year after year. The lineup over the three days was crammed with award-winning designers, developers, and people that just make you go WOW. With three separate theatres hosting three awesome speakers at a time it really is a headache deciding which session to attend, but there is no doubt that whichever way you go, something will make your eyes widen, your jaw drop and your brain question reality.
Carlos Ulloa – Love the Future
I’m a huge fan of Carlos and his work and this is the third time I’ve seen him speak at FOTB and he didn’t disappoint. Following the Adobe keynote he spoke of two projects, the first of which was an iPod/iPhone/iPad application named ‘HelloFlower’ built using Unity3D.
Credit: profaniti on Flickr
HelloFlower is available free on the App Store and I seriously recommend you download and have a play since it’s a gorgeous app where you can design your own flower by manipulating the petal outlines and colours. You can then share your result in their online gallery or on Facebook etc.
He then went on to mesmerize the entire theatre with a yet-to-be-released interactive experience titled ‘Lights’ for the UK singer/songwriter Ellie Goulding, built using WebGL. I am a huge fan of music visualization and this was simply awesome, particularly since it was built without the aid of a plugin. I can’t wait to see it again when released and would put money on an FWA heading their way. Keep your eyes peeled for this one!
Credit: profaniti on Flickr
To summarise the session, session sketch extraordinaire James Whiteley posted this on Twitter shortly afterwards and he hit the nail on the head:
Credit: @planetpush on Twitpic
Truly awesome.
GMUNK (Bradley G Munkowitz) – TRON GFX and FOTB Opening Titles
For me this was an amazing session getting a glimpse at how Bradley directed and was involved within the visual effects for last year’s blockbuster film, TRON: Legacy.
Credit: oyvindnordhagen on Flickr
He gave a great insight into how his ultra-cool team was constructed and how important it is to have such a thorough and detailed resource library at your disposal for any project you undertake. It’s incredible to see the original raw shot footage and then the final cut giving an idea of the blood, sweat and tears that goes into post production for those several seconds of film. You can see the final clips here.
Bradley also produced the titles for this years FOTB which he also briefly went into the making off. Have a watch below and then checkout the credits list – he called in a life’s worth of favours to make this and when it came on before the keynote we were all rather blown away.
Seb Lee-Delisle – Pixels for the People
This is the fifth time I’ve seen Seb speak and he always puts on an awesome show that’s full of interaction with the audience and this session was no exception. Using the audience’s phones, Seb pushed waves of colour across the room simply by having us all connect to a webpage within the browser. We then played Nyan Cat and the guy sat next to me won with a ridiculously fast reflex time! This was a really cool demo of what I’m sure will be an awesome installation somewhere in the future!
You can read more about the process here on Seb’s blog. Long live Seb!
Cyriak – Destroying My Laptop With AfterEffects
I remember seeing Cyriak a few years ago at FOTB and found his work highly entertaining as well as technically very impressive. A piece I found particularly fascinating was a music video constructed with only a few seconds’ footage of a street somewhere in the US.
After demoing several other rather entertaining animations – some more serious than others – he started working on a piece live in front of us, sharing an insight into how his workflow and wild imagination piece together these crazy concoctions. Awesome.
Jared Ficklin – Visions From the Man Cave
I love this guy. Having seen him make a music visualizer hooked up to a modified BBQ a couple of years ago I knew we’d be in for a treat this time around. Pushing visualisation into the physical domain there was fire, smoke and moustache history from the man cave. Such an entertainer!
Credit: oyvindnordhagen on Flickr
I’m already buzzing about next year’s event which looks to be titled slightly differently to reflect the fact that the conference is not all about Flash; however, I’m sure John won’t let us down, whatever happens.
Hope to see you there.