break apart movieclip dynamically

[Pier25]

Anyone knows if this is possible and how?

Regards

[Pier25]

no ideas? :)

[Digitalosophy]

Break apart for what reason? What are you trying to accomplish?

[Pier25]

for example breaking a text field apart and animating the individual caracters through Fuse kit

[Digitalosophy]

I don't think that's possible - what you can do is dynamically create a movie clip for each letter with a text field in it and embed each character one by one. Then you would have separate movie clips so you can theoretically do what ever you want with them.

I'm sure this has been asked and answered before, try running a search and maybe you will get something better then I suggested :)

[Pier25]

This is what I was thinking too, but I'm no expert either...

I googled it up a little bit but found no info...

Thanks anyway ;)

[Pier25]

oh by the way... I love your signature!

I hate myspace too...

[Digitalosophy]

hehe thank you - let me see if I can come up with something that can at least get you started.

[Digitalosophy]

This should get you started. It will display each letter in it's own movieclip and randomly place them on the stage.


var str = "Digitalosophy";
var strLength = str.length;
for (i=0; i<strLength; i++) {
txtClip.duplicateMovieClip("txtClip"+i, i, {_x:Math.random()*300, _y:Math.random()*200, _alpha:Math.random()*50});
this["txtClip" + i].txtBox.text = str.charAt(i);
}


And a file for your reference. Not sure what you plan on doing next but this should get you on your way.

[onecommoncode]

Work was slow so I decided to whip up my version of animating text. I didn't use Fuse but used the tween class. Hope this helps you out and feel free to add/modify for whatever you want.

[Digitalosophy]

Work was slow so I decided to whip up my version of animating text. I didn't use Fuse but used the tween class. Hope this helps you out and feel free to add/modify for whatever you want.

Got an MX version? Curious to see how you did it.

[onecommoncode]

I don't have a MX version. I have a mc in my library with a linkage name of "lib.Item" and inside of that mc is a textField with an instance name of "textField". Here is my AS that I used:

PS: I just attached the SWF so the ones that don't have CS3 can see what it looks like.


// Import the tween class
import mx.transitions.Tween;
import mx.transitions.easing.*;

// Here is my string that I want to use.
var contentText:String = "i was bored and made a text effect**";
contentText += "here is a decent text effect that might be what your trying to accomplish.*";
contentText += "if you look at the source you will see that i am using an astericks*";
contentText += "as a line break. so the more you add in the more space there will be.*";
contentText += "i have also added in a param so you have control of the spacing between*";
contentText += "the letters, line height, x position, y position and speed.**";
contentText += "feel free to modify this anyway you like and this can easily be updated*";
contentText += "to use fuse kit if you prefer to do it that way**";
contentText += "hope you guys enjoy!";

// Instantiating the animateText method
// animateText( array, start x, start y, spacing between letters, how much line height "*" will be, speed );
animateText( getItems( contentText ), 20, 20, 0, 10, .50 );

function animateText( item:Array, x:Number, y:Number, spacing:Number, lineHeight:Number, speed:Number ):Void
{
var i:Number = -1;
var offsetX:Number = x;
var offsetY:Number = y;
var tween:Tween;

onEnterFrame = function():Void
{
if( ++ i == contentText.length - 1 )
{
delete onEnterFrame;
delete tween;
}

var items:MovieClip = attachMovie( "lib.Item", "items_" + i, i );
items.textField.autoSize = true;
items.textField.text = item[i].toUpperCase();

tween = new Tween( items, "_x", Strong.easeOut, Math.random() * Stage.width, offsetX, speed, true );
tween = new Tween( items, "_y", Strong.easeOut, Math.random() * Stage.height, offsetY, speed, true );

offsetX += items._width + spacing;

// If the text is the astericks, then we need the field to no be visible and the
// offsetX to go back to the starting position and the offsetY needs to be updated.
if( items.textField.text == "*" )
{
items.textField._visible = false;
offsetY += ( items._width + lineHeight );
offsetX = x;
}

}
}

// This is the method that converts the string into an array
function getItems( string:String ):Array
{
var item:Array = [];

item = string.split("");

return item;
}

[Digitalosophy]

Once again nice job man.

[onecommoncode]

You can do so much with it and modify it a lot. Since I am using the tween class you can have the text come in anyway you like add a random color to each letter, etc.etc.

[prg9]

for example breaking a text field apart and animating the individual characters through Fuse kit

Just FYI in case you have never seen this, FuseKit also offers an extension called FuseFX.

FuseFX
http://www.mosessupposes.com/Fuse/FuseFX.html
http://www.mosessupposes.com/Fuse/FuseFX0.3.zip

