Adobe Community : All Content - All Communities

Edge Animate, create "Next" and "Back" buttons that play from current position

forums_noreply@adobe.com — Sun, 01 Dec 2013 11:52:05 GMT

Hey Everyone,

I'm trying to do something fairly simple but I could use some help in getting it to work and couldn't find any examples out there of this... here's all i'm trying to do.

I have animations along a timeline with labels and stop points for 1, 2, 3, 4, 5. I want to create simple "Back" and "Next" buttons that will get your current label/position and play forwards or backwards to the next or previous label/position. My attempt to show what It looks like logically in text:

Back 1 - 2 - 3 - 4 - 5 Next

And that's it, I know someone must have already done this or knows how, any help would be greatly appreciated

Cheers,

Jeff

Add TWO Edge Animations/Stages to ONE web page (without using oam)

forums_noreply@adobe.com — Tue, 21 Jan 2014 02:20:47 GMT

Hi All,

This is a bit of a follow on question for those who are adding scalable height/width edge compositions to web pages using the awesome piece of code created by Sarah (http://sarahjustine.com/) and other forum contributors... (attached code below).

My question is: How do I add a second Edge Animate composition to the same page using this method? So it's using "Stage" already... i'm guessing it's a matter of changing it to "Stage_02" etc in the following code? I've tried changing the relevant code but so far I have been unsuccessful in getting it to recognise a second stage.

Any help would be appreciated, many thanks in advance for your time.

Jeff

Index.html

<style>

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

</style>

</div>

</div>

Adobe Edge Stage Script

var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage

sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage

"transform-origin":"0 0",

"-ms-transform-origin":"0 0",

"-webkit-transform-origin":"0 0",

"-moz-transform-origin":"0 0",

"-o-transform-origin":"0 0"

});

function scaleStage() {

var stage = sym.$('Stage'); // Set a reusable variable to reference the stage

var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage

var parentWidth = stage.parent().width(); // Get the parent of the stage width

var stageWidth = stage.width(); // Get the stage width

var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

// Rescale the stage!

stage.css('transform', 'scale(' + rescale + ')');

stage.css( '-o-transform', 'scale(' + rescale + ')');

stage.css('-ms-transform', 'scale(' + rescale + ')');

stage.css('-webkit-transform', 'scale(' + rescale + ')');

stage.css('-moz-transform', 'scale(' + rescale + ')');

stage.css('-o-transform', 'scale(' + rescale + ')');

parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

}

// Make it happen when the browser resizes

$(window).on('resize', function(){

scaleStage();

});

// Make it happen when the page first loads

$(document).ready(function(){

scaleStage();

});

Create an Edge Animation that fluidly scales width/height inside a website

forums_noreply@adobe.com — Mon, 18 Nov 2013 06:16:11 GMT

Hi Everyone,

I might be missing something really simple here, and quite frankly i'd happily have egg on my face if someone can point me to the solution.

I am inserting an adobe Edge Composition into a Fluid HTML5 website with basic content (using Dreamweaver), simple right....?

Everything appears to be working great until you scale down the website.... as the page scales down the edge composition scales also, which is great! Except that the edge composition leaves empty space below it from its original height!? So my question is, how to get the height to not leave white space in it's height when it scales down? Here's what i've tried so far...

Checked the width/height of the edge animate composition is set to % including the stage element and all it's components
Tried setting the height to "auto" for the object oam inside dreamweaver - This doesn't seem to be very "auto" at all and just gives a default height that isn't enough to display it all anyway.
Changed min/max settings
Tried the javascript scaling method from http://sarahjustine.com/2013/04/08/create-scale-to-fit-projects-with-adobe-edge-animate/ Works great but also leaves white space under the file when placed into a website with content and scaled
Adjusting the Height for the edge object in DW using CSS, this gets close, but this is only responsive at certain resolutions, i'm after an entirely fluid solution.

Surely i'm just missing something simple? Does anyone have an example of this working correctly inside a web page with basic content for example? As most of the edge examples don't seem to go beyond testing just the edge animate project by itself in a browser, in which case this would appear to work perfectly too. I need them being placed into a website, e.g image sliders made with edge, that scale within a basic fluid website.

Perhaps this should be a Dreamweaver Forum post, but I have to start somewhere, thanks in advance for your time.

Thanks,

Jeff

Insert .oam files that scale without leaving white space below them inside a web page

forums_noreply@adobe.com — Mon, 03 Feb 2014 01:49:44 GMT

Hi All,

Does anyone have a way to get .oam files to scale inside a web page without leaving all the white space below them when they are scaled in a fluid web page design?

I've done this in other web pages without using .oam files and inserting the whole html file and stage, but I need this to work with multiple areas inside a web page for which .oam files seem to be the only solution.

Thanks for your time, any solutions or ideas would be greatly appreciated.

Thanks,

Jeff

Adding Audio to previous Edge file in new Edge v3. Audio files don't appear?

forums_noreply@adobe.com — Wed, 22 Jan 2014 01:26:51 GMT

Hi All,

Pretty exciting stuff that there is a new Edge Version out with Audio! So I gave it a go on a project I have made previously and had been using Buzz Audio, which I had working fine, but this new version looks like a much cleaner way to go (snaps to everyone on the Edge team).

However I have immediately encountered a problem when adding the Audio files to the library using the "+" symbol. I select the files to add which are .mp3 format and select Open. There is no error message, the Audio library flashes as though a new audio file has been added but then is back to it's original state showing no audio files are available (yes i've checked the Audio drop down arrow sever times ) ?

I then tried this using a new blank document and the audio files added fine as expected.

Can't seem to find why Audio wouldn't add to my previous project file which is about 1MB in total size and created with the previous version of Edge CC.

