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>

Similar Messages

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

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!

Image Rotation with AE SDK

Hello all,
I am wondering if someone could suggest a desription of image rotation using Adobe AE SDK - in a Forum entry or in some other related document. While some elements of rotation may be considered available in SDK sample projects - Shifter for all pixels, CCU for individual pixels manipulation - I will appreciate more details for variable subpixel processing and neighbouring pixel interpolation for variable row-by-row shift. It is assumed the angle of rotation is fixed during the effect, and there are no worries about the appearance of out-of-border picture elements since there is a background. Speed will not be an issue as well.
Thank you in advance.

well, the easiest way for rotating an image through the sdk is by using transform_word().
it takes a matrix (or matrices for motion blur), so you can do any transform operation concievable via a matrix.
here's a thread with some detail about this function:
http://forums.adobe.com/message/1970939#1970939
as for line by line transformations...
there are some toos in the SDK, but they're available only for AEPGs of type "artizan" (the plug-ins that render whole comps),
so if you're planning a layer effect, these tools are out of the question.
you can do that calculation manually in a few ways.
you can create a tranformation matrix and run each pixel through it, which would probably be the fastest most versitile way.
or you can use trigonometry, which would probably be the easiest to implement but the slowest to process.
using the sdk's subpixel sample functions would complete the tools you need, but keep in mind that this would be the slowest possible way of rotating an image.

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

Image swaps with fade out and in

I am new to Dreamweaver, in fact only got into it to do my
own website. I want to create image swaps with a fade out and then
fade in with the new image. Nowhere can I find out how to do this
so far. Can anybody point me in the right direction. Many thanks
for your help now and in the past.
Perspectivist

This is a multi-part message in MIME format.
--------------000605070301090808040601
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 7bit
i see! well, that's good to know. i didn't realize you could
do
transitions on image swaps (of course, i've rarely used them
so far).
and i just assumed the OP was actually trying to do a
slideshow, which
could still be the case i guess. i suppose he's covered
either way!
Nancy O wrote:
> There are several image transition scripts on this page:
>
http://www.brothercake.com/site/resources/scripts/transitions/
>
>
>
> --Nancy O.
> Alt-Web Design & Publishing
> www.alt-web.com
>
>
>
> "Perspectivist" <[email protected]>
wrote in message
> news:[email protected]...
>
>> I am new to Dreamweaver, in fact only got into it to
do my own website. I
>>
> want
>
>> to create image swaps with a fade out and then fade
in with the new image.
>> Nowhere can I find out how to do this so far. Can
anybody point me in the
>> right direction. Many thanks for your help now and
in the past.
>>
>> Perspectivist
>>
>>
>
>
>
--------------000605070301090808040601
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: 7bit
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
i see! well, that's good to know. i didn't realize you could
do
transitions on image swaps (of course, i've rarely used them
so far).
and i just assumed the OP was actually trying to do a
slideshow, which
could still be the case i guess. i suppose he's covered
either way!<br>
<br>
Nancy O wrote:
<blockquote cite="mid:[email protected]"
type="cite">
<pre wrap="">There are several image transition
scripts on this page:
<a class="moz-txt-link-freetext" href="
http://www.brothercake.com/site/resources/scripts/transitions/">http://www.brothercake.com /site/resources/scripts/transitions/</a>
--Nancy O.
Alt-Web Design & Publishing
<a class="moz-txt-link-abbreviated" href="
http://www.alt-web.com">www.alt-web.com</a>
"Perspectivist" <a class="moz-txt-link-rfc2396E"
href="mailto:[email protected]"><[email protected]></a>
wrote in message
<a class="moz-txt-link-freetext"
href="news:[email protected]">news:[email protected]</a >...
</pre>
<blockquote type="cite">
<pre wrap="">I am new to Dreamweaver, in fact only got
into it to do my own website. I
</pre>
</blockquote>
<pre wrap="">want
</pre>
<blockquote type="cite">
<pre wrap="">to create image swaps with a fade out and
then fade in with the new image.
Nowhere can I find out how to do this so far. Can anybody
point me in the
right direction. Many thanks for your help now and in the
past.
Perspectivist
</pre>
</blockquote>
<pre wrap="">
</pre>
</blockquote>
</body>
</html>
--------------000605070301090808040601--

How to Render a TIFF image sequence with After Effects or Premiere

