-
Notifications
You must be signed in to change notification settings - Fork 71
/
Copy pathLesson-01-FlashDevelop.html
158 lines (122 loc) · 8.25 KB
/
Lesson-01-FlashDevelop.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="js/pageToc.js"></script>
<script type="text/javascript" src="js/sh/scripts/shCore.js"></script>
<script type="text/javascript" src="js/sh/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="js/sh/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="js/sh/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="js/sh/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="js/sh/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="js/sh/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'js/sh/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<title>PushButton Engine Lesson #1 - Setup using FlashDevelop</title>
</head>
<body>
<h1>PushButton Engine Lesson #1 - Setup using FlashDevelop</h1>
<p>Welcome, in this lesson you will learn how to use the PushButton Engine with the FlashDevelop IDE.</p>
<div id="pageToc"></div>
<div id="contentArea">
<h2>Lesson Requirements</h2>
<p>To complete this lesson you will need to download and install a few pieces of software.</p>
<ul>
<li>Adobe Flash 10 Project Content Debugger - <a href="http://www.adobe.com/support/flashplayer/downloads.html">Download</a> - Execute one time to have it register with your system. </li>
<li>Adobe Flash 10 Debug Player - <a href="http://www.adobe.com/support/flashplayer/downloads.html">Download</a> - <a href="http://www.adobe.com/support/flashplayer/downloads.html">Installation</a> </li>
<li>Adobe Flex 3 SDK - <a href="http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk">Download</a> - To install just extract it to your own personal development folder.</li>
<li>FlashDevelop - <a href="http://www.flashdevelop.org/community/viewforum.php?f=11">Download</a> - <a href="http://www.flashdevelop.org/wikidocs/index.php?title=Installation">Installation</a> </li>
<li>PushButton Engine - <a href="http://pushbuttonengine.com/download/">Download</a> - To install just extract it to your own personal development folder.</li>
</ul>
<h2>Setting up FlashDevelop</h2>
<p>The first time you run FlashDevelop after installation you need to point it to the flex 3 sdk. In the menu click Tools->Program Settings.
In the list box on the left, under the plugins section click AS3Context. This brings up the properties for all ActionScript 3 development in FlashDevelop.
Under the language section look for flex sdk location. Type in or navigate to the root folder of the flex 2 sdk you downloaded and extracted earlier.</p>
<img src="images/Lesson1FlashDevelop_1.png" width="700px" />
<p>Your FlashDevelop IDE is now ready for any ActionScript or Flex development.</p>
<h2>Creating a New Project</h2>
<p>Now we need to setup a project for the lesson. Click Project->New Project in the menu.
This opens a project template window with the various types of projects for FlashDevelop.
For this lesson we are only worried about creating an AS3 Project. Name it Lesson1FlashDevelop
and check create directory for project check box. Click ok to continue.</p>
<img src="images/Lesson1FlashDevelop_2.png" width="700px" />
<p>You should now have FlashDevelop setup with a new project ready to go.</p>
<p>We now have a question to ask ourselves. "Will we be using the PushButton Engine as is or do we plan on making modifications to the source?" <br />
If you plan to use the PushButton Engine as is, skip to the <a href="#library">library</a> section. <br />
If you plan on making modifications to the PushButton Engine skip to the <a href="#source">source</a> section and skip the library section.<br />
</p>
<h2 id="library">Library</h2>
<p>With our current setup we can do pure ActionScript or Flex development. For this lesson we created a pure ActionScript project
but everything applies to a Flex project as well. To use the PushButton Engine we need to link the PBEngine.swc to our project.
Let's do that now.</p>
<p>Open Windows Explorer and navigate to where you extracted the PushButton Engine. In PushButton Engine\Bin you should have PBEngine.swc, right click and copy it.</p>
<img src="images/Lesson1FlashDevelop_3.png" width="700px" />
<p>In FlashDevelop, click the project tab on the right side. Locate the lib folder and paste PBEngine.swc into it. Your lib folder should now contain PBEngine.swc.</p>
<img src="images/Lesson1FlashDevelop_4.png" width="700px" />
<p>Right click the PBEngine.swc and click add to library. This tells FlashDevelop that we want to link this library with our project</p>
<img src="images/Lesson1FlashDevelop_5.png" width="700px" />
<h2 id="source">Source</h2>
<p>To setup using the source we need to set a class path to the PushButton Engine source code.<br />
Right click Lesson1FlashDevelop in the project list and select properties and then click the classpaths tab.<br />
Click the add classpath button and navigate to the folder you extracted the PushButton Engine to and click the src folder.
</p>
<img src="images/Lesson1FlashDevelop_9.png" width="700px" />
<p>Now we need to set a few compiler options to compile the PushButton Engine.<br />
Right click Lesson1FlashDevelop in the project list and select properties and then click the compiler options tab.<br />
The first option on the list is additional compiler options. Add --keep-as3-metadata+=TypeHint,EditorData,Embed and click ok.
</p>
<img src="images/Lesson1FlashDevelop_10.png" width="700px" />
<h2>Hello, World!</h2>
<p>That's right, it's time for some code!</p>
<p>In FlashDevelop click the projects tab if it's not already selected. In the src folder you will have Main.as. Go ahead and right click
and rename Main.as to Lesson1FlashDevelop.as.</p>
<img src="images/Lesson1FlashDevelop_6.png" width="700px" />
</p>Double click Lesson1FlashDevelop.as to open it and delete everything inside replacing it with the code below.</p>
<pre class="brush: js">
// ...
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!");
}
}
}
// ...
</pre>
<p>The above code is basically the minimal application for the PushButton Engine. When executed it prints the below message in the FlashDevelop output window.</p>
<pre class="brush: plain">
INFO: Lesson1FlashDevelop - Hello, World!
</pre>
<p>Let's Build the project and test it now. Click Project->Test Movie. This will build our application
and if we didn't make any mistakes a window should pop up and you should be greeted with a message in the output window.</p>
<img src="images/Lesson1FlashDevelop_8.png" width="700px" />
<h2>Review</h2>
<p>To summarize the steps of using the PushButtonEngine with the FlashDevelop IDE.</p>
<ul>
<li>Create a new project - Project->New Project</li>
<li>ActionScript 3 section - select AS3 project or Flex 3 project</li>
<li>PushButton Engine Library - copy PBEngine.swc to the project lib folder.</li>
<li>Activate the Library - right click PBEngine.swc and add to library.</li>
</ul>
<p></p>
<h2>Conclusion</h2>
<p>Congratulations! You just completed lesson #1, creating a project and loading the PushButton Engine library.</p>
<p>This can be used as a base for lesson #2 or any future projects of your own.</p>
<p>You can download the completed project source files for this project below.</p>
<ul>
<li><a href="downloads/Lesson1FlashDevelop.zip">Lesson1FlashDevelop.zip</a> </li>
</ul>
</div>
</body>
</html>