1

i recently asked this question and i got a lot of great answers breaking down the difference between flash and flex which was very informative and helpful.

One of my main parts of the question never got answered so i wanted to focus on that (as it was difficult to change to focus on the last questions once it got into a flash versus flex general debate)

In the first Site link on that question, as the use makes selections, these selections are getting applied to an image and you are building up a "master" image with all of the accessories chosen. This is similar to a lot of these "build a doll" websites i see but there is one main difference that goes to the heart of my question.

For example, on step 3, you choose a color and get something like this:

enter image description here

then on step 4, as you choose "accessories", the images changes to this:

enter image description here

or

enter image description here

or

enter image description here

Now this site is using flash (or flex, etc) and people have told me this could be replicated without flash 100% bysimply looking at using zindex with images and jquery / css but in the images above, it doesn't seem like these additional images are just being layered on top because in some cases the accessories is partially "behind" the original image (stars in the back of the cake, etc). So it seems like something more sophisticated is going on. I can't seem to find any examples on the web that show this capability in any tutorial or example)

I wanted to get feedback to if the follow capabilities where available just using regular css, floats, etc or there was some particular feature in flash / flex that i should be looking at to give this capabilities where you can "merge" images together to give you the affect in the images above.

Community
  • 1
  • 1
leora
  • 188,729
  • 360
  • 878
  • 1,366

3 Answers3

1

I believe the most common way to handle this problem is simply to use a cutted image (cut the stars behind the cake) to give the impression stars are behind the cake, while in reality are upfront.

Another possibility is also to use the z-index and use 3 images:

  1. the stars behind
  2. the cake
  3. the stars in front of the cake.

All dress games I've seen so far used the method of the "cutted image". Just try to do something using CSS. Once done, doing the javascript might not be too difficult.

yogsototh
  • 14,371
  • 1
  • 22
  • 21
1

Using z-index would do the trick if the image of the stars was a gif/png with only the stars. Made a small mockup to show you what I mean.

enter image description here

Otherwise you could make a CSS sprite with all states of the cake and just move the background-position of the image within the DIV.

Volzy
  • 225
  • 1
  • 9
  • Your idea is a bit different from mine and yogsototh, but it might be slightly better given your idea uses fewer images. – Zoidberg Jun 30 '11 at 11:11
  • @Volzy - thanks . . by the way, what tool did you use to remove the underlying cake ? – leora Jul 01 '11 at 18:59
0

What I think you need to do is break your images down into the following categories

  1. The main cake image.
  2. The accessories that go behind.
  3. The accessories that go in front.

Now each image will need its own div. For instance, on the last one, the flowers that are behind need to be their own image, while the flowers in front need to be their own image.

Then just set the cake at z-index 2, the behind flowers at z-index 1, and the flowers in front at z-index 3. I recommend you use absolute positioning to position the flowers to the correct location. If you set the containing div that these images are in to position relative, the absolute positioning of the accessories will be relative to the top left corner of the containing div.

Below is some example html and css that might help.

<div id="cake-container">
   <div id="main-cake">
   </div>
   <div id="accessories-front"></div>
   <div id="accessories-back"></div>
</div>


#cake-container {
   position: relative;
}

#main-cake {
  z-index: 2;
}

#accessories-front {z-index: 3}
#accessories-back {z-index: 1}
Zoidberg
  • 10,137
  • 2
  • 31
  • 53