Adobe Community: Message List - Animated GIF control?

Re: Animated GIF control?

forums_noreply@adobe.com — Thu, 14 Nov 2013 23:40:20 GMT

Hello,

I've tried this method and the command isn't working. It is not exporting a symbol. And when I export it to create an Edge file, when opened, it gives an error.

Is there something else I need to do in Fireworks CS6?

I'm using Edge Animate CC.

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 19 Jun 2013 23:10:12 GMT

Wow, big thread! Glad to see the discussion and solutions mentioned.

There's a simpler (and maybe hackier) method of "controlling" animated GIFs from Edge Animate by replacing background-image that I outlined in this thread (also with example file) which may also be of help.

hth,

Joe

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 19 Jun 2013 15:56:18 GMT

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 19 Jun 2013 15:53:16 GMT

thanks, I found how to do it. I was trying to use import in the file menu (which I assumed was the obvious way!)

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 19 Jun 2013 15:41:46 GMT

Hi Ferigoni234567,

Can you explain how you are trying to import your .asym?

In order to do this properly, you need to start your project. Then on the right side under the symbols menu, click the + and then find your .asym. That should work.

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 19 Jun 2013 14:35:45 GMT

Hi, I've done everything described at the beginning of this post ie: created a png sequence with after effects, downloaded the fireworks extension and converted the sequence to an edge animate symbol (.ansym) and now what? I can't open, import or do anything with the symbol. I'm using Edge Animate 2.0

thanks

Re: Animated GIF control?

forums_noreply@adobe.com — Thu, 18 Apr 2013 17:08:35 GMT

Hi joris,

Can you post the offending file and all related files? And can you confirm you have followed all the FW plugin instructions correctly?

Re: Animated GIF control?

forums_noreply@adobe.com — Thu, 18 Apr 2013 12:20:25 GMT

Hey Tim,

I keep getting this error when i try to export my states as a png sequence:

"FWRrequireJS error in context: "/Edge Animate/"

file has no properties

121

Do you know what causes this?

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 12 Dec 2012 17:42:12 GMT

No problem Adam! Your project looks great btw.

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 12 Dec 2012 17:38:06 GMT

Tim your a lifesaver. Thanks for your help!

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 12 Dec 2012 00:08:25 GMT

Hey Adam,

If you nest the BG.mp4 in yout "Lab Reach Calculator/media" folder, you can access it using relative pathing like this:

"<source src='media/BG.mp4' />" +

I tried using relative pathing to get back to the current location of this BG.mp4 inside the ANIMATIONS folder, but I'm getting Edge errors. It may be caused by the spaces you have in the "Lab Reach Calculator" directory. Spaces in directory names are a big no-no.

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 11 Dec 2012 23:14:41 GMT

Hey Tim,

I am in a bit of jam and wanted to see if you could help. I am trying to run my .HTML on another machine other than mine locally.

I can see everything in my composition, however, the video that I am calling for is not appearing. I suspect its because its file path contains my username. I have attached a zip of the project. Let me know if you can have any ideas.

the HTML file path is: Lab/Projects/Lab Reach Calculator/Lab Reach Calculator.html

http://dl.dropbox.com/u/9159616/Lab.zip

I really appreciate your help.

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 04 Dec 2012 17:54:31 GMT

Hey Adam, I do notice in your code you have 2 vars named "background". Perhaps that is confusing Chrome ...

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 04 Dec 2012 15:52:18 GMT

Hey Tim,

Thanks for your help. It seems to still be having trouble in Chrome I will do some more research. If you come across anything let me know.

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 04 Dec 2012 05:23:19 GMT

Hey Adam, the setTimeout suggestion was a hack to get your video to autoplay. Basically setting a very short timer, then calling play on the video after say .1 seconds. If autoplay is now working, disregard that hack.

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 04 Dec 2012 03:04:28 GMT

Hey Tim,

Thanks so much. I gave this a try before and it didnt seem to work. What was the SetTimeout you were getting at before all about?

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 04 Dec 2012 01:17:50 GMT

Hey Adam, try replacing this line:

background.attr('autoplay','true');

with this:

background.attr('autoplay','autoplay');

Re: Animated GIF control?

forums_noreply@adobe.com — Mon, 03 Dec 2012 17:55:44 GMT

Hey Tim,

So I tried to place what you have suggest above into my Stage but I am not sure I am doing it correctly. Here is what the stage looks like:

// Begin copy here

// create a text object called vid;

// the text object, eveything between the quotes is nothing more than a basic snippet from w3schools for html5 video;

var background = $("<video width='1080' height='1920'>" +

"<source src='http://dl.dropbox.com/u/9159616/BG.mp4'/>" +

"This browser is not compatible with HTML 5" +

"</video>");

var background = document.getElementsByTagName("vcontainer")[0];

v.play();

// stage symbol lookup, and append the above vid object to it;

// in other words, get the div called 'vcontainer' and attach the video control to it;

sym.$("vcontainer").append(background);

// additional options for the video object

background.attr('autoplay','autoplay');

background.attr('preload','auto');

background.attr('loop','true');

// make all texts unselectable ----------------------------

