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! -
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. -
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. -
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. -
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.
-Danhi 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
-
On the previous version of FF the All-in-One side bar showed my Bookmarks OK. Upgrading to FF4 has lost them all, except a recent one, from the sidebar. However they are available from the drop-down via the Firefox button at top left. Then when I go
-
hi We are getting the following sql statement dump, and i am not able to understand what should be done here, would anyone please advise Registered qb: SEL$1 0xc4c8a150 (PARSER) QUERY BLOCK SIGNATURE signature (): qb_name=SEL$1 nbfros=1 flg=0 fro(0):
-
Would it be possible to include in the background options the ability to attach a user gernerated backgorund not just the current color options? I am using LR 3 to generate photo albums but in order for me to include my site's background on the LR3 g
-
Duplicate line added with a different billing plan
Hi, when i save a order number then only 1 entry for billing plan is there in the FPLTC table. but when i save the INVOICE there a duplicate entry is added with different bIlling plan in the FPLTC table. can somebody tell me why this is happening. Is
-
PS Experts In Projects we do have System status and User status. I am using a report RBSVCDOC to grab the SYSTUM status changes ie.. I know when the status was set from CRE to REL etc.. But is there any report or a WAY where I can get the USER STA