Arrow buttons with fade effect

I have made arrow buttons on each side of a document I intend to export to pdf. They are set to behave so that when the reader of the pdf clicks on one of them it takes them to the previous or to the next page. the issue I have is that they are distracting. Is it possible to auto-fade these buttons and when you mouse over them they fade into view?

I've made the buttons and they work fine. I found this link also helpful...http://www.dynamicgraphics.com/dgm/Article/28696
The last issue is dotted outlines that appear when I push the button in the pdf. It looks like the dotted lines came from indesign with the objects. I've attached a photo. Not so important but if there was an easy way to get rid of them that would be great. Thanks again for the help.

Similar Messages

[CS3] Flash buttons with fade effects.

Well as the title says, i've got some buttons in Flash CS3,
using AS 2 which when clicked changes the frame. The thing is that
i want to add a fade effect to the text area AFTER the button was
pressed. So for example:
The user is reading the text, he presses one of the buttons
(all of which change frames, in this case text) and the text fades
away and the new text fades in.
Well, i've designed the frames needed for this, so i've got
10 frames before the frame the user will see for it to fade in and
10 frames after it to fade out. What i havent figured out yet is
how i'll make the script do that. I mean, i can make the script go
forward one frame, starting the fade out effect, i can make it go
to the frame i want but how will i do both.
I've got 6 buttons and 6 corresponding texts.
Does anyone have any ideas?
Thank you in advance.
P.S.: Any ideas welcome. I can change the frame layout.
P.S.S.: Also forgot to mention that making layers for every
combination is out of question....