function disableSelection(target){

if (typeof target.onselectstart!="undefined") //IE route

target.onselectstart=function(){return false}

else if (typeof target.style.MozUserSelect!="undefined") //Firefox route

target.style.MozUserSelect="none"

else //All other route (ie: Opera)

target.onmousedown=function(){return false}

target.style.cursor = "default"

} // end of disableSelection ------------------------------

disableSelection(document.body)

Thanks for your help!

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 22:06:59 GMT

Regarding filesize, I forgot that since you're building a kiosk, you will be loading the vid locally, so filesize may not be that big of an issue.

It seems that your only remaining issue is to autoplay the video in Chrome. If the autoplay isn't working, you might want to call the below code on a short timer, via setTimeout, rather than button click:

var v = document.getElementsByTagName("video")[0];

v.play();

Are you going to be running Google Chrome in kiosk mode for this project?

http://think2loud.com/868-google-chrome-full-screen-kiosk-mode/

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 22:01:04 GMT

Hey Tim,

I will def try to reduce the file size. The compression is H.264 the file type is Mp4. The only things that I worry about is the quality loss that it will suffer if I reduce the size of is and resize through code. As you can see this requires a great deal of detail and I want the beauty of the graphics to really shine on a big HD screen. Any ideas for compression settings or other formats that could be really good for this?

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 21:58:23 GMT

Yikes. That's probably the root of your problems. I'd shoot to get your video down to 7 megs or under.

What compression settings are you using when you exported the video?

Did you try the trick I mentioned, with exporting the vid at 1/2 size, then resizing through code? This will greatly reduce your file size as well.

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 21:08:59 GMT

Hey Tim,

I think its about 72mb. Here is the link: http://dl.dropbox.com/u/9159616/BG.mp4

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 19:55:22 GMT

Hey Adam, since you're actually loading the video, rather than accessing it locally (which doesn't require any load time), it definitely will take more time to load.

What is the filesize of your video? Can you send me the URL you have it posted at?

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 19:52:10 GMT

Hey Tim,

I gave this a shot but I am still seeing the same issue and now that file is on a server the load takes longer on Safari

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 19:16:37 GMT

Hey Adam, the autoplay issue is probably being caused because you're loading the video locally, rather than from a server. See this link:

http://stackoverflow.com/questions/10813408/html5-video-not-playing

I'd put your video on a server, link to it in the vid embed, and see if that works.

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 19:00:36 GMT

Hey Tim,

When I use your code in chrome it seems to work fine. what do you think the issue is?

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 18:50:08 GMT

Hey Adam, are you still having the Chrome issue when using the W3 test links I sent?

var background = $("<video width='352' height='155'>" +

"<source src='http://www.w3schools.com/html5/movie.mp4' type='video/mp4' />" +

"<source src='http://www.w3schools.com/html5/movie.ogg' type='video/ogg' />" +

"This browser is not compatible with HTML 5" +

"</video>");

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 18:35:21 GMT

Version 23.0.1271.91

Mac Pro

Mac OS X 10.6.8

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 18:11:18 GMT

Can you tell me what version of Chrome you are using, and what type of machine you are on?

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 18:06:06 GMT

So strange. Still doesnt seem to work in chrome but safari is fine using Autoplay Autoplay

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 18:03:18 GMT

Hey Adam, that is strange- it autoplays correctly for me in Safari (5.1.7), Chrome (23.0.1271.64), and Firefox (12.0) using those W3 test URLs.

Try changing the below line:

vid.attr('autoplay','true');

to this:

vid.attr('autoplay','autoplay');

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 17:57:14 GMT

Hey Tim,

Your correct, in Safari it works 100% correctly. It seems that Chrome and Firefox are having the issue. Anyways to fix that?

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 17:48:42 GMT

Hey Adam, your code autoplays for me. In Safari it takes a few seconds for the vid to appear, but in Chrome it loads right away.

The only difference is I'm using a W3schools test vid. For testing, replace your vid embed with this test video embed:

var background = $("<video width='352' height='155'>" +

"<source src='http://www.w3schools.com/html5/movie.mp4' type='video/mp4' />" +

"<source src='http://www.w3schools.com/html5/movie.ogg' type='video/ogg' />" +

"This browser is not compatible with HTML 5" +

"</video>");

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 16:48:16 GMT

Hey Tim,

I tried to do that and here is what the code looks like:

var background = $("<video width='1080' height='1920'>" +

"<source src='/Users/adamperlis/Documents/PROJECTS/Lab/ANIMATIONS/BG.mp4' />" +

"This browser is not compatible with HTML 5" +

"</video>");

// stage symbol lookup, and append the above vid object to it;

// in other words, get the div called 'vcontainer' and attach the video control to it;

sym.$("vcontainer").append(background);

// additional options for the video object

background.attr('autoplay','true');

background.attr('preload','auto');

background.attr('loop','true');

I end up getting a screen that looks like this and only once I click on one of the buttons will the animation begin.

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 01:01:47 GMT

Ya, I removed the "autoplay" attribute in my example, since you wanted a button to initiate play. If you want the vid to autoplay, you can put the autoplay attribute back in.

