Kinetic image scrolling gallery on iPad

I'm struggling with this a bit. I'm trying to build a image scrolling gallery which allows you to flick through a horizontal list of images. If you select a pic it will load in a window which sits above the horizontal list. I'm developing this for the iPad.
I keep getting hung up on where to start with this since it's using touch. Not seeing any clear tutorials online. I don't think I want to use any sort of a tweening class.
Has anyone out there done something like this? I'm probably missing something really simple and appreciate any help.
Thank you.

I just make such a 'flick scroll gallery' for iPad. But I still have a problem on its performance.
I have made many of such swfs for PC. First, I deploy it to iPad using PFI but it did not work well ... too heavy for iPad. So I am improving its performance now. It becomes much better than before, but it is still heavier than iPad's native apps (like 'Photo app').
For your reference, my design for the gallery is a 'train' made from three images side-by-side. The train is masked to see only the image at center, and is draggable for horizontal direction. When flick to left ended (for example), if x-position of the train exceeds certain pixels from zero (center position) then the train moves to 'minus width of image' by tween class with 'easeOut' easing. If not, then the train moves back to zero by tween.
When tween is end, if the train's position is NOT zero, switch three images on the train and back to zero immediately. ...Can you imagine? (Sorry for my terrible English.) Of course, you can improve the movement considering flick velocity, etc.
If you or anyone know how to achieve SPEEDY flick scroll (as iPad native apps) by PFI, I will appreciate it very much!

Similar Messages

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

Creating a Horizontally Scrolling Gallery in Muse

I need to create a horizontally scrolling gallery, something that shows four images at a time, and automatically scrolls through said images, a total of about twenty images.
The end result my client wants is for the gallery to show four images, highlight each one at time, and then scroll in the next four, but I don't even see a way to just create a simple scrolling gallery in muse.
Is there any way to do this? Any suggestions for something I can drop into muse to make this happen? I have seen several people ask this question, but it never seems to get any answers, and google has been less than enlightening on this.
Thanks.

Hi Julia,
I understand that I can tooltip over them, but what I'm looking for is something that will allow me to do something like this example on the main page for Lionsgate.com. The functionality I want is to be able to present the player with a menu of thumbnail buttons which will change a main display, very much like what you illustrated above. What is different, however, is that I want the user to be able to SCROLL a list of thumbnails which are contained within a menu window. In this way, if I wanted to have links to twenty or fifty or a hundred buttons/thumbnails, I can present the player with only a few at a time without completely cluttering the interface. They can use arrow keys to scroll up or down through the available thumbnails. It's a very common interface, and Apple uses the ribbon idea as part of their main interface.
Long story short, is it possible to replicate this with existing Muse widgets, or does someone know of a not-too crazy way to do this?
Thanks,
Neal

HT4101 I discovered a fatal flaw in the iPad procedure for downloading images from camera to iPad: after selecting the images to be downloaded, an accidental touch of the "delete" button, wipes all selected images from the camera, with no warning?

