Fade Effect working weird.

My little app is driven by a TabNavigator with each tab
showing a different "page" with DataGrids/Form/TabNavs etc. I am
trying to fade from "page" to "page" and all looks fine except Text
types on the "page". They don't fade, just abruptly disappear once
the fadeOut alpha reaches some number. Am I missing something? All
help is appreciated.

"rtalton" <[email protected]> wrote in
message
news:gjp0v7$1r7$[email protected]..
> In order to use Fade effects on text, the font must
first be embedded.
Or, if you can get direct access to the text objects, you can
set the
blendMode of the text to "layer", and then Fade effects will
work on them
properly.

Similar Messages

Fade effect: how to do with "onEnterFrame"?

Hi,
I have a map with each city represented as a dot (MC). When
you mouse over the dot, another MC with more city details/text
quickly fades in, and fades out when you roll out. But I can't get
the full fade effect working. Need your advice...
In the dot MC, I put:
on (rollOver) {
_root.showCity();
on (rollOut) {
_root.hideCity();
In the root, showCity() and hideCity() are functions to fade
in and out the city details MC (city_sanfrancisco). I figured they
should be at the root level so they can be used by other city dots
(city_sandiego, city_boston, etc.) as well:
//this lets me change the speed for fading in and another
speed for fading out
var speedIn;
speedIn = 20;
var speedOut;
speedOut = 20;
//hard-coded city for now; set city to invisible when movie
starts
var city = city_sanfrancisco;
city._alpha = 0;
//this shows the city details by fading in
function showCity(){
city._alpha += _root.speedIn;
if (city._alpha > 100){
city._alpha = 100;
function hideCity(){
city._alpha -= _root.speedOut;
if (city._alpha < 0){
city._alpha = 0;
What this doesn't do is the full fade effect, because the
function only executes once, so city._alpha doesn't reach 100 when
it fades in. I've seen in other fade effect scripts, that they use
the enterFrame event, but I don't now how to use it here... or what
is the right syntax to make the city details MC fade in to 100% on
rollOver, and fade out to 0 on rollOut... and still be able to
apply a speed setting.
Any help would be appreciated.

you could try something like this:
on(rollOver){
onEnterFrame = showCity;
then modify your showCity function slightly:
function showCity(){
city._alpha += _root.speedIn;
if (city._alpha > 100){
city._alpha = 100;
delete onEnterFrame;
.. with similar adjustments to you on rollOut code.
Hope this helps,
Sinead.

Tooltip Fade Effect in IE7 Not Working

I'm hoping someone has a fix for this ...
When using IE7, the first time you mouse over a
tooltip—everything works fine.
But if you mouse over it again, the Fade Effect no longer
works. Is there a way to fix this clitch??

Does anyone know when a next version of Spry is going to be
released. I can't seem to fix this problem and I'm hoping that it's
fixed in the next version.
When using IE7, the first time you mouse over a
tooltip—everything works fine.
But if you mouse over it again, the Fade Effect no longer
works. Is there a way to fix this glitch??

Fade Effect Flickering Problem

I have thumbnail gallery that utilizes the fade effect on the
mouseover event. Unfortunately, if the user mouses over the
thumbnails too quickly, the images flicker quite horribly. I was
wondering if there was a way to remove this problem.
Thanks
You can view the gallery
here

Hello existdissolve,
Your problem in the gallery has 2 issues:
1. Indeed you discovered a bug that I managed to fix in the
internal version that will be published next week. In the code
below that I will give I will include the work around for the
problem too.
2. Seems that you didn't completely understood the meaning of
the toggle option and I will try to explain you more detailed here.
Basically the toggle option is not controlling the direction of the
running effect as I think you understood. The toggle will not tell
to the effect to run in reverse direction but instead its scope is
to tell the effect that it CAN run in reverse direction.
When you try to animate an element using a link, when you set
the toggle option on, the animation will go between the from and to
values, on the first click, and will go between to and from values
on a second click. This cycle could repeat infinitely.
When you try to achieve this effect using 2 links you'll have
2 implementation solutions:
a. Use the same line of code for both links.
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, true)">Click Me First</a>
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, true)">Click Me Second</a>
You will observe that if you'll click these links in order
the element will appear and then will disappear back.
b. Use 2 non toggling effects with the from and the to
options reversed:
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, false)">Click Me First</a>
<a href="#" onclick="MM_effectAppearFade('element', 500,
100, 0, false)">Click Me Second</a>
There is however a problem why I am not recommending this
second solution in your case. If you click on the links in the
second example fast enough in their order you'll have a weird
result. The 2 effects are not knowing the other effect is running
so you'll end up with 2 effects that tries to do an opposite action
in the same time on the same element. This is somehow happening in
your case too if you move the mouse over the images fast enough you
can't predict anymore what the result will be.
In this situation you'll have to change a little bit the code
in your page. Right now you have this code:
<img id="tn{ds_RowID}"
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
alt="Sample Images from Spry Data."
title="{ds_RowNumber}"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade('tn{ds_RowID}', 500, 30,
100, false)"
onmouseout="MM_effectAppearFade('tn{ds_RowID}', 500, 100, 30,
true)"
onclick="HandleThumbnailClick('{ds_RowID}');" />
When you change the onmouseover and the onmouseout effects to
match the first solution I explained above you'll result with this
code:
<img id="tn{ds_RowID}"
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
alt="Sample Images from Spry Data."
title="{ds_RowNumber}"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade(this, 500, 30, 100, true)"
onmouseout="MM_effectAppearFade(this, 500, 30, 100, true)"
onclick="HandleThumbnailClick('{ds_RowID}');" />
You observe that I changed in both effects the target element
from tn{ds_RowID} to the special javascript keyword 'this'. I did
this to overcome the bug I told you about that you discovered in
the SpryEffects.
Let me know if you have further questions on this problem.
Regards,
Cristian MARIN

Fade effect question

I can implement a fade in effect with a single image, but I
cannot get the same code to work with the arrayed images generated
in the "photoDemo" tutorial on the Adobe site. Sho Kuwamoto has a
fade in working in his tutorial (
http://labs.adobe.com/technologies/flexbuilder2/tutorials/#)
though with different syntax (that I can't make work either), so I
know the array isn't the issue. Why does this work in one, but not
the other, example?
Any help would be greatly appreciated. I'm using the FB3
Beta for the moment.
Thanks in advance.
1) In this example, the fade out works fine ...
<?xml version="1.0"?>

<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0"
alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0"
alphaTo="1.0"/>
<mx:Panel title="Fade Effect Example" width="95%"
height="95%"
paddingTop="5" paddingLeft="10" paddingRight="10"
paddingBottom="5">
<mx:Text width="100%" color="blue"
text="Use the Fade effect to show or hide the text and
image. Use an embedded font when applying the Fade effect to
text."/>
<mx:Image source="photo.png"
visible="{cb1.selected}"
hideEffect="{fadeOut}" showEffect="{fadeIn}"/>
<mx:CheckBox id="cb1" label="visible"
selected="true"/>
</mx:Panel>
</mx:Application>
2) In the itemRenderer ("thumbnails" here) of the "photoDemo"
tutorial on the Adobe site (
http://learn.adobe.com/wiki/display/Flex/1b.+Code+Files),
it does not. It compiles and runs, but seems to ignore the effect
call. Why?
"thumbnails" ...
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="125" height="125"
horizontalAlign="center"
paddingBottom="5" paddingLeft="5" paddingRight="5"
paddingTop="5">
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0"
alphaTo="1.0"/>
<mx:Image source="{data.thumbnail.url}"
showEffect="{fadeIn}" />
</mx:VBox>
main ...
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var photoFeed:ArrayCollection;
private function requestPhotos():void {
photoService.cancel();
var params:Object = new Object();
params.format = 'rss_200_enc';
params.tags = keywords.text;
photoService.send(params);
private function photoHandler(event:ResultEvent):void {
photoFeed = event.result.rss.channel.item as
ArrayCollection;
]]>
</mx:Script>
<mx:HTTPService id="photoService" url="
http://api.flickr.com/services/feeds/photos_public.gne"
result="photoHandler(event)" />
<mx:states>
<mx:State name="panel1Zoomed">
<mx:SetProperty target="{panel1}" name="width"
value="831"/>
<mx:SetProperty target="{panel1}" name="height"
value="455"/>
<mx:AddChild relativeTo="{panel1}"
position="lastChild">
<mx:TileList x="9" y="55" width="791" height="353"
dataProvider="{photoFeed}"
itemRenderer="thumbnails"></mx:TileList>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel x="10" y="10" width="542" height="75"
layout="absolute" id="panel1" resizeEffect="Resize">
<mx:Label x="10" y="10" text="Keyword:" width="63"/>
<mx:TextInput x="116" y="8" id="keywords"/>
<mx:Button x="307" y="8" label="search"
id="keywordButton"
click="requestPhotos();currentState='panel1Zoomed'"/>
</mx:Panel>
</mx:Application>

I've never used this effect. Maybe if you preload the image(s)...
Go to Behaviors panel.
Click the plus sign (+).
From the drop menu, select Preload Images.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Fade Effect problem in IE

hi everyone,
I'm having problems with a fade out/in transition in IE8. The area I am changing has a white background (actually there are a few nested divs that all have a white background), and the fade effect triggers on a click in the navigation area and fades everything into the body background color (dark brown) and back. The effect works fine in firefox and safari. Anyone know how to fix this problem? I want the content that is fading to maintain the white background and not fade to brown and back. you can view the page here to see whats going on.
http://www.prometheusbusiness.com/testarea/NoelRose/home.html
also, (and this is a really small issue, so I'm not too concerned if I can't fix it) after the page loads, the first fade out transition doesnt seem to fire, it just disappears, and the new page fades in. after the first time, everything works as I expect, but it would be great if every click worked exactly the same every time.
any help is appreciated, thanks.
-Dan

hi everyone,
I'm having problems with a fade out/in transition in IE8. The area I am changing has a white background (actually there are a few nested divs that all have a white background), and the fade effect triggers on a click in the navigation area and fades everything into the body background color (dark brown) and back. The effect works fine in firefox and safari. Anyone know how to fix this problem? I want the content that is fading to maintain the white background and not fade to brown and back. you can view the page here to see whats going on.
http://www.prometheusbusiness.com/testarea/NoelRose/home.html
also, (and this is a really small issue, so I'm not too concerned if I can't fix it) after the page loads, the first fade out transition doesnt seem to fire, it just disappears, and the new page fades in. after the first time, everything works as I expect, but it would be great if every click worked exactly the same every time.
any help is appreciated, thanks.
-Dan

Fade effect bold text in all IEs

I have created the following page
Cnet about
and used the spry fade effect on the section of text at the bottom
below the "A Sampling of what we offer" graphic.
It works fine but in IE6 and IE7 when viewed on an LCD
monitor, the bold blue text looks very choppy. I assume this has to
do with bad handling of opacity in IE. Does anyone know a hack to
fix this?

Hi artdoggy,
That is an IE bug with several workarounds. The first
workaround which is much simpler, is to specify a background color
or font on the element that you are fading in. This somehow
triggers IE to avoid this behavior.
The other workaround is to use an effect onPostEffect
observer or finish function to unset the filter function on the
element. You can see sample of how to use an observer here:
http://labs.adobe.com/technologies/spry/samples/effects/observers_sample.html
You'll have to do something like this in your observer:
effect.element.style.filter = "";
--== Kin ==--

Fade Effect transparency IE/Firefox

Hi,
I am using the Spry:Fade effect with the image to be faded
constructed in Fireworks. The image has a transparent background
and a rectangle with a feathered edge effect.
The fade works well using Firefox however in Internet
Explorer a substantial part of the feathered edge effect turns
black. This occurs whether the image is either a gif or a png
format.
Any suggestions on what causes this and a fix/workaround.
Thanks,

Hi artdoggy,
That is an IE bug with several workarounds. The first
workaround which is much simpler, is to specify a background color
or font on the element that you are fading in. This somehow
triggers IE to avoid this behavior.
The other workaround is to use an effect onPostEffect
observer or finish function to unset the filter function on the
element. You can see sample of how to use an observer here:
http://labs.adobe.com/technologies/spry/samples/effects/observers_sample.html
You'll have to do something like this in your observer:
effect.element.style.filter = "";
--== Kin ==--

Fade Effect Issue with table structure

I have an existing HTML page with a table framework that uses
CSS divs in some of the table rows. My SPRY data is currently
wrapped in DIV tags within the table. I've discovered that the
table is screwing up the fade effect in IE7. Is there any way I can
get around this without removing the table and recoding the whole
page in CSS? FYI...I using version 1.4. I'm not sure if 1.5 will
fix this issue.

Essentially the fade in fade out effect isn't working at all
in IE. It's setup as a slideshow and uses the fade effect as a
transition between the spry data. The slideshow works fine just
without the fade effect. Everything works perfectly in Firefox
though. I know this code will work as we have used it before, the
only thing different is that I have my DIV with the SPRY content
wrapped within a table cell and row. I've read that the TR tag
cannot be used, but it's not exactly using the TR as an ID. Once I
comment out the table, tr, and td tags, the effect works no problem
so I know it is the table. I can't give you the URL because it's on
our local network.

Fade effect with tabbed panels

The background image of the tabbed panel flashes before the
new images fade in from 0% to 100%:
Demo page
Sometimes the effect works as intended and fades in
perfectly...however it consistently resorts to flashing first --
any ideas how to fix this?

These code snippet no longer work with the out of box 1.6
release. any hints on how to work around the initial blink problem?
Seems like these methods could be better designed.
I am building the code using the designer and this is my
tabbed pane:
<div id="MainTabbedPane" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('TabbedPanelsContent1','FrontPage.html');MM_effectBlind ('TabbedPanelsContent1',
1000, '0%', '100%', false)">Home</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('TabbedPanelsContent2','SchedRates.html');MM_effectAppe arFade('TabbedPanelsContent2',
1000, 0, 100, false)">Schedule & Rates</li>
<li class="TabbedPanelsTab" tabindex="0">Program
& Description</li>
<li class="TabbedPanelsTab"
tabindex="0">Retreats</li>
<li class="TabbedPanelsTab"
tabindex="0">Bio</li>
<li class="TabbedPanelsTab" tabindex="0">Studio
Cats</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"
id="TabbedPanelsContent1">Front Page!!!</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent2">Schedule & Rates</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent3">Program &
Description</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent4">Retreats</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent5">Bio</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent6">Studio Cats</div>
</div>
</div>
Likes like there is one sloppy method override as well:
function MM_effectAppearFade(targetElement, duration, from,
to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from:
from, to: to, toggle: toggle});
}

Fade effect with DataGrid. Header text are visible ... :(

Hi,
the problem with DataGrid.
If I specify the Fade effect for showing DataGrid, all lines
are showing correct, so the fade works, but the headers text and
the data texts are showing immediately (like without Fade).
Is it possible to avoid this effect? I want to show my
datagrid from alpha 0.00 to 1.00 for ALL elements (for lines, for
headers, for headers TEXT and of course of data TEXT)
Is it a bug?

I had the same problem. I havent fixed it but I did a work
around and used a WipeDown effect in parallel. It eliminates the
headers of appearing immediately.

Rotating Image with Fade Effect

Ok looking to rotate an image with a fade effect; below is a rotating image code.
(Wanting this effect to be transitional and smooth. Transparency? Opacity?)
<script language="JavaScript">

</script>
Any ideas?

Here is the script I finally got working! It would have not came to me without your help guys!
<script>
var pictureWebPartName="Pictures"; // name of the picture library web part
var showThumbnails = true; //otherwise show full sized images
var randomImg = true; //set to true to show in random order
var useCustomLinks = false; //true to use second column as URL for picture clicks
var RotatingPicturesLoopTime = 5000; //2000 = 2 seconds
var imgToImgTransition = 1.0; //2 = 2 seconds
// don't change these
var selectedImg = 0;
var imgCache = [];
var imgTag;
function RotatingPictures()
imgTag = document.getElementById("RotatingImage");
//Find the picture web part and hide it
var Imgs = [];
var x = document.getElementsByTagName("TD"); // find all of the table cells
var LinkList;
var i=0;
for (i=0;i<x.length;i++)
if (x[i].title == pictureWebPartName)
// tables in tables in tables... ah SharePoint!
LinkList = x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
// hide the links list web part
LinkList.style.display="none";
break;
if (!LinkList)
document.all("RotatingImageMsg").innerHTML="Web Part '" + pictureWebPartName + "' not found!";
//Copy all of the links from the web part to our array
var links = LinkList.getElementsByTagName("TR") // find all of the rows
var url;
var len;
for (i=0;i<links.length;i++)
//if (links(i).id.match("row")!=null)
if (links[i].childNodes[0].className=="ms-vb2")
len=Imgs.length
Imgs[len]=[]
Imgs[len][0] = links[i].childNodes[0].childNodes[0].href;
if (useCustomLinks)
if (links[i].childNodes[1].childNodes.length>0)
{ Imgs[len][1] = links[i].childNodes[1].childNodes[0].href; }
else
{ Imgs[len][1] = "" }
if (Imgs.length==0)
document.all("RotatingImageMsg").innerHTML="No images found in web part '" + pictureWebPartName + "'!";
for (i = 0; i < Imgs.length; i++)
imgCache[i] = new Image();
imgCache[i].src = Imgs[i][0];
if (useCustomLinks)
imgCache[i].customlink=Imgs[i][1];
RotatingPicturesLoop();
// now show the pictures...
function RotatingPicturesLoop()
if (randomImg)
selectedImg=Math.floor(Math.random()*imgCache.length);
if (document.all){
imgTag.style.filter="blendTrans(duration=" + imgToImgTransition + ")";
imgTag.filters.blendTrans.Apply();
url=imgCache[selectedImg].src
if (useCustomLinks)
{ RotatingImageLnk.href=imgCache[selectedImg].customlink; }
else
{ RotatingImageLnk.href = url; }
if (showThumbnails)
// convert URLs to point to the thumbnails...
// from airshow%20pictures/helicopter.jpg
// to airshow%20pictures/_t/helicopter_jpg.jpg
url = revString(url);
c = url.indexOf(".");
url = url.substring(0,c) + "_" + url.substring(c+1,url.length);
c = url.indexOf("/");
url = url.substring(0,c) + "/t_" + url.substring(c,url.length);
url = revString(url) + ".jpg";
imgTag.src = url;
if (document.all){
imgTag.filters.blendTrans.Play();
selectedImg += 1;
if (selectedImg > (imgCache.length-1)) selectedImg=0;
setTimeout(RotatingPicturesLoop, RotatingPicturesLoopTime);
// utility function revString found here:
// http://www.java2s.com/Code/JavaScript/Language-Basics/PlayingwithStrings.htm
function revString(str) {
var retStr = "";
for (i=str.length - 1 ; i > - 1 ; i--){
retStr += str.substr(i,1);
return retStr;
// add our function to the SharePoint OnLoad event
_spBodyOnLoadFunctionNames.push("RotatingPictures");
</script>

<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height="125" width="160" align="center" valign="middle">
<a name="RotatingImageLnk" id="RotatingImageLnk" alt="click for larger picture">
<img src="/_layouts/images/dot.gif" name="RotatingImage" id="RotatingImage" border=0>
</a>
<span name="RotatingImageMsg" id="RotatingImageMsg"></span>
</td>
</tr>
</table>
</center>
Thanks again guys!

How to add a fade effect to the Application object ?

Hy,
i want to add a fade effect to the Application object, but my code does not work, can you take a look please:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                            usePreloader="false"
                            mouseDown="stage.nativewindow.startMove()"
                            layout="absolute"
                            width="304"
                            height="527"
                            alpha="0"
                            creationComplete="init()">
        <mx:Script>
                <![CDATA[
                        private function init():void
                                application.setStyle("showEffect",fade)
                ]]>
        </mx:Script>
        <mx:Fade id="fade" duration="1000" />
</mx:Application>
Thanks

Hi,
Here is an example of how to add effect to a button: http://livedocs.adobe.com/flex/3/html/help.html?content=behaviors_06.html

Timer & Fade effect

One more question then I'm done for the day.
I'm using a timer to change the index on my combobox (I'm sure there's a better way but its working) which is pulling slide data from an XML file. I would like to crossfade between slides. Is see there is a spark fade, but I'm unsure how to apply it to each element to work with the timer.
Timer code:
private var timer:Timer;
private function init():void
    timer = new Timer(5000);
    timer.addEventListener(TimerEvent.TIMER, onTimer);
    timer.start();
private function onTimer(evt:TimerEvent):void
    var idx:uint = dropDownList.selectedIndex;
    var max:uint = dropDownList.dataProvider.length;
    var newIdx:uint = ++idx % max;
    dropDownList.selectedIndex = newIdx;
The comboBox (yes, it used to be a drop down list)
<mx:ComboBox editable="true"
    x="10" y="10"
    id="dropDownList"
    creationComplete="dropDownList_creationCompleteHandler(event)"
    dataProvider="{getSlidesResult.lastResult}"
    labelField="number"
    visible="false" />
The items that need to have the fade effect are mx:Text, s:TextArea, mx:Image, & s:VideoPlayer. Each has a unique ID.

Hi,
There are many ways you can crossfade with flex 4 I have thrown together a small example that uses a pixelbender filter to fade images and an included
a very simple text cross fade (no timers necessary). Using parallel transitions you can acheive quite a lot.
http://ezflex.net/fader/
David.

When I use spry fade effect I get crisp font.

My page looks like this before fade effect. The letters are smooth.
After fade effect. I get this crisp letters.
Why ??
Thanks in advance.
And sorry about my poor english.

Thanks for your help and time.
I wrote the "background-color:#FFF;" css for the object and didn't work.
So I wrote the same css for the parent object and works perfectly.
Thanks again.

Fade Effect working weird.

Similar Messages

Maybe you are looking for