[haXe] Re: multi state button example library components in flash 9
Vanja
vax at hi.htnet.hr
Sat Aug 11 14:32:52 CEST 2007
Hi!
I've been working on the same problem I think. You can browse the rchives
for "Button from lib" topic. Anyway, with great help from filt3r at free.fr
(tnx), some result is out. I still have some issues but I guess now is a
good time to show it (been meaning to resolve all problems and post the
solution...).
Anyway, the aim was to create a movie clip using swfmill or FlashIde that
would represent the basic button (movie clip). Then, one could attach the
movie clip from library to the stage and make it work like a regular button,
and in the main class, one could attach some specific behaviour to the
button. In my example, Im building a simple slide show with buttons for next
and previous slide and a simple transition effect applied to the images
(fade in and fade out).
I'm posting the commented sources below. I've sucessfuly compiled them using
FlashGot and from the command line (hxml). I have only one issue not
resolved. Namely, the button movie, when compiled with FlashIDE works just
fine (the gotoAndStop for the "over" state/frame) but has problems with
swfmill version of the library. There is a hack and it is commented in the
code, but I'd like to see a better solution (and to know the reason) so I
guess this is also a question for anyone interested, help please :-)
I hope this helps, let us (me) know the results :-)
Vanja
============ Directory structure ============
SlideShow.hxml // HaXe batch for compiling the project
SlideShow.hxp // FlashGot HaXe project
/src // directory with sources, library, images,
...
......Button.hx // button class
......SlideShow.hx // main movie class
......library.xml // swfmill xml code for generating the
library
......buildLibrary.bat // batch to build swfmill library
....../library // directory with resources
............*.jpg // images for the slide show
............*.png // images for the button movies
............library.swf // swfmill compiled or FlashIDE generated
library
============ End Directory structure ============
============ Button.hx ============
/* Class that represents the button */
import flash.display.MovieClip;
import flash.events.MouseEvent;
class Button extends MovieClip
{
/* asset properties for images used to render the button movie
SwfMill: must have names identical to the place tag for
state images (e.g. <place id="next" name="mcXXX" ... )
Flash IDE: must be identically named in movies for buttons
built using Flash IDE */
private var mcUp : MovieClip;
private var mcOver : MovieClip;
private var mcDown : MovieClip;
// constructor
public function new ()
{
super();
up();
// adds specific behaviour for MOUSE events
// e.g. makes the button movie goto and stop to the specific
frame
addEventListener( MouseEvent.MOUSE_DOWN, down );
addEventListener( MouseEvent.MOUSE_UP, over );
addEventListener( MouseEvent.MOUSE_MOVE, over );
addEventListener( MouseEvent.ROLL_OUT, up );
}
private function up( ?e : MouseEvent )
{
// up is actually frame name for that button state
gotoAndStop( "up" );
}
private function over( ?e : MouseEvent )
{
// over is actually frame name for that button state
// gotoAndStop( "up" ); // This line has to be enabled when
using SwfMill library
gotoAndStop( "over" );
}
private function down( ?e : MouseEvent )
{
// down is actually frame name for that button state
gotoAndStop( "down" );
}
}
============ End Button.hx ============
============ SlideShow.hx ============
/* Class that represents the main movie */
import flash.display.MovieClip;
import flash.display.Bitmap;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.text.TextField;
import flash.text.TextFormat;
/* assets-classes (Image1, Image2, Image3)
all of these classes can be written in external file(s)
must correspond to the [ .. <bitmap id="ImageXXX" .. /> ...] part of
the SfwMill library
or the ImageXXX linkage identifier from Flash IDE built library */
class Image1 extends Bitmap { public function new(){super();} }
class Image2 extends Bitmap { public function new(){super();} }
class Image3 extends Bitmap { public function new(){super();} }
/* classes for buttons
must correspond to the [ .. <clip id="ButtonXXX"> ...] part of the
SfwMill library
or the ButtonXXX linkage identifier from Flash IDE built library */
class ButtonNext extends Button{}
class ButtonPrevious extends Button{}
// main SlideShow class
class SlideShow
{
private var _aImages : Array<Dynamic>;
private var _fadeSpeed : Float;
private var _index : Int;
private var _previousIndex : Int;
private var _namePrefix : String;
private var textFieldInfo : TextField;
// constructor
public function new()
{
// instantiates button for advancing to the next photo
var buttonNextInstance = new ButtonNext();
buttonNextInstance.x = 600;
buttonNextInstance.y = 440;
buttonNextInstance.alpha = 0.5;
// when the button is clicked, a specific function/behaviour
will be executed
buttonNextInstance.addEventListener( MouseEvent.MOUSE_DOWN,
nextPhoto );
// places the button on the stage
flash.Lib.current.addChild( buttonNextInstance );
// instantiates button for viewing previous photo
var buttonPreviousInstance = new ButtonPrevious();
buttonPreviousInstance.x = 560;
buttonPreviousInstance.y = 440;
buttonPreviousInstance.alpha = 0.5;
// when the button is clicked, a specific function/behaviour
will be executed
buttonPreviousInstance.addEventListener(
MouseEvent.MOUSE_DOWN, previousPhoto );
// places the button on the stage
flash.Lib.current.addChild( buttonPreviousInstance );
// instantiates text field with info about current photo
textFieldInfo = new TextField();
textFieldInfo.x = 0;
textFieldInfo.y = 0;
textFieldInfo.width = 200;
textFieldInfo.multiline = true;
textFieldInfo.wordWrap = true;
// places the text field on the stage
flash.Lib.current.addChild( textFieldInfo );
// applies a specific default font to the text field
var myTextFormat = new TextFormat();
myTextFormat.bold = true;
myTextFormat.font = "Arial";
textFieldInfo.defaultTextFormat = myTextFormat;
// start-up values for private properties
_aImages = [ new Image1(), new Image2(), new Image3() ];
/* fade speed, formula is set up for usage in seconds
(switch of the photos will occur in 0.6 sec) */
_fadeSpeed = 1 / (0.6 *
flash.Lib.current.root.stage.frameRate);
_index = _aImages.length - 1;
_previousIndex = 0;
_namePrefix = "slideShowImage";
changePhoto(1);
}
private function nextPhoto( e : MouseEvent ) : Void
{
changePhoto( 1 );
}
private function previousPhoto( e : MouseEvent ) : Void
{
changePhoto( -1 );
}
private function changePhoto( direction : Int ) : Void
{
_previousIndex = _index;
_index = ( _index + direction ) % _aImages.length;
if ( _index < 0 )
_index += _aImages.length;
textFieldInfo.text = "Showing image " + ( _index + 1 ) + "
of " + _aImages.length;
loadImage();
}
private function loadImage() : Void
{
// loads the next image on to the stage, it is added only
once
var image = _aImages[_index];
flash.Lib.current.addChild( image );
image.name = _namePrefix + _index;
image.x = 160;
image.y = 130;
image.alpha = 0;
// prepares the EVENT_FRAME listener which is used for
transition (photo switch)
flash.Lib.current.addEventListener( Event.ENTER_FRAME,
switchImages );
}
// switches the photos, is called for every ENTER_FRAME event (once
every frame)
private function switchImages( e : Event ) : Void
{
// decreases the alpha of the old photo
var pImage = flash.Lib.current.getChildByName( _namePrefix +
_previousIndex );
if ( pImage != null )
if ( pImage.alpha > _fadeSpeed )
pImage.alpha -= _fadeSpeed;
else
pImage.alpha = 0;
// increases the alpha of the next photo
var image = flash.Lib.current.getChildByName( _namePrefix +
_index );
if ( image != null )
if ( image.alpha < 1 - _fadeSpeed )
image.alpha += _fadeSpeed;
else
{
image.alpha = 1;
// stops the execution since the images are
switched
flash.Lib.current.removeEventListener(
Event.ENTER_FRAME, switchImages );
}
}
//HaXe entry point
static function main()
{
var slideShow = new SlideShow();
}
}
============ End SlideShow.hx ============
============ library.xml ============
<?xml version="1.0" encoding="iso-8859-1"?>
<movie version="8" width="640" height="480" framerate="24">
<background color="#aabbcc"/>
<clip id="next" import="library/next.png"/>
<clip id="nextOver" import="library/nextOver.png"/>
<clip id="nextDown" import="library/nextDown.png"/>
<clip id="previous" import="library/previous.png"/>
<clip id="previousOver" import="library/previousOver.png"/>
<clip id="previousDown" import="library/previousDown.png"/>
<frame>
<library>
<bitmap id="Image1" import="library/image1.jpg"/>
<bitmap id="Image2" import="library/image2.jpg"/>
<bitmap id="Image3" import="library/image3.jpg"/>
<clip id="ButtonNext">
<frame name="up">
<place id="next" name="mcUp"
depth="1"/>
</frame>
<frame name="over">
<place id="nextOver" name="mcOver"
depth="1"/>
</frame>
<frame name="down">
<place id="nextDown" name="mcDown"
depth="1"/>
</frame>
</clip>
<clip id="ButtonPrevious">
<frame name="up">
<place id="previous" name="mcUp"
depth="1"/>
</frame>
<frame name="over">
<place id="previousOver"
name="mcOver" depth="1"/>
</frame>
<frame name="down">
<place id="previousDown"
name="mcDown" depth="1"/>
</frame>
</clip>
</library>
</frame>
</movie>
============ End library.xml ============
============ SlideShow.hxml ============
# swf9
-swf SlideShow.swf
-swf-version 9
-swf-lib src\library\library.swf
-main SlideShow
-debug
-cp src
============ End SlideShow.hxml ============
============ SlideShow.hxp ============
<haxe selected="0">
<output name="swf9" mode="swf9" out="SlideShow.swf" class="SlideShow"
lib="src\library\library.swf" cmd="" main="True" debug="True">-cp
src</output>
<files path="/">
<file path="src\Button.hx" />
<file path="src\SlideShow.hx" />
</files>
</haxe>
============ End SlideShow.hxp ============
============ buildLibrary.bat ============
swfmill simple library.xml library/library.swf
rem pause
============ End buildLibrary.bat ============
>
>
> -----Original Message-----
> Date: Fri, 10 Aug 2007 14:59:38 -0400 (EDT)
> From: "Jonathan Achai" <jachai at oddcast.com>
> Subject: [haXe] multi state button example library components in flash
> 9
> To: <haxe at lists.motion-twin.com>
> Message-ID: <00f101c7db88$a8eda410$8200030a at ACHAI>
> Content-Type: text/plain; charset="us-ascii"
>
> I've been trying to make something similar to the GameButton tutorial but
in flash 9, but can't get it to work.
>
> Here's what I'm doing:
>
>
>
> I have a library swf made with swfmill targeting flash 9 (I tried with
flash 8 as well) in which I have a pretty simple movieclip (frames with
> graphics) with the identifier BaseButton.
>
> I would like to "attach" the library's movieclip with the haxe class
MyButton. I tried many variations on this but nothing worked.
>
>
>
> Any help will be appreciated.
>
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.476 / Virus Database: 269.11.13/946 - Release Date: 10.08.2007
15:50
More information about the Haxe
mailing list