A Test-Project and a few suggestions

User Creation Hub Saola Animate
1

Hello everyone,

the best way to learn a program, is to create a project with it.

Here we go.
http://www.experimente.bplaced.net/saola/sprite-sheet/Sprite-Sheet.html
(In Firefox and IE11 you can see the rims first without the car.
In Chrome it is okay.
Maybe an Buffer problem?)

When working on this project I noticed some things that Saola Animate still needed.

  • A slider for Sprite Sheets and Image-Sequences, so you can scrub throug the frames.
  • The ability to format divs and shapes with CSS.
  • You can not copy events, or exchange the object (exchanging works only for images).
  • Copying attributes (Color etc.)
  • Timeline: Change Display Order with Mouse Drag.
  • Timeline: Frame for and back with Arrow Keys.
  • Timeline: Show only the objects of the active timeline, otherwise it becomes very confusing.
  • Event Handlers: Show/hide with fade.
  • Loading a Sprite Sheet time-delayed. (In more complex scenes, the loading time would otherwise too high)

P.S
Credits for the Car:

Credits for the Rims:

Best regards
Arnie

3 Likes
2

Great work, great application.

3

Thank you Arnie for your useful suggestions and a nice sample. Saola Animate is just in its early releases, feedbacks from users like you will help us to make it more powerful and convenient.

Your sample contains very large images (5760 x 2118), so it takes quite a long time to load on slow network connections. By default, Saola Animate limits the loading time for each image to 10s. Maybe the car is not loaded completely in 10s in FF and IE so you see the rims first without the car. Please try adding the following handler to the Create event of your document to remove default loading time limit. I guess this issue will not occur anymore:

function onDocumentCreated(doc, e) {
	doc.preloader.options.maxItemTime = 0;
}

About your suggestions, some of them can be done in the current version, though it may be not convenient:

  • The ability to format divs and shapes with CSS: You can use JavaScript to set CSS for divs and shapes
  • Event Handlers: Show/hide with fade: You can create timelines which animate Display and Opacity, then use Start Timeline action.

Regards.

4

Thank you very much Julio.

5

Hi toanls,

thank you for your comment.

Your script works perfectly.
Little jerkys in IE11, but it’s the IE.

I know that I can address CSS via Javascript, but I need much longer than with pure CSS.
I thought of an optional fade for show / hide without the timeline. That would be a nice little Timesaver.

Best regards
Arnie