Flash using ActionScript libraries tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
m (Text replacement - "<pageby nominor="false" comments="false"/>" to "<!-- <pageby nominor="false" comments="false"/> -->")
 
(31 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{incomplete}}
{{incomplete}}
<pageby nominor="false" comments="false"/>
<!-- <pageby nominor="false" comments="false"/> -->
 
{{Flash tutorial|CS3, CS4, CS5, AS3|intermediate|}}
This entry is part of the [[Flash tutorials]].


== Introduction ==
== Introduction ==
Line 31: Line 30:
* Special purpose animation libraries like the [http://flintparticles.org/ FLiNT particle system] that allows you to create stuff like fireworks and snowflakes.
* Special purpose animation libraries like the [http://flintparticles.org/ FLiNT particle system] that allows you to create stuff like fireworks and snowflakes.
* Tweening libraries like [http://blog.greensock.com/tweenliteas3 TweenLite] that allow you to define sophisticated animations with a few method calls (instead of spending hours of drawing).
* Tweening libraries like [http://blog.greensock.com/tweenliteas3 TweenLite] that allow you to define sophisticated animations with a few method calls (instead of spending hours of drawing).
* Physics engines like [http://box2dflash.sourceforge.net/ Box2DFlashAS3]


== The FliNT particle system ==
Flash libraries can come in several forms (see [[Flash formats and objects overview]]). In this short tutorial we will deal with
*.swc - compiled clips that include ActionScript code and other stuff
*.fla - Flash CS3/CS4 source code files
*.as - Action script code.


{{quotation|Flint is an open-source project to create a versatile particle system in ActionScript 3. The aim is to create a system that handles the common functionality for all particle systems, has methods for common particle behaviour, and lets developers extend it easily with their own custom behaviours without needing to touch the core code. ([http://flintparticles.org/about])}}. That may sound very technical and it actually is. Such libraries are meant primarily for "real" ActionScript programmers. However, Flash designers with a little bit of ActionScript programming know-how can also use such code. In particular, they simply may slightly adapt the excellent examples that are for download.
In this tutorial, we just will a short overview. If want to go through an example, either read the [[FliNT particle system]] introductory tutorial. FLiNT is a very useful library to create very cool animations with particles flying around or play around with the easier to use [[AS3 tweening platform]].


Flint is developed by [http://bigroom.co.uk/ Richard Lord] and is released under the free open source [http://www.opensource.org/licenses/mit-license.php MIT licence].
List of libraries that are part of these Flash tutorials:
* [[FliNT particle system]]
* [[Flash Papervision3D tutorial]]  
* [[AS3 tweening platform]]


Firstly have a [http://flintparticles.org/examples look] at what this particle system can do. Cool isn't it ?
Others:
* see [[Flash_and_AS3_links#Reusable_AS_components_and_libraries 6.2|Reusable AS components and libraries]]


=== Let's snow ===
== Installing and using libraries overview ==


You might want snowflakes. Creating a nice snowing animation with '''lots''' of snowflakes by drawings would be very tedious and programming them yourself is a bit difficult (unless you
This is a short executive overview on using ActionScript libraries
are a "real" programmer). You now have two options:
# Finding some special purpose snowflakes code on the web
#* There is for example the [http://www.oman3d.com/tutorials/flash/video/snowflakes.php Creating Falling Snowflakes in Flash Using ActionScript 2] video tutorial. We also have a flying kites example in the [[Flash embedded movie clip tutorial]] that you could repurpose.
# Using a more general purpose library that will create the whole animation (including the snowflakes), something that you will learn now. Basically we just copy/paste the code from [http://flintparticles.org/tutorials/snowfall Introducing Flint with a snow effect]. Or more precisely we took the example code from the downloaded [http://flint-particle-system.googlecode.com/files/Flint_2_0_0_b_examples.zip Flint_2_0_0_b_examples.zip] on oct 23, 2008 and made 2-3 tiny modifications.


; Step 1 - download the FliNT particle system
To use external ActionScript libraries that you downloaded and installed, Flash must locate the external ActionScript files that contain the class definition. Usually, the list of folders in which Flash searches for class definitions is called the classpath for ActionScript 2.0 and the '''source path''' for ActionScript 3.0


So, get FliNT from http://flintparticles.org/. I took:
You may set the source path either globally (for all your projects) or per *.fla file. You usually should adopt the later, even if it means some extra work.
* [http://flint-particle-system.googlecode.com/files/Flint_2_0_0_b.zip Flint_2_0_0_b.zip]
... At the present time, there may be a more recent version. E.g. a 2.0 final.


You also may download extra stuff, e.g.
'''Local source path''':
* [http://flint-particle-system.googlecode.com/files/Flint_2_0_0_b_examples.zip Flint_2_0_0_b_examples.zip]
* [http://flint-particle-system.googlecode.com/files/Flint_2_0_0_b_docs.zip Flint_2_0_0_b_docs.zip]


Dezip these three archives in a new directory.
Through ''File->Publish Settings; Flash Tab; Settings Tab;'' you can set the following ActionScript locations in Flash for a '''specific *.fla file''':
* '''Source path''': Defines the location of source ActionScript source files. Typically you would use this for libraries that you download as AS source code.
* '''Library path''': {{quotation|specifies the location of pre-compiled ActionScript code which resides in SWC files you have created. The FLA file that specifies this path loads every SWC file at the top level of this path and any other code resources that are specified within the SWC files themselves. If you use the Library path, be sure none of the compiled code in the SWC files is duplicated in uncompiled AS files in the Source path. The redundant code will slow down compilation of your SWF file.}}. Typically, you would use the library path when you use *.swc code from major ActionScript libraries like PaperVision3D or the Greensock tweening libraries.
* '''External library path''': specifies the location of SWC files that contain code used for compiler error definitions. This path can be used to load external code resources in SWC format so that the classes within them can be used at runtime. When you compile a SWF, the SWC files in the External Library path are not added to the SWF file, but the compiler verifies that they are in the locations you specified. The External Library path is most often used for runtime shared libraries. For more information about runtime shared libraries, see [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7dc7a.html working with runtime shared assets]
* Document class (also can be set in Document Property inspector). Used to associate a specific class with a document, i.e. typically used to compile an ActionScript program you write yourself.


Now since we are interested in snowflakes were are actually really lucky. There is both example code (in the example zip file) and a nice [http://flintparticles.org/tutorials/snowfall Introducing Flint with a snow effect] tutorial made by Richard Lord the author of the Flint system.
'''Local source path (alternative option)''':


; Step 2 - create a new Flash (ActionScript 3.0) file
'''Alternatively''' (not recommended):
* Instead of defining the source path: You also could copy the '''com''' directories that include source to the directory where your *.fla file sits,
* Instead of defining a library path: Copy the *.swc file to the same directory of your *.fla file '''and''' add '''.''' to the '''library path'''.


* Create a new directory for this project
'''Global source path''':
* Make sure that you really use ActionScript 3.0, else change that in the ''File->PublishSettings - Flash tab'' too.
* If you want you can the "src" sub-directory of the Flint system to the root of this new directory and rename it to something like "flint"


; Step 3 - Fix the classpath
Through ''Edit->Preferences->ActionScript 3.0 Settings'' you can set source pathes for all your projects:
* Open the ''File->Publish Settings - Flash tab''
* Source path
* Then click on the ''Settings ...'' button next to the ActionScript version. You should see something like this now:
* Library path
[[image:flash-CS3-setting-classpath.jpg|thumb|left|500px|Setting the classpath in Flash CS3]]
* External library path
<br clear="all"/>
In these ActionScript 3.0 settings, you then have to add the name of the subdirectory where the flint system sits.
* If you copied the FliNT system "src" directory to the same directory and renamed it, click on the "+" sign and e.g. type "./flint" (not tested)
* If you you didn't, then click on the "target" "Browse to Path" icon and select the "src" directory of the FliNT system (recommended since I did this)


Basically, what you have to understand at this point is that your application has to know in which directory to look for the FliNT code. The "org" subdirectory must be a direct sub-directory of the classpath directory you just defined. If you want to understand more about packages and classes you'll have to dig fairly deeply into ActionScript programming, something we will not do here ...
== Setting source pathes ==


; Step 4 - Create a frame for which you want snowfall.
Below we reproduce the detailed explanations from Adobe's [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WS3e7c64e37a1d85e1e229110db38dec34-7fa4a.html#WS08FEE6E4-2209-45d8-9101-8C60140B3533 Set the location of ActionScript files] (retrieved 17:37, 10 May 2010 (UTC)):


* Firstly you need a typical winter scene, e.g. a nice photo, such as the one that you can see in the original [http://flintparticles.org/examples/snowfall example] made by Richard Lord. A local copy of the swf is [http://tecfa.unige.ch/guides/flash/ex/flint/Snowfall.html here]).
=== Set the source path for ActionScript 3.0 ===


Personally, I'd like to have some snow in my Office as you can see in [http://tecfa.unige.ch/guides/flash/ex/flint/flint-snowflakes.html our own version]. So firstly we need to import a picture. I made the orginal much darker with higher contrasts in order to be able to see the snowflakes. It may be too dark on your screen, but on my DELL M1730 laptop it looks just fine.
'''To set the document-level source path:'''


* This picture is now in frame one of layer 1. Rename the layer to picture.
# Select File -> Publish Settings, and click Flash.
* Add a new layer and call it script.
# Verify that ActionScript 3.0 is selected in the ActionScript Version pop‑up menu, and click Settings. Your Flash Player version must be set to Flash Player 9 or later to use ActionScript 3.0.
# Specify the frame where the class definition should reside in the Export Classes in Frame text field.
# Specify the Errors settings. You can select Strict Mode and Warnings Mode. Strict Mode reports compiler warnings as errors, which means that compilation will not succeed if those types of errors exist. Warnings Mode reports extra warnings that are useful for discovering incompatibilities when updating ActionScript 2.0 code to ActionScript 3.0.
# (Optional) Select Stage to automatically declare stage instances.
# Specify ActionScript 3.0 or ECMAScript as the dialect to use. ActionScript 3.0 is recommended.
# To add paths to the source path list, do any of the following:
#* To add a folder to the source path, click the Source path tab and then click the Browse To Path button [[image:browse_to_path.png]], browse to the folder to add, and click OK.
#* To add a new line to the Source path list, click the Add New Path [[image:add_path.png]] button. Double-click the new line, type a relative or absolute path, and click OK.
#* To edit an existing Source path folder, select the path in the Source path list, click the Browse To Path button, browse to the folder to add, and click OK. Alternatively, double-click the path in the Source path list, type the desired path, and click OK.
#* To delete a folder from the source path, select the path in the Source path list and click the Remove From Path [[image:remove_path.png]] button .


; Step 5 - Add the Action Script
'''To set the application-level source path''':


* Click in frame 1 of the script layer, hit F9 and copy/paste the following code. You also must include the copyright notice. I believe that we '''really''' are lucky to be able to use such libraries. So please, be respectful !
# Choose Edit Preferences (Windows) or Flash > Preferences (Macintosh) and click the ActionScript category.
<pre>
# Click the ActionScript 3.0 Settings button and add the path(s) to the Source path list.
/*
* FLINT PARTICLE SYSTEM
* .....................
*
* Author: Richard Lord
* Copyright (c) Big Room Ventures Ltd. 2008
* http://flintparticles.org/
*
* Licence Agreement
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*/


import org.flintparticles.common.counters.*;
=== Set the Library path for ActionScript 3.0 files ===
import org.flintparticles.common.displayObjects.RadialDot;
import org.flintparticles.common.initializers.*;
import org.flintparticles.twoD.actions.*;
import org.flintparticles.twoD.emitters.Emitter2D;
import org.flintparticles.twoD.initializers.*;
import org.flintparticles.twoD.renderers.*;
import org.flintparticles.twoD.zones.*;


// We keep the same here - unlike the original
'''To set the document-level Library path''', the procedure is similar to setting the Source path:
// addChild( new SnowBackground() );


var emitter:Emitter2D = new Emitter2D();
# Choose File Publish Settings and click the Flash tab.
# Make sure ActionScript 3.0 is specified in the Script menu and click Settings.
# In the Advanced ActionScript 3.0 dialog box, click the Library path tab.
# Add the library path to the Library path list. You can add folders or individual SWC files to the path list.


emitter.counter = new Steady( 150 );
'''To set the Application-level Library path''':


emitter.addInitializer( new ImageClass( RadialDot, 2 ) );
# Choose Edit Preferences (Windows) or Flash > Preferences (Macintosh) and click the ActionScript category.
// Modified DKS - our picture is a bit larger
# Click the ActionScript 3.0 Settings button and add the path(s) to the Library path list.
// emitter.addInitializer( new Position( new LineZone( new Point( -5, -5 ), new Point( 605, -5 )) ) );
emitter.addInitializer( new Position( new LineZone( new Point( -5, -5 ), new Point( 645, -5 ) ) ) );
emitter.addInitializer( new Velocity( new PointZone( new Point( 0, 65 ) ) ) );
emitter.addInitializer( new ScaleImageInit( 0.75, 2 ) );


emitter.addAction( new Move() );
=== Set the External Library path for ActionScript 3.0 files ===
// Modified DKS - our picture is a bit larger
// emitter.addAction( new DeathZone( new RectangleZone( -10, -10, 620, 420 ), true ) );
emitter.addAction( new DeathZone( new RectangleZone( -10, -10, 645, 485 ), true ) );
emitter.addAction( new RandomDrift( 20, 20 ) );


var renderer:DisplayObjectRenderer = new DisplayObjectRenderer();
'''To set the document-level External Library path''', the procedure is similar to setting the Source path:
renderer.addEmitter( emitter );
addChild( renderer );


emitter.start();
# Choose File Publish Settings and click the Flash tab.
emitter.runAhead( 10 );
# Make sure ActionScript 3.0 is specified in the Script menu and click Settings.
# In the Advanced ActionScript 3.0 dialog box, click the External Library path tab.
# Add the library path to the External Library path list. You can add folders or individual SWC files to the path list.


// We keep the same here - unlike the original
'''To set the Application-level External Library path''':
// addChild( new SnowForeground() );
</pre>


That was really easy. We just took the code from the [http://flint-particle-system.googlecode.com/files/Flint_2_0_0_b_examples.zip Flint_2_0_0_b_examples.zip] archive and made 2 little modifications. We only use a single background and commented out 2 lines. Also, we changed two parameters since our picture is
# Choose ''Edit->Preferences'' (Windows) or ''Flash->Preferences'' (Macintosh) and click the ActionScript category.
a bit bigger.
# Click the ActionScript 3.0 Settings button and add the path(s) to the External Library path list.


; Step 6 - Error messages ?
== A note on classes and packages ==


If you see something like this:
All ActionScript code that you will import is defined with classes (see the [[Actionscript 3]] tutorials if you really want to learn how programming works.). Theses classes can then be bundled together in so-called '''packages''' which allows to organize code into discrete groups that can be imported by other scripts.
Scene1, Layer 'Script', Frame 1, line 22
1172: Definition org.flintparticles.common.counters could not be found.
then you most likely got your classpath definition wrong. See above !


If it isn't snowing all over your picture, then you will have to adjust 2 lines in the AS3 code. Figure it out yourself by looking at our inserted comments in the AS code above. Also you should get the DeathZone right. This is a hidden area underneath the picture where the falling down flakes are killed.
In other words, if you want to use a class that is inside a package, you must import either the package or the specific class. {{quotation|In general, import  statements should be as specific as possible. If you plan to use only the SampleCode class from the samplespackage, you should import only the SampleCode class rather than the entire package to which it belongs. Importing entire packages may lead to unexpected name conflicts. You must also place the source code that defines the package or class within your classpath . The classpath is a user-defined list of local directory paths that determines where the compiler will search for imported packages and classes. The classpath is sometimes called the build path or source path}} ([http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7f9e.html#WS5b3ccc516d4fbf351e63e3d118a9b90204-7f92 Importing packages], retrieved 17:37, 10 May 2010 (UTC)).


; Result and source code:
Syntax:
import samples.*;


The result: [http://tecfa.unige.ch/guides/flash/ex/flint/flint-snowflakes.html flint-snowflakes.html]
Example from the [[AS3 tweening platform|TweenMax engine]] of the AS3 tweening platform:


Get the flint-snowflakes.fla file from http://tecfa.unige.ch/guides/flash/ex/flint/, but please recall that you will have to set the classpath for the FLiNT library. It will not work "as is" !
<source lang="actionscript">
import com.greensock.*;
import com.greensock.easing.*;


; Want to understand a bit more ?
TweenMax.to(mc, 3, {bezier:[{x:277, y:174}, {x:300, y:345}], orientToBezier:true, ease:Bounce.easeOut});
</source>


Read the [http://flintparticles.org/tutorials/snowfall Introducing Flint with a snow effect] tutorial made by Richard Lord.
For programmers (see the [[ActionScript 3 tutorials]], to create your own packages:


Our only contribution was to add some explanations on how to define a classpath, i.e. the very basics about how to reuse such an example and which R.L. doesn't explain (since he made this library for programmers and not designers in the first place).
package packageName {
    class someClassName {
    }
}


=== Burning Logos ===
More information about packages can be found in Adobe's [http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000040.html Packages and namespaces] chapter in the [http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/js/html/wwhelp.htm?href=Part1_Programming_AS3_1.html Programming ActionScript 3.0] tutorial which is very technical.
 
Something else you can with this particle system is to create burning Logos, e.g. something that symbolizes how hot the [http://tecfa.unige.ch/guides/flash/ex/flint/flint-fire-logo.swf master program you should join] is.
 
The example below is just a adaptation of the example distributed in the [http://code.google.com/p/flint-particle-system/downloads/list Downloads]. You also can look at the maybe different online version of the [http://flintparticles.org/examples/logofire burning Flint Logo].
 
To create your own burning logo you need two things:
* A *.png file with a logo. This file must have the following properties
** Background color should be Alpha channel. In GIMP for example, menu ''Colors->Color to Alpha'', then select the color, e.g. white if your drawing is orange on white. Else your whole picture will burn.
** Color of the letters should be orange (FF9900) unless you make more changes to the code.
* A "fireblob", i.e. a small graphic with a radial color gradient (see the [[Flash colors tutorial]]). You can just copy the one that you will find in the source code of this example.
 
; Step 1 - Import logo and the fireblob to your library
* Create a logo and put in the library (just the drag the png from the file explorer into the library)
* Copy the blob from our fla file
 
; Step 2 - Make these linkable classes
* This is already done for the fireblob
* Right click on the icon of the *.png bitmap in the library and select linkage
* Type "Logo" (not LOGO or anything else) and check "Export for ActionScript" then hit OK
  Class: Logo
You now should have a setup that looks like this (minus the fire log which we shall create below). Enlarge the picture below if you can't make out the details.
 
[[image:flash-cs3-linkage-properties.jpg|thumb|left|800px|Setting up a linkage property for the Logo to set on fire]]
<br clear="all" />
 
; Step 3 - Copy some ActionScript code and make a few adjustments
 
* Click on Frame 1 and hit F9, then paste the code you will find below
 
You then have to make adjustments where I inserted comments:
* Set the size of the Logo (just look it up in the properties of the graphic in the library)
var bitmapData:BitmapData = new Logo( 332, 99);
* Position the Logo, wherever you want it to be
bitmap.x = 35;
bitmap.y = 35;
* Position the Fires, should be the same as above
emitter.x = 35;
emitter.y = 35;
 
'''Code to copy/paste''':
<pre>
/*
* FLINT PARTICLE SYSTEM
* .....................
*
* Author: Richard Lord
* Copyright (c) Big Room Ventures Ltd. 2008
* http://flintparticles.org/
*
* Licence Agreement
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
*/
 
import org.flintparticles.common.debug.*;
import org.flintparticles.common.actions.*;
import org.flintparticles.common.counters.*;
import org.flintparticles.common.displayObjects.RadialDot;
import org.flintparticles.common.initializers.*;
import org.flintparticles.twoD.actions.*;
import org.flintparticles.twoD.emitters.Emitter2D;
import org.flintparticles.twoD.initializers.*;
import org.flintparticles.twoD.renderers.*;
import org.flintparticles.twoD.zones.*;
import org.flintparticles.common.energyEasing.TwoWay;
 
// Look up the dimensions of your logo (Right-click in the library->Properties)
var bitmapData:BitmapData = new Logo( 332, 99);
var bitmap:Bitmap = new Bitmap();
bitmap.bitmapData = bitmapData;
addChild( bitmap );
// Position the bitmap graphic on the scene
bitmap.x = 35;
bitmap.y = 35;
 
var emitter:Emitter2D = new Emitter2D();
emitter.counter = new Steady( 600 );
 
emitter.addInitializer( new Lifetime( 0.8 ) );
emitter.addInitializer( new Velocity( new DiscSectorZone( new Point( 0, 0 ), 10, 5, -Math.PI * 0.75, -Math.PI * 0.25 ) ) );
emitter.addInitializer( new Position( new BitmapDataZone( bitmapData ) ) );
emitter.addInitializer( new ImageClass( FireBlob ) );
 
emitter.addAction( new Age( TwoWay.quadratic ) );
emitter.addAction( new Move() );
emitter.addAction( new Accelerate( 0, -20 ) );
emitter.addAction( new ColorChange( 0xFFFF9900, 0x00FFDD66 ) );
emitter.addAction( new ScaleImage( 1.4, 2.0 ) );
emitter.addAction( new RotateToDirection() );
 
var renderer:BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 500, 200 ) );
renderer.addEmitter( emitter );
addChild( renderer );
 
// The fire must be in the same position as the bimap
emitter.x = 35;
emitter.y = 35;
emitter.start( );
</pre>
 
; Step 4 - Admire the result and play with the source code
* [http://tecfa.unige.ch/guides/flash/ex/flint/flint-fire-logo.html the result]
* The source code: [http://tecfa.unige.ch/guides/flash/ex/flint/flint-firelogo.fla flint-firelogo.fla]
* Other files are also in the same http://tecfa.unige.ch/guides/flash/ex/flint/ directory.
 
; Step 5 - Change colors
Maybe you may rather want to demonstrate how burning cool your institutions is. All you need to do is make a Logo in blue and then change a line in the AS3 code.
 
To change the color of the fire emitter, you have to understand that the ColorChange class
wants 2 arguments: The color of Logo and the color of the bright parts of the flames. That being said, you can use any colors you want of course.
So we change this orange fire:
  emitter.addAction( new ColorChange( 0xFFFF9900, 0x00FFDD66 ) );
into a blue cool fire:
  emitter.addAction( new ColorChange( 0xFF0000FF, 0x00DDFFFF ) );
* [http://tecfa.unige.ch/guides/flash/ex/flint/flint-blue-fire-logo.html the result]
* The source code: [http://tecfa.unige.ch/guides/flash/ex/flint/flint-blue-fire-logo.fla flint-blue-fire-logo.fla]
 
; Step 6 - reuse these logos as movie clips
 
In principle you should be able to import *.swf "movies" to the library and then use them like internal movie clips, but I wasn't able to import these into the library for a reason I don't understand yet (Flash doesn't give any feedback, it just doesn't import).


Instead I'll show you how to have multiple Logos on fire within a same Flash file. All you need is to create embedded movie clips for each Logo and then attach an AS3 script to each of these. See the [[Flash embedded movie clip tutorial]] if don't know how to create embedded movie clips.
== ActionScript document classes ==


Some hints (for the rest, please dig into the fla file below):
According to [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WS3e7c64e37a1d85e1e229110db38dec34-7fa4a.html#WS026C9121-F7D4-496d-94C8-368BF6938149a ActionScript publish settings], retrieved 17:37, 10 May 2010 (UTC):
* Registration point of the embedded movie clips should be in the upper left
* x and y coordinates for the fire animation should be 0 (see the AS3 code in the Fla file)
* Also in one AS code the Class representing the Bitmap was renamed to Logo2. This also requires a change in one of the scripts.


Results:
When you use ActionScript 3.0, a SWF file may have a top-level class associated with it. This class is called the document class. When the SWF is loaded by Flash Player, an instance of this class is created to be the SWF file's top-level object. This object of a SWF file can be an instance of any custom class you choose.
* [http://tecfa.unige.ch/guides/flash/ex/flint/flint-fire-ad.html the result]
* The source code: [http://tecfa.unige.ch/guides/flash/ex/flint/flint-fire-ad.fla flint-fire-ad.fla]


Of course, this needs some tuning, e.g. it's too fast and the frame rate is too low and it's otherwise ugly. I wouldn't join a degree program that banks on the effect of a Flash Logo anyhow ;)
For example, a SWF file that implements a calendar component can associate its top level with a Calendar class, with methods and properties appropriate to a calendar component. When the SWF is loaded, Flash Player creates an instance of this Calendar class.


== Playing around with the other FliNT examples ==
# Deselect all objects on the Stage and in the Timeline by clicking a blank area of the Stage. This displays the Document properties in the Property inspector.
# Enter the filename of the ActionScript file for the class in the Document Class text box in the Property inspector. Do not include the .as filename extension.


The Flint examples all come in two versions, either Flash or PureAS3. Go for the Flash version (unless you want to learn how to play with Flex in which case you will have to start reading the [[Adobe Flex]] and [[AS3 Compiling a program]] tutorials in this wiki).
Note: You can also enter the Document Class information in the Publish Settings dialog box.


The Flash version examples usually have just a single line in the script code that you insert in frame 1:
== Links ==
include Frame1.as
This instruction simply includes the contents of the file "Frame1.as" that you will find in the same directory. In our examples above we just copy/pasted the contents of these *.as files into the AS script. The result is the same, but the strategy of including an *.as file is smarter if you plan to reuse your code and if your prefer to use a different editor. We included the code in the *.fla for the simple reason that this way you only need to grab a single file.


To play with the examples in the Flash CS3 environment, the only thing you will have to do is to open the respective *.fla and then fix the classpath, i.e. tell Flash where the Flint_xxxx/src directory is located. E.g. if you need a firework, open in CS3 the
* [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WS3e7c64e37a1d85e1e229110db38dec34-7fa4a.html ActionScript publish settings] (Adobe Flash CS4)
Flint_2_0_0_b_examples/examples2D/Firework/Flash/Firework.fla


Then fix the classpath as described in the [[#Let.27s_snow|Let's snow]] example
* [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7dc9a.html Sharing library assets] (Adobe Flash CS4)


Finally hit CTRL-Enter or publish.
* [http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7f9e.html Packages and namespaces] (Adobe Flash CS4)


Notice: The resulting swf always will include all the necessary ActionScript code, i.e. you won't have to copy the Flint files to the server.
== Credits and copyright modification ==


== A note one classes and packages ==
{{copyrightalso|Parts of this article use materials from Adobe, in particular from [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WS3e7c64e37a1d85e1e229110db38dec34-7fa4a.html ActionScript publish settings] and [http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7f9e.html Packages and namespaces], both retrieved 17:37, 10 May 2010 (UTC).


All ActionScript code that you will import is defined with classes (see the [[Actionscript 3]] tutorials if you really want to learn how programming works.). Theses classes can then be bundled together in so-called packages which allows to organize code into discrete groups that can be imported by other scripts. E.g.
Copyright: [http://creativecommons.org/licenses/by-nc-sa/3.0/ Attribution-Noncommercial-Share Alike 3.0 Unported], i.e. the same as EduTechWiki, but you also must cite the cited portions of the [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/index.html Using Flash CS4 Professional manual].
 
}}
package packageName {
    class someClassName {
    }
}
 
More information about setting the Class path can be found at Adobe, i.e. [http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WS3e7c64e37a1d85e1e229110db38dec34-7fa2.html here] and [http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WS3e7c64e37a1d85e1e229110db38dec34-7fa2.html here] in the "Using Flash documentation".  
 
More information about packages can be found in Adobe's [http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000040.html Packages and namespaces] chapter in the [http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/js/html/wwhelp.htm?href=Part1_Programming_AS3_1.html Programming ActionScript 3.0] tutorial which is very technical.




[[Category: Multimedia]]
[[Category:Flash tutorials]]
[[Category: Technologies]]
[[Category: Authoring tools]]
[[Category: Tutorials]]
[[Category: Flash]]
[[Category: Flash]]
[[fr:Flash CS4 - Utilisation de librairies]]

Latest revision as of 18:24, 22 August 2016

Introduction

Learning goals
  • Learn how to reuse example code that illustrate features of ActionScript libraries.
  • Learn how to be able to import 3rd party packages by defining an ActionScript classpath.
Prerequisites
Environment
  • Flash CS3
Moving on
Level and target population
  • Beginners (but see the prerequisites)
Quality
  • useable, but under progress.
To Do
  • Other examples

There exist several free high quality ActionScript libraries available and that can be used by Flash designers that only possess very little programming skills.

Typical examples of such libraries are:

  • Flash 3D libraries that allow a CS3 developer to create animated and interactive 3D scenes.
  • Special purpose animation libraries like the FLiNT particle system that allows you to create stuff like fireworks and snowflakes.
  • Tweening libraries like TweenLite that allow you to define sophisticated animations with a few method calls (instead of spending hours of drawing).
  • Physics engines like Box2DFlashAS3

Flash libraries can come in several forms (see Flash formats and objects overview). In this short tutorial we will deal with

  • .swc - compiled clips that include ActionScript code and other stuff
  • .fla - Flash CS3/CS4 source code files
  • .as - Action script code.

In this tutorial, we just will a short overview. If want to go through an example, either read the FliNT particle system introductory tutorial. FLiNT is a very useful library to create very cool animations with particles flying around or play around with the easier to use AS3 tweening platform.

List of libraries that are part of these Flash tutorials:

Others:

Installing and using libraries overview

This is a short executive overview on using ActionScript libraries

To use external ActionScript libraries that you downloaded and installed, Flash must locate the external ActionScript files that contain the class definition. Usually, the list of folders in which Flash searches for class definitions is called the classpath for ActionScript 2.0 and the source path for ActionScript 3.0

You may set the source path either globally (for all your projects) or per *.fla file. You usually should adopt the later, even if it means some extra work.

Local source path:

Through File->Publish Settings; Flash Tab; Settings Tab; you can set the following ActionScript locations in Flash for a specific *.fla file:

  • Source path: Defines the location of source ActionScript source files. Typically you would use this for libraries that you download as AS source code.
  • Library path: “specifies the location of pre-compiled ActionScript code which resides in SWC files you have created. The FLA file that specifies this path loads every SWC file at the top level of this path and any other code resources that are specified within the SWC files themselves. If you use the Library path, be sure none of the compiled code in the SWC files is duplicated in uncompiled AS files in the Source path. The redundant code will slow down compilation of your SWF file.”. Typically, you would use the library path when you use *.swc code from major ActionScript libraries like PaperVision3D or the Greensock tweening libraries.
  • External library path: specifies the location of SWC files that contain code used for compiler error definitions. This path can be used to load external code resources in SWC format so that the classes within them can be used at runtime. When you compile a SWF, the SWC files in the External Library path are not added to the SWF file, but the compiler verifies that they are in the locations you specified. The External Library path is most often used for runtime shared libraries. For more information about runtime shared libraries, see working with runtime shared assets
  • Document class (also can be set in Document Property inspector). Used to associate a specific class with a document, i.e. typically used to compile an ActionScript program you write yourself.

Local source path (alternative option):

Alternatively (not recommended):

  • Instead of defining the source path: You also could copy the com directories that include source to the directory where your *.fla file sits,
  • Instead of defining a library path: Copy the *.swc file to the same directory of your *.fla file and add . to the library path.

Global source path:

Through Edit->Preferences->ActionScript 3.0 Settings you can set source pathes for all your projects:

  • Source path
  • Library path
  • External library path

Setting source pathes

Below we reproduce the detailed explanations from Adobe's Set the location of ActionScript files (retrieved 17:37, 10 May 2010 (UTC)):

Set the source path for ActionScript 3.0

To set the document-level source path:

  1. Select File -> Publish Settings, and click Flash.
  2. Verify that ActionScript 3.0 is selected in the ActionScript Version pop‑up menu, and click Settings. Your Flash Player version must be set to Flash Player 9 or later to use ActionScript 3.0.
  3. Specify the frame where the class definition should reside in the Export Classes in Frame text field.
  4. Specify the Errors settings. You can select Strict Mode and Warnings Mode. Strict Mode reports compiler warnings as errors, which means that compilation will not succeed if those types of errors exist. Warnings Mode reports extra warnings that are useful for discovering incompatibilities when updating ActionScript 2.0 code to ActionScript 3.0.
  5. (Optional) Select Stage to automatically declare stage instances.
  6. Specify ActionScript 3.0 or ECMAScript as the dialect to use. ActionScript 3.0 is recommended.
  7. To add paths to the source path list, do any of the following:
    • To add a folder to the source path, click the Source path tab and then click the Browse To Path button Browse to path.png, browse to the folder to add, and click OK.
    • To add a new line to the Source path list, click the Add New Path Add path.png button. Double-click the new line, type a relative or absolute path, and click OK.
    • To edit an existing Source path folder, select the path in the Source path list, click the Browse To Path button, browse to the folder to add, and click OK. Alternatively, double-click the path in the Source path list, type the desired path, and click OK.
    • To delete a folder from the source path, select the path in the Source path list and click the Remove From Path Remove path.png button .

To set the application-level source path:

  1. Choose Edit Preferences (Windows) or Flash > Preferences (Macintosh) and click the ActionScript category.
  2. Click the ActionScript 3.0 Settings button and add the path(s) to the Source path list.

Set the Library path for ActionScript 3.0 files

To set the document-level Library path, the procedure is similar to setting the Source path:

  1. Choose File Publish Settings and click the Flash tab.
  2. Make sure ActionScript 3.0 is specified in the Script menu and click Settings.
  3. In the Advanced ActionScript 3.0 dialog box, click the Library path tab.
  4. Add the library path to the Library path list. You can add folders or individual SWC files to the path list.

To set the Application-level Library path:

  1. Choose Edit Preferences (Windows) or Flash > Preferences (Macintosh) and click the ActionScript category.
  2. Click the ActionScript 3.0 Settings button and add the path(s) to the Library path list.

Set the External Library path for ActionScript 3.0 files

To set the document-level External Library path, the procedure is similar to setting the Source path:

  1. Choose File Publish Settings and click the Flash tab.
  2. Make sure ActionScript 3.0 is specified in the Script menu and click Settings.
  3. In the Advanced ActionScript 3.0 dialog box, click the External Library path tab.
  4. Add the library path to the External Library path list. You can add folders or individual SWC files to the path list.

To set the Application-level External Library path:

  1. Choose Edit->Preferences (Windows) or Flash->Preferences (Macintosh) and click the ActionScript category.
  2. Click the ActionScript 3.0 Settings button and add the path(s) to the External Library path list.

A note on classes and packages

All ActionScript code that you will import is defined with classes (see the Actionscript 3 tutorials if you really want to learn how programming works.). Theses classes can then be bundled together in so-called packages which allows to organize code into discrete groups that can be imported by other scripts.

In other words, if you want to use a class that is inside a package, you must import either the package or the specific class. “In general, import statements should be as specific as possible. If you plan to use only the SampleCode class from the samplespackage, you should import only the SampleCode class rather than the entire package to which it belongs. Importing entire packages may lead to unexpected name conflicts. You must also place the source code that defines the package or class within your classpath . The classpath is a user-defined list of local directory paths that determines where the compiler will search for imported packages and classes. The classpath is sometimes called the build path or source path” (Importing packages, retrieved 17:37, 10 May 2010 (UTC)).

Syntax:

import samples.*;

Example from the TweenMax engine of the AS3 tweening platform:

import com.greensock.*; 
import com.greensock.easing.*;

TweenMax.to(mc, 3, {bezier:[{x:277, y:174}, {x:300, y:345}], orientToBezier:true, ease:Bounce.easeOut});

For programmers (see the ActionScript 3 tutorials, to create your own packages:

package packageName {
   class someClassName { 
   } 
}

More information about packages can be found in Adobe's Packages and namespaces chapter in the Programming ActionScript 3.0 tutorial which is very technical.

ActionScript document classes

According to ActionScript publish settings, retrieved 17:37, 10 May 2010 (UTC):

When you use ActionScript 3.0, a SWF file may have a top-level class associated with it. This class is called the document class. When the SWF is loaded by Flash Player, an instance of this class is created to be the SWF file's top-level object. This object of a SWF file can be an instance of any custom class you choose.

For example, a SWF file that implements a calendar component can associate its top level with a Calendar class, with methods and properties appropriate to a calendar component. When the SWF is loaded, Flash Player creates an instance of this Calendar class.

  1. Deselect all objects on the Stage and in the Timeline by clicking a blank area of the Stage. This displays the Document properties in the Property inspector.
  2. Enter the filename of the ActionScript file for the class in the Document Class text box in the Property inspector. Do not include the .as filename extension.

Note: You can also enter the Document Class information in the Publish Settings dialog box.

Links

Credits and copyright modification