Thanks in advance for any ideas,

Cheers,

Jeff

Optimize Edge Animate Sliders/Pages/Symbols for larger animated projects

forums_noreply@adobe.com — Sun, 22 Dec 2013 22:46:48 GMT

Hey All,

I'm looking for a way to optimize a several page slider created with Edge animate CC, it currently runs fine on the more current devices such as iphone 4s etc but anything older really chugs, the scenario (which i'm sure is a very common one) is:

I have One Edge Animate file where I have created a several page slider where each page is a symbol that contains sub symbols which slide onto the page and the old page/symbol/contents slides off the page, there is a decent amount of animation looped on each page. The total size of the slider code, images etc is about 800k total. There is no other content on the page, just this slider.

The problem appears to be that each page symbol it's sub symbol and it's contents are active and continue to animate even when they are no longer on the stage so it would seem that it is actually processing all 7 pages at once, instead of just the current active page/symbol and it's contents.

So my question is: Is there a simple way to optimize edge so that it only gets and processes One current Symbol/Page and it's sub symbols/contents at a time? Or am I somehow mistaken about the processing usage of the off stage/page contents?

Thanks for your time, it's much appreciated! And a Merry Christmas to all who are reading here at this time of the year!

Cheers,

Jeff

Dreamweaver CC - Rollover image to text transition for Fluid page css/html5

forums_noreply@adobe.com — Fri, 13 Sep 2013 04:36:10 GMT

Hi All,

I am using Dreamweaver CC, Windows 7, PC.

Goal: To create a selectable text and colour overlay (not a second image with text in the image) that appears over the top of an image on rollover of the container that the image is located in, all inside a fluid page. Also I would like to avoid jquery and javascript if it's possible.

Please see the attached HTML5, CSS and 300x300jpg example of this page which should show what i'm trying to do, as you can see currently the text sits below the image on mouse hover and should be fitting nicely inside the image box. I will replicate this through all the images once I have it working correctly also. Please note the page fluid scaling at different sizes as I need the rollover to work at whatever size the window or device is.

Thank you in advance for any answers, ideas, work arounds etc you may have or if i've missed this specific scenario covered elsewhere?

Here is the HTML (apologies for my messy code):

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="../boilerplate.css" rel="stylesheet" type="text/css">
<link href="../Website_Testing/style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="../respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
  <article id="article" class="fluid">
    <div id="Examples" class="fluid">

      <div id="example1" class="fluid">
          <img src="images/300x300.jpg" alt=""/>
          <span class="text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </span>
      </div>    
      <div id="example2" class="fluid"><img src="images/300x300.jpg" alt=""/></div>
      <div id="example3" class="fluid"><img src="images/300x300.jpg" alt=""/></div>
      <div id="example4" class="fluid"><img src="images/300x300.jpg" alt=""/></div>

    </div>
  </article>
</div>
</body>
</html>

Here is the CSS (apologies for my messy code):

@charset "utf-8";

img, object, embed, video {
    max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

.fluid {
    display: block;
    text-align: center;
    clear: none;
    float: none;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    clear: none;
    float: none;
}

#article {
    min-height: 160px;
    margin-left: 0;
    padding-left: 5%;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 5%;
    background-color: rgba(255,254,191,1.00);
}

#Examples {
    text-align: center;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
#Examples #example1 {
    padding-top: 5%;
    padding-bottom: 5%;
    display: block;
    width: auto;
}
#Examples #example2    {
    padding-top: 5%;
    padding-bottom: 5%;
    display: block;
    width: auto;
}
#Examples #example3 {
    padding-top: 5%;
    padding-bottom: 5%;
    display: block;
    width: auto;
}
#Examples #example4 {
    padding-top: 5%;
    padding-bottom: 5%;
    display: block;
    width: auto;
}

.text {
    position: relative; 
    display: none;
    background: #999;
    background: rgba(0,0,0,0.3);
    text-align: center;
    top: 0px;
}

#example1:hover .text {
    display: block;
    background-color: rgba(12,109,242,1);
}

#example1 {
    -webkit-transition: all 0.35s ease-in-out 0s;
    -o-transition: all 0.35s ease-in-out 0s;
    transition: all 0.35s ease-in-out 0s;
}

#example1:hover {
    background-color: rgba(12,242,109,1.00);
}

#example2 {
    -webkit-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
#example2:hover {
    background-color: rgba(12,242,109,1.00);
}


#example3 {
    -webkit-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
#example3:hover {
    background-color: rgba(12,242,109,1.00);
}

#example4 {
    -webkit-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
#example4:hover {
    background-color: rgba(12,242,109,1.00);
}




/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
    width: 100%;
    margin-left: auto;
    min-height: 100%;
}


#Examples {
    text-align: center;
    min-height: 640px;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
#Examples #example1 {
    float: left;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    width: 46%;

}
#Examples #example2 {
    float: left;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    width: 46%;
}
#Examples #example3 {
    float: left;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    width: 46%;
}
#Examples #example4 {
    float: left;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    width: 46%;
}


}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
}

#article {
    margin-left: 0;
}
#Examples {
    text-align: center;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}

}

@media only screen and (min-width:1024px){

#article #Examples #example1 {
    width: 23%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 16px;
    padding-bottom: 16px;
}
#article #Examples #example2 {
    width: 23%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 16px;
    padding-bottom: 16px;
}
#article #Examples #example3 {
    width: 23%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 16px;
    padding-bottom: 16px;
}
#article #Examples #example4 {
    width: 23%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 16px;
    padding-bottom: 16px;
}
#Examples {
    min-height: 340px;
}


}

And here is a 300x300 grey image i'm using as an example holder:

Thanks for taking the time all,

Jeff