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

Similar Messages

Vertical Image Scroller with ASP and Database

A vertical image scroller where photos (thumbnails) can be
added or deleted with an app using asp and a database.
The scroller would be able to hold unlimited thumbnails. The
thumbnails
would also be buttons used to go to another frame or html
page.
The thumbnails start to scroll down when mouse rollovers top
half of
vertical thumbnail bar and scrolls up when mouse rollovers
bottom half of
bar. Slows and stops in the center of the bar.
Is this possible?

Any idea on how to tackle this?
I have created a image scroller and I know how to create a
database and an
application to add records using asp.
But need help on creating a scroller that holds Unlimited
thumbnails in
Flash and adds the images to the thumbnail bar.
Thanks
"SMB" <[email protected]> wrote in message
news:ehc8kg$cud$[email protected]..
>
> "Joe T" <[email protected]> wrote in message
> news:ehankr$g5d$[email protected]..
>> Looking to create a vertical image scroller where
photos (thumbnails) can
>> be added or deleted with an app using asp and a
database.
>> The scroller would be able to hold unlimited
thumbnails. The thumbnails
>> would also be buttons used to go to another frame or
html page.
>> The thumbnails start to scroll down when mouse
rollovers top half of
>> vertical thumbnail bar and scrolls up when mouse
rollovers bottom half of
>> bar. Slows and stops in the center of the bar.
>>
>> Is this possible?
>>
>>
>
> Yes, definatly possible.
>

How can i do horizantal parallax with jInvertScroll on adobe edge animate

Hello there, i am not familiar with codes so please anyone can explain me to how to do horizantal parallax scrolling with JInvertScroll on adobe edge. I can show some examples of horizantal scrolling. Here it is:
http://www.cabletv.com/the-walking-dead
http://www.pleasecomejoin.us/#wedding

Thanks for the files. Unfortunately I can't get it to preview correctly. This is what I am seeing.

How can I create an image gallery with "next" buttons?

So I am almost done with my portfolio site (YES!)..now I just need the actual content (the images). My site is written in AS3.
I've watched many tutorials on how to create an image gallery (auto scrolling ones, scrolling ones that require mouse hover, etc etc), but those aren't what I am looking for.
I want a gallery that looks exactly like this one here:
http://jalbum.net/res/help/integrating-tutorial.html
I have a lot of work to display in my porfolio so there must be arrows at the end of the thumbnails so I can add more stuff. So I am just stumped on how to make the image gallery work with the ability to scroll for more photos with the click of the arrows.
Any ideas? Thank you.

Watching tutorials and learning from them are two different things. If you have learned from them you should be able to use what you have learned to devise a gallery such as the one you link to. If you have learned from them and cannot use what you learned, then you probably need to find/learn more.
If you study the design you linked you should be able to reason out what elements you need to devise... it is not overly complicated.
For the large picture you could have a Loader into which you load whatever image is selected from the thumnails. To get a brief transition you could just set the alpha of the Loader to 0 when an image change is occuring and gradually fade it in after the image has loaded.
The greatest challenge you are likely to face is in getting the thumbnails to advance back and forth depending on which is selected. All of the thumbs would be placed in a container (movieclip or sprite) and that would be masked so that only a portion of them is visible.
All thumbs that are not selected have their alpha property set to some value less than 1. Selecting one calls for the file it associates with to be loaded into the Loader. If the choice happens to lie off screen, then you need to move the movieclip that contains all of the thumbs some set value in the right (+x) or left (-x) direction.
If you want the thumbnails to wrap infinitely then when one leave the thumbnails area for movement in a direction, you need to take that thumb and relocate it to the other end of the thumbs in the container.

Overlay: image gallery with swipe and page control

