Flash Symbol w/ filters + spark parents + Fade effect bug

I've come across an interesting bug which I've narrowed down to a combination of:
• Flash symbols containing 1 or more Filters (defined in the Flash IDE)...
• Parented within certain Spark components (ex. symbol in Group that's in another Group)...
• Modified by an effect like spark.effects.Fade
What you see when you combine those elements above is a 1-frame, fully-opaque flicker after the Fade has completed (if fading out) or before it begins (if fading in). This flicker is noticeable and obviously not an intended part of the animation.
Here's a small test project that reproduces what I'm talking about. If you change the VGroup component to a VBox the flicker stops happening (at least for me). The same is true if you remove the middle DataGroup component. (The bug may not stop altogether but it does occur less frequently in that case.)
Application.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:local="*">
     <fx:Script>
          <![CDATA[
               import mx.collections.ArrayCollection;
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:Sequence id="sequence">
               <s:Fade target="{ vbox }" alphaTo="0" />
               <s:Fade target="{ canvas }" alphaTo="1" />
               <s:Fade target="{ canvas }" alphaTo="0" />
               <s:Fade target="{ vbox }" alphaTo="1" />
          </s:Sequence>
     </fx:Declarations>
     <!-- If you replace the VGroup with a VBox, this bug does not show itself. -->
     <s:VGroup id="vbox" horizontalAlign="center" horizontalCenter="0" verticalCenter="0">
     <!--<mx:VBox id="vbox" horizontalAlign="center" horizontalCenter="0" verticalCenter="0">-->
          <!-- Changing this DataGroup to a regular Group lowers the frequency of the bug, but it still occurs. -->
          <s:DataGroup id="dataGroup" dataProvider="{ new ArrayCollection( [ BasicSymbol, SymbolWithGlow, SymbolWithBevel ] ) }">
               <s:layout>
                    <s:HorizontalLayout verticalAlign="middle" />
               </s:layout>
               <s:itemRenderer>
                    <fx:Component>
                         <local:DataGroupItemRenderer />
                    </fx:Component>
               </s:itemRenderer>
          </s:DataGroup>
          <s:Button label="Play" click="sequence.play()" />
     <!--</mx:VBox>-->
     </s:VGroup>
     <mx:Canvas id="canvas" width="200" height="200" horizontalCenter="0" verticalCenter="0" backgroundColor="0xCC6600" mouseEnabled="false" alpha="0" />
</s:Application>
DataGroupItemRenderer MXML
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer autoDrawBackground="false" width="70" height="70"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx">
     <fx:Script>
          <![CDATA[
               override public function set data( value:Object ):void {
                    super.data = value;
          ]]>
     </fx:Script>
     <mx:Image source="{ data }" />
</s:ItemRenderer>
In addition to the below MXML, I am also happy to provide the FLA that I've created the symbols in as well as a video demonstrating the glitch. (I will try to attach the video as a follow-up comment.)

Suppose not.
Defect created: https://bugs.adobe.com/jira/browse/SDK-30475

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.

  • 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">
    <!--
    function adArray() {
    for (i=0; i*2<adArray.arguments.length; i++) {
    this[i] = new Object();
    this[i].src = adArray.arguments[i*2];
    this[i].href = adArray.arguments[i*2+1];
    this.length = i;
    function getAdNum() {
    dat = new Date();
    dat = (dat.getTime()+"").charAt(8);
    if (dat.length == 1)
    ad_num = dat%ads.length;
    else
    ad_num = 0;
    return ad_num;
    var ads = new adArray(
    "img1.jpg","http://www.domain.com",
    "img2.jpg","http://www.domain.com",
    "img3.jpg","http://www.domain.com");
    var ad_num = getAdNum();
    document.write('<div align="center"><A HREF="'+ads[ad_num].href+'" target="_blank"><IMG SRC="'+ads[ad_num].src+'" '
    +'BORDER=0 name=js_ad></A></div>');
    link_num = document.links.length-1;
    function rotateSponsor() {
    if (document.images) {
    ad_num = (ad_num+1)%ads.length;
    document.js_ad.src = ads[ad_num].src;
    document.links[link_num].href = ads[ad_num].href;
    setTimeout("rotateSponsor()",4000);
    setTimeout("rotateSponsor()",4000);
    // -->
    </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>
    <!-- add your own formatting here... -->
    <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!

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

  • Appear/fade effect problems

    I'm working on a portfolio website: www.carolinedelson.com
    The index page image appears how i want it to, but when you click s/s 2013 and click one of the gifs, the images flash on the screen then display the effect. i don't know how to change this to a smooth fade in. I also work in the display mode of dreamweaver cs6 a lot more than directly with the code, so any simple fixes would be really appreciated!

    On Thu, 23 Aug 2007 17:07:25 +0100, David Powers
    <[email protected]>
    wrote:
    >[email protected] wrote:
    >> <img src="images/places_03.jpg" alt=""
    name="main" width="642" height="508"
    >> id="main" onload="MM_effectAppearFade(this, 1000, 0,
    100, false)">
    >
    >You can't use an onload event on an image. It works only
    on the <body>
    >tag. Remove the Fade effect from the image, then select
    the body tag in
    >the Tag selector at the bottom of the Document window.
    Apply the Fade
    >effect to the body, and select "main" as the Target
    Element.
    David - I'm sure it's in a book somewhere - but I can't find
    it.
    I already have the Modify Template Make Attribute Editable
    <body id="default" >
    use this to apply css to specific pages
    Can you add a second or even third so that in addition you
    can use
    onload javascripts.
    I've rather fought shy of Javascript - preferring to use php,
    but I
    now think that was a mistake - and just use JS to provide
    extra
    features whilst allowing for people that have it disabled
    Or maybe I should just ditch Templates altogether and use
    100% ssi's
    ~Malcolm N....
    ~

  • Appear/Fade Effect Trouble

    I'm using the appear/fade effect to make the elements on my
    pages fade in when they load. When I preview the pages, instead of
    just fading in, they flash on screen for a millisecond before they
    fade in. How do I solve this issue?
    Here's an example of the code:
    Please help!

    On Thu, 23 Aug 2007 17:07:25 +0100, David Powers
    <[email protected]>
    wrote:
    >[email protected] wrote:
    >> <img src="images/places_03.jpg" alt=""
    name="main" width="642" height="508"
    >> id="main" onload="MM_effectAppearFade(this, 1000, 0,
    100, false)">
    >
    >You can't use an onload event on an image. It works only
    on the <body>
    >tag. Remove the Fade effect from the image, then select
    the body tag in
    >the Tag selector at the bottom of the Document window.
    Apply the Fade
    >effect to the body, and select "main" as the Target
    Element.
    David - I'm sure it's in a book somewhere - but I can't find
    it.
    I already have the Modify Template Make Attribute Editable
    <body id="default" >
    use this to apply css to specific pages
    Can you add a second or even third so that in addition you
    can use
    onload javascripts.
    I've rather fought shy of Javascript - preferring to use php,
    but I
    now think that was a mistake - and just use JS to provide
    extra
    features whilst allowing for people that have it disabled
    Or maybe I should just ditch Templates altogether and use
    100% ssi's
    ~Malcolm N....
    ~

  • Making a fade effect on dreamweaver

    okay, what i want to do is make a fade effect on the pictures
    that i have. what i have in the website are 4 pictures, positioned
    like this:
    |................| |................|
    |......1........| |.....3.........|
    |_______| |_______|
    |................| |...............|
    |......2........| |.......4.......|
    |_______| |_______|
    each number indicates another picture, plz pardon my crappy
    cyber drawing. i want the pictures to fade slowly, starting with 1
    and ending with 4. So like this: (image 1 appears) (then image 2
    appears) (then image 3 appears) (finally image 4 appears), you get
    the idea.
    I know that there is a fade effect under dreamweaver behavers
    but that effect isn't what im looking for because u cannot set the
    duration of the fade, nor the time of it.
    i also tried making .gif animation fade effects in fireworks,
    but i dislike that because it takes too much space, increasing my
    picture by almost 100 kb.

    Version 1.3 - June 7, 2004?
    I wouldn't use that - I'd use jQuery instead. But as far as I
    know there
    would be no way to program consecutive fades as originally
    requested.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "Jeff" <[email protected]> wrote in message
    news:gosc35$5vb$[email protected]..
    > this can also be done with css and JavaScript, see this:
    >
    http://brainerror.net/scripts/javascript/blendtrans/
    > or Google "JavaScript blend image"
    >
    > My feelings: flash is a curse.
    >
    >
    >
    >
    > "name294" <[email protected]> wrote in
    message
    > news:gos32e$oto$[email protected]..
    >> okay, what i want to do is make a fade effect on the
    pictures that i
    >> have. what
    >> i have in the website are 4 pictures, positioned
    like this:
    >> __________ __________
    >> | | | |
    >> | 1 | | 3 |
    >> |_________| |_________|
    >> | | | |
    >> | 2 | | 4 |
    >> |_________| |_________|
    >>
    >> each number indicates another picture, plz pardon my
    crappy cyber
    >> drawing. i
    >> want the pictures to fade slowly, starting with 1
    and ending with 4. So
    >> like
    >> this: (image 1 appears) (then image 2 appears) (then
    image 3 appears)
    >> (finally
    >> image 4 appears)
    >>
    >> I know that there is a fade effect under dreamweaver
    behavers but that
    >> effect
    >> isn't what im looking for because u cannot set the
    duration of the fade,
    >> nor
    >> the time of it.
    >> i also tried making .gif animation fade effects in
    fireworks, but i
    >> dislike
    >> that because it takes too much space, increasing my
    picture by almost 100
    >> kb.
    >>
    >>
    >
    >

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

  • How to Edit Flash Symbol in Photoshop?

    In Flash CS4, I have a graphic of a long filmstrip with 24 pix in it. I need to edit the symbol in photoshop (to put all new pix in), and then replace the current filmstrip with the new filmstrip. How? This is CS4, not CS5.

    Add an image to a folder with your fla, image folder(with image inside) and then re import image to stage again then try 'EDIT' the file!
    Date: Sat, 24 Sep 2011 13:31:35 -0600
    From: [email protected]
    To: [email protected]
    Subject: How to Edit Flash Symbol in Photoshop?
        Re: How to Edit Flash Symbol in Photoshop?
        created by sneedbreedley in Flash Pro - General - View the full discussion
    Whe nI double click on the image, a Bitmap Properties window opens with no option to edit. When I right-clcik on the image and select Edit With and choose photoshop, an error message appears saying The file G:\web-02\Site\film120902.gif does not exist, uable to launch external editor.
         Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/3936238#3936238
         To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/3936238#3936238. In the Actions box on the right, click the Stop Email Notifications link.
         Start a new discussion in Flash Pro - General by email or at Adobe Forums
      For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

  • 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"?>
    <!-- Simple example to demonstrate the Fade effect. -->
    <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 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.

  • Fade Effect

    I have a code on my buttons, which makes a blank image
    currently on stage get replaced with a different one when a button
    is rolled over.
    The code I am using is this:
    on mouseenter me
    sprite(3).member="a"
    on mouseleave me
    sprite(3).member="blank"
    end
    Very simple lingo. Is there a way that when the new image
    comes to view, it fades in when the mouse rolls over the button,
    instead of just popping in, and fade out once the mouse leaves the
    button, so that I end up with a smooth transition.
    Thank you.

    Guys:
    Thanks for taking your time to help me with the issue.
    I actually got an answer from another member that solved my
    problem. The code that was posted here was making the button sprite
    do the fade effect.
    My friend did some tweaking to that code to achieve what I
    needed.
    Here is the code:
    property fadeSprite
    property totalSteps
    property eachStep
    property animateMe
    on getPropertyDescriptionList
    myPropList = [:]
    myPropList.addProp(#totalSteps,[#comment:"select the number
    of steps for the
    fade:",#format:#integer,#range:[#min:5,#max:20],#default:10])
    myPropList.addProp(#fadeSprite,[#comment:"enter the sprite
    to fade:",#format:#integer,#default:1])
    return myPropList
    end
    on beginSprite me
    sprite(fadeSprite).blend = 0
    animateMe = true
    eachStep = 100/totalSteps
    end
    on mouseEnter me
    animateMe = false
    end
    on mouseLeave me
    animateMe = true
    end
    on enterFrame me
    if animateMe then
    if sprite(fadeSprite).blend > 0 then
    sprite(fadeSprite).blend = sprite(fadeSprite).blend -
    eachStep
    end if
    else
    if sprite(fadeSprite).blend < 100 then
    sprite(fadeSprite).blend = sprite(fadeSprite).blend +
    eachStep
    end if
    end if
    end
    With this one, I am able to select which sprite is fading in
    and out. Again, thanks for your help.

  • 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 ==--

Maybe you are looking for