Create slideshows in edge animate

good afternoon.
i am building a website for a web design company i work for. we want to be able to showcase the websites we have built for others by having an animation on our sites website design page that rotates through screenshots of all the sites we have built and when you click on the actively displayed screenshot it takes you to the actual website seen in that screenshot.
so far the only way i know of doing this is with flash which is what we are using now.
however this means we are actively discriminating against ios users as apple don't provide flash player on ios.
so we are looking foralternatives and came across edge animate.
however i have ran into 2 problems with edge animate that i simply cannot resolve.
1. while edge animate is great at creating more complicated animations it doesnt appear to be capable of doing simple slideshows by which i mean have an image occupy the entire stage for x amount of time then switch to a different image for x amount of time. instead it treats every image as a seperate layer meaning whichever image is at the front is present the entire length of the animation which is useless for the type of project i am trying to create.
2. edge animate generates a stand alone html file for every project along with all the imae assets and javascript files which while this helps with compatibility in ensuring more browsers can watch the animation it doesnt give me any way to insert the animation into my website design page.
any ideas where i can find tutorials that will show me how to overcome these limitations?

Hey Preran,
With regards to the help you posted on the forum.
Any advice on how to incoporate the slideshow to deal with different sized images. I don't want the small ones stretched to fit the original large sized photo but rather scaled up to fit as close fit as possible. I don't mind black space in between.
Thanks,
Chaminda.
I started a thread because I missed this post the first time I was going around.
Edge Animate Slideshow (Unlimited pictures Help)

Similar Messages

Have you used Drawscript to create code for Edge Animate?

Drawscript is an Illustrator extension, http://drawscri.pt/
Code can be generated into many formats: Obj-C iOS, JavaScript Canvas, CreateJS Tiny, ActionScript 3, Processing, JSON, Bezier Points Array, Archor Points Array, C++ OpenFrameworks Simple and C++OpenFrameworks Shape.
Made note of this program some time ago and finally getting back to it.
Looking for anyone using Drawscript to create shapes with code to add to Edge Animate.
Do you have a working example of Drawscript to Edge Animate or tutorial?
Thanks for any info.
Cindy J-H

I have replied to your previous thread.
Thanks,
Sanjit

How to make responsive Edge Animate with elements aligned in the middle?

Hi,
I wanted to create a responsive hero slideshow using Edge Animate. It will have a 100% width and max-height of 500px. However, I wanted that the other elements will stay in the middle of the slideshow and not be anchors to either corners - as what is selectable in Animate.
My aim to to achieve something similar to Slider Revolution Responsive jQuery Plugin » Slider Revolution Responsive WordPress Plugin Slider Revolution.
Anyone have any idea how to go about this? Any help would be appreciated. Thank you.

Hi deltabrux,
Can you share your Edge project files? Are your using EA 2014.1?
Regards
Vinod
Edge Animate Team

When Editing A Web Page In Edge Animate, How Can I Embed Edge Elements Into Pre-Existing DIV's?

I created a basic layout with some boxes in Dreamweaver. I set the Overflow property on them to "Hidden". I then opened the page in Edge Animate. However I noticed that when I import stuff, such as an image, then try to drag it into one of the existing DIV's, it won't work. It stays on top of all the other DIV's. However if I create a box or some other sort of DIV directly in Edge Animate, I can drag the Image element into that, so it's enclosed within that DIV.
I guess the workaround appears to be to embed the image into the DIV in Dreamweaver first, then open the page in Edge. However it would be nice to not have to keep jumping back and forth like that. Is there a way to do this in Edge Animate?
Also, I noticed when I select one of the DIVs I made in Dreamweaver, many of the Properties such as Corners, Shadow, and Filters are missing. Can these only be used on DIV's created directly in Edge Animate?

Hi, neohtom-
What you're seeing is the difference between what we define as a static div (one that is defined outside of Animate) and a managed div (one that is defined inside of Animate). Due to the fact that we expect other products to change a static div, we limit the amount of changes you can make to a static div. Because we "manage" a div that is created inside of Animate, we allow a lot more changes to be made to a div. Hope that answers your question! I'd suggest creating divs within Animate if you want to eventually change them to have corners, etc.
Cheers,
-Elaine

'Jump to' a particular slide in adobe captivate using edge animate.

I would like to 'jump to' a particular slide in adobe captivate using interactions created in an edge animate file. Is anyone able to help me with the javascript needed to do this?

