It can be tricky to sit down and practise new coding techniques, so here’s a fun exercise to encourage you to play with collision detection and reaction, as covered by Kah Shiu.
The...
New versions of the Adobe AIR SDK are often released between Flash Professional release cycles, using this tutorial, you’ll be able to always use the latest Adobe AIR version in your IDE. This...
Two years ago we started a little side project to review and roundup apps. Being bloggers, a kick-ass WordPress setup was the natural way to go. My little brother threw in a great idea for a name, and we lucked out when a super talented blogger named David Appleyard showed up offering to run the project. Two years on and AppStorm has become a little powerhouse here at Envato, for Mac apps, Web apps, iPhone and iPad apps, and starting today, Windows and Android apps.
As an entrepreneur it’s really rewarding to watch our sites grow, and while I still get excited watching Tuts unfold or the marketplaces bloom, it’s the little sites that are the coolest for me. I think it’s because with the little sites it’s often not certain whether they will make it or not. That makes it all the more rewarding when they kick butt and take names.
So it’s with no small excitement that I get to announce that we’re adding two more AppStorm’s to the network in the new year for Android and Windows. And to whet your appetite David and his team have put together a great roundup of awesome apps for both.
Windows.AppStorm
With version 7 restoring some lost Windows pride, it’s time PC users had a place to find awesome apps from both small indie developers and the big powerhouses. Plus I’ve been hearing really good things about the new Windows Mobile, so you can expect to get a dose of non-desktop apps too! To kick things off we have:
Be sure to stop in and subscribe to our RSS feed, follow the site on Twitter or fan it on Facebook for updates and the official launch next year! Visit Site
Android.AppStorm
Lately Android has been appearing on all sorts of devices and with a few different app stores and lots of killer devs making apps for Google’s open source platform, you need a trusted place to get the low down on Android Apps. So head over and check out:
Be sure to stop in and subscribe to our RSS feed, follow the site on Twitter or fan it on Facebook for updates and the official launch next year! Visit Site
iPhone.AppStorm
If you’re more of an iOS person then you’ll find a *ton* of fantastic roundups and reviews as well as news and opinion on your favourite platform at iPhone.AppStorm. Editor Joshua Johnson leads a crack squad of bloggers who’ve published some real crowd favourites like:
Stop in, hit subscribe, follow us on Twitter or on Facebook! Visit Site
Web.AppStorm
Even if the Chrome Web Store wasn’t about to launch, and even if HTML5 wasn’t the buzzword of the hour, you know web apps would still be hot. Whether it’s Basecamp or Grooveshark, Quake Online or Tumblr, if it’s web, it’s going to be on Web.AppStorm. Join Jarel and his crew as they pump out great posts like:
Stop in, hit subscribe, follow us on Twitter or on Facebook! Visit Site
Mac.AppStorm
The blog that started it all is now the leading Mac apps blog and has reviewed hundreds of amazing apps from ones you know to ones you wish you’d always known. David’s still kickin’ it here with his team of faithful Macolytes and you’ll find everything you could ever want for your Mac written up, including:
Stop in, hit subscribe, follow us on Twitter or on Facebook! Visit Site
I can’t wait for the new year when we’ll get to really kick off the two new blogs in full swing. Until then, enjoy the teaser posts, and thanks for putting up with me interrupting your normal schedule to pimp our awesome app blogs!!
The Lock Screen is a part of an operating system, mostly used in mobile devices, that prevents accidental input. This Quick Tip will show you how to simulate an Android Lock Screen with ActionScript. Let’s get going!
Final Result Preview
Let’s take a look at the final result we will be working towards:
This is a very simple version of the Android pattern-lock screen. Drag your mouse along the dots in the path indicated by the semi-transparent white lines in order to “unlock” the SWF. Naturally, the white lines are only there for demonstration purposes!
Step 1: Brief Overview
We’ll make use of Mouse Events and Arrays to store and compare the user input and the correct pattern. A new Screen will be shown when the correct pattern is entered.
Step 2: Set Up Your Flash File
Launch Flash and create a new Flash Document, set the stage size to 320x480px and the frame rate to 24fps.
Step 3: Interface
This is the interface we’ll be using, the white dots in the image are MovieClips named from left to right one, two, three… and so on. Semi-transparent white lines are used to indicate the correct password (you may want to remove this for real usage).
Step 4: ActionScript
Create a new ActionScript Class (Cmd+N), save the file as Main.as and write the following lines, please read the comments in the code to fully understand the class behavior.
Change the values in the pass array in order to change the unlocking pattern.
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.Strong;
public class Main extends Sprite
{
private var dots:Array = []; // Stores the in stage movieclips
private var pattern:Array = []; //The pattern entered by the user
private var pass:Array = [1,2,3,6,9,8,5]; //The correct pattern to proceed
public function Main():void
{
dots = [one,two,three,four,five,six,seven,eight,nine]; //add the clips in stage
addListeners();
}
private function addListeners():void //adds the listeners to each dot
{
var dotsLength:int = dots.length;
for (var i:int = 0; i < dotsLength; i++)
{
dots[i].addEventListener(MouseEvent.MOUSE_DOWN, initiatePattern);
dots[i].addEventListener(MouseEvent.MOUSE_UP, stopPattern);
}
}
/* Adds a mouse over listener and uses it to add the number of the dot to the pattern */
private function initiatePattern(e:MouseEvent):void
{
var dotsLength:int = dots.length;
for (var i:int = 0; i < dotsLength; i++)
{
dots[i].addEventListener(MouseEvent.MOUSE_OVER, addPattern);
}
pattern.push(dots.indexOf(e.target) + 1); //adds the array index number of the clip plus one, because arrays are 0 based
}
private function addPattern(e:MouseEvent):void
{
pattern.push(dots.indexOf(e.target) + 1); //adds the pattern on mouse over
}
private function stopPattern(e:MouseEvent):void //stops storing the pattern on mouse up
{
var dotsLength:int = dots.length;
for (var i:int = 0; i < dotsLength; i++)
{
dots[i].removeEventListener(MouseEvent.MOUSE_OVER, addPattern);
}
checkPattern();
}
private function checkPattern():void //compares the patterns
{
var pLength:int = pass.length;
var correct:int = 0;
for (var i:int = 0; i < pLength; i++) //compares each number entered in the user array to the pass array
{
if (pass[i] == pattern[i])
{
correct++;
}
}
if (correct == pLength) //if the arrays match
{
var sView:SecondView = new SecondView(); //add a new view
addChild(sView);
var tween:Tween = new Tween(sView,"x",Strong.easeOut,320,0,0.8,true);
}
pattern = []; //clears the user array
}
}
}
Step 5: Document Class
Remember to add the class name to the Class field in the Publish section of the Properties panel.
Conclusion
You’ve created a useful Lock Screen for your applications or even a website. You can adapt the project to meet your needs or use this technique to build your custom LockScreen. How about using the graphics object of a Sprite to draw lines that follow your mouse’s path?
I hope you liked this tutorial, thank you for reading!
Editor’s Note: Can’t get enough of Android? Check out the latest Envato™ site: Android.AppStorm.net!
Hey there and welcome to "Flash Video Training Source", a resource for anybody interested in learning more about Adobe's great tool. We feature educational videos, which will help you master Adobe Flash and help you get to know all of its features. We at "Flash Video Training Source" believe that video training and video... more
Why don't you follow us on Twitter and get the latest video tutorials twitted to your account. Just click on the floating twitter bar to your right!
