SplitTextField : How to modify color and text

[Register]

Hi,

 

I have an animation which the user can modify, the change color, texts... I'm using TextField with stylesheet. It's in a html page and the user can interact with the anim data with JS.

The animation plays, then the user can change the informations displayed. The replay the animation to test it's modification. I could change the theme (background and text colors) and replay to watch the modified anim.

But if I deactivate SplitTextField at the end of the animation to allow the user to interact with the original field and the text within. When I reactivate it, it's the original split which is shown not an updated split with the new informations.

All object are animated in timeline and tweens. How can I just modify the splited infos to replay the main time line? Should i recreate all the timelines in odred to take into account ?

 

Regards,

[Carl]

Hi I'm having a little trouble understanding the full scope of what you are trying to do.

 

But if I deactivate SplitTextField at the end of the animation to allow the user to interact with the original field and the text within. When I reactivate it, it's the original split which is shown not an updated split with the new informations.

 

 

Yup, that is how the plugin is designed to work. Once you split a textfield, the original remains "pure" so it can be swapped back in. 

 

From what I gather you are going to have to manage 3 different displays of your text

 

1. The original which is preserved by SplitText
2. The split text which you use for animating
3. a textfield that the user can interact with and modify

I believe you will have to find a way the user makes changes to text #3 and apply those settings to each individual piece of text in #2.

 

I wish I could be of more help, but again, it is difficult to understand what needs to happen without seeing it.

[Register]

Hi,

 

As part of an complex animation i have a field with "Super Promo" in red, this field is transformed into a SplitTextField (STF).

The user can interact with it. Say that he play the timeline. When the timeline stopped the STF is deactivated. Then the user choose a new text "This week promo" and a new color, the TextField is modify accordingly but if he replays the animation the SplitTextField should be reconstruct. A re-activation show the old text and color.

If the STF animation is part of a complex timeline animation which option did i have to take into account the changes.

Reconstruct all the timeline after removin/cleaning the old one, or did I have a way to refresh/replace the STF and his tweenings/Timeline ?

 

Thanks

[GreenSock]

I'm not sure I completely understand your question (a sample FLA would go a LONG way in helping us understand), but yes, if you're changing the text completely, you'd probably need to re-construct your tweens/timelines accordingly because there could be a completely different number of characters/words, plus they're technically different instances too. 

 

Happy tweening!

[Register]

Here's my animation function

Say that after playing it one time, I change the content of one of the SplitTextField and his color. What is the most efficient way to replay the animation.

De-activate/active the split text field and replay the animation does not reflect the changes.

Calling directly the function animate doesn't work either (elements are disappearing) and nothing is playing.

public function animate()
{
 // Animation
  var split_text_product:SplitTextField = new SplitTextField(product_name);
  var split_text_brand:SplitTextField = new SplitTextField(brand_name);
  var split_text_pharmacy:SplitTextField = new SplitTextField(pharmacy_name);

  var tl:TimelineMax = new TimelineMax({repeat:3});
  tl.append( TweenMax.to(price, .1, {alpha: 0}) );
  tl.append( TweenMax.to(price, .3, {alpha: 1}) );

  var price_tl:TimelineLite = new TimelineLite() ;
  price_tl.append(TweenLite.from(price_bkg, 1, { x: -600 })) ;
  price_tl.append(TweenLite.from(tags_elem, .7, {scaleX: 0, scaleY: 0, ease:Quad.easeOut }), -1) ;
  price_tl.append(TweenLite.from(price, 1, {scaleX: 0, scaleY: 0, ease:Elastic.easeOut })) ;
  price_tl.append(tl, 1);

  var product_tl:TimelineLite = new TimelineLite() ;
  product_tl.append(TweenLite.from(product_img, .7, { x: 1200, ease:Cubic.easeInOut }), 1) ;
  product_tl.append(TweenLite.from(product_img, .3, { blurFilter: {blurX:20}, ease:Elastic.easeIn }), -0.2) ;

  var timeline:TimelineLite = new TimelineLite() ;
  timeline.appendMultiple(TweenMax.allFrom(split_text_product.textFields, 1, {scaleX: 0, scaleY: 0, ease:Elastic.easeOut }, 0.07), 0) ;
  timeline.appendMultiple(TweenMax.allFrom(split_text_brand.textFields, 1, {scaleX: 0, scaleY: 0, ease:Elastic.easeOut }, 0.07), -1) ;
  timeline.appendMultiple(TweenMax.allFrom(split_text_pharmacy.textFields, 2, {scaleX: 0, scaleY: 0, ease:Elastic.easeOut }, 0.07), -2) ;
  timeline.append(price_tl, -1 ) ;

  main_timeline.add(price_tl, 0) ;
  main_timeline.add(product_tl, 0) ;
  main_timeline.add(timeline, 0) ;
} 

[Register]

Hi,

 

Add the followingg code at the beginning of the animate fuction, and now everything seems to replay fine.

 

In the calling function i do  main_timeline.stop()  and  main_timeline.clear() before calling animate()
 

var elems = new Array() ;
  for(var i:uint = 0; i < this.numChildren; i++)
  {
   var elem = this.getChildAt(i) ;
   extrace(getQualifiedClassName(elem)) ;
   if(elem is SplitTextField) 
   {    	
    elem.destroy() ;
    }
   }

main_timeline = new TimelineLite({align: 'start'})

[Register]

HI, I'm having trouble reconstructing a timeline, it works when all the nested timeline had played. But if I try to reconstruct the timeline during the playing some nested time line disappears.

 

function animate :

if(main_timeline)
{
 main_timeline.stop() ;
 main_timeline.clear() ;
}

... Code above to clear split text ...

main_timeline = null ;
main_timeline = new TimelineLite({align: 'start'}) ;

... creation of sub_timeline ...
main_timeline.add(sub_timeline, 0)

If animate  is called during the playback it glitched... some elements disapeared.

[Register]

Ok got it..... tought that if clearing the timeline all the element tween will set back to the init settings (position, opacity...) But no, they stay where they were during their twining...

 

Using

main_timeline.seek(main_timeline.duration(), false);

work, because all my tweening are "tweening from" so at the end all the element are in their init state. How can I do to clear all the tweening modification apply to en element ?

 

Regards,

[Carl]

Unless I'm misunderstanding you, seeking to the end of the timeline as you are doing should remove all the properties that were set when the from() tweens immediately rendered.