Which also has a TextFX included which you may like.
TextFX: Animate all numerical TextFormat properties right on a TextField.
http://www.mosessupposes.com/Fuse/FuseFXDocs/textfxexample.html

However onecommoncode's is really nice (as are all your code snippets :thumb: ) and allows for alot of modifications.

Work was slow so I decided to whip up my version of animating text. I didn't use Fuse but used the tween class. Hope this helps you out and feel free to add/modify for whatever you want.

That looks really nice onecommoncode, you might want to resave your FLA as Flash 8 as I am sure people are gonna really like this. Really cool, nice job onecommoncode! (I would hate to see what you can do when your not bored ;) ).

[onecommoncode]

Here is the text effect saved for Flash 8.

[onecommoncode]

I know someone will probably be interested but here is a new version with the text being pulled from a XML file. I saved it out as Flash 8 so hopefully you guys can open.

If you don't have Flash 8 here is the AS so you can see how I am doing it. I created a mc in my library with a linkage name of "lib.Item" and that mc has a text field inside of it with an instance name of "textField".

Its not too different except the text comes from a XML file.


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

var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = onXMLLoaded;
xml.load( "xml/data.xml" );

function onXMLLoaded( success:Boolean ):Void
{
if( !success )
{
onLoadError();
return;
}

var node:String = xml.firstChild.childNodes[0].firstChild.nodeValue;

animateText( getItems( node ), 20, 20, 0, 10, .50 );

xml = null;
}

function onLoadError():Void
{
trace( "Error loading XML Doc" );
}

function animateText( item:Array, x:Number, y:Number, spacing:Number, lineHeight:Number, speed:Number ):Void
{
var i:Number = -1;
var offsetX:Number = x;
var offsetY:Number = y;
var tween:Tween;

onEnterFrame = function():Void
{
if( ++ i == item.length - 1 )
{
onEnterFrame = null;
tween = null;
}

var items:MovieClip = attachMovie( "lib.Item", "items_" + i, i );
items.textField.autoSize = true;
items.textField.text = item[i].toUpperCase();

tween = new Tween( items, "_x", Strong.easeOut, Math.random() * Stage.width, offsetX, speed, true );
tween = new Tween( items, "_y", Strong.easeOut, Math.random() * Stage.height, offsetY, speed, true );

offsetX += items._width + spacing;

if( items.textField.text == "*" )
{
items.textField._visible = false;
offsetY += ( items._width + lineHeight );
offsetX = x;
}

}
}

function getItems( string:String ):Array
{
var item:Array = [];

item = string.split("");

return item;
}

[prg9]

I know someone will probably be interested but here is a new version with the text being pulled from a XML file.

:thumb2: Sweet onecommoncode! I hope your bored all night, then by morning who knows what features this might have ;)

Nice stuff onecommoncode!

[Digitalosophy]

yea this is good stuff, thanks!

[prg9]

Yeah again, great stuff onecommoncode!

Next Phase Idea/Suggestions (if your still bored and need ideas ;) ):

1.) add Next/Previous buttons to cycle/loop through XML nodes + Num indicator ie: 1 of 4 etc..
2.) cdata in XML (HTML)
3.) Attatch sound for each letter

Now your probably thinking yeah right dude, whatever! Hey they are just merely suggestions/ideas (ha, ha)

Great stuff onecommoncode! :sc:

[onecommoncode]

oooh I like number 1 I might try to do that if I have time at work tomorrow. Not sure if #2 is possible since I am converting the string into an array. So Flash no longer reads it as a string and using htmlText = true does not work. ( I have already tried ).

I already have an idea for #2 so I am going to see if I can work something out.

[Sabir]

Hi, This post is very informative, however I would like some specific information. If someone can help me then please send me a private message. Best Regards,

[Digitalosophy]

onecommoncode, do you mind if I move this to Best of Kirupa?

[onecommoncode]

You can move this to wherever you like :)

[Pier25]

wow this thread has become really big :)

Thanks for all your ideas. I supose the answer is "no, you can't break apart a movieclip dynamically. If you need pieces of something just create them dynamically or manually first"

[onecommoncode]

I don't think you can break apart a movie clip, I know you can break apart a bitmap and then go from there.

[onecommoncode]

I made some modifications based on prg9's request. The text is still being pulled from a XML file but I have now added forward and back arrows. If you click on the forward button it will go through all the nodes in the XML file and when it hits the last node the forward button goes bye bye.

Same with the back button when you first test the movie, it is not there because your on the first node and you can't go back. Once you move forward then the back button will show so you can go back to the previous node.

I saved as Flash 8 (thats the lowest I can go) but I am also putting the AS if you can't open the FLA. I have 3 mc's in my library and everything is being linked from my library.

