A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: text fade

  1. #1
    Senior Member
    Join Date
    Apr 2001
    Posts
    179
    I have some actionscript generated text in an input text box - when a button is pressed the relevant text is placed in the box via actionscript. I want to get the text to fade in when the button is pressed - how is this done? How do you change the alpha value of an input text box?

    Thanks for your time
    Shaka

  2. #2
    Junior Member
    Join Date
    Dec 2000
    Posts
    21

    Simple But Long 4 newbie

    this requires some basic info about variables that i hope u know.....if u do.......this task should be simple.

    as u know there are 3 types of text:
    1-static text:Normal Static text
    2-Dynamic Text:and this acts like a window to a variable.Setting a dynamic text variable name to "X", and u then through action script set the value to "Hello!". when u test the movie......the dynamic text will display "Hello!"
    3-Input Text:Is used to set variables dynamically.continuing on the above example.create input text ands set its variable name to "X".enter desired text and you'll notice that the dynamic text changes with the change of the input....because they both have the same variable.

    ok nuff said about ****ty text lets get to ur question:
    to change the alpha....u need to have an instance of a symbol and in our case the dynamic text.and u need an input text to change the desired variable.

    great lets start now:

    1-Create a new Symbol name it "text" and type MovieClip
    2-in the current symbol create a dynamic text and set variable name to "X".
    3-Create another symbol and name it "textAni" type MoveiClip.In the current symbol insert an instance of the "text" symbol and name the instance "text"(to change the instance name click window->panels->instance).
    4-in our current movie clip "textAni" create a fade out animation.Simply create 2 keyframes.At the 2nd keyframe change alpha to 0%.Go back to keyframe 1 and set tweening to MOTION.
    5-Now return to the main stage,drop an instance of the "textAni" clip and set instance name to "textAni"
    6-Now last but not least,create an input text with variable name "inputX".
    7-Open The "Text" Symbol and on a new layer insert the following actionScript Code:
    _root.textAni.text.x = _root.inputX

    what we just did is that we told Flash to take the value of "inputX"(right side of the equation) and set it to Variable "x" inside instance "text" inside instance "textAni"(Right side of the equation).this will force the variable updated whenever there is a change.

    8-If u test the movie right now....ull see that the animation doesnt work....the variable changes but no ani...thats because a really important thing...text boxes cant be animated by changing size or use effects...how to overcome that...u must embed the font that will be used in the text box so that the movie will render the text.

    9- to do step 8 open the "Text" symbol and embedd the text by clicking on "include entire font outline".this is a big issue email me for more info.
    10- now test ur movie......

    i have created a demo fla file.....u can download it by from the following link http://HASdot.COM/demo.zip

    Reply and tell me what uve done......look i know this seems alot......but tool me less than 1 minute to do...because i understand te concept......if u do then more than half of the text is a waste for u...else u need more than i wrote(LOL)......cya in cyber space

  3. #3
    Junior Member
    Join Date
    Dec 2000
    Posts
    21

    Post my email

    i forgot to give u my mail
    mailto:korayem@hasdot.com

  4. #4
    Senior Member
    Join Date
    Apr 2001
    Posts
    179
    Thanks a lot for your time Korayem - very useful. I really appreciate the fla - shows exactly how to do it. I'm in the process of applying these principles to my site - when finished I'll give you to address so you can check out what it looks like.

    Cheers,
    Shaka

  5. #5
    Senior Member
    Join Date
    Apr 2001
    Posts
    179
    I've done as you said - and it works well. There are a few problems though. This is my original site:

    http://www.neilhutchinson.co.uk/RASTA25.swf

    It's 110k, so wait for it all to download before pressing the button (no preloader as yet). Click on the main button for all the action - here the text just jumps up with no fade.

    This version includes the textani movieclip with embedded fonts:

    http://www.neilhutchinson.co.uk/RASTA31.swf

    It's 117k. The text fades in perfectly, along with the scrollbar and 3D navigation menu. However, when the fonts are embedded it seems to be a huge burdon on processor power. The colour transition becomes jerky, the rollover effects are very slow on the buttons and the sound control (top right) spring action is slower.

    Click on the contact section - see how everything is so much smoother without this (as it is on the Rasta25 even when all the main contents are loaded).

    Do you know why this is? It is exactly the effect I wanted but seems to mess up the rest of my site - I would hate to see it on a slow proccessor. Is there a way around this?

    Thanks for all your help
    Shaka


  6. #6
    Junior Member
    Join Date
    Dec 2000
    Posts
    21

    Post Nice interface


    the slowing down is due to several things:
    1-there is many animation working simultaneosly,u should avoind tweening many animations at the same time,because they kill the procesor
    2-embedding the fonts isnt the problem actually.the fade in effect is the problem,i mean when u didnt embedd the font,there was no fade in effect so the speed was ok.but when u embedded the font,fade in effect occured, and as point 1 says, another animation was added to the processor to process.so this decreased the speed dramatically

    u know what tells that im correct is that after all the animation is done.....the movie work perfect....its only when they start to fade and the color transition trick

    try to sequence the animation as follows...
    1-Color transition along with the title changing animation(in this case the title ani is small)
    2-Fade in the text u want
    3-display the menu.

    try this way and tell me what happend.

    oh BTW i love the interface........LOL

  7. #7
    Senior Member
    Join Date
    Apr 2001
    Posts
    179
    Thanks Korayem

    I'll try to make the interface come in after the color transition and adjust the fade to reduce processor power. But I think the embedded fonts does have an impact on file size: If you click on main the colour transition is jerky as it fades in - but also as the fade has finished and the menu/text etc.. is in place the rollover effects on the button are very slow, the sound button movement is slowed down etc.. this is even though the text etc.. has finished fading in.

    If you click on contact you can see that the rollover effects on the button are nice and quick again, the sound button is smooth. I don't know why it has such a hue impact - on my rasta25 interface everything is smooth - even when the 3d menu and text is loaded

    Thanks
    Shaka
    (ps what power processor is yours?)

  8. #8
    Senior Member
    Join Date
    Apr 2001
    Posts
    179
    I've finally got it sorted - I staggered the animations so it goes nice and smoothly, shortened the effect on the rollover buttons and changed the script for the 3d menu and sound controls - have a look:

    http://www.neilhutchinson.co.uk/RASTA45.swf

    Now when the main button is pressed the text fades in well and the rest of the site goes pretty smoothly. Embedding the fonts still seems to use a lot of processor power - even when the animations are still the rollover buttons slow down.

    Please reply and tell me what you think, any improvements etc..

    Thanks for your time,
    Shaka

  9. #9
    Junior Member
    Join Date
    Dec 2000
    Posts
    21

    Post NP

    ok first i will tell u some notes about embedding fonts:
    -if u dont embedd the fonts,flash will display it as normal device text(case of dynamic or input text)and i guess u got that.

    -embedding fonts increases the file size(embedding arial font can add 20K to ur FILE!!) and thats much..

    -u can decrease that by selecting the characters u desire-->low caps,UPPER CAPS,symbols:!@#$,1234567890(numbers).this will make u control the characters to be embedded and save space.Tip:this is very handy when u have an imput text field and the user must enter his email simply embed(low and HIGH CAPS ,numbers,_ ,@, . ) and this will restrict the input text to those desired characters and save u also from writing a script to detect incorrect email character(ie #).very cool huh...

    now to talk about the slowing of embedded fonts:
    -from my experience,the more text on screen that is ant-aliased(smooth) the slower the movie will be and u can avod that with those simple modifications:
    1-use a smaller text view area(display less no of rows @ the same time)
    2-avoid displaying the whole extract of the text suddenly,in other words,display line by line or charachter charachter to smooth out the ani).

    my Pc specs are as follows since u asked:
    900Mhz AMD Athlon
    320 MB RAM 133Mhz
    40GB
    Monitor 17' TriniTron Flat Adi
    Creative Sound Blaster Live!Platinum
    Creative Riva TNT 2 32MB
    and DVD and CD-RW

  10. #10
    Junior Member
    Join Date
    Dec 2000
    Posts
    21

    Post

    oh BTW
    A S L?(Age Sex Location)?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center