How to put a 3d animation or 360 spin of an image on hype?

Animation
1

Hello, maybe someone can help me to fix my problem, I want to put a 3D image but i dont know how to do it, i’m new in hype… recently I’m start to used adobe edge animation too and there I had the same problem but in this case found this tutorial: http://www.edgehero.com/blog/80/360-spin-tutorial and this one helped me to do it, exist a way to used the method of the tutorial but applied to hype? im new on programmation I don’t know how to do it…

Thanks for your answers.

2

This should help you out!

D

reelJS.hype.zip (373.3 KB)

1 Like
3

Thanks for your help DBear it’s what I want to do , but how you do to marge the images? exist a limit of images because I have the sequence of the image and are 359 pictures…

4

Hi @emmanuel

  1. number your images 1 through to 359. (e.g 001.jpg … 359.jpg)

  2. upload them to your resources panel.

  3. In the inner HTML of the rectangle (Edit->Edit Element’s Inner HTML) replace the line that begins image: with

     images: '${resourcesFolderName}/###.jpg|1..359',

The previous example was just using 1 image with all the frames in it. This adaptation will use several images and make it into one complete sequence. NOTE* make sure the dimensions are the same as your images AND the src="" image is the first of your images.

D

5

this might be another solution.

6

DBear, I do what you told me, but when I see the preview, the image not appear… I don’t know if I make something wrong, I’m going to send you my hype project, maybe you can tell me in what part I’m wrong…

The link to download my project: https://es.hightail.com/e?phi_action=app/orchestrateDownload&batch_id=bXBaMFh1Z2poeVlzeHNUQw

7

Hi @emmanuel

You named your images 1 not 001. no problem just change the line to

images: '${resourcesFolderName}/brujula#.jpg|1..100',

Also, notice there is no | at the end. Only one separator. AND you must give the img tag a width and height.

So, your code should be …

<img id="image" src="${resourcesFolderName}/brujula1.png" width="200" height="150">
<script>
  $('#image').reel({
    images:       '${resourcesFolderName}/brujula#.png|1..100', /// or 1..359 however many images ;)
    frames: 100,
    footage: 5,
    speed: 0.3
    
  });
</script>

D

1 Like
8

Thanks for your great help it’s works, but I have another issue I have 7 stages and each one have a different image and I try to make the same process and put the source that you send me, but when I see the preview just the image of the first stage works, and in the rest stages the pictures appears like a static image… I don’t know if I need change some values of the source?

9

Have you changed the src="" attribute? and also maybe give it a different id.

<img id="image2".....

<script>
    $('#image2').reel .........

EDIT* I believe the problem is the id. Make sure you give each image it’s own unique id! :wink:

D

10

Awesome share!

11

Thanks for your help DBear…

Exist a way to hide the loader that appears below the image it’s a black line that appears when the image is show and when past 1 second disappears?

12

Hi Emmanuel,

This is an element that is dynamically made by the reel.js Javascript but you can easily hide it by using your own CSS in the Head HTML.

Just put the following code in your Head HTML after the <script></script> tags:

<style>
.reel-preloader {
    display: none !important;
}
</style>

NOTE* This will not make your end user aware of the loading of the images but if you are ok with that then it shouldn’t be a problem.

D

13

Do you know of a simple way to customize the preloader?

14

How do you want to customise it?

You can use the same css to change the color and position.

background: red !important;
top: 0;

If you want or need to do more than this then digging into the javascript would be needed.

D

15

This is great! Have you tried adding annotations? I just can’t seem to get it to work…

16

Thanks for sharing this!

However I have an issue when changing layouts. The animation seems not to be working (even on the example you posted earlier in the posts)

Thanks again

17

I wonder if this could be a similar solution to my post ?

I'm effectively trying to display a Sequence Image of 200+ images to create a Beach Ball animation

18

I use this to make a model of an atom rotate and it works perfect.
But now i want to use it to control a time-lapse with a slider.
When moving the slider a clock shows the time and that’s no problem but I can’t figure out how to control the change of the images with the slider.

Does that make sense?

19

I can’t speak too much to the reel code, but Hype v4 has a new Sprite Sheets feature that would help in this regard. You could then setup a slider where the knob is animated for the same duration as the sheet and has an On Drag handler to control the timeline of both. Here’s a basic example:

SpriteSheetSlider.hype.zip (425.9 KB)

2 Likes
20

Thanks Jonathan!
I have missed that possibility! It was a quick and easy setup.
That saved me a lot of time!!

Is there a possibility to export the Sprite sheet as a jpg instead of a png. Now I have to resave the image manually and change the links.

Thanks again!
Rickard