Hope you guys enjoy and feel free to comment if my code is whack and let me know if I can optimize even more.

:)


import flash.filters.DropShadowFilter;
import flash.geom.Point;
import mx.transitions.Tween;
import mx.transitions.easing.*;

//
// History counter used for the forward and back buttons
//
var HistoryIndex:Number = 0;

//
// Array that will hold the data from the xml file
//
var xmlData:Array = [];

//
// Drop shadow applied to the arrows.
//
var shadow:DropShadowFilter = new DropShadowFilter( 4.0, 45.0, 0, 0.2, 2.0, 2.0 );

//
// Container that holds the text
//
var container:MovieClip;

//
// Attaching the forward and back arrow from the library
//
var forwardArrow:MovieClip = attachMovie( "lib.ForwardArrow", "forwardArrow", 1 );
forwardArrow._x = Stage.width - 50;
forwardArrow._y = Stage.height - forwardArrow._height >> 1;
forwardArrow.filters = [shadow];

var backArrow:MovieClip = attachMovie( "lib.BackArrow", "backArrow", 2 );
backArrow._x = 10;
backArrow._y = Stage.height - backArrow._height >> 1;
backArrow._visible = false;
backArrow.filters = [shadow];

//
// The Items target position
//
var targetPosition:Point = new Point();

var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = onXMLLoaded;
xml.load( "xml/data.xml" );

function onXMLLoaded( success:Boolean ):Void
{
if( !success )
{
onLoadError();
return;
}

var i:Number = -1;
var n:Number = xml.firstChild.childNodes.length;

while( ++ i < n )
{
xmlData.push( xml.firstChild.childNodes[i].firstChild.nodeValue );
}

xml = null;

animator( createArray( xmlData[HistoryIndex] ), 20, 20, 0, 10, .50 );
}

function onLoadError():Void
{
throw new Error( "Error loading XML Doc" );
}

setupButton( forwardArrow );
setupButton( backArrow );

function setupButton( button:MovieClip ):Void
{
button.onRelease = onButtonClick;
}

function onButtonClick():Void
{
switch( this )
{
case forwardArrow:
forwardHistory();
initialise();
break;

case backArrow:
backHistory();
initialise();
break;
}
}

function forwardHistory():Void
{
HistoryIndex ++;

if( HistoryIndex == xmlData.length - 1 )
{
forwardArrow._visible = false;
}

backArrow._visible = true;
}

function backHistory():Void
{
HistoryIndex --;

if( HistoryIndex == 0 )
{
backArrow._visible = false;
}

forwardArrow._visible = true;
}

function initialise():Void
{
var tween:Tween = new Tween( container, "_x", Strong.easeOut, container._x, Stage.width, .50, true );
tween.onMotionFinished = function():Void
{
removeMovieClip( container );
tween = null;

animator( createArray( xmlData[HistoryIndex] ), 20, 20, 0, 10, .50 );
}
}

function animator( item:Array, x:Number, y:Number, spacing:Number, lineHeight:Number, speed:Number ):Void
{
targetPosition.x = x;
targetPosition.y = y;

var i:Number = -1;
var tween:Tween;

container = createEmptyMovieClip( "container", 0 );

onEnterFrame = function():Void
{
if( ++ i == item.length - 1 )
{
onEnterFrame = null;
tween = null;
}

var items:MovieClip = container.attachMovie( "lib.Item", "items_" + i, i );
items.textField.autoSize = true;
items.textField.text = item[i].toUpperCase();

tween = new Tween( items, "_x", Strong.easeOut, Math.random() * Stage.width, targetPosition.x, speed, true );
tween = new Tween( items, "_y", Strong.easeOut, Math.random() * Stage.height, targetPosition.y, speed, true );

targetPosition.x += items._width + spacing;

if( items.textField.text == "*" )
{
items.textField._visible = false;
targetPosition.y += ( items._width + lineHeight );
targetPosition.x = x;
}

}
}

function createArray( string:String ):Array
{
var item:Array = [];

item = string.split("");

return item;
}

[actionAction]

I have added a rotation tween to this very awesome code (thanks onecommoncode!) to spin the letters in. The only issue is that the letter spacing gets all "whacked out" (stretched mostly). I have used negative values, which kind of works, but not totally. Got any ideas?

Here is all that I have altered:

