PushButton Engine Lesson # 1: FlashDevelop Setup

opening speech

During Flash development, it is often necessary to perform similar tasks. The development of Flash games is no exception, so I wanted to find some kind of framework or set of classes that would help me simplify and speed up the development process. Having a little studied the current "market" of game frameworks, I focused my attention on the PushButton Engine (PBE) .
')
Anyone who wants to learn PushButton Engine will be helped by 5 official lessons that describe working with PBE from the very basics (setting up the development environment) and ending with embedding graphics in your projects using the flexible functionality of PBE .

When I started learning the lessons, I immediately thought that perhaps these lessons would be interesting not only for me alone, but also for other Flash developers who would like to “improve” their lives.

Next comes the translation text of the first lesson.

PushButton Engine Lesson # 1: FlashDevelop Setup

Hi, in this tutorial you will learn how to use the PushButton Engine with FlashDevelop .

Content:
- Lesson requirements
- Configure FlashDevelop
- Creating a new project
- Library
- Sources
- Hello, World
- Overview
- Conclusion
- Files

Lesson requirements

In order to complete this lesson, you need to download and install several programs:
- Adobe Flash 10 Project Content Debugger: Download
- Adobe Flash 10 Debug Player: Download | Installation
- Adobe Flex 3 SDK: Download - To install, simply unpack the archive into the desired directory.
- FlashDevelop: Download | Installation
- PushButton Engine: Download - To install, simply unzip the archive into the desired directory.

FlashDevelop Setup

When you start FlashDevelop for the first time after installation, you will need to specify the path to the Flex SDK . In order to do this you need to go to the Tools-> Program Settings menu, in the window that opens, you will need to select AS3Context and click on it. In the list of parameters (near the end of the list), you will need to find the item Flex SDK Location (see screenshot). Here you will need to enter the path or select the desired folder in the Explorer window with the Flex SDK (the folder where you unpacked the Flex SDK archive).



Now FlashDevelop is ready to develop AS or Flex applications.

Creating a new project

Now we need to set up a project for the lesson. Click on the menu item Project-> New Project . You will have a window with various types of projects for FlashDevelop . For this lesson we need to create AS3 Projec t (select this item in the list of project types). Call it Lesson1FlashDevelop and select the desired folder. You can click OK and move on =)



Now we have to ask ourselves: “do we plan to use the PushButton Engine as it is or will we change the source code of the PushButton Engine ”.

If you plan to use PushButton Engine as it is, then skip the "Source" section and go to the "Library" section.

Translator's note: “in principle, if you are not familiar with the basics of FlashDevelop , then there’s nothing wrong with reading the Source section in any case, even if you plan to edit the sources of PushButton Engine .”

If you plan to work with the PushButton Engine source code, then skip the “Library” section and go to the “Source” section.

Translator's note: “As in the previous case, if you are not very familiar with FlashDevelop , then you will be only in favor of reading the“ Library ”section.”

Library

With our current settings, we can start developing “clean” ActionScript or Flex , to choose from. In this tutorial, we will create a “clean” ActionScript project, but nothing prevents you from creating a Flex project. To use the PushButton Engine we need to provide a link to the PBEngine.swc file in our project. So let's do it now!

Open the folder into which you unpacked the PushButton Engine . Find the Bin folder, in it you need to find the PBEngin.swc file and copy it to the lib folder inside the project created by FlashDevelop .



Next, you will need to open the FlashDevelop window, in the right part of the window you will need to switch to the Project tab, find the lib folder in this tab, and inside it the copied FBEngine.swc file, right-click on it and select Add To Library . With this action, we once-tell FlashDevelop that we want to use this .swc library in our project.

Sources

In order for our FlashDevelop project to work with the sources of PushButton Engine , you need to specify the path to the source files of PushButton Engine . Right-click on the name of your project in the Project tab, usually the name is at the very top, and select Properties. In the open window, go to the Classpath tab, in it you will need to click on the Add Classpath ... button and in the dialog box specify the path to the src folder, which is located in the folder with the unzipped PushButton Engine files.



Now we need to set several compiler settings for working with PushButton Engine . To do this, right-click on the name of your project in the Project tab, select “Properties” and go to the “Compiler Options” tab. Next, in the “Additional Compiler Options” line, add the line “--keep-as3-metadata + = TypeHint, EditorData, Embed” (without quotes) and click OK .

Hello, World

Everything is cool =) Now it’s time to write the code!

In the FlashDevelop window, click on the “Project” tab if it is not already open. The Main.as file will be located in the src folder (it is created automatically by FlashDevelop ). Click on it with the right mouse button and rename it to Lesson1FlashDevelop.as



Next, you will need to open the renamed file and delete all its text content, replacing it with:

// ...
package
{
// Flash Imports
import flash.display.Sprite;

// PushButton Engine Imports
import com.pblabs.engine.PBE;
import com.pblabs.engine.debug.Logger;

public class Lesson1FlashDevelop extends Sprite
{
public function Lesson1FlashDevelop(): void
{
PBE.startup( this );
Logger.print( this , "Hello, World!" );
}
}
}

* This source code was highlighted with Source Code Highlighter .

This code is a minimal application for the PushButton Engine . When we compile the application ( Ctrl + Enter ), the following message should appear in the Output panel:

INFO: Lesson1FlashDevelop - Hello, World!

* This source code was highlighted with Source Code Highlighter .

So let's compile the flash drive and test everything. Click on the menu item Project-> Test movie (or Cntr + Enter ) and, if we made no mistakes, we should have a message in the tab “Output” .

Overview

So, briefly list the necessary steps to create a minimal application:
1) Create a new FlashDevelop project ( Project-> New Project ).
2) As a project type, you must specify the AS3 Project .
3.a) To get started with the .swc library of PushButton Engine , you need to copy the PBEngine.swc file to the lib folder of your project. After that, you will need to right-click on the .swc file and select “Add To Library” .
3.b) To start working with the sources of PushButton Engine , you must specify the path to the src folder, inside the folder where you unzipped the PushButton Engine , as well as set the compiler settings in the FlashDevelop settings of the project.

Conclusion

Congratulations! You have just completed lesson # 1 and know how to create projects to work with the PushButton Engine .

The knowledge gained in this lesson will help you in the implementation of future lessons.

Files

You can download all the files that were used in the lesson from the link below.

The source archive of the lesson

From translator

That ended the first lesson. Hopefully this will be a good start to learning PushButton Engine . If you still have no experience with FlashDevelop , then I think it would be useful for you to read the article about creating Flash applications in FlashDevelop .

PS:

If the article is interesting, in the future I will publish translations of the other 4 basic lessons.

Links to all lessons (will be updated as lessons are laid out):

1) PushButton Engine Lesson # 1: setting up FlashDevelop
2) PushButton Engine Lesson # 2: add a simple figure
3) PushButton Engine Lesson # 3: add controls to a custom component