So I shot a timelapse in RAW using my D5200. Developed the images, imported into after effects to make a composition at 1080p 24fps, the clip is 15 seconds long. Then I rendered the clips a few ways and none of them are what I want:
I used the H.264 first, its just pixelated and blocky, doesn't retain a smooth resolution. H.264 output an MP4 that was 6.5 MB.
Then I tried lossless and it output an AVI which is awesome resolution but the file is 2 gigs! Not even VLC media player will play it smoothly without buffering.
Last I tried H.264 BluRay which output an M4V file which is 45 MB and I can't get it to play.
So now I'm here asking you all what the way to go is. When I download films, I will aim for a 1-2 gig 720p or 1080p file on roughly 2hr films. The resolution is great, the audio is great and the file like I said is only 1.5gigs average. So what are the rendering settings I should be using to get a file like this? Should I be importing it into Premiere Pro first or what?
-Thanks
Bruno
For Reference, here was my workflow:
I generally followed an Adorama Rich Harrington Time-Lapse youtube video on workflow which was:
Developed the Raw files in Camera Raw
Used the Image Processor to create the Tif files
Imported into After Effects as a TIF sequence
Interpreted the sequence as 24fps
Changed the Composition settings to 1080p 24fps
Then did the rendering as detailed above

1. You don't need to export your TIFF sequence so as to import it into After Effects, you can import RAW image sequence into After Effects directly. Camera RAW will start automatically on importing. What is more, you will be able to change your Camera RAW settings at any time you want inside your AE project: in Project panel select your RAW image sequence, right-click, choose Interpret Footage -> Main... In the dialog box click More Options... button (at bottom left), and Camera RAW opens.
2. Do NOT export to H.264 out of After Effects directly. If you need to export your composition to H.264, export it out of Adobe Media Encoder. Start from HDTV preset. If your goal is to upload your media file on e.g. YouTube, done. If you want to play it back on your computer, but your mediaplayer can't playback it in real time, start to decrease bitrate settings. Keep in mind that modern AVCHD cameras shoot with 28 Mbps, first AVCHD camcorders were shooting with 17 Mbps, YouTube preset in Adobe Media Encoder sets bitrate to 10 Mbps, Vimeo preset - to 8 Mbps.
Choose VBR, 2 Pass so as to benefit from better quality out of smaller file size.
See this The Video Road blogpost on Understanding Colour Processing and benefits of Render at Maximum Depth option.
3. If you're planning to use your After Effects composition in Premiere Pro project, you can use Adobe Dynamic Link. If your After Effects composition is quite complex, render a Digital Intermediate out of After Effects and import it into Premiere Pro. See this discissuon in AE Forum on some production codecs comparison.
P.S. See also this FAQ: What are the best export settings? entry.

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

How to use Image Rotator with Firefox??

Since the latest update of Firefox , my image Rotator will not show my images in my forum. They work fine if I use IE but I much prefer to use Firefox as my browser.
IPlease help, I don't want to use IE.
Thanks in advance.

Make use of Firefox Addons
*https://addons.mozilla.org/en-us/firefox/addon/rotate-image/

Correct image rotation with CameraRoll

At the moment I'm implementing CameraRoll in my app.
It's a great class, but the images do not rotate correctly on Android. Other apps seem to be able to determine if the picture was taken in landscape or portrait mode, and view the image in the correct orientation.
As for now the users in my app will have to rotate their image manually...
Does anyone know a fix/workaround for this?

well, the easiest way for rotating an image through the sdk is by using transform_word().
it takes a matrix (or matrices for motion blur), so you can do any transform operation concievable via a matrix.
here's a thread with some detail about this function:
http://forums.adobe.com/message/1970939#1970939
as for line by line transformations...
there are some toos in the SDK, but they're available only for AEPGs of type "artizan" (the plug-ins that render whole comps),
so if you're planning a layer effect, these tools are out of the question.
you can do that calculation manually in a few ways.
you can create a tranformation matrix and run each pixel through it, which would probably be the fastest most versitile way.
or you can use trigonometry, which would probably be the easiest to implement but the slowest to process.
using the sdk's subpixel sample functions would complete the tools you need, but keep in mind that this would be the slowest possible way of rotating an image.

Pivot point in image rotation with JAI...

I'm using JAI to rotate some images...
but it doesnt seem to rotate around the center of the image..
here is my codes..
float xOrigin = ((float)src.getWidth())/2;
float yOrigin = ((float)src.getHeight())/2;
float angle = (float)v * (float)(Math.PI/180.0F);
Interpolation interp = Interpolation.getInstance(Interpolation.INTERP_BICUBIC);
ParameterBlock params = new ParameterBlock();
params.addSource(src);
params.add(xOrigin);
params.add(yOrigin);
params.add(angle); // rotation angle
params.add(interp); // interpolation method
des = JAI.create("rotate", params);
displayImage(des);
note: src and des is defined as PlanarImage.
any clues why the center point isn't height/2 and width/2??
thx

It seems that on problem with the code, I use same code when I rotate the image. How do you display the image? maybe problem is there, after the ratation, the origin of the image changes, if your display method can not handle this, you may not display it properly.

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 );
}

Image rotation with spry

