It’s kinda crazy to think, but our little internet startup, Envato, has been on the air now for five years. We started back in 2006 as four very enthusiastic and totally green entrepreneurs with a shoestring budget and a love of the web. Fast forward five years and while we’re hopefully a little less green, we’re still incredibly passionate about Education, Marketplaces and the web! It’s been an amazing time and we’d like to share a look inside our Melbourne HQ offices, some stats about Envato and a big thank you to the community.
Behind the Scenes
With such a big milestone, we thought it might be good to give an inside glimpse into our Melbourne HQ offices and some of the people that work here. So we invited a Melbourne film crew called Compulsive to come in and shoot a 3 minute video about Envato. I hope you enjoy it!
As you may know, we also have a large remote team working around the globe on our sites. Next year we’re hoping to gather all of Envato and as much of the community as possible for an epic meetup, but in the meantime if you’re curious to see who’s who, you can check out this little video from our remote staff meetup last year in Chicago.
Some Stats
Looking back at five years of exciting and sometimes exhausting Envato work, I put together some stats about Envato from our time online so far. In five years we have:
Published over 10,000 tutorials and articles helping people learn everything from Photoshop to Freelancing
Launched 9 marketplaces, 11 tutorial sites, 9 blogs, 18 books, 7 bundles, 4 Regular Podcasts, and more social media accounts than you can poke a stick at
Accumulated close to 1 million RSS subscribers and twitter followers
Signed up almost 1 million marketplace members, 90,000 Creattica members, 50,000 FreelanceSwitch members, and 40,000 Tuts+ Premium subscribers
Served up well over 1.5 billion pageviews across all our sites since inception
Holy toledo batman!!
Thank You
I can’t say thank you enough to all of you for supporting Envato all these years. Whether you are long-time user of the Marketplaces, Tuts+, AppStorm, FreelanceSwitch or Creattica, or just a casual visitor, we’re really proud that you stop in and use our sites. If you’re one of the thousands of contributors, authors, writers, and subscribers, we’re honored and humbled that you have helped us build this company and filled these sites with such amazing content. And regardless of who you are, we hope that we can continue to provide value and service to you for many more years to come!
On behalf of the whole team, thank you all! Collis CEO, Chief Tea Drinker and Web Designer Who Doesn’t Get to Design Anymore Envato
In this tutorial, available exclusively to Tuts+ Premium members, you’ll learn to build a card-matching game, in Flash, that uses Flickr as the source of its images. The first part of this two-part series will get you started, leaving you with a basic game structure that you can improve on later.
Become a Premium member to follow this awesome tutorial, as well as hundreds of other advanced tutorials and screencasts.
Preview
Here’s what you’ll create in this part of the tutorial:
In the second part of the series, you’ll add multiple levels and improve the interface, ending up with this:
What You’ll Learn
Naturally, you’ll learn how to search for and retrieve images from Flickr, so that you can use them in other apps and games. But since this tutorial explains how to build a Pairs game from scratch, you’ll also learn about game logic (such as how to detect a match) and interface tweaks (such as the way the cards “flip” over when clicked).
We run a Premium membership system which costs $9 a month (or $22 for 3 months!) 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 and Photo 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!
Flash Professional isn’t the only tool you can use for making Flash apps and games. Earlier in the year we looked at FlashDevelop; now, we’ll take a look at FDT 4, a powerful IDE designed specifically for ActionScript, MXML and haXe development. Read on to find out what it can offer you!
FDT’s Great Timesaving Features
The difference between FDT and the Flash Professional code editor or other tools is that it offers tons of timesaving features that let you concentrate on the logic of your code, so you don’t have to bother with syntax problems like a missing closing bracket or a misspelled function call. Like a spell checker, FDT gives you instant feedback about your code and identifies problems before you even compile the project. Before we install and start working with FDT I’d like to give you a taste of some of its most exciting features.
Code Completion
The most important feature of FDT, that you will probably use most often, is code completion, also called auto completion. You will never have to type in the whole name of a variable or function again. Simply start writing and hit CTRL + Space to bring up the list of proposals. You can change the auto completion behavior to be triggered on every keystroke (like FlashDevelop does) by going to Preferences > FDT > Editor > Code Assist and turning on “Every Key”.
Continue typing to narrow down the list of choices. Use the mouse to select a proposal from the list or use the “Up” and “Down” arrow keys followed by pressing “Return”. You can also use “camel case auto completion” — for example, someMovieClip.gap will offer the function gotoAndPlay().
Quick Fixes
My favorite feature of FDT is using its Quick Fix functionality. FDT will not only immediately tell you what is wrong in your code, but also gives you the option to fix it automatically by inserting the missing code. If, for example, you call a function that is not yet available, FDT will add an error marker on the left of that line. The yellow light bulb indicates, that there is a Quick Fix available for this problem. Hit CMD/CTRL + 1 and check out the proposal in the Quick Fix popup:
FDT offers you to create the function sayHello(). Hit “Return” and FDT will automatically insert the function. Use the “Tab” key to cycle through the code statements surrounded by the blue rectangles and change them. Again hit “Return” to finish the Quick Fix procedure.
This feature is not only great for fixing problems with just a few keystrokes, but will also change your coding workflow. You will start forcing problems to make use of a Quick Fix!
Organize Imports
Using the shortcut CMD/CTRL + SHIFT + O or choosing Source > Organize Imports from the menu will add all missing import statements at the top of the class. You don’t have to add any imports manually any more. The nicest thing about FDT’s Organize Imports feature is that it will also remove unused imports automatically.
Color Chooser
I’d like to have a purple label in my Flex app, but what hex color code does purple have? Without having to switch to Flash Pro or Photoshop you can simply use FDT’s color picker to choose a color. Put your cursor over the hex code and activate Quick Fix (CMD/CTRL + 1). Choose “Select color” and use the color picker.
Code Templates
As a developer you find yourself typing in recurring code snippets over and over again, like a “for loop” for example. In FDT we can simply use code templates for that. Type in fori, use auto completion (CTRL + SPACE) and select “fori – iterate over array”. This will insert the code snippet for you. Make changes by using the “Tab” key and press “Return” to finish.
To browse through the code templates that are shipped with FDT go to Preferences > FDT Editor > Templates. This is the place where you can also create your own templates! Just take a look at the other templates and you will quickly learn how to create them and use the powerful variables to make them even smarter.
Refactoring
FDT has two great refactoring features: Move and Rename. If you want to move a class to another package, you normally need to change the import statements in all classes that use it. Move refactoring in FDT takes care of this automatically. Simply drag and drop the class from one package to another in the Flash Explorer and FDT will take care of the rest.
If you want to rename a class, function or variable, simply use the Rename refactoring feature (ALT + SHIFT + R). FDT will change the name everywhere in the whole project.
Code Navigation Features
Navigating through your source code is especially important in large projects. Here are some of the most important shortcuts to navigate:
F2 – Show Class in Flash Explorer
F3 – Open declaration
Alt + (CMD) + Left Key – Jump back in History
CMD/CTRL + T – Quick Type Hierarchy
CMD/CTRL + O – Quick Outline
CMD/CTRL + R – Search for References
The FDT Community
FDT started out as the first professional ActionScript 2 editor in 2004. There’s a huge and very active community around FDT, that contributes tutorials, blogs about using the new features that are constantly added, helps out on Twitter and posts feature requests and bug reports. The FDT development team gives back this love to the community by listening to their requests and integrating community tools like Joa Ebert’s Apparat or haXe.
To become part of the FDT community check out the Blog and follow FDT on Twitter or Facebook.
Installing FDT 4
Installing FDT is straight forward. Follow these 3 steps to set up your FDT development environment:
Download and install FDT
Download Flex SDKs
Install Debug Flash Player
To install FDT simply go to http://fdt.powerflasher.com and navigate to the download page. Select one of the installers for Windows, Mac or Linux. If you want to try FDT and don’t have a license yet, fill out the form above to register for a 30 day trial license. After downloading follow the instructions to complete the installation.
FDT is distributed without any Flex SDK. The Flex SDK is basically a folder that contains compilers, core classes and other tools to compile your Action Script and Flex code to a SWF. You can develop both pure Action Script projects as well as Flex projects using Adobe’s Flex SDK. Go to Adobe Open Source and download the SDKs you want to use in FDT. After downloading and unzipping the SDKs go to FDT > Preferences > Installed SDKs and click the “Add” button to add a Flex SDK.
In order to debug your Flash applications using FDT’s visual debugger, you need to make sure that the Debug Flash Player is installed on your system. Go to Adobe Flash Player Download:
Mac: Download and install Flash Player Plugin content debugger
Windows: Download and install Flash Player Active X control content debugger as well as Flash Player Plugin content debugger
Congratulations, you’ve successfully set up your FDT development environment and can now start coding!
The FDT Workbench
Click to enlarge
Toolbar (top): Find the most important actions like creating new files or compiling your application in the toolbar
Flash Explorer (left): This is where you will organize your projects, files and folders
Outline (left): A list of properties and functions of the currently opened class
Editor (middle): If you open a file, it will be displayed in the editor area
Problems (bottom): A list of problems and warnings in your source code
The panels described above are called “Views” in FDT. You can close views, minimize them or rearrange them by simply dragging a view to a different location. If you would like to reset the views to their default positions go to Window > Reset Perspective. To open additional views go to Window > Show View and select the one you are missing. Views are grouped into so called “Perspectives”.
Choose Your Workflow
FDT can be integrated into every Flash/Flex development workflow, whether you want to use FDT in combination with Flash Pro, use FDT without any other tool, or use FDT as a code editor for Flash Pro. This chapter describes those three popular workflows which are most commonly used by Flash developers.
Workflow 1: FDT Only
In this workflow we will use FDT as a standalone tool to develop Flash/Flex projects. You don’t even have to have Flash Pro or the Adobe Creative Sweet installed. We will just use FDT to write code and compile it to a SWF.
Creating a New Project
Start by right clicking somewhere in the Flash Explorer and select New > New Flash Project. The “Flash Project Wizard” appears.
This wizard let’s you choose from a list of project templates for web, mobile and desktop. We will create a pure Action Script project at this time. Type in the project name “HelloFDT”, select Web > AS3 and click on “Finish”.
In the Flash Explorer on the left hand side we now see the created project with some files and folders. Double-click the Main.as class in the src folder to open it.
FDT stores some project specific settings in the .settings folder and in the .project file. Because you shouldn’t touch those files let’s hide them by clicking on the small down arrow in the top right corner of the Flash Explorer and selecting “Filters”. Now check the “.*” filter and hit “OK”. The .settings folder and the .project file should now be hidden.
Testing and Compiling the Project
Let’s add some lines of code before we compile our project:
package
{
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main()
{
graphics.beginFill(0x0000ff);
graphics.drawCircle(100, 100, 40);
trace("Hello FDT");
}
}
}
To compile and debug our simple application, right-click the Main.as class in the Flash Explorer and select Debug As > FDT SWF Application. After the compilation finishes successfully, FDT will launch your application using the “External SWF Viewer”. Take a look at the “Console”; you should also see the “Hello FDT” trace statement there. (If you don’t see it, make sure you have the Debug Flash Player installed.)
Embedding Assets
In order to embed an asset like a JPEG image into our SWF we can use the [Embed] Metadata Tag. First of all create a new package named assets in the src folder and drag an image from the Finder/Explorer to the assets package.
Now we can use the following lines of code to embed the JPEG into our SWF and display it on the stage:
package
{
import flash.display.Bitmap;
import flash.display.Sprite;
public class Main extends Sprite
{
[Embed(source="assets/image.jpeg")]
private var ActiveTutsLogo : Class;
public function Main()
{
var logo:Bitmap = new ActiveTutsLogo();
addChild(logo);
}
}
}
We can now use the Debug or Release button in the Toolbar on the top to launch our application. They will always launch the previously launched application. Debugging your application using breakpoints and trace() statements only works if you choose Debug.
After compilation has finished you should see your SWF with the embedded image. Congratulations!
Workflow 2: FDT with Flash Pro Assets
This workflow is ideal if you are working together with a designer, who creates graphics and animations in Flash Pro, while you are adding the logic using ActionScript. In this workflow, we will create an animated MovieClip in Flash Pro and control it using ActionScript in FDT. These are the steps:
Setup and prepare the project in FDT
Create a new FLA file and an animated MovieClip in Flash Pro
Export the FLA as SWC library file
Instantiate and control the MovieClip using AS3 in FDT
Setting Up the Project in FDT
Let’s get started! First of all we will create a new Flash project in FDT. To do so, please follow the exact same instructions as described in Workflow 1: FDT Only > Creating a New Project. As project name I will use “FDTwithFlashPro” this time.
Creating the FLA and a MovieClip
In this example I will create a very simple key frame animation with a bouncing ball. Launch Flash Pro and create a new Flash File (ActionScript 3). Select Insert > New Symbol from the menu. Enter the name BouncingBall and check the “Export for ActionScript” check box. If you don’t see the check box, click on the “Advanced” button.
Don’t forget to check the “Export for ActionScript” check box, otherwise we will not be able to use this asset later on. Next up, I’ll create a simple key frame animation to let the ball bounce. It should look like this. (Basically you can create whatever animation you like in this step; it doesn’t have to be a bouncing ball).
Now it’s time to save the FLA. Go to File > Save As and select the libs folder from the previously created FDT project. Choose Assets.fla as filename and hit “Save”. To use the animated ball MovieClip within our FDT code project, we need to export the Flash Pro Project as a SWC library file. Let’s do this by going to File > Publish Settings and find the “Export SWC” checkbox in the publish dialog. Click “Publish” and Flash Pro will generate the SWC file for you.
Using the MovieClip in FDT
Now let’s switch back to FDT. Our project should look like this:
Notice that if you expand the Assets.swc library, you’ll see the BouncingBall MovieClip class included in that library. This is a great feature of FDT, which lets you inspect a SWC library to see which asset classes it contains.
The final step of this workflow is to instantiate the bouncing ball animation and add it to the stage. Open the Main.as class and insert the following lines of code:
package
{
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main()
{
var bouncingBall:BouncingBall = new BouncingBall();
bouncingBall.y = 200;
addChild(bouncingBall);
}
}}
That’s it! Hit the “Run” button and you should see the bouncing ball on the stage.
Workflow 3: FDT as Flash Pro’s Code Editor
The last workflow I want to show you is using FDT as a code editor for a Flash Pro project. You will write code in FDT but compile your project using Flash Pro. FDT has a great feature to automatically switch to Flash Pro and start compilation with just one click. We’ll have a look at this little timesaver as well.
Setting Up the Project in FDT
Again, we will start by creating the project in FDT. Simply go to New > New Flash Project and select Web > Flash Professional from the list of project templates. Set the project name to “FDTforFlashPro” and click “Finish”
FDT needs to know the location of your Flash Pro installation. Go to Preferences > FDT > Tools > Flash and set the path to your Flash Pro installation by clicking the “Browse” button. Select your copy of Flash Pro and close the preferences window. Next open the Main.as class and add a trace statement to the constructor like trace("Hello Flash Pro"). Now double click the FDTforFlashPro.fla file from the Flash Explorer to open it. Notice, that the Main class is already set in the Properties panel in Flash Pro. You can click on the pencil button to verify that the class really exists.
The Main class is in place, so we can now launch the project in Flash Pro by selecting Debug > Debug Movie from the menu or by using the shortcut. In the output panel of Flash Pro you should now see the trace output:
Great, now we can switch back and forth between FDT and Flash Pro. Write some lines of code in FDT, add classes and logic and switch to Flash Pro to create the assets and debug the project.
Launching From Within FDT
To enhance this workflow, there’s a great feature in FDT, which let’s you switch to Flash Pro by just hitting the “Run” button from within FDT to compile and debug the project. In FDT select Run > Run Configurations from the menu.
In the Run Configurations panel double click the “FDT Flash IDE” entry from the menu on the left. This will create a new empty configuration. Now simply set the project and the FLA file using the “Browse” buttons and select TestMovie. That’s it, hitting the “Run” button will switch to Flash Pro and will launch the project! From now on, you can simply hit the “Run” button in the FDT menu bar to launch your project in Flash Pro.
Next Steps
If you want to learn more about FDT and it’s features visit the FDT Docs page. You will find a great number of tutorials, videos, shortcuts, project templates and a lot more there. Happy coding!
It’s time for another excellent Active Premium tutorial exclusively available to Premium members. At the end of the second part of this series, we had just about got the portals to hide part of the Roly character that was inside them. In this part, we’ll make the portals actually teleport the character.
Preview
Let’s take a look at the final result we will be working towards, across the whole of this multi-part tutorial:
Please view the full post to see the Unity content.
Hit the number keys 1-8 to try different levels. The aim is to get the little yellow Roly character to the designated end point, using portal mechanics. The demo shows off a few of the different mechanics we’ll introduce.
Click here to see how far we’ll get by the end of this part.
Warning: this tutorial is huge! It’s as long as the first and second parts of the series combined.
We run a Premium membership system which costs $9 a month (or $22 for 3 months!) 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 and Photo 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!
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!