Hi,
I'm in my first approach with DPS and I can't understand how to create an image gallery swipe controlled with the page control on the bottom part (page control is rapresented by those little circles on the bottom part of the image that shows how many images are shown by the gallery. See this image for a page control example: http://gtiapps.com/wp-content/gallery/p681_gallery/page1.png ).
I tried to read the documentation and the DPS tips but I can't see this simple kind of gallery.
I'm sure I already saw this kind of gallery in DPS-like apps like Wired, I can't believe is some kind of html based gallery (and if it is, anybody could link me a page where I can get the code snippet for that?).
I'm using inDesign CS6 on OsX.
Please give me some suggestions to get this interaction,
thank you in advance,
Bye!

It's definitely HTML. Here is a list of a whole bunch of them...
http://www.tripwiremagazine.com/2012/12/jquery-carousel.html
I'm a big fan of roundabout at fredhq.com
You can also make something similar using buttons, and an MSO, not quite the same, but if you don't want to delve into HTML, it will do the job. The dots on the bottom can be buttons. I don't have a machine handy to try and see if you can make the MSO swipe blue, but it is worth a try.
A note about using HTML in a folio. Make sure you have the HTML in its own folder, with all the assets needed, but nothing else. Anything else in that folder will also be included in the folio. (I.e. if you just put the HTML in the folder with your indesign doc, when you included the web overlay, the indesign doc, would also be uploaded. Clear folder organization is key for dps projects.

How to create scroll controlled svg animations in Edge animate cc

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

Hi bhardwajaralhul517,
Found something that could help you get started
Using parallax scrolling in Animate with a single line of code | EdgeDocks.com
How To Create A Parallax Scrolling Website | Web Design Principles
Thanks,
Preran

What Is Edge Animate and What Can I Create with It? | Learn Edge Animate | Adobe TV

Welcome to Edge Animate, a new motion graphics tool for the web. In this video you'll learn what you can do with Edge Animate, see some sample projects, and get a good idea of the potential fun you can have with this application.
http://adobe.ly/SG2GeP

Southhampton? I've never seen it spelt that way.

Is it possible (or feasible) to create an entire website full of animations using Edge Animate?

Back when Adobe Edge preview first came out I tried making this site:
http://www.bluekanji.net based on a friends request to have everything animate, with sound effects, music, etc. It didn't turn out too well and the coding is a mess because of my lack of coding knowledge and trying to jam stuff in there when Edge didn't allow it at the time.
I'm currently recreating the site from scratch, but hoping to make it all one cohesive page, instead of every animation having to be on a new page.
My main issue now is that when I have any animation play the next one will overlap and block one another and it becomes a pretty big mess. So my question is is it possible to do a full site full of animations with Edge Animate (and/or with Edge Reflow)? Or is it better to try something else?
Thanks.

There has been many new features added post the preview releases. You can check the below links for information on what added in 2.0,3.0 and CC 2014 releases.
Latest Version: https://helpx.adobe.com/edge-animate/using/whats-new.html
EA 3.0: https://helpx.adobe.com/edge-animate/using/whats-new-edge-animate-30.html
EA 2.0: Edge Animate Help | New features summary
I would recommend you to try Edge Animate/Reflow/Muse for creating websites and let us know if you encounter any issues.
-Sujai

How do i create an image solid with #000000?

I need to do this for a website with 5,000 products which will show images solid #000000 until I develop the products with no image until I get around to slowly adding images against a #000000 background.

Introduction to creating a new document
Note: Menu items may have sub menus when found in the instructions I will use the > character to represent child menu of the parent. Ex. the File menu has a menu item called open. It would be shown as File>Open.
1)First we will create a new document - File>New
1a)Optional - You can provide a name if you like.
2)In the new dialog box find the word Preset then click the drop down box next to it and choose Web.
3)Just below the preset is size choose 1024x768 (Should be the very first option if you do not see it you can manually type in a width of 1024 and a height of 768 in the boxes just below size)
4)Resolution should be 72 if it is not already go ahead and change it. (Note - the web preset normally changes this to 72 whereas the preset of print would set it to 300)
5)For color mode choose RGB if is is not already. (Note web preset normally sets this to RGB whereas print would set it to CMYK)
6)Background contents can be set to white
7)Leave advanced settings alone for this example
8) Click OK
9)At this point you should have a Blank document with a white background.
Now lets change the color -
1)In the tool bar on left side of screen is two color swatches - A foreground swatch and a background swatch respectively.
2)Click on the Black (foreground swatch) to open the color picker. {Note: If you have any other color than back and white press the lowercase d on your keyboard}
3)On right side of color picker Find the R, G, and B text boxes then type in each of the following values
R - 25
G - 80
B - 25
4)Click OK
5) Now Choose Edit>Fill (or press Shift-F5)
6)Contents - Choose foreground fill (Leave Blend mode to normal and Opacity to 100%)
7)Click OK
8)You should now have a dark green background
There are two more ways to fill -
1)Paint bucket tool Found by clicking and holding a few seconds on the gradient tool in the left tool bar - Just click anywhere on the document to fill with the foreground color.
2)You can use keyboard shortcuts - Alt-Backspace on windows or opt-delete on mac for the foreground color and ctrl-backspace on windows or cmd-delete on mac for the background color swatch.