In my example above, you can add it here:

// stage symbol lookup, and append the above vid object to it;

// in other words, get the div called 'vidHolder' and attach the video control to it;

sym.$("vidHolder").append(vid);

vid.attr('preload','auto');

vid.attr('autoplay','true');

Re: Animated GIF control?

forums_noreply@adobe.com — Wed, 28 Nov 2012 00:16:29 GMT

Hey Tim,

When I do that, the background starts as Black. Its not until I press one of my buttons that the Background activates. Anyway to autoplay without having to do that?

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 23:51:44 GMT

Hey Adam, remove the "controls" attribute from the video tag embed, and it should remove the controls on rollover.

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 23:43:42 GMT

Hey Tim,

Thanks again for your help with this. If I cant use transparency then this probably wont work. One last question...how do I get rid of the video controls that overlay the screen when I move the mouse on top of it? See the image below at the very bottom.

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 23:18:24 GMT

Hey Adam,

I don't think any current html5 video codec supports alpha transparency for video.

To control video playback with a custom button, you can paste the below click function into your compositionReady event (assuming you have a button called "btnPlay":

sym.$("btnPlay").click(function() {

var v = document.getElementsByTagName("video")[0];

v.play();

});

Reference:

https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video

Here's the vid embed code I'm using, based off heathrowe's example I posted earlier. Note that I removed the autoplay attribute, as well as the conrols attribute.

var vid = $("<video width='352' height='155'>" +

"<source src='http://www.w3schools.com/html5/movie.mp4' type='video/mp4' />" +

"<source src='http://www.w3schools.com/html5/movie.ogg' type='video/ogg' />" +

"This browser is not compatible with HTML 5" +

"</video>");

// stage symbol lookup, and append the above vid object to it;

// in other words, get the div called 'vidHolder' and attach the video control to it;

sym.$("vidHolder").append(vid);

vid.attr('preload','auto');

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 22:59:06 GMT

Hey Tim,

Got it working! Thanks so much for your help. If I want a video to play on button click instead of load is there a good may to do that? Can it also carry transparency?

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 22:32:49 GMT

Hey Adam, when I test your file in-browser, I'm getting 2 errors:

Uncaught TypeError: Cannot read property 'tween' of undefined
Uncaught TypeError: Cannot read property 'symbolData' of undefined

These errors are fired even when I remove the video code you added. Are you seeing these errors in your browser's js console?

Regarding the video z-index, if you're having trouble setting it via javascript, you can also create a symbol in Edge at the bottom of the stack, and append your video to that bottom symbol. Heathrowe posted a good example of appending a video object to an existing Edge symbol:

http://forums.adobe.com/message/4157203

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 21:30:56 GMT

Hey Tim,

So I tried the technique you suggested. I cant seem to figure out how to drop is into the background though. Can you have a look at my project and let me know what you think?

See here: https://dl.dropbox.com/u/9159616/web.zip

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 18:58:15 GMT

Thanks Tim I will try it an let you know!

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 18:33:09 GMT

Your load time will be a lot smaller using compressed video, rather than png sequences. This is thanks to video compression, which carries over pixels that don't change from frame to frame. With png sequences, you don't benefit from that optimization.

That being said, 1080x1920 is very large, so the file size will be relatively large. You also might run into processor chugging issues with video that large. One option may be to save/target the video at half size, then scale up the video object 2X with code, (I used to do this when importing video to timeline of Flash all the time, for the same reason- smaller file size, less processor drain).

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 18:26:38 GMT

Hey Tim,

Thanks alot. Sounds like a great option for me. Do you think load times will be really bad?

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 18:22:40 GMT

Hey Adam, sounds like you're building a kiosk-type experience? If so, I would look into video and the <video> tag.

Check out Schrene's post on embedding video at this link:

http://forums.adobe.com/message/4352262

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 18:11:27 GMT

Hey Tim,

Yea this is for a project that requires a 1080 x 1920 screen. Basically a vertically positioned television screen. I am creating a "touch like" interface using the browser.

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 17:42:38 GMT

Hey Adam,

What are your target devices for this project? Desktop, tablet and mobile?

If you're targetting mobile and tablet, png sequences at 1920x1080 are definitely way too big for any mobile and most tablets. This has to do with memory of the device, see this post: http://stackoverflow.com/questions/6725851/image-size-limitations-in-mobile-safari

It might be ok on desktop, but your file size is going to go through the roof.

If your'r targetting desktop only, you might also want to look at using the video tag, and using video instead. Your file size will be much smaller. (Though video doesn't play nice on iOS- I think by default it goes fullscreen).

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 15:06:56 GMT

Hey Havid,

You need to to open Fireworks click File> Open> select all the PNGs > at the bottom of the dialog box chang it to Animation. It should load all the images in the sequence for you. Be sure to change the state length to something around 3. Though I have not found a perfect way to import this all into Edge yet. It seems to lose frames in the animation and it looks choppy.

Adam

Re: Animated GIF control?

forums_noreply@adobe.com — Tue, 27 Nov 2012 15:04:32 GMT

Hey Tim,

The dimensions were 1920 x 1080. I assume that is too big?

Adam