Flash Dummy

Adrian Şule

ARP Framework (Aral Balkan)

Not recently i discovered Aral Balkan’s: ARP Framework, which i consider great for any Flash application that scale from medium to BIG.

 I won’t talk more about it, and just pass you the links so you can find out for your self, but keep in mind is all open source baby:

http://osflash.org/projects/arp

http://www.ariaware.com/products/arp/downloads/ARP_2.02_Setup.exe -> Windows Installer (contains the Pizza Service example application for AS2)

http://www.ariaware.com/products/arp/downloads/ARP_2.02.zip -> All Other Platforms

http://www.ariaware.com/products/arp/docs/arp.htm  -> Online Manual

http://aralbalkan.com/642  -> A preview of the Pizza Service Application in Flex (AS3)

http://amfphp.org/

WEB 2.0 Buttons in ActionScript

Probably everyone knows about the new WEB 2.0 standards (if not go here and enlighten your self), so after haveing a look on a current existing model of a button that sticks with this styling standards, here is the code for creating your own WEB 2.0 Button useing ActionScript:

/* WEB 2.0 BUTTON
 * created by: Adrian Sule
 * based on: http://www.lukamaras.com/tutorials/actionscript/amazing-actionscript-designed-button.html
 * date: September 25, 2007
 */

//import class for glowing
import flash.filters.GlowFilter;
//variables for gradient
var fillType:String = “linear”;
var colors:Array = [0xFAD4DB, 0xEC748B, 0xC13A59, 0xA81230];
var alphas:Array = [100, 100, 100, 100];
var ratios:Array = [0, 126, 127, 255];
var matrix:Object = {matrixType:”box”, x:0, y:0, w:80, h:30, r:90/180*Math.PI};
//create button
this.createEmptyMovieClip(“myButton1″, this.getNextHighestDepth());
myButton1._x = 200;
myButton1._y = 100;
//create background
myButton1.createEmptyMovieClip(“buttonBkg”, myButton1.getNextHighestDepth());
myButton1.buttonBkg.lineStyle(0, 0x820F26, 60, true, “none”, “square”, “round”);
myButton1.buttonBkg.beginGradientFill(fillType, colors, alphas, ratios, matrix);
myButton1.buttonBkg.lineTo(120, 0);
myButton1.buttonBkg.lineTo(120, 30);
myButton1.buttonBkg.lineTo(0, 30);
myButton1.buttonBkg.lineTo(0, 0);
myButton1.buttonBkg.endFill()
myButton1.createTextField(“labelText”, myButton1.getNextHighestDepth(), 0, 5, myButton1._width, 24);
//text style
var myFormat:TextFormat = new TextFormat();
myFormat.align = “center”;
//it is necesary that you have inside your library the
//Tahoma font with a linkage itentifier name of “Tahoma”
//you can achieve this by right clicking over the library and 
//chooseing ‘New Font’ and afterwards right clicking again over the
//created font and going to Linkage and putting the “Tahoma” name as an Identifier
myFormat.font = “Tahoma”;
myFormat.size = 13;
myFormat.color = 0xFFFFFF;
myButton1.labelText.text = “webdesign”;
myButton1.labelText.embedFonts = true;
myButton1.labelText.selectable = false;
myButton1.labelText.antiAliasType = “advanced”;
myButton1.labelText.setTextFormat(myFormat);
//text glow
var labelGlow:GlowFilter = new GlowFilter(0xFFFFFF, .30, 4, 4, 3, 3);
var labelFilters:Array = [labelGlow];
myButton1.labelText.filters = labelFilters;

Shull Site

Here is a site i’ve been working on for a while

http://www.shull.ro

Playlist functionality for Mp3Player

Yesterday i runned into a mp3 tutorial on ultrashock.com made by Julian Wilson – Neverrain.net. Which is a simple application that can load and play mp3′s with simple buttons functionality (of play/pause/stop/next/previous) and a nice volume control.
Here is the link to the tutorial:
http://forums.ultrashock.com/ff.htm?http://forums.ultrashock.com/forums/showthread.php?s=&postid=708395

This application had no playlist functionality, so i added one.
Here is the code with the mp3player and playlist (i won’t go thru explaining how it works, you can find that on the utltrashock tutorial):

import Library;
import mx.transitions.Tween;
import mx.transitions.easing.*;