I've already had them placed each on their layer. I thought i
might need mobility on the timeline.
Let me see how much of this i understand...
quote:
which im assuming are MovieClip instances
They're graphics but i can simply change them to be movie
clips if it's the case.
quote:
do the same with your buttons on a seperate layer but you
will only need one for them all
I've lost you here....you're saying ill only need one AS
reference?
quote:
for(var i=0; i<btns.length; i++) {
Hmm... you're using the size of the array to set how many
times the loop control will actually loop? Took me a bit to figure
out what length an array could have
quote:
new Tween(current, '_alpha', Strong.easeOut, 100, 0, 10,
false);
new Tween(clips[this.id], '_alpha', Strong.easeOut, 0, 100,
10, false);
current = clips[this.id];
//start the first clip transition 'in'
current = clips[0];
new Tween(clips[0], '_alpha', Strong.easeOut, 0, 100, 10,
false);
Ok i didnt get most of this but i'll have to check out the
parameters for the Tween function.
Actually i plan on going from a 50% alpha to a 100%, but
that's just my choice.
Thanks a lot and hope i dont become too annoying.
P.S. I had a huge revelation at the end when i re-read the
code and finally understood how this is going to work.

Firefox is hanging when the page scrolls down to a html5 video or the page to a slideshow with fade effect

Every time a page has a html5 video or a slideshow with fade effect Firefox 3.6 becomes terriblely slow. It freezes with this test: http://demos.hacks.mozilla.org/openweb/HWACCEL/
I have Fedora 14 and before that Fedora 13 and the problem happens with both.
The same doesn't happen on Opera or Google Chrome.
'''UPDATE 1''': I have already tryed the Safe Mode and the problem happens the same.
'''UPDATE 2:''' This page full of videos scroll smothly without any problemas: http://brettgaylor.tumblr.com/tagged/webmademovies

I forgot to say that I did tryed the Safe Mode just to see if the slow was not being caused by some extension or plugin. However the result was all the same. By the way, the slow happens even if there is only one page opened. I am not thinking it is something related to the ATI video card or even Fedora because the same slow does't happen in Chrome and Opera...

Image rotation with fade effect

I am new to the spry framework and have just started going
through the examples to see if I could create an image rotator that
fades the images into each other when changing. I have taken
snippets from different places to do this and think I have the
answer but really wanted some feedback to sanity check and let me
know if this is the best way of doing it. If it is, then I hope
others will find it useful.
Here is the url to the example:
Image
rotation example
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 8000; // 8 seconds
var imageFadeInterval = 4000; // 4 seconds
var image2Loaded = null;
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha$opacity([0-9]{1,3})$/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
if(image2Loaded == null) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
image2Loaded = 0;
} else {
if(image2Loaded) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 0;
} else {
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 1;
effect.start();
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg.addObserver(obs2);
</script>
</body>
</html>

I think that I might have got this going now. Here is the
code if anyone wants to use it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 4000; // 8 seconds
var imageFadeInterval = 2000; // 4 seconds
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha$opacity([0-9]{1,3})$/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
//use this flag to avoid the effect running on load
if (typeof image2Loaded == 'undefined') {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
if(image2Loaded) {
var img = document.getElementById('display');
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
var img = document.getElementById('animate');
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg2.getCurrentRow();
image2Loaded = 1;
var imgPath = '<?php echo $rootDir.$baseDir;?>/' +
curRow["@path"];
var gImageLoader = new Image();
gImageLoader.onload = function()
effect.start();
gImageLoader.src = imgPath;
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg2.addObserver(obs2);
</script>
</body>
</html>

Opening a popup window with fade effect

Hi,
I have a scenario where I want to open a pop up title window with some nice effect.
Can you please suggest how do I achieve it?
I have a repeater that repeats set of Text UI comps and I want to show a pop up window on MouseOver or MouseClick of each of these Text UI comps.
Please help.
Thank you,
Amey

if you want to open an title Window with a smooth fade effect there are more than one possible ways.
1. Declare Fade Effect
     <s:Fade id="windowFade" target="{_titleWindow}" alphaFrom="0.0" alphaTo="1.0" />
2. Execute the fade effect on openening
     2.1 start the effect after the PopUpManager.addPopUp
     PopUpManager.addPopUp(_titleWindow, this);
     windowFade.play();
     2.2 start the effect on added-Event
     protected function titlewindow1_addedHandler(event:Event):void
          windowFade.play();
3. Make sure the effect is stopped before you start the animation with windowFade.stop()

Tabbed Panel with Fade Effect

Open my site, dg-ad.com, and the tabbed panel drop down menu has the first level visible. Click on a menu item and the second level becomes visible. The second level has a Spry fade effect so it fades into view nicely. The class .TabbedPanelContent sets the visibilty of the second layer hidden, and there is no distracting flicker, good so far.
Besides clicking on menu item I often send clients a link with a string query which lands them on my site with the tabbed panel open to what I want them to see initially., I use a string query in the URL per Dave Powers technique often refered to in this forum titled'Spry: Opening Specific Tabs and Panels from Another Page".
Because the visibility is set to hidden in the CSS the second level of the tabbed panel is still invisible, So I am looking for suggestions that may involve scripting the style or playing with the CSS to overide the CSS and make the second level visible when users arrive via the query string method.
Thanks for taking a look!
Daniel

For Spry 1.0 widgets, each widget had one core file. Each of them had common things like addClassName(), removeClassname(), along with a bunch of basic functionality. So that adds up to a lot of redundant code.
This way, all that common stuff is kept in a single file. That means that each widget base class just has what it needs to glue everything together.
Many widgets are 'panel' based: accordions, tabbed panels, slideshows. So handling those panels is done via the PanelSet and PanelSelector files.
You will find SpryTabbedPanels2.js much smaller than the first version.
By components, for instance: SpryFadingPanels.js is only needed if you want to fade between panels. If you don't want that effect, you don't need to use it. WIth components and plugins, you or anyone else can write a different transition and make that available to all your Spry UI widgets.
I don't like all the includes either but it's the right way to go with what we are doing.
Thanks,
Don

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!

Problem With Fade Effect For JTextField

Hello Friends !
I am putting a 'bounty' of 10 Duke dollars
for the clever clogs who can help me out !
I want to create a 'fade in' effect when a
textfield has the focus and a 'fade out'
effect when it looses focus.
The code for what I have done so far is
listed below, but it leaves nasty 'artifacts'
behind when painting.
regards, Asad.
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class RunProgramAgain{
public static void main(String[] args){
JFrame frame = new MyFrame();
class MyField extends JTextField{
public MyField(){
setPreferredSize(new Dimension(100, 30));
public void paintComponent(Graphics g){
super.paintComponent(g);
if(hasFocus())
fadeIn();
else
fadeOut();
private synchronized void fadeIn(){
for(alpha = MIN; alpha <= MAX; ++alpha)
setBackground(new Color(RED, GREEN, BLUE, alpha));
private synchronized void fadeOut(){
for(alpha = MAX; alpha >= MIN; --alpha)
setBackground(new Color(RED, GREEN, BLUE, alpha));
private int alpha = MIN;
private static final int MIN = 0;
private static final int MAX = 10;
private static final int RED = 0;
private static final int GREEN = 255;
private static final int BLUE = 0;
class MyButton extends JButton{
public MyButton(){
super("Start");
class MyFrame extends JFrame{
public MyFrame(){
setSize(new Dimension(300,250));
getContentPane().setLayout(new FlowLayout());
getContentPane().add(new MyButton());
getContentPane().add(new MyField());
show();
}

Played some more and came up with a class that will allow you to fade the background color of any JComponent:
import java.awt.*;
import java.awt.event.*;
import java.util.Hashtable;
import java.util.Vector;
import javax.swing.*;
public class Fader
     private static final int MIN = 0;
     private static final int MAX = 10;
     private Color fadeFrom;
     private Color fadeTo;
     private Hashtable backgroundColors = new Hashtable();
     ** The background of any Component added to this Fader
     ** will be set/reset to the fadeFrom color.
     public Fader(Color fadeTo, Color fadeFrom)
          this(fadeTo);
          this.fadeFrom = fadeFrom;
     ** The original background of any Component added to this Fader
     ** will be preserved.
     public Fader(Color fadeTo)
          this.fadeTo = fadeTo;
     ** Fading will be applied to this component on gained/lost focus
     public Fader add(JComponent component)
          // Set background of all components to the fadeFrom color
          if (fadeFrom != null)
               component.setBackground( fadeFrom );
          // Get colors to be used for fading
          Vector colors = getColors( component.getBackground() );
          //     FaderTimer will apply colors to the component
          new FaderTimer( colors, component );
          return this;
     ** Get the colors used to fade this background
     private Vector getColors(Color background)
          // Check if the color Vector already exists
          Object o = backgroundColors.get( background );
          if (o != null)
               return (Vector)o;
          // Doesn't exist, create fader colors for this background
          int rIncrement = ( background.getRed() - fadeTo.getRed() ) / MAX;
          int gIncrement = ( background.getGreen() - fadeTo.getGreen() ) / MAX;
          int bIncrement = ( background.getBlue() - fadeTo.getBlue() ) / MAX;
          Vector colors = new Vector( MAX + 1 );
          colors.addElement( background );
          for (int i = 1; i <= MAX; i++)
               int rValue = background.getRed() - (i * rIncrement);
               int gValue = background.getGreen() - (i * gIncrement);
               int bValue = background.getBlue() - (i * bIncrement);
               colors.addElement( new Color(rValue, gValue, bValue) );
          backgroundColors.put(background, colors);
          return colors;
     class FaderTimer implements FocusListener, ActionListener
          private Vector colors;
          private JComponent component;
          private Timer timer;
          private int alpha;
          private int increment;
          FaderTimer(Vector colors, JComponent component)
               this.colors = colors;
               this.component = component;
               component.addFocusListener( this );
               timer = new Timer(5, this);
          public void focusGained(FocusEvent e)
               alpha = MIN;
               increment = 1;
               timer.start();
          public void focusLost(FocusEvent e)
               alpha = MAX;
               increment = -1;
               timer.start();
          public void actionPerformed(ActionEvent e)
               alpha += increment;
               component.setBackground( (Color)colors.elementAt(alpha) );
               if (alpha == MAX || alpha == MIN)
                    timer.stop();
     public static void main(String[] args)
          // Create test components
          JComponent textField1 = new JTextField(10);
          JComponent textField3 = new JTextField(10);
          JComponent textField4 = new JTextField(10);
          JComponent button = new JButton("Start");
          JComponent checkBox = new JCheckBox("Check Box");
          JFrame frame = new JFrame("Fading Background");
          frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
          frame.getContentPane().add(textField1, BorderLayout.NORTH );
          frame.getContentPane().add(button, BorderLayout.SOUTH );
          frame.getContentPane().add(textField3, BorderLayout.EAST );
          frame.getContentPane().add(textField4, BorderLayout.WEST );
          frame.getContentPane().add(checkBox);
          // Fader preserving component background
          Fader fader = new Fader( new Color(155, 255, 155) );
          fader.add( textField1 );
          fader.add( button );
          fader.add( checkBox );
          // Fader resetting component background
          fader = new Fader( new Color(155, 255, 155), Color.yellow );
          fader.add( textField3 );
          fader.add( textField4 );
          frame.pack();
          frame.setVisible( true );
}

Update Content with fade effect - How do I do this in 1.5?

Hello,
Just wondering what would be the equivalent code in spry 1.5
to the following update content with effect code in 1.4?
function fadeIt(ele,url){
Spry.Effect.DoFade('apDiv1',{ duration: 500, from: 100, to:
0, finish: function() {
Spry.Utils.updateContent(ele, url, function() {
Spry.Effect.DoFade('apDiv1',{ duration: 500, from: 0, to:
100 });
I am a little stumped how to achieve this now that the effect
code must be BELOW the html region the effect code works on. Any
help on this would be appreciaed.
Regards,
Kiwwwi.

Hi,
We have a special article that explains the changes from
Spry1.4 to Spry 1.5 regarding the effects.
You can find it
here.
Diana

Specific region mouse over effect(Button 1 fades out and Button 2 fades in).

Dear All -
I am new to Flash CS5 and building Flash navigation bar with buttons on it.
Below is my problem description that I want to solve with your help.
I have a rectangular bar and placed one small button(Button 1) on this bar. Also, I have similar button(Button 2) with some graphics on it which is of similar size as to previous Button 1.
Button 1 - Without graphic.
Button 2 - With graphic on it.
What I want is that, whenever mouse is taken over Button 1 placed on the rectangular bar, it should fade out and simultaneously Button 2 should fade in. I want only button region to be sensitive to this mouse over effect and not the complete rectangular bar.
Kindly let me know how can I define the specific region(button region only) to be sensitive to mouse over effect in flash, and how to place Button 1 and Button 2 in layers so that both are at the same positition(so that there is no displacement of button detected).
Thank You,
Saurabh Khanna.

Hello -
Thank you for the reply. Button 1 does not have glowing effect, whereas Button 2 has a glowing effect. So what I wanted is that when initially Button 1 is loaded during page load, when I mouse over Button 1, Button 1 would fade out and Button 2 sitting behind Button 1 would automatically look like fade in(due to gradual fad out of Button 1 on top of Button 2).
I could do this now, and would like to Thank you for your reply.
I did this by creating movie clip on "Over" event of Button 1 and changing its Alpha property. But now what I want is how to gradually fade out, means when I remove my mouse from over button, then Button 2 should fade out gradually which will automatically make Button 1 fade in gradually.
I could not find the "Out" event just like we have "Over" event for Button, so I assume this can only be done using ActionScript somehow.
Let me know if I am going correct with my assumption, and possibly if you could help me achieve the remaining half(fading out gradually when mouse is removed from the button).
Thank You once again for your reply.
Thank You,
Saurabh Khanna.

I have set up my airprint wifi printer which works perfectly with the HP eprint app. However, when i view an email and click on the top right arrow button and select "PRINT" on my ipad nothing happens????...

I have set up my airprint wifi printer which works perfectly with the HP eprint app. However, when i view an email and click on the top right arrow button and select "PRINT" on my ipad nothing happens????...
Also, when im viewing websites and i find something i wish to print, same again, if i simply click on the print option at the top right of the screen nothing happens... the only way I can print is if i copy the weblink of the site page then click on my HP eprint app and paste the web link, then select print, it prints off fine.. but its it such a pain to keep copying and pasting links or screen dumping emails just to print...

Just to recap, this is a collection of ports I have collected over time for people who needed this information when setting up the HP ePrint app so that they could view their email from within the app. I am certain other applications also need this information. Although lengthy, I could not find a more comprehensive place to retrieve this information. Feel free to post additional information, faulty information, or other related topics below as this is simply a collection of data and it would be practically impossible to test all of them. Thank you!
Don't forgot to say thanks by giving "Kudos" if I helped solve your problem.
When a solution is found please mark the post that solves your issue.
Every problem has a solution!

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.

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 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.

Make my movie clip move from left to right with arrow buttons.

Hi hope this is a quick one..
I have all the elements set up already so just need the
logistics of how i can acheive the following:
I have an arrow at the furthest left and furthest right of my
main flash movie. I then have a movie clip in the middle which has
indidivual images on a kind of long strip. When i click the left
arrow i want the movie to begin to move from the right to the left
and visa versa. I have achieved this with the keyboard left and
right keys so what i really need is to convert this theory for the
left and right arrow buttons?
var speed:Number = 4;
object_mc.onEnterFrame = function() {
if (Key.isDown(Key.RIGHT)) {
this._x = this._x+speed;
} else if (Key.isDown(Key.LEFT)) {
this._x = this._x-speed;
Any help will be greatly appreciated??
Thanks
Ben

use the getAscii() or getCode() methods of the key class. and
you can always use the trace function to check the values to be
used in your if-statement.

Arrow buttons with fade effect

Similar Messages

Maybe you are looking for