Adding Animation or Slideshow to Non Rectangular shape

I have a site I am designing and it has a Animation/Slideshow area that I want to put a rotating animation of product pictures so they can move from one picture to the next until is ends and then loops and continues. The shape is basically rectangular but it has shapes that break out of the rectangle. How do I put this into Dreamweaver with this odd shape and have it work in Dreamweaver.
~ Scott

<div id="outer">
<div id="inner">
</div>
</div>
There is a nested container arrangement - an inner and an outer div. The outer div would be styled with the background image, and the inner div would have the slideshow within. Examine the code on my linked page to see the details - a bit of CSS in the head of the page, and those two divs.
Don't think that you can get away with using DW without learning something about HTML and CSS - you cannot. The best place to start with this would be here -
HTML & CSS Tutorials - http://w3schools.com/
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
========================================
PRE-BUILT CSS LAYOUTS
For rock solid, commercial products that perform well in all browsers/devices, visit Project Seven:
http://www.projectseven.com/products/index.htm
Not Just a Grid CSS Framework (free)
http://www.notjustagrid.com/demo.asp
Ultimate Multi-Column Layouts (free)
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layout s-em-and-pixel-widths
EZ-CSS Templates (watch the screencast to see how it works)
http://www.ez-css.org/css_templates
Dreamweaver CSS Templates for beginners (free)
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_te mplates.html
New DW Starter Pages (free)
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_l ayouts.html

Similar Messages

Cropping to a non-rectangular shape

How do I crop a photo to a circular or elliptical outline?
The ellipse tool appears to eliminate everything inside it.

The easiest way is to use the cookie cutter tool.
On the tool's option bar, click on the little arrow next to "shapes", expand that to look for the crop shapes library, and you will find many shapes to select from. Be sure to use an all black shape for your purpose. Note that you can set the degree of feather to make the cropped object look more refined.

Non-rectangular click area?

I have a map that contains several areas, which have
irregular shapes, i.e., they all have non-rectangular contours.
Each such area is a movie clip, made from a transparent gif. Any
part outside of this area (non-rectangular contour) is transparent.
I have onRollOver and onRollOut event handler to process when
a mouse moves in or out of an area. But it seems that a "in" only
happens when mouse actually moves into the rectangle that enclose
an area and "out" only happens when mouse actually moves out that
rectangle.
So, how to make these events handle this non-rectangular
shapes? Thanks!

quote:
Originally posted by:
Newsgroup User
If you're making an what's usually called an "invisible
button," then all you need is artwork in the Hit frame only. If you
only have shapes (or whatever) in the Hit frame, then the button
symbol will be invisible at runtime, and will show as a teal
preview in the authoring environment.
The MovieCip.hitArea property is a property of the MovieClip
class, which defines the functionality for all movie clips. The
Button class does not feature such a property, so if you want to
use it, you'll have to use
movie clip symbols.
David Stiller
Adobe Community Expert
Dev blog,
http://www.quip.net/blog/
"Luck is the residue of good design."
Thanks! Words convey knowledge.
After reading your reply twice, in fact, from thinking too
hard to make the whole thing work based on those GIF-derived movie
clips, I just realized that I should've created the clips directly
from vector images.
Now, for each area's gif bitmap, I converted it into vector
first and then converted it into a movie clip symbol. In this way,
no special codes need to be used and it is more straightforward.
So, I guess one big wrong assumption I've made until now is
that converting a GIF directly into a movie clip should
automatically include a step to make the bitmap vector image.
Thanks all for your help!

Non rectangular windows using Swing

Hi everybody
I've been trying to create a non rectangular window (i.e. an oval window) subclassing javax.swing.JWindow but even though the drawing of the inside of the window works correctly, the problem is with the outer part, which is painted anyway using the background color while I'd like to have it
transparent so to simulate a real oval window.
i.e. I'd like to have something like (dots are just fillings to give the drawing some shape):
|. Transparent background...|
| ..... ----------------------- .......... |
| .... / Window ............... \ ....... |
| .... \ contents .............. / ....... | <--- Window's bounds
| ..... ----------------------- .......... |
|_____________________|
Any idea about how to prevent the background from being painted??
Thanks in advance
andrea