class MusicPlayer
{
//—————————————————————————
// Class Properties
//—————————————————————————

//Target/Path to the player movieclip.
private var __path:MovieClip;
//As a shortcut to XML I’ve decided to define track(s) information in an object.
private var __tracks:Object;
//Allows for use of Sound class methods, such as attachSound and start.
//You can’t listen to audio without a Sound object.
private var __music:Sound;
//Current track position (in milliseconds)
private var __position:Number;
//Current track volume (on a ratio of 0 to 100). Without this property each
//track would automatically start with a volume of 100.
private var __volume:Number = 100;
//Used to determine if pause has been executed or not. If so play will
//perform different actions to start from the paused position.
private var __paused:Boolean = false;
//ID of current track
private var __trackid:Number;
private var listTrackId:Number

//—————————————————————————
// Constructor
//—————————————————————————

//Every classes constructor is automatically run when an instance
//of the class is created.
function MusicPlayer(path:MovieClip, tracks:Object, init:Number)
{
//Sets constructor variables to the corresponding class properties.
__path = path;
__tracks = tracks;
__trackid = (init-1);

//Attaches actions to all UI controls.
setupUI();
//Begins playing the initial track.
loadNextTrack();
//Constantly updates scale of position and load bar.
positionBar();
loadBar();
loadPlaylist()
}

//—————————————————————————
// Class methods
//—————————————————————————

private function changeVolume():Void
{
var target = __path.volume;
//Sets volume property to the ratio between where the bar was pressed and it’s total width.
__volume = (target._xmouse/target._width)*100;
//Slides bar to corresponding scale based on above ratio.
var tween = new Tween(target.mask, “_xscale”, Back.easeOut, target.mask._xscale, __volume, 10);
var slider = new Tween(__path.slider_btn, “_x”, Back.easeOut, __path.slider_btn._x, (__path.volume._x+target._xmouse)-(__path.slider_btn._width/2), 10);
//Updates volume of the track.
__music.setVolume(__volume);
}
private function setupUI():Void
{
//Attaches onRollOver events for all UI controls.
//A loop is used because all UI events excluding onRelease are the same.
for(var i in __path.controls)
{
__path.controls[i].onRollOver = function()
{
this.gotoAndStop(“hover”);
}
__path.controls[i].onRollOut = function()
{
this.gotoAndStop(“up”);
}
}

__path.controls.play_btn.onRelease = __path.controls.play_btn.onReleaseOutside = Library.delegate(this, “playTrack”);
__path.controls.pause_btn.onRelease = __path.controls.pause_btn.onReleaseOutside = Library.delegate(this, “pauseTrack”);
//Plays the previous or next track. The next track is determined using the getTrackID method.
__path.controls.prev_btn.onRelease = __path.controls.prev_btn.onReleaseOutside = Library.delegate(this, “loadPrevTrack”);
__path.controls.next_btn.onRelease = __path.controls.next_btn.onReleaseOutside = Library.delegate(this, “loadNextTrack”);
__path.volume.onPress = Library.delegate(this, “changeVolume”);
}
private function pauseTrack():Void
{
__paused = true;
updateUIStatus();
//Remembers position when paused. This is needed for when the track is re-started
//so that it knows what position to start from.
__position = __music.position;
__music.stop();
}
private function getTrackID(direction:Number):Number
{
var id = __trackid;
//Adds direction (-1 is previous and 1 is next) to the current track ID.
id += direction;
//Instead of stopping at the first or last track, loop.
if(id < 0)
{
//Sets ID to the last track ID if less than zero.
id += __tracks["titles"].length;
}
else
{
//Sets ID to the first track ID if greater than total tracks.
id %= __tracks["titles"].length;
}
return id;
}
//Updates status of the play and pause buttons according to if paused or not
private function updateUIStatus():Void
{
if(__paused)
{
__path.controls.play_btn.enabled = true;
__path.controls.play_btn.gotoAndStop(“up”);
__path.controls.pause_btn.gotoAndStop(“hover”);
__path.controls.pause_btn.enabled = false;
}
else
{
__path.controls.pause_btn.enabled = true;
__path.controls.pause_btn.gotoAndStop(“up”);
__path.controls.play_btn.gotoAndStop(“hover”);
__path.controls.play_btn.enabled = false;
}
}
private function playTrack():Void
{
//Checks if track is paused. If so start from pause position, otherwise start from the beginning.
if(__paused)
{
__music.start(__position/1000);
__paused = false;
updateUIStatus();
}
else
{
__music.start();
}
}
private function beginLoad(id:Number):Void
{
__trackid = id;
//Resets sound. Without this position and duration will output the values
//from the first track loaded.
__music = new Sound();
//When track is finished playing, play the next one.
__music.onSoundComplete = Library.delegate(this, “loadNextTrack”);
//Starts streaming track
__music.loadSound(__tracks["urls"][id], true);
__music.setVolume(__volume);
__paused = false;
updateUIStatus();

//Populates title and artist textfields with new track data.
__path.title_txt.text = __tracks["titles"][id].toUpperCase();
__path.artist_txt.text = __tracks["artists"][id].toUpperCase();
//Resets position and load bar scale.
__path.track.mask._xscale = __path.track.load_mask._xscale = 0;

__path.playlist.selectedIndex = id
}
private function loadNextTrack():Void
{
//Starts loging the next track. The next tracks ID is processed by the getTrackID
//method to enable looping.
beginLoad(getTrackID(1));
}
private function loadPrevTrack():Void
{
beginLoad(getTrackID(-1));
}
private function positionBar():Void
{
//Constantly updates bar scale.
__path.track.mask.onEnterFrame = Library.delegate(this, “updatePositionBar”);
}
private function updatePositionBar():Void
{
//Finds percentage loaded of the track loading
var percent = (__music.getBytesLoaded()/__music.getBytesTotal())*100;
if(percent > 0)
{
__path.track.mask._xscale = __music.position/(__music.duration/percent);
}
}
private function loadBar():Void
{
__path.track.load_mask.onEnterFrame = Library.delegate(this, “updateLoadBar”);
}
private function updateLoadBar():Void
{
var percent = (__music.getBytesLoaded()/__music.getBytesTotal())*100;
if(percent > 0)
{
__path.track.load_mask._xscale = percent;
}
}
//Returns ID of the current track playing.
public function get trackid()
{
return __trackid;
}

private function loadPlaylist()
{
playlistStyle()
// adds a default icon to the list’s items (you need to have an mc in the library with an instance nam of “playlistIcon”)
//playlist.defaultIcon = “playlistIcon”

// populate the playlist
for(var i:Number=0; i<__tracks["titles"].length; i++)
{
var trackInfo:String = __tracks["artists"][i] + ” – ” + __tracks["titles"][i];
__path.playlist.addItem(trackInfo, i)
}

// create listener to detect change in the list
var owner:MusicPlayer = this
var listListener:Object = new Object();
listListener.change = function(evt_obj:Object)
{
owner.listTrackId = evt_obj.target.selectedIndex
owner.playlistSelectedTrack()
}
__path.playlist.addEventListener(“change”, listListener)

// select initial track
__path.playlist.selectedIndex = 0

}

private function playlistSelectedTrack()
{
beginLoad(listTrackId)
}

private function playlistStyle()
{
// adds style to the playlist
var arrListColors:Array = new Array(0xA3E3FE, 0xD5F2FF)
__path.playlist.alternatingRowColors = arrListColors
__path.playlist.rollOverColor = 0xFFFF2B
__path.playlist.selectionColor = 0x008ECC
}
}

