Import sliced images for web

1

Hi all,

I’ve created an image in Photoshop and exported as images for web - after using the slice tool.

When I import these images into Hype 3.5 they stack on top of each other. Is it possible to get them to automatically arrange in the position I sliced them??

Any help appreciated, armature but enthusiastic Hype user!!..

Thanks

Simon

2

Hi,

If you mean within the Hype app, then I very much doubt it.

1 Like
3

You can drag and drop them into a scene or element.

4

You can select the images and use the Arrange->Distribute->Horizontally / Vertically.

Depending on how you sliced them this could work. However, they would have to be sliced at the same width or height for it to be accurate. You could always move them after you’ve done this but if you’re gonna move them then why not drag and drop in the first place. :smile:

5

Hi All,

Thanks for the tips…
My animation is based on a wall being built to reveal a picture… Ill cut them again in straight lines (instead of it being wall like alternate blocks) then arange… if not ill have to do it manually with the snap to grid etc…

Thanks

Simon

6

Why do the slicing? Is it a huge image?

My understanding of slicing is that it was a work-around that was used back in the days when there was less bandwidth.

What size is your image?

7

Hi Ken,

The image can be anything really as the animation will be for social media.

I have in my head to slice it up to make the animation easy in Hype…

The image will form part of a wall, built by bricks (of the image)

Can i ‘cut’ the image into blocks directly in Hype to then animate?

My understanding was that i need to bring in those separate images?

Thanks for help.

Simon

8

@Simon3163
Why don’t you just create one / two images then add this to the project and duplicate?
Or is that what you are doing?

You can’t slice up images in Hype. I think you’re doing it the right way.

@TKDblackbelt I think what he is doing is slicing a few bricks out of an image and then bringing those (slices) images into Hype to build a wall and then animate it. Perhaps using Physics? To simulate a knocking down a wall? not sure.

9

@TKDblackbelt I think what he is doing is slicing a few bricks out of an image and then bringing those (slices) images into Hype to build a wall and then animate it. Perhaps using Physics? To simulate a knocking down a wall? not sure.

This is excatly what im doing… building the wall first then ill attempt to knock it down from the middle… Im more comfatable with the animation than i am with making the images (photoshop)

I’m just looking for the most simple solution to import 100 small images, and in a perfect place in the right place! :smile: The wall makes up an image when complete… So i cant duplicate…!

Thanks for all help…

10

Here is something I’ve quickly put together. The 3 images have been sliced (same height). I then dragged them into the scene in Hype and arranged by going to Arrange->Distribute->Horizontally. Then I duplicated and grouped together. Then duplicated the groups and lined them up underneath. Then I selected all groups and ungrouped them and applied physics to the bricks and added some static physics objects underneath. I then created the “cannon” out of shapes and animated a ellipse to act as the “cannon ball”. It’s quick and dirty but shows the outcome after a quick set up. To delay the wall falling I created a small motion move to stall the physics being applied.

Animation could do more work.

explodeWall.zip (123.3 KB)

11

Thanks DBear!
I’m at work but will look tonight… Very good of you and i’m intrigued!

12

Ah, I get what you are doing. “back in the day” slicing was a technique that supposedly made it easier to download large images into a web page. Seemed doubtful, I never tried it, maybe I had a better internet connection.

Duplicating does sound best for what you want to do.

13

“Back in the day” slicing was used to generate separate images for differrent parts of a web design. For example there might be a logo and a set of tabs for navigation on a web page design. By slicing, you could create the graphics for the logo and for the tab button backgrounds, all from the same photoshop design. So it’s not so much about bandwidth but about creating multiple graphical elements from a single design.

These days, many design elements are generated using CSS rather than images.