Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all 9897 articles
Browse latest View live

Use Animate instead of typical wordpress slider

$
0
0

Hi

 

I am building a small site for my company in wordpress. The theme I use has several sliders I can use in the header, but the ideas I have don't translate into the constraints these sliders provide. I am thinking about creating an Edge Animate composition instead, but wanted to ask if anybody has experienced any problems with this.

 

One limitation I can images is that I have to make the composition very long to get several 'slides' but I guess I can just make one or two to start with, and the add more once I get it created in animate.

 

The site is  www.bioflight.dk but nothing much there yet but an empty shell.

 

Thanks in advance

Claus


Easy workaround for price blocks

$
0
0

Hello, i want to make a basic pricing in mine animations, like the attachment...

 

So that i can easy change some prices..normally i make a .png with the price in it...but every week i must change this items.

So i thought i make a symbol, like a block with a number...when the price change i edit the block and change the number.

( like the example...3 blocks with numbers.. and 1 with dots and stripe)

But when i import a symbol and change it...all blocks are changing...;-(

 

So i thought i make 1 image with all the numbers in it...and with clipping tool i can change the number by swipe in the range.

 

This works...but for the use of it in several animations, i thought i make a symbol, but then again, everything change in the same number...

 

Anybody a suggestion what maybe the best to do??

 

It's major for the price in the blocks..but maybe i also want to create it for the "before"price...and i have to make them for 4 different languages..

 

Thanks anyway, marcel

Schermafdruk 2014-09-09 11.30.22.jpg

Display issue in Opera with Retina displays

$
0
0

I've imported an SVG image into my Edge Animate project and used percentages on both X & Y properties, as well as the images width and height. This scales the vector image perfectly across the board, the only exception is with Opera on MacBooks running a Retina display. On these devices the image size increases by 4.

 

I'm running with the most up to date version of Edge, OSX and Opera.

 

I've enclosed a link to a demo:

https://dl.dropboxusercontent.com/u/12645552/edge_demo/test.html

 

This is what the demo looks like in all browsers except Opera:

 

Safari:

 

safari.png

 

And this is how Opera outputs the image:

 

opera.png

Any assistance would be appreciated.

Email form in edge?

$
0
0

Hi, how make email form like this in edge? Pls help me

 

a4.jpg

Targeting a nested symbol's timeline?

$
0
0

Hello, I'm new to Edge, Javascript and HTML5 (coming from Director/Flash/After Effects background) I'm wondering if there's a way to target a nested symbol from a button. I would like to make a simple Pause/Play toggle button that stops a nested symbol is it's playing and plays it if is stopped. In software's I'm familitar with, this can be done with a simple target path and  if/else conditional statement, but I can't find any examples that don't seem much more complicated. If you don't mind, could you please be specific as to where the code goes, as I'm new to this and don't yet have a grasp of the file structure? Thank you very much, I really appreciate your help

Insert a edge animation in Joomla?

$
0
0

Hi,

 

I tried to insert a edge animation in Joomla. The only way I found was with a frame. It is not so nice, but it works.

 

When I tried to insert the .js in the head just with the help of module, it does not work. Has some body a solution?

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8"/>

<title>test-animation</title>

<!--Adobe Edge Runtime-->

    <script type="text/javascript" charset="utf-8" src="animation4_edgePreload.js"></script>

    <style>

        .edgeLoad-EDGE-23323512 { visibility:hidden; }

    </style>

<!--Adobe Edge Runtime End-->



</head>

<body style="margin:0;padding:0;height:100%;">

<div id="Stage" class="EDGE-23323512">

</div>

</body>

Thanks a lot

Philippe

Animate lags on Retina MacBook Pro

$
0
0

I got a new MacBook Pro, and Animate seems to really lag when scrolling through the timeline. I didn't have this issue on my old laptop. Is anyone else having this issue? Is there a way to fix it?

How can I integrate ScrollMagic to control the timeline and get better performance with inertia on iOS?

$
0
0

I'm able to use the Edge Commons parallax script and touch events to allow page scrolling on iOS to control the Edge Animate timeline, but things are not very smooth, and there is no support for the scrolling inertia. I was looking at implementing ScrollMagic, but not sure how to go about doing so.


Some questions about workflow with Code window and Actions panel

$
0
0

If I have the Code window open and want to add a new action to an element (by right clicking and choosing "Open Actions..."), the program doesn't respond. I have to close the Code window in order to open the Actions panel. Then add the Action then close the panel and reopen the Code window. There isn't a way that I can see to have Actions open and Code open at the same time.

 

Actions isn't even considered a "Window" as it cannot be opened from that drop down menu. It also only floats - you can't dock it anywhere.

 

I do know that you can click on the tiny icon to the right of the name of the element in the Properties panel to "Open Actions". But that only works one time. Say I've added a click event to an element using that icon, but then I also want to add a Mouseout event. If I click that icon again the panel is outlined in orange but nothing happens.

 

This is slowing me down having to open and close windows every time I add a new action. Am I missing something? Is there some secret keystoke I'm supposed to use to add an action without having to use the Actions window. I prefer to have the Code panel open so I can easily hope around code for different elements. This division between Action and Code is unintuitive and inefficient.

How to create scroll controlled svg animations in Edge animate cc

$
0
0

Since I am a beginner in Edge animate, I am very confused about svg animations in Edge animate. I want to create an effect like this http://tympanus.net/Development/SVGDrawingAnimation/index.html. In this page the animation is set to autoplay, I will controll my animation using scroller bar in adobe muse cc. Please tell me how to animate svg images like this.

Thanks in advance

Stage edges

$
0
0

When I'm editing a symbol I see a gray-bordered box that seems to correspond to the stage but it has no relation to it at all. Is there any way I can see the outlines of a stage while I'm editing a symbol? This would help a lot in positioning text blocks. See screenshotedgescreenshot.jpg

EA and working with Twitter Bootstrap 3

$
0
0

Has anyone been using this workflow? I'd love to set myself up a bit of a framework.

 

If anyone has some example files they could zip up for me to learn that would be great!

 

Also any tips to look out for!

 

 

best

F

how can I create a pause of 3 sec?

$
0
0

i tried "sym.stop(3000);" in the timeline, but it doesn't play on..... just stops

Animated Rollovers

$
0
0

Is there a way to add animated rollovers using Adobe Presenter? I tried asking this in the Presenter forum, but after 6 days have not received a response from anyone.

 

Essentially, I want to add a "Labeled Graphic" (like in Articulate), where an image will have hotspots that a learner can click on and read different things. Does Adobe Presenter do anything like this?

swap elements on timeline

$
0
0

In After Effects you can hold down the Alt key and drag things from the library over on top of something in the timeline and it swaps out with the dragged item. This is great when you need to duplicate the same movement or placement of something with a new item without setting everything from scratch. Is there a way to do this in Edge?


jquery cookies in edge animate

$
0
0

So in a regular html5 page in IE I can get the following jquery code to work:

 

           $.cookie('mycookieX',cookieXcounter,{expires:7,path:'/'});

           $.cookie('mycookieY',cookieYcounter,{expires:7,path:'/'});

          

           console.log($.cookie('mycookieX'));

 

 

But I can't get the code to work in my edgeActions.js file... I tried changing up the syntax (since when I use jquery in edge before I've had to change things for example:

           $('#blueCar').animate({

            left:carArrayX[carArrayXcounter] + "px",

            top:carArrayY[carArrayYcounter] + "px"

            }); '

 

to

 

           sym.$('blueCar').animate({

           left:myVariableX + "px",

           top:myVariableY + "px"

           });


but I can't figure out the cookies in edge with jquery to get them workign... It's probaby a syntax thing but all I could think of was this:

 

          sym. $.cookie('mycookieX',cookieXcounter,{expires:7,path:'/'});

          sym. $.cookie('mycookieY',cookieYcounter,{expires:7,path:'/'});

          

           console.log($.cookie('mycookieX'));

 

 

--------------------------> and of course this doesn't work..

 

Please provide thoughts...

Cookies in Edge Animate

$
0
0

How do I get this to work in my Edge Animate site? This works in regular sites I've done. I just copy and paste this into the head of a file. However, when I do this to a page created in Edge Animate, it breaks the file to the point that I can't even open it in Edge Animate anymore. It is supposed to open a Welcome graphic and use a cookie so it doesn't always pop up.

 

 

<script type="text/javascript" src="js/jquery.cookie.js"></script>

<script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script>

<script type="text/javascript">

Shadowbox.init({

 

});

 

window.onload = function() {

        if( !$.cookie('the_cookie') ) {

 

    // open a welcome message as soon as the window loads

    Shadowbox.open({

        content:    '<div id="welcome-msg"><a onclick="Shadowbox.close()"><img src="images/welcome.png"></a></div>',

        player:     "html",

        title:      "",

        height:     528,

        width:      527

    });

$.cookie('the_cookie', 'the_value'); }

};

</script>

mouseout action overriding click action

$
0
0

I have a web button that changes color with mouseover and then back to its original color on mouseout. i also want it to have a third color state for click. it's no problem to set that action but i want the button to linger on that color state even after the mouse is moved. instead, however, it goes back to the mouseout state. how can i fix this? it's driving me crazy.  MANY THANKS!!

Edge Animate - dynamic animation

$
0
0

I am creating an animation with 5 photos right now. it runs as an automatic slideshow (without having to click next). Is there a way to be able to have an animation in a folder that a website pulls up and keep adding photos to that folder and it automatically updates the animation?

how to make audio track respond to timeline

$
0
0

I'm starting a project and need the ability to control the speed of an audio file playback using the timeline.

 

There are specific events that happen at certain times in the song, and i need the ability to scrub forward and backward on the timeline, including the audio. is this possible?

 

I have a mechanism to scrub through the timeline of a symbol, but i can't get it to recognize the audio track.

 

I use this code on the stage in a "composition ready"

var symDur = sym.getSymbol("timelinePlay").getDuration(); // Get the timeline length of timelinePlay. We'll reference this later in the code. var mySymbol = sym.getSymbol("timelinePlay"); // Get the symbol timelinePlay. We'll reference this later in the code. var scrubber = sym.$("scrubber"); // Touch this to scrub the timeline of timelinePlay var bar = sym.$("bar"); // Bar the scrubber follows sym.$("mobileHit").hide(); // Added an extra invisible div to increase the hit region for mobile (hard to grab otherwise) var dragme = false; // Set the initial dragme function to false // Detect if mobile device, and if so swap out mouse events for touch events. This is pretty much duplicated code with touch events swapped. if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {     sym.$("mobileHit").show(); // Show the extra invisible div to increase the hit region for mobile (hard to grab otherwise)     $(function () {         scrubber.bind("touchstart", function (e) { // Enable the scrubber on touchstart             e.preventDefault(); // Cancels the default action of the mobile device - used to ensure our touch events are fired             dragme = true;         });         scrubber.bind("touchend", function () { // Disable the scrubber on touchend             e.preventDefault();             dragme = false;         });         scrubber.bind("touchmove", function (e) { // Make the magic happen on touchmove             if (dragme) {                 var touch = e.originalEvent.touches[0];                 var possibleX = touch.pageX;                 var leftX = bar.offset().left;                 var rightX = (leftX + bar.width()) - scrubber.width();                 var scrubWidth = rightX - leftX;   // Confine the scrubber to the width of the bar                 if (possibleX < leftX) {                     possibleX = leftX;                 }                 if (possibleX > rightX) {                     possibleX = rightX;                 }                 scrubber.offset({                     left: possibleX                 });                 var relativeX = possibleX - leftX;                 var stopTimeline = Math.ceil((relativeX / scrubWidth) * symDur); // Make the scrubber scrub the timeline length of timelinePlay                 mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released             }         });     }) } else $(function () {     scrubber.mousedown(function () { // Enable the scrubber on mousedown         dragme = true     })     $(document).mouseup(function () { // Disable the scrubber on mouseup         dragme = false     })     $(document).mousemove(function (e) { // Make the magic happen on mousemove         if (dragme) {             var possibleX = e.pageX;             var leftX = bar.offset().left;             var rightX = (leftX + bar.width()) - scrubber.width();             var scrubWidth = rightX - leftX;             // Confine the scrubber to the width of the bar             if (possibleX < leftX) {                 possibleX = leftX;             }             if (possibleX > rightX) {                 possibleX = rightX;             }             scrubber.offset({                 left: possibleX             });             var relativeX = possibleX - leftX;             var stopTimeline = Math.ceil((relativeX / scrubWidth) * symDur); // Make the scrubber scrub the timeline length of timelinePlay             mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released         }     }) })

 

and have an group called 'scrubber' that contains a div called 'dot' and a box called 'mobileHit.' There's a horizontal bar that's not included in the 'scrubber' div (representation of a timeline) called 'bar' on top of which the 'scrubber' sits.

 

the whole contraption controls a symbol called "timelinePlay"

 

 

 

If there's any way to get the audio included in the timeline and give me the ability to scrub through the timeline /and/ audio, (imagine manually fast forwarding and rewinding a VHS tape) that would be wonderful!!!

Viewing all 9897 articles
Browse latest View live