Special Characters Fix

Have you ever tried useing inside your xml characters like: “ê”, “ñ”, “ü”, and so on…. ?

If you have an xml that contains that sort of characters, you might find your self wondering why they won’t show up inside your text fields when you publish your project. It happened to me, and found a solution for this, by useing in stead html entities replacements that you can find here: http://www.w3schools.com/tags/ref_entities.asp

And don’t forget to have your text fields read html text (yourTextField.html = true; yourTextField.htmlText  = stringTextFromYourXml), and also embed your font (txt.embedFonts = true)

So after finding the apropriate html replacement for the character ü (which is ü), my XML sample tag “<my_tag>Shüll</my_tag>” would become <my_tag>Shüll</my_tag>

But still it won’t work, because Flash at compile time it transformes the “&” character from your ” ü ” replacement, to “&”. To hack this up you should have a method that searches for  ” & ” in your text string and replaces it back with “&”.

Here are the two helpfull methods:

 public static function replace(str:String,find:String,replace:String):String
 {
  var index:Number;
  while(str.indexOf(find)!=-1)
  {
   index= str.indexOf(find);
   str = str.substr(0,index) + replace + str.substr(index + find.length);
  }
  return str;
 }

and

  public static function htmlReplace(str:String):String
 {
  str = replace(str,”&”,”&”);
  str = replace(str,”"”,”‘”);
  str = replace(str,”>”,”>”);
  str = replace(str,”<”,”<”);
  
  return str;
 }

If let’s say “yourTextField” is the texfield instance and “stringTextFromXml” is the string inside which you keep your text content from <my_tag></my_tag>, then here is how you use the code: yourTextField.htmlText = htmlReplace(stringTextFromYourXml)

You should now see “ Shüll ” inside you text field, instead of ” Shüll “, which is what we were after.

Follow

Get every new post delivered to your Inbox.