Re: WPF image scrolling with mouse move guestors

hi i have one wpf application in that i have grid inside that i have button (with image and text block )
sample code:
    <Grid Background="Black">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="350" />
                <RowDefinition Height="350" />
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <Image Source="/WpfApplication1;component/OpticResources/MB_Label.png" Grid.Row="0" Height="100" Width="450" Margin="80,80,0,0" HorizontalAlignment="Left"
VerticalAlignment="Top"/>
            <Grid x:Name="HorizontalScrollBarGrid" Grid.Row="1" Height="350" >
                <Grid.Background>
                    <ImageBrush ImageSource="/WpfApplication1;component/OpticResources/OverlayBack.png"/>
                </Grid.Background>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="LeftScrollRow" Width="Auto"/>
                    <ColumnDefinition x:Name="HorizontalContentRow" Width="*"/>
                    <ColumnDefinition x:Name="RightScrollRow" Width="Auto"/>
                </Grid.ColumnDefinitions>
                <RepeatButton x:Name="LeftButton" Grid.Column="0" Height="340" Style="{StaticResource ScrollBarButton}"
                 Width="40" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow"
                 Click="LeftButton_Click" >
                </RepeatButton>
                <ScrollViewer x:Name="HorizontalScroller"
               Grid.Column="1"
               VerticalScrollBarVisibility="Disabled"
               HorizontalScrollBarVisibility="Hidden"
               CanContentScroll="True"
               SizeChanged="HorizontalScrollViewer_SizeChanged"
               Loaded="HorizontalScrollViewer_Loaded"
               ScrollChanged="HorizontalScrollViewer_ScrollChanged">
                    <StackPanel x:Name="HorizontalContentPanel" Orientation="Horizontal">
                        <Button x:Name="climate" Width="287" Height="260" Style="{StaticResource TransparentStyle}"
Click="climate_Click">
                                <Button.Background>
                                    <ImageBrush ImageSource="/WpfApplication1;component/OpticResources/OverlayBack.png"/>
                                </Button.Background>
                                <StackPanel>
                                    <Image Stretch="UniformToFill" Source="/WpfApplication1;component/OpticResources/climate.png"
/>
                                    <TextBlock FontSize="35" Foreground="WhiteSmoke"
FontStyle="Italic" FontWeight="SemiBold" FontFamily="Arial" HorizontalAlignment="Center" >Climate</TextBlock>
                                </StackPanel>
                            </Button>
                            
                        <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Silver"
StrokeThickness="0.1" Height="335">
                        </Rectangle>
                        <Button x:Name="Seat" Width="287" Height="260" Style="{StaticResource TransparentStyle}"
Click="Seat_Click" >
                                <Button.Background>
                                    <ImageBrush ImageSource="/WpfApplication1;component/OpticResources/OverlayBack.png"/>
                                </Button.Background>
                                <StackPanel>
                                    <Image Stretch="UniformToFill" Source="/WpfApplication1;component/OpticResources/seat.png"
/>
                                    <TextBlock FontSize="35" Foreground="WhiteSmoke"
FontStyle="Italic" FontWeight="SemiBold" FontFamily="Arial" HorizontalAlignment="Center" >Seat</TextBlock>
                                </StackPanel>
                            </Button>
                            
                        <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Silver"
StrokeThickness="0.1" Height="335"></Rectangle>
                            <Button x:Name="Remote" Width="287" Height="260" Style="{StaticResource
TransparentStyle}">
                                <Button.Background>
                                    <ImageBrush ImageSource="/WpfApplication1;component/OpticResources/OverlayBack.png"/>
                                </Button.Background>
                                <StackPanel>
                                    <Image Stretch="UniformToFill" Source="/WpfApplication1;component/OpticResources/phone.png"
