Making The Game – Teil 12: Die Grafikbibliothek


Since graphical objects, such as the buttons on the menus and background images, are used multiple times and in different areas in the program a central location that provides the graphics is essential. The so-called library can be created in Flash decoupled from the actual project and edited independently of the program.
Libraries in Flash are marked ba the extension *.swc. These also include, in addition to graphics, functions which are already compiled. By providing compiled objects the calculation.

Elements of the outsourced graphics library
Elements of the outsourced graphics library

In practice the separation of code and graphical elements are used to that graphic designers and programmers can work simultaneously on a project. Once the graphics are changed they can be replaced by providing a new version of the library, without changing the program code. But even in small projects libraries are meaningful.
How to create a library in flash?
Libraries are created like normal projects in Flash. After all the necessary graphics were created as usual, it should be checked that the option “Export for ActionScript” is enabled. Through the “Export for ActionScript”-option objects can be dynamically created.
After all the components has been created it has to be published as a library. This setting is made in the “Publish Settings” (File → Publish Settings). Check the setting “SWC” (see illustration). The generated *.swc-file includes all graphics and functions.

Publish settings in Flash
Publish settings in Flash

How to use a library in flash?

Menu 'Advanced ActionScript 3.0 Settings'
Menu 'Advanced ActionScript 3.0 Settings'

To use the created objects from a library in your code, the library has to be included in the current project. First you have to open the “Advanced ActionScript 3.0 Settings” (→ File ActionScript settings). Click the “+” icon to add the library. The number of libraries used is not limited.
The objects in the library are from this point on accessible like local elements (see code), but can, without the actual library project, not be edited anymore.

  1.  var langDE:MovieClip = new germanFlag350();
  2. = “langDE”;
  3.  langDE.x = (stage.stageWidth/2) 360 100;
  4.  langDE.y = (stage.stageHeight290)/2;
  5.  addChild(langDE);
  6.  if(basicUseTouch){  
  7.       langDE.addEventListener(TouchEvent.TOUCH_TAP, selectLang_Touch);
  8.  } else {    
  9.       langDE.addEventListener(MouseEvent.CLICK, selectLang_Mouse);
  10.  }

In this code sample the deposited, animated German flag from the library is called and added on the stage. The variable ‘basicUseTouch’ differentiates beween mouse and touch listeners.
The library used in this project was only used to collect the graphics of the game in a central square. In addition, it contains the font “Helvetica” which is manly used in the game.


Upcoming blog entries
Making The Game – Teil 13: The Sound Management
Making The Game – Teil 14: Knowledge base and question selection / Working with XML
Making The Game – Part 15: Game stages
Making The Game – Part 16: Mini-Games
Making The Game – Part 17: Evaluation and deployment of the application
Making The Game – Part 18: Concept for school use and outlook


Leave a Reply