Here is what I have done to overcome a similar problem.
These two classes help me show a 'Bubble' popup similar to what Windows XP have
You can tweak it like you want.
/* Subclass of Window to show the Bubbles */
public class WindowBubble extends Window{
public WindowBubble(Frame owner, String text, Point startingPoint){
super(owner);
JBubble bubble = new JBubble(text, startingPoint);
setLocation(startingPoint);
add(bubble);
pack();
/* This code is based on SUN's examples of how to create Oval-Components */
public class JBubble extends JLabel {
int capWidth = 30;
Point start;
String label;
BufferedImage image;
public JBubble() {
this("", null);
public JBubble(String label, Point p) {
this.label = label;
start=p;
try {
Robot r = new Robot();
image = r.createScreenCapture(new Rectangle(start.x,start.y, getPreferredSize().width, getPreferredSize().height));
}catch(Exception e){
e.printStackTrace();
this.setHorizontalAlignment(JLabel.CENTER );
public String getLabel() {
return label;
public void setLabel(String label) {
this.label = label;
invalidate();
repaint();
public void paint(Graphics g) {
int width = getSize().width - 1;
int height = getSize().height - 1;
g.drawImage(image,0,0,this);
Color interior;
interior = (Color)UIManager.get("ToolTip.background") ;
// ***** paint the interior of the button
g.setColor(interior);
// left cap
g.fillArc(0, 0, // start
capWidth, height, // size
90, 180); // angle
// right cap
g.fillArc(width - capWidth, 0, // start
capWidth, height, // size
270, 180); // angle
// inner rectangle
g.fillRect(capWidth/2, 0, width - capWidth, height);
// ***** highlight the perimeter of the button
// draw upper and lower highlight lines
g.setColor(Color.black);
g.drawLine(capWidth/2, 0, width - capWidth/2, 0);
g.drawLine(capWidth/2, height, width - capWidth/2, height);
// upper arc left cap
g.drawArc(0, 0, // start
capWidth, height, // size
90, 180-40 // angle
// lower arc left cap
g.drawArc(0, 0, // start
capWidth, height, // size
270-40, 40 // angle
// upper arc right cap
g.drawArc(width - capWidth, 0,// start
capWidth, height, // size
90-40, 40 // angle
// lower arc right cap
g.drawArc(width - capWidth, 0, // start
capWidth, height, // size
270, 180-40 // angle
// ***** draw the label centered in the button
Font f = getFont(); if(f != null) {
FontMetrics fm =
getFontMetrics(getFont());
g.setColor(getForeground());
g.drawString(label, width/2 - fm.stringWidth(label)/2, height/2 + fm.getHeight()/2 - fm.getMaxDescent() );
public Dimension getPreferredSize() {
Font f = getFont();
if(f != null) {
FontMetrics fm = getFontMetrics(getFont());
return new Dimension(fm.stringWidth(label) + capWidth*2, fm.getHeight() + 10);
} else {
return new Dimension(100, 50);
public Dimension getMinimumSize() {
return new Dimension(100, 50);

Non-rectangular Border?

Hello,
Is it possible to use a Border, for example a javax.swing.border.EtchedBorder, to outline a Shape?
I'm developing some non-rectangular Buttons and would like to be able to use some of the standard Borders with them.
Thanks,
Ted Hill

Hi,
Were you able to find a solution to your problem?
I am trying the same on a round JPanel.
Thanks
Ashish

Non-rectangular or transparent images

Hi.
Not using Swing, can I use non-rectangular images for animation purposes ?
Alternatively, can I use rectangular images with a "transparent" color as a background ?
If so - How ?!
Thanks.

GIF98a images can have a mask (transparent) color set. Otherwise, set the 'alpha' component of pixels that use your chosen mask color.
http://tutorials.findtutorials.com/read/id/111

Slice a non-square shape

I wish to use the slice tool in adobe photoshop cs6 or cc and d slice non-square shapes
Kindly help
Thank you

Even though slices are square. Current CSS allows adding rounded borders.
If you have the latest version of photoshop, you can copy the css from photoshop to place in a webpage.
Like so:

How can I count the number of pixels in a non-rectangular selection?

I need to know the exact number of pixels that I select for a size comparison. It's a non-rectangular selection similar to a cloud.
I'm using CS2 but could upgrade if needed.

Thank You
Michael D. Sutton
(435) 723-3566
(435) 720-2878
[email protected]

Non-Rectangular Buttons with images

is it possible to create a non-square "button" in flash cs4
programmatically using as3?
Using a xml document, i'm trying to be able to retrieve a
.png file with transparency, and have said transparent area's be
not clickable.
Long story short, I'm creating a map with a bunch of
clickable areas. These areas are non-rectangular and I need them to
not obscure other area's which would be in their rectangle. I need
this to be done programmatically since the area's are going to be
dynamic as is the data attached to them.
fyi: I have a fairly good grasp of OOP, so don't be afraid to
post up complex instructions.

Now we're cooking with gas! Thank you so much for your
assistance!
The only issue left;
is it possible for the Events to penetrate through, so that
if two elements slightly overlap, the transparent part of obj1 will
allow a onclick (and subsequently the onmouseover) event on el2,
preferably dynamically so that I don't have to add event handlers
between the two.
Is there a simple way or do i need to calculate the overlap
using the x/y coords and width/height of each element, then
manually dispatch?
here's where I'm at thus far (with this discussion)
Firstly, the class for the movie clip,
then our frame.

I'm having a ipod nano which vl b in rectangular shape of 2" and when i connect my iphone's earpods d control keys are not workin. may i know d reason y its nt supporting?

i'm having a ipod nano which vl b in rectangular shape of 2" and when i connect my iphone's earpods d control keys are not workin. may i know d reason y its nt supporting?

I can't tell which iPod nano model you are describing. The EarPods listing at the Apple Store
http://store.apple.com/us/product/MD827LL/A/apple-earpods-with-remote-and-mic
Says (under Compatibility) that iPod nano 4th gen and later are supported ["Requires software version 1.0.3 for iPod nano (4th generation)"]. If your nano is 3rd gen or earlier, it will still work for audio, but some control buttons may not work.

Urgent!Java Frame Cutting according to non-rectangular image (Transparency

Urgent-Java Frame Cutting according to non-rectangular image (CrossPlatform - Transparency)
hi, i want to make the frame transparent in order to make a skin like Windows Media Player . skin is non-rectangular how should i make the frame transparent i am using the JWindow as the container. Plz guide me any idea. as an example i have a JWindow i put a non-rectangular image on it via Jlabel . now i want to make the edges of JWindow outside the boundery of the image transparent ... so that my frame seems like a non-rectanguar image . How i do that? But i need a cross platform kinna thing in java especially for windows/mac/linux
PaulFMendler :: thanks for ur help i looked at the code but it seems to be windows dependent. i need cross-platform way of producing abt effects. please contact me even on my email >> [email protected]
Waiting ......

Check out the link shown below:
http://forum.java.sun.com/thread.jsp?forum=4&thread=391403
The posted code has slight problem when moving the JWindow around but you can get a pretty good idea on what has to be done.
;o)
V.V.

Cannot fill a rectangular shape with Color

HI,
I cannot fill a rectangular shape with color. I know it was working at some point. I checked the ID help, and did a search here with no results.
I have the tool bar set correctly I think (see below). The object isn't behind other objects either, - that I can see. I do see it when I use the scroll bar so it's there somewhere. (see Pink box below).
Any ideas profound or otherwise?
Thenk Yew.

You haven't got 100% transparency applied to it? Then it might appear while scrolling because of a slightly delayed display. That's all I can think of at the moment...
The other thing to try if you suspect an individual document is playing up is to export it to inx or idml and open that. Then another thing is to try replacing your preferences.

"Non rectangular objects will not appear correctly when exported using CSS."

I am using Ind CC 2014 exporting a document to a reflowable epub. The document contains an .ai image. The image exports correctly in some parts of the.epub but not others, where it is distorted. There is a warning on export :"Non rectangular objects will not appear correctly when exported using CSS." Any suggestions appreciated.

Thanks!
>
"Non rectangular objects will not appear correctly when exported
using CSS."
created by pooja2087 <https://forums.adobe.com/people/pooja2087> in
/InDesign EPUB/ - View the full discussion
<https://forums.adobe.com/message/6886892#6886892>

Animated iPhoto Slideshow: Cannot recreate my original slideshows

In early 2011, I created 7 different animated iPhoto Slideshows to use as part of my acting and modeling marketing program. The iPhoto Slideshow software was amazing in how it took still photography and, in a seemingly simple and easy way, transformed it into exciting, highly creative, professional looking video presentations with synchronized music. My slideshows were many times better than the original still photography.
Recently, I needed to update/replace one photo in some of these slideshows. To my dismay, I discovered that it was impossible to recreate four of these iPhoto Slideshows. Every time I attempted to do so, the resulting slideshows were nothing like my original slideshows. Actually, the overall quality of these 4 slideshows has been drastically downgraded to the point of being unusable--for one or more of the following reasons: the most interesting, unusual setup of 4 photos [up left: square; up rt: oblong; low left: oblong; low rt: square] in Sliding Panels has been eliminated; this results in a lot of repetition of the same setups within this slideshow; in another slideshow, the current software produces a totally different slideshow that is absolutely rigid throughout and will make no changes/modifications, regardless of the photo order or photo format; in one slideshow, the photo alignment is completely off; and the music is not always in sync with the action.
Over the past several months, I have discussed these problems with many different people at Apple Support. Everyone that I have spoken with assumed the problem was caused by a software update to iPhoto Slideshow sometime since early last year. On April 6th, after reviewing this problem with Apple Engineering, an Apple Support Advisor briefed me on what Engineering had to say. The response was basically this: When the iPhoto Slideshow was created, Apple purposely included an algorithm that continually changes the slideshows. Therefore, if I create a slideshow today, it may be impossible to ever recreate that same slideshow again because of this algorithm.
I must admit that I am more than a little suspicious about Apple’s response. It seems just too good to be true; especially due to the fact the stated cause is not easily provable or disprovable. And Apple Support certainly did not attempt to validate or offer any reasons to support why I should accept this as truthful. Actually, until now, everyone at Apple that I had spoken with assumed the problem was caused by an update to the iPhoto Slideshow software since early last year. Moreover, 3 of the original slideshows are currenty easily re-creatable. Finally, this stated cause is so consistent with my experience of how Apple handles all product and software problems: Nothing is wrong with our product or software. There must be something wrong with your system or how you are using it.
My bet is that Apple significantly changed the slideshow software when they introduced the new iPad in late 2011 to accomodate the unique format of iPad. Hence, the iPhoto Slideshow software would work on iMac, iPhone and iPad.
MY QUESTION IS SIMPLY THIS: HAS ANYONE EXPERIENCED THE SAME PROBLEM AS I HAVE WITH THE ANIMATED iPHOTO SLIDESHOWS?

Is this the panel you're referring to in the Sliding Panels theme?
If so then it's still availabe in the iPhoto 11 version. Try a different arrangement of photos. If that doesn't work try this: make a temporary, backup copy (if you don't already have a backup copy) of the library and try the following:
1 - delete the iPhoto preference file, com.apple.iPhoto.plist, that resides in your
     User/Home()/Library/ Preferences folder.
2 - delete iPhoto's cache file, Cache.db, that is located in your
     User/Home()/Library/Caches/com.apple.iPhoto folder.
Click to view full size
3 - launch iPhoto and try again.
NOTE: If you're moved your library from its default location in your Home/Pictures folder you will have to point iPhoto to its new location when you next open iPhoto by holding down the Option key when launching iPhoto. You'll also have to reset the iPhoto's various preferences.
OT

Cropping non-rectangular image

Hello,
I need to crop a slightly non-rectangular, four-sided image (a photo of a picture in a frame) and end up with a rectangular image. I've tried cropping and lassoing but nothing seems to do the job. Most grateful if anyone can tell me how I might do this on PSE.
Thanks
Michael

Witteboomen wrote:
Plse excuse Dunn question, Michel, but what is ACR?
Best
Michael
ACR (Adobe Camera Raw) is the module of PSE which is used to first convert raw images so that they can be read and edited in the Editor.
This module can also be used to open jpeg files:
In the Editor, menu /File/Open As
you select a jpeg picture and in the line'Open As', just under where you enter the file name, you must choose the 3rd option :
Camera raw...
This opens a new dialog window in which you can do the main edits to your image by adjusting a few sliders.
Of course, raw file will benefit more from being processed in ACR, but it's also interesting for jpegs.
How can editing through ACR be a 'non destructive' process ?
It's because the principle of ACR (also used in Photoshop CS) is to store all editing commands and settings separately from the original picture data which are never changed. In the case of jpegs, the settings are stored in the metadata section of the jpeg file (where the camera name and settings are kept) without changing anything in the way pixels are represented. The 'recipe' is stored, but the pixels stay unchanged. When you straighten and crop, if you click 'Done', the settings are saved. If you want to do some editing or print your file, you click 'Open' and the result of your edits in ACR is opened in the Editor. If you do changes in the editor, of course, those edits will be 'destructive' (as usual in the Editor) so that you'll have to save the file with another name to keep the original. If you do no edits in the Editor, but only print or convert the file to another format, the original picture data is not changed.
In that last case, you don't need to re-open the picture with 'Open As', the Editor will know the picture has to be opened in the ACR module with the usual 'Open'. But it you want to re-open the same picture in another application like Picasa, the Adobe editing data will be ignored and you'll see the original version.

Adding Animation or Slideshow to Non Rectangular shape

Similar Messages

Maybe you are looking for