/>
                                    <TextBlock FontSize="35" Foreground="WhiteSmoke"
FontStyle="Italic" FontWeight="SemiBold" FontFamily="Arial" HorizontalAlignment="Center" >Remote</TextBlock>
                                </StackPanel>
                            </Button>
                            
                        <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Silver"
StrokeThickness="0.1" Height="335"></Rectangle>
                        <Button x:Name="Radio" Width="287" Height="260" Style="{StaticResource TransparentStyle}">
                                <Button.Background>
                                    <ImageBrush ImageSource="/WpfApplication1;component/OpticResources/OverlayBack.png"/>
                                </Button.Background>
                                <StackPanel>
                                    <Image Stretch="UniformToFill" Source="/WpfApplication1;component/OpticResources/tuner.png"
/>
                                    <TextBlock FontSize="35" Foreground="WhiteSmoke"
FontStyle="Italic" FontWeight="SemiBold" FontFamily="Arial" HorizontalAlignment="Center" >Radio</TextBlock>
                                </StackPanel>
                            </Button>
                            
                        <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Silver"
StrokeThickness="0.1" Height="335"></Rectangle>
                        <Button x:Name="media" Width="287" Height="260" Style="{StaticResource TransparentStyle}">
                                <Button.Background>
                                    <ImageBrush ImageSource="/WpfApplication1;component/OpticResources/OverlayBack.png"/>
                                </Button.Background>
                                <StackPanel>
                                    <Image Stretch="UniformToFill" Source="/WpfApplication1;component/OpticResources/media.png"
/>
                                    <TextBlock FontSize="35" Foreground="WhiteSmoke"
FontStyle="Italic" FontWeight="SemiBold" FontFamily="Arial" HorizontalAlignment="Center" >Media</TextBlock>
                                </StackPanel>
                            </Button>
                            
                        <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Silver"
StrokeThickness="0.1" Height="335"></Rectangle>
                        <Button x:Name="vehicle_functions"   Width="287" Height="260" Style="{StaticResource
TransparentStyle}">
                                <Button.Background>
                                    <ImageBrush ImageSource="/WpfApplication1;component/OpticResources/OverlayBack.png"/>
                                </Button.Background>
                                <StackPanel>
                                    <Image Stretch="UniformToFill" Source="/WpfApplication1;component/OpticResources/vehicle_functions.png"
/>
                                    <TextBlock FontSize="28" Foreground="WhiteSmoke"
FontStyle="Italic" FontWeight="SemiBold" FontFamily="Arial" HorizontalAlignment="Center" >Vehicle Functions</TextBlock>
                                </StackPanel>
                            </Button>
                            
                        <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Silver"
StrokeThickness="0.1" Height="335"></Rectangle>
                        <Button x:Name="AmbienteLight"   Width="287" Height="260" Style="{StaticResource
TransparentStyle}">
                                <Button.Background>
                                    <ImageBrush ImageSource="/WpfApplication1;component/OpticResources/OverlayBack.png"/>
                                </Button.Background>
                                <StackPanel>
                                    <Image Stretch="UniformToFill" Source="/WpfApplication1;component/OpticResources/vehicle_functions.png"
/>
                                    <TextBlock FontSize="28" Foreground="WhiteSmoke"
FontStyle="Italic" FontWeight="SemiBold" FontFamily="Arial" HorizontalAlignment="Center" >Ambient Light</TextBlock>
                                </StackPanel>
                            </Button>
                            
                        <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Silver"
StrokeThickness="0.1" Height="335"></Rectangle>
                        <Button x:Name="AmbienteLight1"   Width="287" Height="260" Style="{StaticResource
TransparentStyle}">
                            <Button.Background>
                                <ImageBrush ImageSource="/WpfApplication1;component/OpticResources/OverlayBack.png"/>
                            </Button.Background>
                            <StackPanel>
                                <Image Stretch="UniformToFill" Source="/WpfApplication1;component/OpticResources/vehicle_functions.png"
/>
                                <TextBlock FontSize="28" Foreground="WhiteSmoke"
FontStyle="Italic" FontWeight="SemiBold" FontFamily="Arial" HorizontalAlignment="Center" >Ambient Light</TextBlock>
                            </StackPanel>
                        </Button>
                        
                        <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Silver"