Hi Leith,
From what I know, such functionality is currently not available.
Found something related, but this does not answer your question, I think
Using Edge Animate with Captivate
Thanks,
Preran

Edge Animate causing Server Time Out Error and other problems

Site is not verifying due to Server Time Out error. Also menu which was created with Adobe Edge Animate does not show up as navigation in a site map or when bots read the site. Site won't verify or index in google.
Suggestions on how to fix this would be helpful and appreciated.
This is the website address. please type in Without any spaces:
louis place cafe DOT com DOT au

Site is not verifying due to Server Time Out error. Also menu which was created with Adobe Edge Animate does not show up as navigation in a site map or when bots read the site. Site won't verify or index in google.
Suggestions on how to fix this would be helpful and appreciated.
This is the website address. please type in Without any spaces:
louis place cafe DOT com DOT au

Constant crashes with Edge Animate and Yosemite

I'm using Edge Animate running on a macbook pro and it is crashing every few minutes (like many others are reporting).
The program is up-to-date. I have uninstalled and reinstalled it.
Sometimes after a minute or two of working, the display features disappear. Old bounding boxes remain but, with some careful cursor action, I can still manipulate the image or symbol. . . until the entire program freezes. Other times things just stop working (e.g., motion paths). The only solution is to force quit the program -- the button on the crash notice rarely works.
Each time it crashes, it seems to create another Adobe Edge Animate CC 2014.1 Helper in the Activity Monitor (don't know what that means). I've tried deleting them but it doesn't help.
In the console, I get
2/18/15 9:16:30.612 AM Adobe Edge Animate CC 2014.1[4172]: *** Assertion failure in -[NSEvent subtype], /SourceCache/AppKit/AppKit-1343.16/AppKit.subproj/NSEvent.m:2427
There are 43 lines (!!!) that are identical to the one above.
This is obviously a known problem and needs to be acknowledged and fixed!

Hi L Nordstrom,
- If you have Dropbox installed, uninstall the software and retry.
- If you are accessing files from a remote network, copy them to your local computer, and retry.
Let us know if you still face issues.
Thanks,
Preran

Adobe Edge Animate CC image loading bug

hello,
The animation which i created in Adobe Edge Animate which is published for web, and when i load the main file in browser noticed that the images which i used inside the Edge Animate for animations are loading two times one with "edge.3.0.0.min.js:240" and "jquery-2.0.3.min.js:5", i hope this is a bug. how can i a avoided this multiple loading of same image files.

Hi, canpark-
We do not have a Korean localized version of Edge Animate, sorry!
-Elaine

Updating Edge Animate asset crashes Muse

Have inserted an Adobe Edge Animate file in Muse. All works fine until I make updates to the Edge Animate original.
When I click to update the resource in the Asset panel. Muse crashes. It works once, never twice.
Muse doesn't display the asset correctly. If I have a background colour in the Animate doc it doesn't show in Muse, not in preview mode either, but this is not a big problem, it shows up if I preview in a browser ...

This was a test I performed in a few hours. So I used the same version of Edge and Muse when trying it out.
Muse version: 7.0.314
Edge Animate version: 2.0.1
In my Edge animate document I only had two elements.
I created a new document, didn't change anything in default setup.
I added a rectangle, no fill nothing.
I added a text field, wrote the word "Text"
Saved as a .oam file
Inserted into muse
back to edge, added a background color to the rectangle
updated asset in muse, muse crashed
imported again to muse, preview did not show the red background, but preview in browser did
back to edge, duplicated the text object three times
updated asset in muse, muse crashed...
created a new edge animate file from scratch, repeated all the above steps
muse crashed every time I updated the asset.
inse

I have created a 468x60 animated banner in Edge Animate. How do I save the animated image to my desktop? (not in html code)

I have created a 468x60 animated banner in Edge Animate. How do I save the animated image to my desktop? (not in html code)

Hi,
This feature is not available in Adobe Edge animate. You can not export as image from Edge animate.
Publish options available in edge describe here
Edge Animate Help | Publish your content
Regards,
Devendra

How do i create an alpha channel to place into edge animate?

HowHow do i create an alpha channel compatible with edge animate?

I don't use Edge, but since it is a web tool it stands to reason it would use standard web techniques, meaning it would rely on built-in transparency functions of formats like PNG and GIF, which you can easily produce by using Save for Web after creating normal transparency on a layer in Photoshop. No extra Alpha channel or otehr extra steps required. Perhaps Edge even has some stuff that does the conversion on the fly by allowing you to open a native PSD like in Dreamweaver, but beyond that I don't see what else it could/ would do - all the features it can provide are limited by standard specifications for HTML, CSS and JavaScript. There is simply no way to do something sensible with a TIFF in a browser, if you get my meaning .
Mylenium

Can we create a single exe file in edge animate

Hi everyone,
I am working on an animation in Adobe Edge Animate. The code written in the file is working fine on the browser. The problem that I am facing is to create an exe file (a single file) in which i can see my animation and controls created. Something like flash's projector file which comes in exe fomat. My client is looking for the output in which he wants the animation in Html5 and there could be a single file to run. There shouldn't be images folder or j-query files, just a single file. Please tell me any tool or way, so that i can get the same output in exe format.
Please help me out in this.
Thanks & Regards,
Vikas Sharma

I posted this in another thread in reply to someone else's search. But, have you had a look at this?:
http://www.tidesdk.org/

Trying to create HTML5 Video Playlist in Edge Animate - I can't get it to work. Please help!?!?

Hi All,
I am creating an interactive site through Edge Animate and am in the process of trying to create a HTML 5 Video Playlist to function within Edge Animate.
Current Process - Example:
I have 3 videos that need to be played on a certain page.
I created a symbol and dragged the videos to the stage and hidden them within that symbol's timeline.
I then use thumbnail images in a side playlist to either .remove(); .hide(); a video and .show(); the next.
However when I do a hide / show option, the video continue to plays in the background if I don't also create an if/else statement to pause it.
My concern with pausing it is that it will continue to load and dramatically slow down the load time of the site.
References:
I found this which looks very helpful but don't know how to add this to edge composition.
http://demosthenes.info/blog/909/Create-An-Automatic-HTML5-Video-Playlist
Please help or put me in the right direction to create a playlist would be hugely... AMAZINGLY.. helpful.
Thanks,
Jason

Hi Joe,
Thank you so much for your help on this one. It is hugely appreciated!!
I have been working frantically to implement your solution to get this working. I used the 'change src' method.
I have added all my code below in case anyone wants the solution in the future.
Could you please help below as I am now totally stuck with the <track> and 'event listener issues' !!
Issue #1:
I am having major problems with loading the 'closed captions' track element.
Everything I click for the video to change source / to the next video, the closed caption track adds to the video and doesn't 'unload' the previous one. You then end up with multiple different subtitle tracks on the video screen
- The closed captions / subtitles are not showing up in Google Chrome either?
Issue #2:
I can't get the event listener in edge animate to work for 'playing' and 'ended'. Can you please help and point me in the correct direction??
Screenshot (showing what happens after the 3rd video is loaded)
This is the Code I am currently using in the "Creation Complete" of this Symbol.
SET UP OF VIDEO PLAYER AND FIRST VIDEO
var vid = sym.$("video_Chapter5");
vid.html('<video id="ch5video" width="100%" height="auto" margin= "0 auto" \
position ="relative" poster="video/video1_poster.jpg" controls="controls" </video> \
<source id ="videomp4src" src="video/Video_mp4_1.mp4" type="video/mp4" </source> \
<source id ="videoogvsrc" src="video/Video_ogv_1.ogg" type="video/ogv" </source> \
<source id ="videowebmsrc" src="video/Video_webm_1.ogg" type="video/webm" </source> \
<track id ="trackvtt" kind="subtitles" src="video/Video_1_Script.vtt" srclang="en" label="English" hidden </track>');
VARIABLE IDS
$(document).ready(function() {
var videoID = 'ch5video';
var sourceID1 = 'videomp4src';
var sourceID2 = 'videoogvsrc';
var sourceID3 = 'videowebmsrc';
var trackID = 'trackvtt';
var vid1mp4 = 'video/Video_mp4_1.mp4';
var vid2mp4 = 'video/Video_mp4_2.mp4';
var vid3mp4 = 'video/Video_mp4_3.mp4';
var vid4mp4 = 'video/Video_mp4_4.mp4';
var vid1ogv = 'video/Video_ogv_1.ogv';
var vid2ogv = 'video/Video_ogv_2.ogv';
var vid3ogv = 'video/Video_ogv_3.ogv';
var vid4ogv = 'video/Video_ogv_4.ogv';
var vid1webm = 'video/Video_webm_1.webm';
var vid2webm = 'video/Video_webm_2.webm';
var vid3webm = 'video/Video_webm_3.webm';
var vid4webm = 'video/Video_webm_4.webm';
var script1vtt = 'video/Video_1_Script.vtt';
var script2vtt = 'video/Video_2_Script.vtt';
var script3srt = 'video/Video_3_Script.vtt';
var script4vtt = 'video/Video_4_Script.vtt';
var newposter1 = 'video/video1_poster.jpg';
var newposter2 = 'video/video2_poster.jpg';
var newposter3 = 'video/video3_poster.jpg';
var newposter4 = 'video/video4_poster.jpg';
VIDEO PLAYLIST THUMBNAIL BUTTONS - TO CHANGE VIDEO IN PLAYER
sym.$('btn1').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid1mp4);
sym.$('#'+sourceID2).attr('src', vid1ogv);
sym.$('#'+sourceID3).attr('src', vid1webm);
sym.$('#'+trackID).attr('src', script1vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter1);
sym.$('#'+videoID).get(0).play();
sym.$('btn2').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid2mp4);
sym.$('#'+sourceID2).attr('src', vid2ogv);
sym.$('#'+sourceID3).attr('src', vid2webm);
sym.$('#'+trackID).attr('src', script2vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+trackID).load();
sym.$('#'+videoID).attr('poster', newposter2);
sym.$('#'+videoID).get(0).play();
sym.$('btn3').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid3mp4);
sym.$('#'+sourceID2).attr('src', vid3ogv);
sym.$('#'+sourceID3).attr('src', vid3webm);
sym.$('#'+trackID).attr('src', script3srt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter3);
sym.$('#'+videoID).get(0).play();
sym.$('btn4').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid4mp4);
sym.$('#'+sourceID2).attr('src', vid4ogv);
sym.$('#'+sourceID3).attr('src', vid4webm);
sym.$('#'+trackID).attr('src', script4vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter4);
sym.$('#'+videoID).get(0).play();
EVENT LISTENER FOR PLAYING - TO CREAT BACKGROUND /LIGHT BOX SCREEN
sym.$('#'+videoID).get(0).addEventListener('playing', function () {
sym.getSymbol("backscreen_Ch5").$("backscreen").show();
sym.getSymbol("backscreen_Ch5").play("play");
EVENT LISTENER FOR ENDED - TO PLAY NEXT VIDEO IN SERIES
sym.$('#'+videoID).get(0).addEventListener('ended', function () {
//code to play next video

Edge Animate CC 2014 animation of elements of a html file created in Dreamweaver

Does anyone know why with Edge Animate CC 2014 it's not possible anymore to animate elements of a html file created in Dreamweaver? With Edge Animate CC 3.0.0. this was possible.

Hello!
I now have a project that seems to be corrupted. A had been working on it all morning, with a few bugs here and there. Now I can no longer open the file, receiving this error: "Edge Animate: Exception An error occurred. Please your work and restart Edge Animate."
I will try to attach sample files.
- J Sean

Create an image scroller with swipe&drag in Edge Animate

Hi folks!
I'm trying to create a image scroller like this one http://www.awwwards.com/demo/touchSwipe-gallery-demo.html.
For the Swipe, I use the wonderful JQuery Plugin TouchSwipe http://labs.rampinteractive.co.uk/touchSwipe/demos/, but for the image sliding I would use the Adobe Edge Animate Timeline.
I know that I can use the Swipe events in Edge Animate to make start or reverse the timeline with pictures, but I would also make working an intermediate "dragging".
My problem, in fact, is: how can I make that - if I've only begun to swipe and I move the finger to left or right without releasing it - my timeline "drag" (or scrubs) frame by frame - like in the example above - until I release the finger?
Many thanks in advance!
Davide

Hi Elaine!
First, thanks for your prompt answer!
I read the link you gave me: in fact, I was aware - also thanks to Old Tim's posts - about how to create a "scrubber" in Edge Animate, starting from formulas like:
Translation = (positionOfScrubber/WidthOfScrubbing)*timeline;
My problem now is - I fear - more subtle: I can swipe left-right a set of pictures, I can "scrub" a timeline (using for example JqueryUI for the dragging), but I don't know how to put together the swiping and the dragging.
I would that - like in the example from my first post - if, e.g., I completed the swipe left, my timeline would play the animation that shows the pic moving to the left but, if I didn't complete the swiping and I begun dragging to the left, the animation would move with my dragging-finger (the "scrubbing")...
I know is very subtle, but it's how the gallery scrollers works on web and app in mobile devices...
Many thanks for your attention!
Davide

Create slideshows in edge animate

Similar Messages

Maybe you are looking for