function animator( item:Array, x:Number, y:Number, spacing:Number, lineHeight:Number, speed:Number ):Void
{
targetPosition.x = x;
targetPosition.y = y;
var theEnd:Number = 0;
var theStart:Number = Math.floor(Math.random() * (360 - 90)) + 90;

var i:Number = -1;
var tween:Tween;

container = createEmptyMovieClip( "container", 0 );

onEnterFrame = function():Void
{
if( ++ i == item.length - 1 )
{
onEnterFrame = null;
tween = null;
}

var items:MovieClip = container.attachMovie( "lib.Item", "items_" + i, i );
items.textField.autoSize = true;
items.textField.text = item[i].toUpperCase();
tween = new Tween( items, "_rotation", Strong.easeOut, theStart, theEnd, speed, true );
tween = new Tween( items, "_x", Strong.easeOut, Math.random() * Stage.width, targetPosition.x, speed, true );
tween = new Tween( items, "_y", Strong.easeOut, Math.random() * Stage.height, targetPosition.y, speed, true );

targetPosition.x += items._width + spacing;

if( items.textField.text == "*" )
{
items.textField._visible = false;
targetPosition.y += ( items._width + lineHeight );
targetPosition.x = x;
}

}
}





Thanks,
_aA :beard:

[onecommoncode]

For some reason it doesn't like the Math.random() * 360. You can use this and it works fine

tween = new Tween( items, "_rotation", Strong.easeOut, 360, 0, speed, true );

[actionAction]

Cool, thanks for the idea, and thanks again for your code!

I was trying for a more pseudo-random effect because I also have added an xscale and yscale tween so the letters start out real big in front kind of jumbled and then get pulled and rotated into place. Every tween that gets added seems to increase the kerning and line spacing, to the point where I am adding negative values to animators spacing and lineHeight parameters. A couple of other notes...
1. Adding any one of these tweens changes (increases or decreases) the spacing and lineHeight seemingly randomly on function calls, at least visually.
2. It would be great if we could "explode" and fade the letters as the transition to the next or previous node. It basically would just be the opposite of the animator, right? I am experiencing reduced cognitive function presently, so I cannot make it happen.

[onecommoncode]

I like the idea of them exploding when it goes to the next frame instead of them sliding out. I will see what I can do and attach a newer version once I get it up and running.

Kinda busy at work right now so hopefully I can have it done by the weekend.

[docmars]

I have a plan... :)
I want to make something similar to this:

TXeff: A REALLY Nice Text Animator
www.txeff.com (http://www.txeff.com)
Check it out, it's quite amazing!

Drawbacks: $170...

I REALLY want TXeff, but I am not going to shell out 170-freaking-dollars for a text animator... come on! I hope the creators of TXEff are reading this. YOU ARE OVERCHARGING FOR YOUR PRODUCT... I don't care how awesome it is, it's not $170-awesome, and all my friends on MSN that I've showed your website to agree... it's not worth paying $170 for when you're a freelance web designer who doesn't have that kind of money... much less a high school senior, like me.

So, I plan on making my own quite similar to it, and releasing it for free. Now, I don't plan on infringing copyrights if I create my very own text animation engine, and release it for free, there is nothing to be violated because it's my own, and I don't have access to the code in TXeff because... well... I don't even own it obviously, or else I wouldn't be attempting to create my own.

I'm not very experienced in Actionscript right now, but I am learning more and more as I get ideas towards making this. Many people learn scripting/programming by making something, and learning along the way, then optimize it later when they know even more!

[docmars]

I just found something that might help involving my project, and your uses as well!
This example created by 3pepe3 on ActionScript.org shows how to split a TextField up evenly, retaining its positioning, then applying what are called "behaviors" on each word or letter of the string. In his example is a way to change the alpha of each letter and word! :D

Link to example here:
http://www.actionscript.org/forums/showpost.php3?p=698922&postcount=10

Within the 'test' behavior function he created in the FLA's ActionScript, I commented out the shakeMC line to make the text quit shaking, thus making the text sit still, so don't panic about the shaking. :)

[prg9]

This example created by 3pepe3 on ActionScript.org shows how to split a TextField up evenly, retaining its positioning, then applying what are called "behaviors" on each word or letter of the string. In his example is a way to change the alpha of each letter and word! Link to example here: http://www.actionscript.org/forums/s...2&postcount=10

docmars the link you provided is 404 Page not Found! For anyone interested the working link is this: http://www.actionscript.org/forums/showpost.php3?p=698922&postcount=10

[docmars]

docmars the link you provided is 404 Page not Found! For anyne intersted the working like is this: http://www.actionscript.org/forums/showpost.php3?p=698922&postcount=10

Ahh thanks ^^ I didn't even notice that it was broken! Shoulda tested it after posting. :)

[3pepe3]

:p:
Good luck and will be great to see the result

[Pier25]

I have a plan... :)
I want to make something similar to this:

TXeff: A REALLY Nice Text Animator
www.txeff.com (http://www.txeff.com)
Check it out, it's quite amazing!



It is really cool

how the hell do they do those 3d pivot effects?