StrokeThickness="0.1" Height="335"></Rectangle>
                        <Button x:Name="AmbienteLight2"   Width="287" Height="260" Style="{StaticResource
TransparentStyle}">
                            <Button.Background>
                                <ImageBrush ImageSource="/WpfApplication1;component/OpticResources/OverlayBack.png"/>
                            </Button.Background>
                            <StackPanel>
                                <Image Stretch="UniformToFill" Source="/WpfApplication1;component/OpticResources/vehicle_functions.png"
/>
                                <TextBlock FontSize="28" Foreground="WhiteSmoke"
FontStyle="Italic" FontWeight="SemiBold" FontFamily="Arial" HorizontalAlignment="Center" >Ambient Light</TextBlock>
                            </StackPanel>
                        </Button>
                        
                        <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Silver"
StrokeThickness="0.1" Height="335"></Rectangle>
                        <Button x:Name="AmbienteLight3"   Width="287" Height="260">
                            <Button.Background>
                                <ImageBrush ImageSource="/WpfApplication1;component/OpticResources/OverlayBack.png"/>
                            </Button.Background>
                            <StackPanel>
                                <Image Stretch="UniformToFill" Source="/WpfApplication1;component/OpticResources/vehicle_functions.png"
/>
                                <TextBlock FontSize="28" Foreground="WhiteSmoke"
FontStyle="Italic" FontWeight="SemiBold" FontFamily="Arial" HorizontalAlignment="Center" >Ambient Light</TextBlock>
                            </StackPanel>
                        </Button>
                        
                        <Rectangle VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Silver"
StrokeThickness="0.1" Height="335"></Rectangle>
                    </StackPanel>
                </ScrollViewer>
                <RepeatButton x:Name="RightButton" Grid.Column="2" Width="40" Height="340" Click="RightButton_Click"
Focusable="False" Style="{StaticResource ScrollBarButton}"
                             Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow"   >
                </RepeatButton>
            </Grid>
        </Grid>
    </Grid>
I want to do the swipe functionality that should work in win8 tablet ???
so when i swipe on second image to right it should move to right ....

Following links should help you implement swipe functionality.
http://egiardina.bloggingabout.net/2010/11/23/adding-swipe-functionality-to-wpf-applications/
http://www.codeproject.com/Articles/370650/Simple-Metro-Style-Panorama-Control-for-WPF
http://www.codeproject.com/Articles/741026/WPF-FlipView
Gaurav Khanna | Microsoft .NET MVP | Microsoft Community Contributor

RowHeader scrolling with mouse drag

I have created a JTable in a scrollpane that has
both column headers and row headers.
If I drag the mouse in the table vertically, when
I get to the edge the table and row headers will
scroll automatically.
However, if I drag the mouse vertically in the row
headers, the headers start to scroll, but the table
does not.
My row headers are implemented as a JList and are
added to the rowHeaderView of the JScrollPane.
Do I need to add a drag listener to my JList
and do something special to sync these up?
Thanks for any help.
-Mark

Call setAutoscrolls(false) in the constructor of your header renderer.

I want to create an image gallery with forward back nav, master image with a click to pop out zoom

Hi Musers,
I'm currently building a photography website and need some help building a specific type of gallery.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Below is a description of the gallery I want to build:
On the gallery page the gallery appears as a single 'Master Image' with forward and back 'Navs.' and a 'Counter' underneath this single 'Master Image'. Lets say that there are 10 images in this gallery. When the viewer clicks on the forward 'Nav.' the 'Master Image' changes to the next image in the sequence of 10 and the 'Counter' below confirms this progression, in this example the 'Counter' changes from 1 of 10 to read 2 of 10, the 'Master Image' displayed is the second image in the sequence.
Simple so far.. This above I can do as this is just a basic gallery. What follows is what I cannot find a solution for.
I want the gallery viewer to be able to click on the 'Master Image' and launch an enlargement of that image overlaying the gallery page, very much like the way the 'Lightbox' widget displays an enlarged image. When the viewer clicks off the 'Ligtbox' or enlarged image it dissapears, reverting the page view back to the standard gallery view with 'Master Image', 'Navs.' and 'Counter'. I do not want the expanded / Enlarged 'Lightbox' image accompanied by a thumbnail gallery, 'Navs.' / Navigation arrows or a 'Counter'. What I want is to be able to launch an enlarged version of the 'Master Image' as an overlay on the gallery page, something like a pop out.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Can anyone explain how I can do this? Is it possible?
The solution I want seems to be a highbrid between the standard gallery with navigation arrows kept but minus thumbnails and captions with some of the functionality of the lightbox gallery widget.
I very much appreciate any help anyone can give.
Thank you