After downloading some 60 images from camera to iPad, I was "scrolling" down to select the last images, and inadvertently touched the "Delete" button that appears at the top right of the screen, when the "Select" option is chosen. I did not notice the warning "Delete 60 Images?", and continued scrolling down, when my finger touched the warning message. All my precious images were instantly deleted from the camera The sensitive touch screen feature makes this a real problem. Apple should "fix" this unacceptable feature, surely! I suggest that the images on the camera memory card should not be able to be deleted from the iPad, and this shpuld require to be done using the camera controls only. Similarly, the "Delete" or "Keep" options that appear after importing a selection from the camera, should NOT allow the images on rthe camera to be deleted, but only the imported (downloaded) images on the iPad. This unnecessary option could easily delete precious images from the camera!
Apple should remove the option to delete images from the camera, and the iPad touch screen commands should olny delete images on the iPad. (Alternatively, the "delete option should be on a separatly accessed "page".)
Surely enough users of the "Lightning to USB Camera Adapter" will agree with the above?

No, I don't agree. Whenever you connect a camera to a computer you are given the opportunity to delete the photos on the camera after downloading in precisely the same way the iPad does this. The fact that you touched Delete and then ignored the Warning doesn't change anything.
I've loaded thousands of photos on my IPad and never have had that problem.
Don't blame a moment of carelessness on your device.
If you want to make such a suggestion to Apple use http://apple.com/feedback

Horizontal scrolling gallery like this website

Hi,
having seen this website on Muse's "site of the day" gallery, I was wondering how the horizontal scrolling gallery is done using Muse?
http://4ad20.themysteryparade.com
Are there any tutorials explaing this technology - can you point me to a site? Any experts that have an answer how to do this?
Thanks so much,
Markus

You can change the the Page width , as per your requirement. We just need to assemble few asset, please have a look to the following Video which I have created for you, that should clear few things, in my example, I have created a page with following properties,
Width: 3000px;
Height: 500 px;
Background Fill: none;
Browser Fill: image; Scale to Fill, Scrolling: Unchecked.
http://gauravtestsite4.worldsecuresystems.com/Gaurav/2013-09-18_1525.swf
I hope this will give a basic idea.

How to display large versions of thumbs in a scrolling gallery?

Figured out my original question (different thread title)!
Since I can't delete my post I might as well ask if anyone knows of
a good tutorial for making a scrolling gallery display enlarged
versions of the thumbs.

Thanks Jon! Got it all together..almost (of course!)
Everything works perfect when I run the SWF file from
Windows. My gallery scrolls and when I click on the thumbs
(buttons) a larger version shows up in the space I placed the
loader just as I want. Great!
However....when I insert the file into a webpage (using DW
Insert>Media>Flash) and then preview it in a browser, the
thumbnail scroller loads and works fine, BUT when I click on the
thumbs (the cursor does change to a hand and the over state
appears) the external Jpegs don't load! I've copied and pasted the
images in multiple locations to make sure that's not the issue.
Any ideas??

Trying to get " url " to work in my scroller/ gallery...

trying to get " url " to work in my scroller/ gallery...
please take a look at my action script and xml... ive got all
the fields working except for the " url " ... what adjustments do i
need to make to get the url for each pix to work...
thanks...trey
delay = 3000;
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
title = [];
headline = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image
= xmlNode.childNodes.childNodes[0].firstChild.nodeValue;
title
= xmlNode.childNodes.childNodes[1].firstChild.nodeValue;
headline
= xmlNode.childNodes.childNodes[2].firstChild.nodeValue;
description
= xmlNode.childNodes.childNodes[3].firstChild.nodeValue;
firstImage();
} else {
content = "file not loaded!";
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
title_txt.text = title[p];
headline_txt.text = headline[p];
description_txt.text = description[p];
picture_num();
slideshow();
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
title_txt.text = title[p];
headline_txt.text = headline[p];
description_txt.text = description[p];
picture_num();
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
title_txt.text = title[p];
headline_txt.text = headline[p];
description_txt.text = description[p];
picture_num();
slideshow();
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
and here is my xml...
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<images>
<pic>
<image>sample1.jpg</image>
<title>Google</title>
<headline>headline 1</headline>
<description>this is the description of article
1.</description>
<link>
http://www.google.com</link>
<targetIsUrl>Y</targetIsUrl>
</pic>
<pic>
<image>sample2.jpg</image>
<caption>Yahoo</caption>
<headline>headline 2</headline>
<description>this is the description of article
2.</description>
<link>
http://www.yahoo.com</link>
<targetIsUrl>Y</targetIsUrl>
</pic>
<pic>
<image>sample3.jpg</image>
<caption>BAS-llc</caption>
<headline>headline 3</headline>
<description>this is the description of article
3.</description>
<link>
http://www.bas-llc.com</link>
<targetIsUrl>Y</targetIsUrl>
</pic>
<pic>
<image>sample4.jpg</image>
<caption>USC Trojans</caption>
<headline>headline 4</headline>
<description>this is the description of article
4.</description>
<link>
http://www.uscripsit.com</link>
<targetIsUrl>Y</targetIsUrl>
</pic>
</images>

Extensions that do not have a "Remove" button are installed by other software and are not under control of the Firefox extension manager.
Such globally installed extensions are usually found via a registry scan or are installed in a location that Firefox scans for installed extensions.
*https://developer.mozilla.org/Installing_extensions
*https://developer.mozilla.org/Adding_Extensions_using_the_Windows_Registry
Extensions installed this way need to be removed via the settings (options/preferences) of the program that has added this extension or this program has to be uninstalled via "Control Panel > Programs".
In Firefox you an only disable such an extension.
Create a new profile as a test to check if your current profile is causing the problem.
See "Creating a profile":
*https://support.mozilla.org/kb/profile-manager-create-and-remove-firefox-profiles
*http://kb.mozillazine.org/Standard_diagnostic_-_Firefox#Profile_issues
If the new profile works then you can transfer files from a previously used profile to the new profile, but be cautious not to copy corrupted files to avoid carrying over problems.
*http://kb.mozillazine.org/Transferring_data_to_a_new_profile_-_Firefox

Muse generated slideshow prevents scrolling on iphone, ipad

Hi there, my site is working on android and windows phones but it seems slideshow muse creates prevents scrolling on iphone, ipad, is there anyway to overcome this issue?
www.araminta.fi

Hi Brad,
Thanks for your prompt reply.
No I did not. I don't have iphone/ipad but after publishing I asked a friend of mine to check it on his iphone and he had complained that it wasn't scrolling, so I went to a shop where there is ipad mini and 2, and on both machines it didn't scroll, so that is interesting that you don't come a cross with the same issue, the images slides but since they cover up the screen ipads didn't allow it to scroll downwards.
Oral

Not able to view images in gallery, when they are ...

Hi,
The file explorer was showing two default images folder and I was unable to delete one of them as I was unable to view images via gallery. Then i installed X-plore and deleted one of the images folder. Now, when I click images and select memory card as storage space, I cannot view them via gallery and view them only via X-plore. Please suggest how can I correct this issue.

Maybe I am stupid but if you delete the imagefolder, it will be gone. You can set your default imagefolder: goto Media-> Camera-> Settings-> Use Memory-> Card. You can also backup your card to PC, reformat the card in your phone, because it makes default maps for images, video, audio,.........and then copy your images back to the specific folder.
‡Thank you for hitting the Blue/Green Star button‡
N8-00 RM 596 V:111.030.0609; E71-1(05) RM 346 V: 500.21.009

Preloader not working when image scroller present

Hi:
I designed a .fla that involves a large panoramic image that
I stitched together in PhotoShop, then imported into the library
and made into a movie clip, I then have the movie clip of the
panoramic load into an image scroller (the one in the components
library) on the main timeline so you get the sense you are panning
through the photo. Within the movie clip of the panoramic there are
buttons in it that then call other movie clips to load another
movie clip on top of the image scroller.
code attached to the buttons is:
on(release){
_root.attachMovie("myMovie", "screen",1);
_root.screen._x =10;
_root.screen._y =425;
My issue is the file is so large that I have made created a
preloader.
If I load the movie clip of the panoramic directly onto the
timeline the preloader works fine...
When I try to load the imagescroller that calls the movie
clip my preloader does not work at all...
Does anyone have any ideas?
I will gladly supply you with any code you may need.
Thank you
Janalese

Thank you for your information. It worked great as far as...I
could build a preloader and have the movie show up on the screen as
I wanted. Now for problem number two that has developed...
The MovieClipLoader that calls external .swf file. This is a
movie that has an image scroll bar that calls a movie clip that
scrolls a panoramic photo. Within that movie clip of the panoramic
I have buttons that then call other movie clips from the library
using
on(release){
_root.attachMovie("myModelScroll", "screen",1);
_root.screen._x =10;
_root.screen._y =425;
This is an example of what I am doing
I have a panoramic shot that is in an image scroller, that
panoramic is of a group of buildings each building has a button
next to it. Those buttons then call up another movie clip from the
library using the attachMovie clip to show another mini movie clip
of what the building looks like inside, and what the purpose is.
Issue:
The buttons within the movie clip that is loaded into the
image scroller fail to work. If I just load the .swf files into the
browser it works just fine...
but the issue is I have a huge file with an image scroller so
I need a progress bar and a MovieClipLoader function.
How do I now get the other code attached to the buttons
within the movie clip that says attachMovieClip to work within the
context.
I am so baffelled as to why it won't work...
Here is the code to my preloader and movieClipLoader
My actionScript skills are very limited so any help is
greatly appreciated but needs to be supplied in simple language.
Thank you very much

How do I do a reverse image search on my ipad 4

Hey anyone out there who can help,,,I'm trying to find a way to do a reverse image search on my ipad , but there seems to be no camera icon like I have seen suggested in previous searches...is there a option to turn this icon on ...or an extra app I need to get ,like google+,...thank you for your time answering this for me

Confusedinpa wrote:
I can't make the Google reverse image search work on my ipad. But you can download a free app called UNRAVL. Good luck.
Thanks but I don't know what a "reverse image search" is let alone have any interest in doing one. And, I would hope that, after a year the OP has resolved their issue.

Cannot view embedded images in emails with iPad mini

Hi there - I can't view embedded images in emails with iPad mini. Any reason why?
Can anyone help?

I am having the same problem + I cannot download pdf attachment effectively.
This all happened after I upgraded the iOS to 7.x. In iOS 6.x, everything was working fine. I was able to see all the images in the email and, when I clicked on the pdf attachment, it would ask me if I want to save the pdf file to iBook. Right now, I cannot have either ones working.
I am using iPad 2.

Nokia N85 - Images in Gallery sometimes are blurre...

In my Nokia N85, images in Gallery sometimes are blurred, out of fucus and some are broken. I have no idea how to fix this. Can anyone help, please?
Thank you
Steiner

and what's about the broken photos?
i have bee in a vacation for a week and i took 150-200 photos with my N85 bot when i came back home and looked in the photo gallery - i saw that almost all of the pictures i got - are broken (bad file- briken photo symbol).
so i took out the memory stick and checked if there is dust or something inside the phone but it was ok.
when i had the memory stick back in - i saw that all the pictures that were broken - are now gone... and i cant see them in the gallery or in the folder manager / explorer...
what can i do? i really need those pictures...
thanks.

How can I get a parallax effect with Hub Control or change the background image scroll rate?

Like the title says, I'm trying to get more of a parallax effect with a Hub Control in Windows Phone. In my current hub app, the picture has to be as wide as the entire hub, and it scrolls through the picture quickly. I'd like a way to make the background
image scroll slower than the content on top of is.
I've looked everywhere in the API docs, but I can't find anything saying how to do this. :(

Hi PTK7,
Yes, currently there is no documentation for this effect, however we can manually control the image scroll speed:
http://stackoverflow.com/questions/10589192/windows-8-gridview-parallax-background-image
Also I found a sample from code center:
https://code.msdn.microsoft.com/windowsapps/ParallaxBackground-A-Metro-f929e558, take a look to see if these helps.
--James
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

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.
>

Kinetic image scrolling gallery on iPad

Similar Messages

Maybe you are looking for