Image sequences

How-to Discussions
1

It is posible to put image sequences?

Thanks!

2

What type of image sequences would you like to do? I can create an example but I’d like to tailor it a bit more to your needs.

Perhaps you’d like one of:

  • an animation like sequence with flipping between images
  • a fading slideshow like sequence
  • a paged sequence that flows over the screen
3

I have a logo animation that I made in After Effects. I export to a png sequence (frame by frame) like a sprite. It is posible to reproduce animation from this kind of animations?

Thanks!

4

Unforunately we don’t really have an elegant way of doing this yet. There are a few things missing that would make it much easier. What you can do now is something like the below, which simply animates through the images once when you press “Go”:

<App Theme="Basic">
    <FileImageSource File="icons_200/bag.png" ux:Name="Seq0" ux:AutoBind="false"/>
    <FileImageSource File="icons_200/boy.png" ux:Name="Seq1" ux:AutoBind="false"/>
    <FileImageSource File="icons_200/clock.png" ux:Name="Seq2" ux:AutoBind="false"/>
    <FileImageSource File="icons_200/gift.png" ux:Name="Seq3" ux:AutoBind="false"/>
    <FileImageSource File="icons_200/girl.png" ux:Name="Seq4" ux:AutoBind="false"/>

    <Panel>
        <Image Alignment="Center" ux:Name="ImageSeq"/>
        <Timeline ux:Name="SeqTime">
            <Set Target="ImageSeq.Source" Value="Seq0" Delay="0" Direction="Both"/>
            <Set Target="ImageSeq.Source" Value="Seq1" Delay="0.3" Direction="Both"/>
            <Set Target="ImageSeq.Source" Value="Seq2" Delay="0.6" Direction="Both"/>
            <Set Target="ImageSeq.Source" Value="Seq3" Delay="0.9" Direction="Both"/>
            <Set Target="ImageSeq.Source" Value="Seq4" Delay="1.2" Direction="Both"/>
        </Timeline>

        <Button Text="Go" Alignment="BottomCenter">
            <Clicked>
                <PlayTo Target="SeqTime" Progress="1"/>
            </Clicked>
        </Button>
    </Panel>
</App>

I’ll put in some feature requests to make this a bit more tenable.

5

Thanks!!!

6

I’m just following up on this as I too now have a similar request. I want to display a slideshow of images fetched from a website and therefore need a dynamic way to do it.

What is the best approach to this?

7

Easiest way to do this is to fetch the images as urls and export an Observable with all the urls, like this for example:

<Panel>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var imageUrls = Observable(...);
		module.exports = {
			imageUrls:imageUrls
		};
	</JavaScript>
	<PageControl>
		<Each Items="{imageUrls}">
			<Image Url="{}" />
		</Each>
	</PageControl>
</Panel>
8

Hi! I see that the answer of edA-qa mort-ora-y (is that a name?) is more than one year old and I wanted to know if that is still the best approach to reproduce a sequence of images for an animation made for example in After Effects.

Thanks!