Hi Harriet,
Thanks for the message. I'm sure as time goes on new features will be introduced but it's a bit of a shame that the widget library is a little basic, oh, and at times it's just that little bit buggy. So far I'm really impressed by Muse despite being ever so slightly disappointed by some of it's limitations. I'd like to see more image gallery options, the ability to set up a client login area or a client ftp within a site, I also tried embedding video but as I'm no programmer the result looked clumsy so some focus on this would be a help. Considering that a good number of people benefiting from a Muse site will be online retailers a zoom function should have been there from the start.
Best regards
Jacques

DHTML image scroller with layers

I'm hoping someone here can point me in the right direction.
I have a website with a photo gallery and 12-15 photos in
each gallery. The thumbnails display 4 at a time left to right.
Then I can click the right arrow to see the next 4 or the left
arrow to see the last 4.
The client is insisting that this is a 'scroller', so when
the user mouse overs the right arrow it scrolls to the left and
stops when they mouse off the right arrow. Same for the left arrow.
I'm sure it can be done with layers but cannot find the right
tutorial. Any ideas ??

Check the tutorials on the PVII site. I believe they had one
there....
http://www.projectseven.com/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"riprod7" <[email protected]> wrote in
message
news:efjkor$a0c$[email protected]..
> I'm hoping someone here can point me in the right
direction.
>
> I have a website with a photo gallery and 12-15 photos
in each gallery.
> The
> thumbnails display 4 at a time left to right. Then I can
click the right
> arrow
> to see the next 4 or the left arrow to see the last 4.
>
> The client is insisting that this is a 'scroller', so
when the user mouse
> overs the right arrow it scrolls to the left and stops
when they mouse off
> the
> right arrow. Same for the left arrow.
>
> I'm sure it can be done with layers but cannot find the
right tutorial.
> Any
> ideas ??
>

Working with actions in Adobe Edge Animate

Hi!
I don't have a problem, just a trouble and I need your help.
I'm developing my personal site with Animate and I need to Toggle Play/Reverse action so I don't know how to do it. Here my site http://prilovski.ru/edge/. Now click action works only on glasses, just click it.
I need when glasses became big and when I click it image just back on its initial position,I need just playing reverse animation.
I will very appreciate if you helped me to do it.
And sorry for my terrible English. I promise I will learn it better.

To be honest I would add the click animations to a symbol.
Main reason for that is that you have more control over your animations and code.
I started with having everything on the main timeline and now since everything is in there own symbols you can control much more.
But if you really don't want to do it that way I'd say keep the code I mentioned before in a trigger at 0 seconds or in the composition ready and on the click code add this:
var glasses_click = sym.getVariable("glasses_click"); //this is getting the value of the variable
if (glasses_click ==0)
     sym.play("INSERT LABEL NAME HERE");
     sym.setVariable("glasses_click", 1);
}//this is saying if the count is 0 play X then change the count to 1
else if (glasses_click==1)
     sym.playReverse("INSERT LABEL NAME HERE");
     sym.setVariable("glasses_click", 0);
}//and this is saying else if the count is 1 play X and change the count back to 0
You might have to put a label at the end of your click animation so it can play in reverse too and that's the label name you need to add to sym.playReverse.

I need to translate a flash program with many pages to edge animate CC. Is there an easy way top build new pages, so that you can jump from one page to another withion the same file?

I have only seen in all the examples in books and on the net that edge animate works on one page only. Maybe I hve not fully understood the concept, but in flash it was easy. Perhaps there is also an easy way in edge animate?

You can either make a symbol for each page in the same composition or you can use edge commons composition loader to load several compositions into the same composition which serves as a container.

Create an image scroller with swipe&drag in Edge Animate

Similar Messages

Maybe you are looking for