<cfsetting enableCFoutputOnly="yes"
showDebugOutput="no">
<cfinclude
template="../includes/XMLExport/XMLExport.cfm">
<cfquery name="get_ads" datasource="#dns#">
SELECT *
FROM BannerAds
WHERE type = 'c' AND
realastate = 3 AND
active = 1
</cfquery>
<cfscript>
// Begin XMLExport get_ads
xmlExportObj = XMLExport_CreateObject("XMLExport");
xmlExportObj.init();
xmlExportObj.setRecordset(get_ads);
xmlExportObj.addColumn("ID", "ID");
xmlExportObj.addColumn("type", "type");
xmlExportObj.addColumn("fileName", "fileName");
xmlExportObj.addColumn("link", "link");
xmlExportObj.addColumn("date", "date");
xmlExportObj.addColumn("realastate", "realastate");
xmlExportObj.addColumn("rotation", "rotation");
xmlExportObj.addColumn("active", "active");
xmlExportObj.setMaxRecords("ALL");
xmlExportObj.setXMLEncoding("ISO-8859-1");
xmlExportObj.setXMLFormat("NODES");
xmlExportObj.setRootNode("id");
xmlExportObj.Execute();
// End XMLExport get_ads
</cfscript>
<cfsetting enableCFoutputOnly="no">
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Which I get my results of.....
−
<id>
−
<row>
<ID>78</ID>
<type>c</type>
<fileName>CDCLarue-Column.gif</fileName>
<link>
http://www.cdclarue.com/cd.php</link>
<date>2007-25-04 08:53:00</date>
<realastate>3</realastate>
<rotation/>
<active>1</active>
</row>
−
<row>
<ID>80</ID>
<type>c</type>
<fileName>Werk-column.jpg</fileName>
<link>
http://www.werkmaster.com/</link>
<date>2007-01-05 13:30:00</date>
<realastate>3</realastate>
<rotation/>
<active>1</active>
</row>
−
<row>
<ID>85</ID>
<type>c</type>
<fileName>Versatile-column.gif</fileName>
<link>
http://www.garagecoatings.com/</link>
<date>2007-15-05 14:00:00</date>
<realastate>3</realastate>
<rotation/>
<active>1</active>
</row>
</id>
Ok.....I'm obviously new to Spry-Ajax :) but have learned a
lot already I just need to understand how to work with the data in
the <body> area... I basically need to pull each image or set
of data individually and rotate each data set/image on the page at
10 second intervals.
Thank you,
Brian

<cfsetting enableCFoutputOnly="yes"
showDebugOutput="no">
<cfinclude
template="../includes/XMLExport/XMLExport.cfm">
<cfquery name="get_ads" datasource="#dns#">
SELECT *
FROM BannerAds
WHERE type = 'c' AND
realastate = 3 AND
active = 1
</cfquery>
<cfscript>
// Begin XMLExport get_ads
xmlExportObj = XMLExport_CreateObject("XMLExport");
xmlExportObj.init();
xmlExportObj.setRecordset(get_ads);
xmlExportObj.addColumn("ID", "ID");
xmlExportObj.addColumn("type", "type");
xmlExportObj.addColumn("fileName", "fileName");
xmlExportObj.addColumn("link", "link");
xmlExportObj.addColumn("date", "date");
xmlExportObj.addColumn("realastate", "realastate");
xmlExportObj.addColumn("rotation", "rotation");
xmlExportObj.addColumn("active", "active");
xmlExportObj.setMaxRecords("ALL");
xmlExportObj.setXMLEncoding("ISO-8859-1");
xmlExportObj.setXMLFormat("NODES");
xmlExportObj.setRootNode("id");
xmlExportObj.Execute();
// End XMLExport get_ads
</cfscript>
<cfsetting enableCFoutputOnly="no">
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Which I get my results of.....
−
<id>
−
<row>
<ID>78</ID>
<type>c</type>
<fileName>CDCLarue-Column.gif</fileName>
<link>
http://www.cdclarue.com/cd.php</link>
<date>2007-25-04 08:53:00</date>
<realastate>3</realastate>
<rotation/>
<active>1</active>
</row>
−
<row>
<ID>80</ID>
<type>c</type>
<fileName>Werk-column.jpg</fileName>
<link>
http://www.werkmaster.com/</link>
<date>2007-01-05 13:30:00</date>
<realastate>3</realastate>
<rotation/>
<active>1</active>
</row>
−
<row>
<ID>85</ID>
<type>c</type>
<fileName>Versatile-column.gif</fileName>
<link>
http://www.garagecoatings.com/</link>
<date>2007-15-05 14:00:00</date>
<realastate>3</realastate>
<rotation/>
<active>1</active>
</row>
</id>
Ok.....I'm obviously new to Spry-Ajax :) but have learned a
lot already I just need to understand how to work with the data in
the <body> area... I basically need to pull each image or set
of data individually and rotate each data set/image on the page at
10 second intervals.
Thank you,
Brian

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

Image rotation with fade effect

Similar Messages

Maybe you are looking for