Rotation with alpha'd Images
Hi, I'm in the process of writing a little top down game in Java (its amazing how little you can get away with for a Uni Honours project nowadays), but rather than forcing myself to draw individual frames for each new direction my sprite I would like to take one sprite strip and rotate it at run-time to form the new directions (this doesn't seem that slow in tests so far). The only problem is when I rotate GIF images with alpha channels using the JAI RotationTransformation it re-draws the alphaed components with a black background.
Does anyone know of a way to ensure that I can maintain my alpha channel in the images? I'm not set on using JAI for the transformations so if there is another way I'd be more than willing to have a look at that.
Many thanks
E.Laverick
I believe the fundamental problem is creating an image which is entirely transparent onto which to draw the rotated image. That may give you some ideas. Another approach which may work is to use an RGBImageFilter, although I'm not confident that they support playing around with alpha. You could also try searching the Java2D forum for keywords like alpha and transparency - although I'd hope you've already done that.
Similar Messages
-
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> -
<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 -
Graphics, ImageIO, and 32-bit PNG images with alpha-channels
I have a series of 32-bit PNG images, all with alpha channels. I'm using ImageIO.read(File) : BufferedImage to read the PNG image into memory.
When I call graphics.drawImage( image, 0, 0, null ); I see the image drawn, however all semi-transparent pixels have a black background, only 100% transparent pixels in the source image are transparent in the drawn image.
The Graphics2D instance I'm drawing to is obtained from a BufferStrategy instance (I'm painting onto an AWT Canvas).
Here's my code:
Loading the image:
public static BufferedImage getEntityImage(String nom, String state) {
if( _entityImages.containsKey(nom) ) return _entityImages.get( nom );
String path = "Entities\\" + nom + "_" + state + ".png";
try {
BufferedImage image = read( path );
if( image != null ) _entityImages.put( nom, image );
return image;
} catch(IOException iex) {
iex.printStackTrace();
return null;
private static BufferedImage read(String fileName) throws IOException {
fileName = Program.contentPath + fileName;
File file = new File( fileName );
if( !file.exists() ) return null;
return ImageIO.read( new File( fileName ) );
}Using the image:
Graphics2D g = (Graphics2D)_bs.getDrawGraphics();
g.setRenderingHint( RenderingHints.KEY_ANTIALIASING , RenderingHints.VALUE_ANTIALIAS_ON);
public @Override void render(RenderContext r) {
Point p = r.v.translateWorldPointToViewportPoint( getLoc() );
int rad = getRadius();
int x = (int) p.x - (rad / 2);
int y = (int) p.y - (rad / 2);
BufferedImage image = Images.getEntityImage( getCls(), "F" );
r.g.drawImage( image, x, y, null );
}You may want to check on you system and see what ImageReaders are available, it could be ImageIO is just not picking the best one, if not, then you can use getImageReaders to get an iterator of image readers, then choose the more appropriate one.
-
Export PNG images with alpha channel from flash
Hi,
I have this FLA with animation and when played, the animation has alpha channel. I can’t understand why when I look in the library I see the frames without the alpha channel and also when I try to export/extract the image again the image don’t have alpha channel.
How is it that in flash this image has alpha channel and how to get it out like that into PNG?
Here is the link to download the FLA:
http://download759.mediafire.com/nb749r29220g/e0636ab0ru6ouoa/Untitled-1.fla"when played, the animation has alpha channel"
how are you playing the animation? control/enter in Flash, Publishing to a Web page or what?
How can you tell that the animation has the alpha channel? What exactly are you seeing?
What is the aniimation? a series of images, one image moving? Are teweens imvolved?
" when I try to export/extract the image again the image don’t have alpha channel"
How are you exporting the image? is it a single image? or a series of frames that makes up an animation?
What was the file format of the original image? you brought that image into Flash and animated it? Now you want to export as a .png with transparency?
Have you ever tried to export a simple .png before so that you see and understand the dialog box that pops up during export? are you chosing "24 bit with alpha channel" in the "Colors" choice?
For those of us who may not want to download your file, please provide a more detailed describtion of everything related to this question.
Best wishes,
Adninjastrator -
In Pages '09, images with alpha channels can be difficult to deal with, especially if the alpha is a bigger part of the object than the non-alpha portion. The issue is that you cannot move an object by clicking on an area that is transparent. For most images, this is intuitive and helpful, but for some things it is infuriating. For example, when pasting in a PDF or image object of a MathType equation, it is quite difficult to reposition the image quickly, because great care must be taken to click on a letter in order to drag the object. To make matters worse, the edge detection of the non-alpha portions of the object is not extremely precise, so it can appear that you are clicking on a legal part of the image, but you will get no response from pages.
My question is this: do any of you know if there is a preference somewhere that controls whether alpha is selectable or not? I would just like to be able to click anywhere in the image box and move the image. It doesn't matter if it is a support preference or requires fiddling with a plist somewhere. Anything would be helpful. Thanks.Dream on,
Well, the World needs more Yoyo Ma types, so I hope you are successful.
If you Command-Click in the Margin and Drag across the page, you will catch the object in a wide net. Then you can manipulate it with the arrow keys, or Shift-Arrow for larger moves.
Jerry -
Hi again,
Im trying to import in FCP an image sequence (tiff or tga) with alpha channel and i cant..I look in the manual and it says that i must first go to quicktime to convert to mov etc but what ill do with alpha channel ? i need it cause the seq is from a vfx..
Any suggestions ?you need to export the movie out from Quicktime Player using a codec that supports an alpha channel. built-in, you can use Apple's "Animation" codec but thats a seriously heavy codec to work with, instead you may want to download a third party codec to use as an intermediate
Avid's Quicktime codecs have alpha support and are freely available from their website -
By rotating the phone, the image and program remain static and do not turn with device
My name is Alexandra, I’m from Russia.
I have got IPhone 5. And screen rotation doesn’t work on it. (By rotating the phone, the image and program remain static and do not turn with device)
The IPphone's data is:
IMEI 01 340900 881941 7
ICCID 8970 1991 2092 3807 872
Vendors in my country explained to me that this case relates to the World APPLE warranty and I can exchange my IPphone for a new one in any licensed center in Europe. I want to reserve time for a visit to the AppStore in Barcelona for solution this problem. Is it possible? What do I need to carry?
I’m also more interested in possibility of replacing my phone on the same one in different color. Is it possible?
Thanks in advance,Not all screens rotate. For example, the home screen does not rotate.
Also, having the portrait lock turned on will prevent all screens from rotating.
This is covered in the User's Guide.
There is no International warranty on the iPhone, never has been.
Warranty and support are limited to the country of origin. -
I downloaded the Rotate.llb and am trying to rotate a simple 24bit .bmp I made in Windows Paint, but the rotated image comes up blank.
I edited the default image control and indicator to have my image inside it and really don't know what else to do? The example works fine with the default image, I'm wondering if it has to do with my image properties?
I tried using "Picture to Pixmap" but to no avail. Any help would be greatly appreciated. I am attaching a screen shot of my results and the modified Rotate vi I am working on, thanks.
Attachments:
Rotate Picture Control_v2.vi 16 KB
rotate_shot.jpg 383 KBHello Sametron,
Give this a try:
Regards,
Jeff L.
Applications Engineer | National Instruments
Attachments:
201606.zip 1 KB -
Looking for img rotator with responsive design
does any one know code for html for img rotator with responsive design
Copy & paste this code into a new, blank document in DW. SaveAs test.html Preview in Firefox or Chrome. IE is rubbish.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Cycle2</title>
<!--helpf for older IE browsers-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Cycle2 Slideshow Plugin-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
/**Slideshow**/
.cycle-slideshow {
position: relative;
z-index: 1;
width: 50%; /**adjust width as required**/
margin:75px auto;
text-align: center;
.cycle-slideshow img { max-width: 100% }
/* prev / next links */
.cycle-prev, .cycle-next {
position: absolute;
top: 0;
width: 20%;
opacity: 0;
filter: alpha(opacity=0);
z-index: 800;
height: 100%;
cursor: pointer;
.cycle-prev {
left: 0;
background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
.cycle-next {
right: 0;
background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
.cycle-prev:hover, .cycle-next:hover {
opacity: .7;
filter: alpha(opacity=70)
/**END SLIDESHOW STYLES**/
</style>
</head>
<body>
<h1><a href="http://jquery.malsup.com/cycle2/">JQuery Cycle2</a></h1>
<!--begin slideshow-->
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-pause-on-hover="true"
data-cycle-speed="600"
>
<!-- prev/next links -->
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<!--insert your images below-->
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="description">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="description">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="description">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="description">
<p>Mouse over image for previous / next links</p>
</div>
<!--end slideshow-->
</body>
</html>
Nancy O. -
Exporting a move clip with alpha channel
Hi there,
I’m trying to export a move clips with alpha channel.
I’m trying to export an animation with Premiere CS5. I made an animation of a rotating object in Maya and exported it with alpha channel as tiff images. Then they are edited with Photoshop to give them a drop shadow.
My problem is this. Can I export this tiff animation with the alpha channel?
My plane is to use move clips over backgrounds in a game – depending on the result there are different animations playing on top of several different backgrounds. There for the objects has to have a transparent/alpha channel over the backgrounds.
Again the reason for this is the complexity of the game and to make the game looking as real as possible. I’m hoping for some help here to make my plan possible
…thanksThanks alot for the help.
But now I’m wondering how to get the file size down?
The 32bit and alpha channel just increase the file size from about 1MB to 9,3MB, which is pretty much??
…any ides mate? -
ImageIO PNG Writing Slow With Alpha Channel
I'm writing a project that generates images with alpha channels, which I want to save in PNG format. Currently I'm using javax.ImageIO to do this, using statements such as:
ImageIO.write(image, "png", file);
I'm using JDK 1.5.0_06, on Windows XP.
The problem is that writing PNG files is very slow. It can take 9 or 10 seconds to write a 640x512 pixel image, ending up at around 300kb! I have read endless documentation and forum threads today, some of which detail similar problems. This would be an example:
[http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=6215304|http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=6215304]
This surely must be resolvable, but after much searching I've yet to find a solution. If it makes any difference, I ONLY want to write png image, and ONLY with an alpha channel (not ever without), in case there are optimisations that that makes possible.
If anyone can tell me how to address this problem, I'd be very grateful.
Many thanks, Robert Redwood.This isn't a solution, but rather a refinement of the issue.
Some of the sources I was reading were implying that the long save time might be due to a CPU heavy conversion process that had to take place before the BufferedImage could be saved. I decided to investigate:
I loaded back in one of the (slowly) saved PNG images using ImageIO.read(file). Sure enough, the BufferedImage returned differed from the BufferedImage I had created. The biggest difference was the color model, which was DirectColorModel on the image I was generating, and was ComponentColorModel on the image I was loading back in.
So I decided to manually convert the image to be the same as how it seemed to end up anyway. I wrote the following code:
* Takes a BufferedImage object, and if the color model is DirectColorModel,
* converts it to be a ComponentColorModel suitable for fast PNG writing. If
* the color model is any other color model than DirectColorModel, a
* reference to the original image is simply returned.
* @param source The source image.
* @return The converted image.
public static BufferedImage convertColorModelPNG(BufferedImage source)
if (!(source.getColorModel() instanceof DirectColorModel))
return source;
ICC_Profile newProfile = ICC_Profile.getInstance(ColorSpace.CS_sRGB);
ICC_ColorSpace newSpace = new ICC_ColorSpace(newProfile);
ComponentColorModel newModel = new ComponentColorModel(newSpace, true, false, ComponentColorModel.TRANSLUCENT, DataBuffer.TYPE_BYTE);
PixelInterleavedSampleModel newSampleModel = new PixelInterleavedSampleModel(DataBuffer.TYPE_BYTE, source.getWidth(), source.getHeight(), 4, source.getWidth() * 4, new int[] { 0, 1, 2, 3 });
DataBufferByte newDataBuffer = new DataBufferByte(source.getWidth() * source.getHeight() * 4);
ByteInterleavedRaster newRaster = new ByteInterleavedRaster(newSampleModel, newDataBuffer, new Point(0, 0));
BufferedImage dest = new BufferedImage(newModel, newRaster, false, new Hashtable());
int[] srcData = ((DataBufferInt)source.getRaster().getDataBuffer()).getData();
byte[] destData = newDataBuffer.getData();
int j = 0;
byte argb = 0;
for (int i = 0; i < srcData.length; i++)
j = i * 4;
argb = (byte)(srcData[i] >> 24);
destData[j] = argb;
destData[j + 1] = 0;
destData[j + 2] = 0;
destData[j + 3] = 0;
//Graphics2D g2 = dest.createGraphics();
//g2.drawImage(source, 0, 0, null);
//g2.dispose();
return dest;
}My apologies if that doesn't display correctly in the post.
Basically, I create a BufferedImage the hard way, matching all the parameters of the image I get when I load in a PNG with alpha channel.
The last bit, (for simplicity), just makes sure I copy over the alpha channel of old image to the new image, and assumes the color was black. This doesn't make any real speed difference.
Now that runs lightning quick, but interestingly, see the bit I've commented out? The alternative to setting the ARGB values was to just draw the old image onto the new image. For a 640x512 image, this command (drawImage) took a whopping 36 SECONDS to complete! This may hint that the problem is to do with conversion.
Anyhow, I got rather excited. The conversion went quickly. Here's the rub though, the image took 9 seconds to save using ImageIO.write, just the same as if I had never converted it. :(
SOOOOOOOOOOOO... Why have I told you all this?
Well, I guess I think it narrows dow the problem, but eliminates some solutions (to save people suggesting them).
Bottom line, I still need to know why saving PNGs using ImageIO is so slow. Is there any other way to fix this, short of writing my own PNG writer, and indeed would THAT fix the issue?
For the record, I have a piece of C code that does this in well under a second, so it can't JUST be a case of 'too much number-crunching'.
I really would appreciate any help you can give on this. It's very frustrating.
Thanks again. Robert Redwood. -
Using video with alpha channel
I purchased a video clip from istock, the video clip is an .mov and has a alpha channel included. The video clip is santa clause over a black background and tagged at the end is a white solid of the video (I assume this is the alpha channel) How do I use the alpha channel to help key out the vidoe clip that I need. here is a link to the actual video clip I purchased. http://www.istockphoto.com/stock-video-11011749-santa-claus-with-alpha-channel-ntsc.php
Thanks JaAs Szalam said, the b/w image can be used as a luma matte.
Also check if the actual piece of footage has an embedded alpha channel, i.e when you import it AE should know there is an alpha channel and let you know in the top of the project window when you select the element (or "interpret footage").
Alternatively just drag the footage to a comp and enable the checkerboard background to see if there is transparency. These three approaches are the same...just different ways of finding out about the alpha channel. -
Question: Quick Look in Finder; problems with alpha channels
Hi
"Quick look" in Finder is great for quick presentations of a folders selected contents but it only works with images that contains no alpha channels or masks. Is there any way to work around this to display say PhotoShop documents with alpha channels? Or any plug-ins/applications that can help?
thanks.This has been broken forever in OS X, and I don't know why, because it used to work just fine. I suspect the engineers did something to QuickTime that causes this problem, but it has been borked for so long I don't remember when the ability to correctly display files went wrong. I just remember that once upon a time all sorts of things from Apple worked correctly in displaying such files, but pretty much nothing does now. This includes the Finder, Preview, QuickLook, and various third-party image browsers that use Apple's own system level image handling abilities, such as VitaminSee or CocoaViewX. When I need to actually see what's there, I browse with Adobe's Bridge.
Francine
Francine
Schwieder -
Sudden problem with importing tiff files with alpha channel (CS5)
OK this is driving me nuts. For years I have been importing image files that have an alpha channel into FCP as.tiff files. I use Photoshop files only when I want to use the layers as they are too cumbersome otherwise). I have recent upgraded Photoshop, etc. to CS5 and now FCP won't import them anymore. I get a message saying: "File error: 1 file(s) recognized, 0 access denied, 1 unknown"
I am not doing anything different and tiff files created in just the same way in an earlier version of Photoshop import and work just fine. Is this a CS5 bug? Does anyone know of a work around. I want to keep using tiff files as they seem to work best for me with alpha channel work (and I don't see why I need to reinvent the wheel).
Thanks
AI've had a similar issue recently. Same TIFF files downloaded from the same server, different FCP project, new error. I either see"File error: 1 file(s) recognized, 0 access denied, 1 unknown" or I get the even stranger, "Unrecognized file type."
I can open them in PS and save them again as TIF, same results. I know these are not CMYK files but even if resave the TIF as RGB, I get the same results, they are not recognized by FCP.
But if I open them in PS and save them as PNG with alpha, they improt fine.
I have no idea what's going on.
bogiesan
Message was edited by: David Bogie Chq-1
Maybe you are looking for
-
Archived log file are not shifted to standby side and applied
Hi Guru's, DB My OS Version:Windows Server 2003 DB Version:11.2.0.1.0 I am trying to create Physical Standby DB on my test machine after setting all the parameters and start standby db in mount mode when i do the verification of archived log files th
-
When i am posting material in mb1c getting error 'posting done automatic.'
Hi, when am posting material in mb1c T.code getting error posting can done automatically.... so forthat we need to do that account determination... so i want to know the T.code it's asking some Bsx and Gbb is missing
-
Different Distribution Rule on Outgoing Payment cannot be split on Journal
Hi All, I created an Outgoing Payment for Vendor for several invoices. Each invoice was assigned to different Distribution Rule. But the journal created summarized all the invoices (only one row for debit AP), and no distribution rule was assigned. I
-
Is it possible to throw an exception in a constructor?
I have a constructor that calls its super contructor, but I want to check its variable before passing a variable to the super contructor. Something like: public FlatPanelTV(int inches) super(inches); How can I check "inches" before passing it to the
-
I did new upgrade 8 to ipad and can't remember password
uploaded new 8 and created password but have forgotten and now locked out...help