agile flash

Bulk swap elements from timelines by tagging their layers

Gabriel Giacomini — Tue, 12 Oct 2010 14:01:12 +0000

This happened me several times: I needed to swap a lot of movie clips, and the flash swap dialog completely ignores ergonomy, specially when your library has more then 300 symbols. This scripts handle it. You “tag” the layer of the movieclip with the name of the movieclip we’ll swap to. And tagging layers is a pretty easy task, copy paste. So, in steps:

1) Here are our layers. one layer with an instance of the “BlueBall” movie clip, and the others, instances of “RedBall” (sorry for the french flash version)

2) Supposing we want to swap the redBalls to the blue balls: we write (swap:BlueBall) in the RedBalls layers, like this:

3) You run the JSFL script, and voilà!

Here is the script:

function process_layers(layers){
var layers_length=layers.length;
for( var i = 0; i < layers_length; i++){
var layer = layers[i];
var replaced=false;
var frames=layer.frames;
var frames_length=frames.length;
for(var j = 0 ; j < frames_length ; j++){
var frame = frames[j];
var elements=frame.elements;
var elements_length=elements.length;
for(var k = 0 ; k < elements_length ; k++){
var element = elements[k];
if(element.elementType==‘instance’){
var item=element.libraryItem;
if(item!=undefined){
if(item.itemType==‘movie clip’){
if(!(layer.name.indexOf(‘(swap:’)==-1)){
var startIndex=layer.name.indexOf(‘(swap:’)+6;
var lastIndex=layer.name.indexOf(‘)’,startIndex+1)
var find_string=layer.name.substr(startIndex,lastIndex-startIndex);
var found_item=find_in_library(find_string);
if(found_item!=false && found_item!=undefined){
element.libraryItem=found_item;
replaced=true;
}else{
replaced=false;
}
}
}
}
}
}
}
if(replaced){
layer.name=layer.name.split(‘(swap:’+find_string+‘)’).join(”);
}
}
}
find_in_library = function(find_string){
var library=fl.getDocumentDOM().library;
var items=library.items;
var items_length=items.length;
for( var i = 0; i < items_length; i++){
var item=items[i];
if(item.itemType == ‘movie clip’){
var handle_string=item.name;
var firstIndex=handle_string.lastIndexOf(‘/’)+1;
handle_string=handle_string.substr(firstIndex);
var lastIndex=handle_string.indexOf(‘ ‘);
if(lastIndex!=-1){
handle_string=handle_string.substr(0,lastIndex);
}
lastIndex=handle_string.indexOf(‘(’);
if(lastIndex!=-1){
handle_string=handle_string.substr(0,lastIndex);
}
if(handle_string==find_string){
return item;
}
}
}
}
//process main timeline
process_layers(fl.getDocumentDOM().getTimeline().layers);
//process timeline from movieclips that are in the library
var library=fl.getDocumentDOM().library;
var items=library.items;
var items_length=items.length;
for( var i = 0; i < items_length; i++){
var item=items[i];
if(item.itemType==‘movie clip’){
process_layers(item.timeline.layers);
}
}

Click here to download

Remove empty folders from library

Gabriel Giacomini — Mon, 11 Oct 2010 13:13:48 +0000

Oh, this is a simple trick, but might be useful if you have a huge library. You know… when you use the “remove unused items” and flash does forget to remove the folders

function remove_empty_folders(doc){
for( var i = 0; i < doc.library.items.length; i++){
var item=doc.library.items[i];
var item_name=item.name;
var item_name_length=item_name.length;
if(item.itemType==‘folder’){
var count_children=0;
for( var j = i+1; j < doc.library.items.length; j++){
var subitem=doc.library.items[j];
if(subitem.name.substring(0,item_name_length)==item_name){
count_children++;
break;
}
}
if(count_children==0){
fl.trace(‘remove ‘+item.name);
doc.library.deleteItem(item.name);
i=-1;
}
}
}
}
remove_empty_folders(fl.getDocumentDOM());

Click here to download

Find and Replace Library Names and Linkages using JSFL

Gabriel Giacomini — Fri, 04 Jun 2010 22:03:34 +0000

Another script to save programmer’s fingers. It replaces words in library, including linkages and package names. Case sensitive. So, if you want to replace all class linkages from the package “com.test1″ to “com.test1.specific”, it’s an instant. It asks which is the word to substitute, and by which word. Hit ok, and it’s done.

function find_and_replace_in_library(){
var substitute=prompt(‘What is the word to substitute?’);
var newterm=prompt(‘By which word?’);
if(substitute==null || newterm==null){
return;
}
for( var h = 0; h < fl.getDocumentDOM().library.items.length; h++){
var item=fl.getDocumentDOM().library.items[h];
//search for item name
var full_item_name=item.name;
var item_folder=full_item_name.substr(0,full_item_name.lastIndexOf(‘/’));
var clean_item_name=full_item_name.substr(full_item_name.lastIndexOf(‘/’)+1);
var old_name=clean_item_name;
var new_name=”;
var exploded=old_name.split(substitute);
for(var i=0; ilength; i++){
if(i!=0){
new_name+=newterm;
}
new_name+=exploded[i];
}
if(old_name!=new_name){
item.name=new_name;
}
//search for linkage
if(item.itemType==‘movie clip’){
if(item.linkageClassName!=” && item.linkageClassName!=undefined && item.linkageClassName!=null){
var old_name=item.linkageClassName;
var new_name=”;
var exploded=old_name.split(substitute);
for(var i=0; ilength; i++){
if(i!=0){
new_name+=newterm;
}
new_name+=exploded[i];
}
if(old_name!=new_name){
item.linkageClassName=new_name;
}
}
}
}
}
find_and_replace_in_library();

Click here to download

Automatically assign AS3 class linkages to library Bitmaps using JSFL (CS4+)

Gabriel Giacomini — Sun, 09 May 2010 07:19:24 +0000

This script prompts you to choose the package for the linkages that will be added. Then, it search for all not yet linked bitmaps in library. When it find anyone, it set the class name based in the library item name.

Unfortunately, it won’t work on CS3.

function add_linkage(doc){
var package=prompt(‘Choose a package or live it blank’,”);
if(package==null){
alert(‘Command cancelled by user’);
}
if(package!=”){
package+=‘.’;
//remove double points and spaces from package name and lower its case
package=package.split(‘..’).join(‘.’).split(‘ ‘).join(”).toLowerCase();
}
var library=doc.library;
var items=library.items;
var items_length=items.length;
for( var h = 0; h < items_length; h++){
var item=items[h];
if(item.itemType==‘bitmap’){
if(item.linkageExportForAS==false){
fl.trace(‘tenta’);
//extract class name from the item name
var class_name=item.name.substr(item.name.lastIndexOf(‘/’)+1).toLowerCase();
//remove extensions
class_name=class_name.split(‘.jpg’).join(”);
class_name=class_name.split(‘.png’).join(”);
class_name=class_name.split(‘.gif’).join(”);
//force first letter to be uppercase
class_name=class_name.substr(0,1).toUpperCase()+class_name.substr(1);
//remove points and spaces
class_name=class_name.split(‘.’).join(”).split(‘ ‘).join(”);
//sum and set it up
item.linkageExportForAS=true;
item.linkageClassName=package+class_name;
item.linkageBaseClass=‘flash.display.BitmapData’;
}
}
}
}
add_linkage(fl.getDocumentDOM());

Click here to download

Planning flash movieclip hierarchy using photoshop layers

Gabriel Giacomini — Wed, 28 Apr 2010 11:00:21 +0000

Today we’ll see an idea about organizing flash layout and library in a parent/child basis. Things inside the menu goes inside the menu. Things inside the bottom bar are children of the bottom bar. This idea is obvious at all, but the idea here that may be different for a lot of people is to plan and prepare it inside of photoshop, because since it’s very intuitive and it make the process faster. So, suppose we have a very simple website to build, composed by:

a logotype with lettering and background;
a menu with titles and background;
a content box with a background;
a bottom bar with a copyright signature, a follow link and background;
the full background of the application.

We’ve briefly gave names to the photoshop layers, getting able to visually understand what is in the photoshop file just by examining the layers. After some minutes of handy work discovering what each layer means and giving them names, they look like this:

First of all, we can see this is a website structure layout. By choice, I always start my hierarchies with a patriarch, a most-comprehensive movieclip that will embrace all the elements of the layout. The reason? addChild(new Patriarch_name()). Following, we’ll nest a few other movieclips that will be direct sons of the ancient patriarch. This second generation will represent the main elements of our layout, that will embrace all the other elements. In this specific case I’ve somehow decided to arrange them in four movieclips like this:

Structure
- Top
- Bottom
- Content
- Background

In photoshop:

So, let’s the main reasons for the above choice of arrangement:

Organizing elements by position in the layout will facilitate screen size adaption, since these elements represents that groups of elements that will keep together independent of the screen size;
Triggering animation may become very easier if the elements that will be moved together are children of the same movieclip. This way, we can create a single animation for the parent, intead of several for the children;
Abstractions like “top”, “bottom”, “background” and “content” are very easy to understand. If you read the above list of movieclips and look to the layout, you’ll easily intuit which elements of the layout are embraced by each of them.

Next, let’s spread all the remaining elements:

Structure
- Top
  - Logotype
    - Lettering
    - Background
  - Menu
    - Profile
    - News
    - Events
    - Contact
    - Background
- Bottom
  - Copyright
  - Followme
  - Background
- Content
  - Background
- Background

Same in photoshop:

Download the above PSD file by clicking here.

As you have just seen, movieclips can be art layers or layer sets. When it’s just s DisplayObject, we use an art layer (normal layer, solid fill, text field, etc), but when it is a DisplayObjectContainer, we use a layer set to puts its children inside. It’s simple like that, and this is where we were to reach by this post. After organizing, try this script.

Why I’ve chosen to arrange them this way?

Grouping the Lettering and Background of the Logotype allow us to add behavior that is peculiar to this group, not to the separate elements themselves. In this case, It serves to build the whole logotype as a button that lead to the home page. So, anywhere you click in the logotype, is in the lettering is in the background, you’ll trigger the same action, without needing to add code in both elements.
Grouping all the menu elements enable us to add actions that belong to that group of elements, rather than to the separate elements themselves, same way as in the previous topic. For example, the “Menu” abstraction would be very useful to host a method that enable or disable the clickability of both Profile, News, Events and Contact. So, we can add “enable” and “disable” public methods to the Menu, and trigger them calling Menu.enable() or Menu.disable() – substituiting “Menu” by the Menu instance name, probably mc_menu or menu_mc.
Abstractions are very beautiful things when they do work. You will also save time if you create well-built abstractions that, following the real world and needs logic, will generally fit the later-appearing needs of programming and won’t let you down.

Bug: flash psd importer crashes when “ok” button is hitted

Gabriel Giacomini — Wed, 28 Apr 2010 10:57:21 +0000

If you leave a empty layer set at photoshop and try to import the psd file, flash psd importer will crash, at least at flash 8, cs3 and cs4 for windows.

Putting in images:

Easy solutions:

just removing the empty folder
adding a “markup” layer inside the folder, so it won’t crash. Then, You can manually remove this layer after importing. (or build an automation for that)

Bug: flash psd importer bring text scaled, in wrong font-size

Gabriel Giacomini — Wed, 28 Apr 2010 10:55:43 +0000

If photoshop text layers is not set as “paragraph text”, they may get imported in the wrong font face size. Visually, It won’t look it’s wrong-sized, since the flash text field will be scaled to fit the correct size. However, If you need to work reading variables like “textWidth” and “textHeight” from these fields, it can give you hard problems. Let’s look this in details:

When you are editing layer texts in in photoshop and in it is set up like “point text”, it look like this:

But since Flash PSD Importer don’t deal very well with point text, we’ll need everything that will be imported to flash to bet set up as “paragraph text”, like here:

Photoshop has a built-in tool to convert point text to paragraph text without needing to create it again. To do it, right-click the text layer at the layers panel, and select the “convert to paragraph text” option.

Bug: flash psd importer adds an extra instance of a movieclip inside the assets folder

Gabriel Giacomini — Wed, 28 Apr 2010 10:55:38 +0000

This is probably the mostly exhotic post of this blog. I have several times had problems with this bug, so I’ve built a script to correct it. Flash PSD importer, in rare occasions, create non-desired movieclips inside of the desired movieclips. These bastards come nested inside the Assets folder of the “real movieclip”, and are child instances of the real movieclip.

So, if we would import a bitmap layer called “weirdlayer” as a movie clip, it would appear in the library like this:

But when the bug happens, it come like this:

So, here is a JSFL Script that detects all the occurrences of this bug in the current document and get them fixed. Sorry it’s a little bit lengthy.

function fix_assets_bug(){
var library=fl.getDocumentDOM().library;
//items from the library
var items=library.items;
var items_length=items.length;
for( var h = 0; h < items_length; h++){
var item=items[h];
if(item.itemType==‘movie clip’){
var full_item_name=item.name;
var item_folder=full_item_name.substr(0,full_item_name.lastIndexOf(‘/’));
var clean_item_name=full_item_name.substr(full_item_name.lastIndexOf(‘/’)+1);
var timeline=item.timeline;
var layers=timeline.layers;
var layers_length=layers.length;
for( var i = 0; i < layers_length; i++){
var layer = layers[i];
var frames=layer.frames;
var frames_length=frames.length;
for (var j=0; j){
var frame=frames[j];
//elements from the frame
var elements=frame.elements;
var elements_length=elements.length;
if(elements_length!=0){
for(var k=0; k){
var element=elements[k];
if(element.elementType==‘instance’){
var subitem=element.libraryItem;
if(subitem!=undefined){
if(subitem.itemType==‘movie clip’){
//the name of the movieclip in the library
var full_subitem_name=subitem.name;
//the path of the folder in which this movieclip is in
var subitem_folder=full_subitem_name.substr(0,full_subitem_name.lastIndexOf(‘/’));
//the name of this item, withou the full path
var clean_subitem_name=full_subitem_name.substr(full_subitem_name.lastIndexOf(‘/’)+1);
//if both item and subitem have the same name
if(clean_item_name==clean_subitem_name){
//we have found a suspect! let’s check if it is really bugged stuff
if(subitem_folder== (item_folder+‘/Assets/’+clean_subitem_name)){
//if the child movieclip is inside the assets folder of the parent movieclip
fl.trace(‘got it! bugged item ‘+clean_subitem_name+‘ will be corrected’);
library.editItem(item.name)
fl.getDocumentDOM().currentTimeline=item.timeline;
fl.getDocumentDOM().getTimeline().currentLayer=0;
fl.getDocumentDOM().getTimeline().currentFrame=0;
fl.getDocumentDOM().selectAll();
fl.getDocumentDOM().breakApart();
}
}
}
}
}
}
}
}
}
}
}
}
fix_assets_bug();

Click here to download

Create unique and hierarchy-oriented layer names using Photoshop Scripting

Gabriel Giacomini — Tue, 27 Apr 2010 16:00:08 +0000

So, here we have two similar layer lists.

At left one is how I naturally organize my PSD files in photoshop. And at right how I like to have them to import them to flash as movie clips, using flash psd importer. Manually organize layers like those in the right is boring even for the most motivated intern. So, we have this photoshop script to rename everything generating unique and comprehensible movie clip names for a programmer-friendly flash library.

function process_layer(layer,parent_name){
var layer_name=layer.name;
//first letter uppercase, other lowercase
layer_name=layer_name.substr(0,1).toUpperCase()+layer_name.substr(1).toLowerCase();
//remove empty spaces, hyphens
layer_name=layer_name.split(‘ ‘).join(”).split(‘-’).join(”);
var full_name=parent_name+layer_name;
switch(layer.typename){
case ‘LayerSet’:
layer.name=full_name;
var children=layer.layers;
for(var k=0; klength; k++){
var child=children[k];
process_layer(child,full_name);
}
break;
case ‘ArtLayer’:
if(layer.kind==LayerKind.TEXT){
layer.name=layer_name.toLowerCase();
}else{
layer.name=full_name;
}
break;
}
}
doc=app.activeDocument
var layers=doc.layers;
var layers_length=layers.length;
for(var j=0; j){
var layer=layers[j];
process_layer(layer,”);
}

Download the photoshop script

To run this script open a psd file and click File > Scripts > Browse

Setting up and using flash PSD importer to bring bitmaps and create movie clips

Gabriel Giacomini — Sun, 25 Apr 2010 23:23:51 +0000

Importing flash materials asset-by-asset may be very painful and can take a long time to get completed. It encourage disorganization, since It’s double work to organize the library and follow a strict name standardization when we are manually bringing materials in. Besides that, the manual process provides great risk of human error, and I also believe It’s a waste of human time, since we should employ our time with higher tasks that really demand our human intelligence, leaving repetitive labour to machines.

Fortunately flash has a PSD File Importer, allowing us to import all the layers of a photoshop file at once. Althought having very limited features, it works. But there’s something that makes it really useful. This post is about using photoshop layers architecture do simulate movieclip hierarchy. For an example, we have this layer organization in our psd file:

Download the above PSD file by clicking here.

So, this is very organized. Menu items are inside of menu, menu are inside of top bar, copyright and follow me button is inside bottom bar, everything is inside of something we call structure. So, the idea here is to replicate this exact nesting organization inside of flash, where each menu item will be a movie clip child of menu, menu will be a movieclip child of top, that itself will child of the “structure” movie clip. This is easy. We’ll just need to adjust psd importer settings.

To make it, click “Edit > Preferences”.

Then choose to edit “PSD File Importer”, and here are the setting I normally use.

Now, the settings:

Import image layers as Bitmap images with editable layer styles: choosing this option, all normal/bitmap psd layers will be transformed into movieclips, and the bitmap content will have alpha channel, without merging to the other images as happens in the “flattened bitmap images” option;
Import text layers as Editable text.
Layer groups create movieclips: this is our most important option, because it transform photoshop layer sets into movieclips that are parent of those layers inside the layer set.
Movieclip registration: that depends a lot on which movieclip registration you most use in your projects, so it’s very personal.
Compression lossless. Any layer looks better if compressed using lossless. What we are unlucky is that some of them get too heavy. So, my choice is to import everything in lossless and then check which of them are too heavy and change their compression later, os running this script.

Then, create a new file in flash, then hit “File > Import do stage and select your psd file.

You’ll have this window:

Just hit “ok” and you’ll have your layers imported according to the default settings we have set. If you desire to set up settings on a layer basis, click them and you’ll have options at the rights.