Grid scrolling Image on Mobile

I'm new to Flex and have been involved in some tutorials that I managed to find in the wek spent more or less. I was thinking to create a mobile application as a test project to enhance my knowledge.

I have a few questions: -.

1. I want to create a grid of scrolling images for mobile. Maybe 1 column or multi. The source of the images could be an API call or keep it simple an arraycollection of objects collection containing the image title and image url. Can someone please show an example.

< s:ArrayCollection id = "imageList" >

< fx:Object imageTitle = "Test 1" imageURL="resources/1.jpg"/ >

< fx:Object imageTitle = "Test 2" imageURL="resources/2.jpg"/ >

< fx:Object imageTitle = "Test 3" imageURL="resources/3.jpg"/ >

< fx:Object imageTitle = "Test 4" imageURL="resources/4.jpg"/ >

< fx:Object imageTitle = 'Test 5' imageURL="resources/5.jpg"/ >

< fx:Object imageTitle = "Test 6" imageURL="resources/6.jpg"/ >

< fx:Object imageTitle = "Test 7" imageURL="resources/7.jpg"/ >

< fx:Object imageTitle = "Test 8" imageURL="resources/8.jpg"/ >

< fx:Object imageTitle = "Test 9" imageURL="resources/9.jpg"/ >

< / s:ArrayCollection >

2. what resources (sites Web/books) would you recommend so I can devote myself seriously mobile Flex programming ensuring my Foundation is good.

IconItemRenderer should be able to accomplish this use case, for example:

labelField =""

iconField = "myIconField" iconWidth = "140" iconHeight = "140" / >

Note that you might want to extend IconItemRenderer and override drawBackground() to change how separators/borders are drawn.  It will be a little easier in 4.6 with the introduction of the method of drawBorders() by SDK-27737.

Tags: Flex

Similar Questions

  • Slide show image for mobile devices

    Hello world

    I'm doing my mobile site a little more user-friendly. On my current home page, I have a flash slideshow of images jpg image.

    Current page - photography of birds - Glenn Bartley Nature photography workshops

    I hope someone can help me with this move to a certain type of image slideshow that would work on mobile. Basically, I want to just images to scroll through all the seconds at random. Maybe 20 photos.

    Previously, I had a small banner ad of my main website that works on mobile. But when I tried to copy that code above doesn't seem to work. Perhaps because he was in a table?

    See banner advertising - Glenn Bartley Nature photography workshops - photography of birds, Nature, photography,.

    If someone has a simple code I can insert my workshops page to rotate the images through mobile devices I would really appreciate the help.

    Thank you very much!

    Glenn

    Mobile users might appreciate not all that consumption of bandwidth.  I often give my cell phone static image a users to look for not eating their limited data plans.

    On the other hand, most Tablet users have Wifi, so the bandwidth consumption is not as big a consideration for them.  However, 20 images is excessive.  5 or 6 means a better.

    If your site is built with delicate framework Bootstrap, you can use the built in component carousel Bootstrap described below.

    ALT-Web Design & Publishing: customization carousel of the Bootstrap


    Bootstrap in Adobe Dreamweaver CC 2015

    https://helpx.Adobe.com/Dreamweaver/using/bootstrap.html

    There are other sliders reactive carousel available online.

    Cycle2

    WOW Slider

    If you have a large number of images, you can use a thumbnail viewer Gallery and lightbox instead.

    Fancybox2

    Nancy O.

  • additional options for scrolling images

    I was wondering if there are plans to add features like easing and scrolling through a set number of pixels to scroll images?

    Are not currently

    Neil

  • How can I control setting multiplied between status object box &amp; static box w / scrolling image: Folio

    I am trying to find a way to control the InDesign object "multiply" effect layer between a Black w / box state object transparency (which turns out as a transparent grey rather than black) and a static area w / scroll image with the same effect (which turns out correct transparent black dark, rich) parameters? I'm working on an iPad app "Folio" CS6. Thank you in advance!

    Blend modes are not supported overlays of static objects.

    Bob

  • automatically assemble grid of images?

    I have a grid of images that are in fact a single image cut into an arrray of slices - is possible to have photoshop post reassemble? They are named according to their location in the grid.

    There are drop-down lists for number across and number down.

    You can select a folder of entry or simply select files in Bridge first.

    The default is to place the files from left to right, but there is an option to put the top down.

  • &amp; lt; Beginner &amp; gt; Scroll image gallery

    can someone help me understand why my site isn't a gallery of loading external images? the tutorial I used can be found here:

    http://www.oman3d.com/Tutorials/Flash/imagegallery/

    they made the image gallery is entirely with actionscript and it works in the .swf to the Gallery, but as soon as I call it to be loaded into the .swf House, it does not. Here is the link to the homepage of sites:

    (oh and don't worry, I know that the photos are pixelated and some need fixed things, I'm just trying to get the site working first)
    http://lightboy101.110mb.com/bootleg/splash.swf
    -Here is the Gallery-
    http://lightboy101.110mb.com/bootleg/Gallery.swf

    If anyone can help me, please let me know. or if you know a tutorial with a better scroll image gallery, that would be great. Thank you.

    This is the case. to fix, replace Stage.height and Stage.width with stageH and the stageW, the RESP and hardcode them the correct values for these variables.

  • Not able to pause/resume a scrolling image

    Hi all

    I wrote a post re there try to pause/resume a scrolling image a few days. I still have the problem that keeps development. I have attached the code snippet and be grateful for the help please. If the image is replaced by a text string, the methods to pause/resume work. I walked through the code with the debugger and the methods are called, but it's not yet to stop scrolling!

    Any help is highly appreciated or code suggestions, for example, on a better way to do it. Thank you

    Cheers!

    DaveJ

    This is a more elegant solution. Get rid of the callLater() calls entirely and use a timer to invoke the effect of movement:



    http://www.Adobe.com/2006/mxml"creationComplete =" initApp () ">"
    import flash.utils.Timer;
    import flash.events.TimerEvent;

    [Bindable]
    public var speed: Number = 5;

    private var myTimer:Timer;

    private function initApp (): void {}
    myTimer = new Timer (1, 0);
    myTimer.addEventListener ("timer", Moveimage);
    myTimer.start ();
    }

    public function changeSpeed (): void {}
    Speed = speedSelector.value;
    }

    private void moveImage(e:Event):void {}
    myMove.end ();
    If (theImage.x > c1.width) {}
    theImage.x = 0 - theImage.width;
    }
    myMove.xTo = theImage.x + speed;
    myMove.play ();
    }
    ]]>



    horizontalScrollPolicy = "off" width = "100%" >

    Height = "100".
    Width = "100".
    mouseOver = "myTimer.stop ()" "
    mouseout/mouseouthandler() = "myTimer.start ()" "
    />




    ID = "speedSelector" snapInterval = "1" tickInterval = "1" liveDragging = "true".
    change = "changeSpeed ()" / > "

    HTH,
    Matt Horn
    Flex docs

  • Do not stretch the fluid grid header image

    The grid of fluid image (hero div) meets the mobile and Tablet level queries, but not at the office 1232 px.

    Image develops only for a max of 1125 px of 1540 px for the nav main div, which is 73%.

    the CSS code is as follows for the desktop mode:

    / * Office Layout: 769px to a maximum of 1232px.  Inherits the styles of: Mobile and tablet. */

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

    {.gridContainer}
    Width: 88.7142%;
    Max-width: 1232px;
    padding-left: 0,6428%;Capture 030515.JPG
    padding-right: 0,6428%;
    margin: auto;
    Clear: none;
    float: none;
    left margin: auto;
    }
    #top {}
    }
    {#mainNav}
    }
    {#menuSystem}
    }
    .menuItem {}
    Width: 13.0434%;
    Clear: none;
    margin left: 1.4492%;
    }

    Any suggestions how I can develop and stretch the image to the same width as the main nav (7 horizontal buttons) in the fluid grid container?

    If the value of 88.7142% should be increased to 100%, why then the image only develops to 73% and not of 88.7142%

    URL is < tyndall.net.au >

    Any suggestions greatly appreciated.

    Thank you

    Jonathan

    By default, FGLayout sets the images with a maximum width of 100%. The image can resize up to its native file size but not more.

    To do this, your image must be at least as wide as the layout of office max AND you should not add height or width attributes to the image itself.

    your banner

    Nancy O.

  • Using of checkerboard to fluid and a mobile site, or load smaller images for mobile.

    Question for a beginner:

    You can use checkerboard to fluid for Tablet and desktop, while having a mobile site?

    The problem will be the loading time.  I use a tool for css/js called Magic360 to display of large plates 3d products.  It requires 72 images, but works very well with the fluid grid.

    My understanding is the grid will load the images full size, but scaling to fit the screen.  Go from office to Tablet would be acceptable, but mobile would be much slower compared to a dedicated site.

    Another option would be to have the small images to load mobile within the grid of fluid, but I don't know if it's possible.  Thank you for any assistance.  I'm watching a ton of videos on lynda.com to learn the basics and progress.

    -James Thornton

    Put your large images in #slideshow - LG and smaller images in #slideshow - SM. use media queries to show/hide the divisions.   Use a separate external stylesheet for that.  You don't want to alter master key or FluidGrid.css files.

    / Special rules for mobile devices * /.

    @media only screen and (max-width: 480px) {}

    / * Hide div * /.

    #slideshow - LG {display: none ;}}

    / * display div * /.

    #slideshow - DMS {display: block ;}}

    }

    / * Rules for tablets, desktop computers * /.

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

    / * Hide div * /.

    #slideshow - DMS {display: none ;}}

    / * display div * /.

    #slideshow - LG {display: block ;}}

    }

    Nancy O.

  • Scrolling image graphic

    Hello

    I would like to be able to add annotations (for example, short pieces of text) to specific locations on the waveform graph.  For example, I want to label "Peak1', 'Peak2' etc.  I would then these annotations to scroll/zoom with the chart (horizontal scrolling in particular).

    I've attached a screenshot of how I would like to-labels (A, B, C, D) must scroll with peaks corresponding when I scroll through the chart.

    I could convert my graphics a pict, and add annotations to the image; but is there a more elegant way to the features of the label directly on a waveform graph?  (Added complexity - the chart has several plots;) I don't mind if my annotations are associated linked one or all (or none) plots, as long as the annotations are displayed in the right place).

    Thank you for your ideas!

    Paul

    Hi PaulHDear,

    I would say more than you could ever use in a graph

    Kind regards.

  • Grid View Image framed in white, why?

    Hello

    I have a freak accident in Lightroom 5.7.  That image has a thin white border around it in the library grid view mode when NOT selected.  All other images have the usual black thin border.  I looked trough my other catalogs and found this occurs, but very rarely.  I'm dying to know why, anyone?

    2016-06-09_23-24-12.jpg

    -Tif (all other hair have black borders)

    -Reworked in Photomatix Pro (all other reworks made on this software have black borders)

    -It is part of a recorded slideshow, but the other images is not a white border

    Hi Kul @.

    It Flagged the image, you can select the letter image and press 'U' to remove it as a pick and then the border color will be back in black.

    Kind regards

    Mohit

  • During the installation of a grid highlighting images

    What is the shortcut to put a grid over a picture that you develop so that you can tell if the horizontal lines are horizontal and verticals are vertical?

    Hi ZOC,

    You can enable the Guides on the Image. Go to the magnifying glass Overlay > Guides, then you can turn on or off using Ctrl + Alt + O or command + Opt + O.

    Reference: collection Grid Options in Lightroom 5 "Julieanne Kost's Blog of »

    Kind regards

    Mohit

  • Moving images, lightroom mobile for external hard drive - how?

    Hey all,.

    I'm mobile synchronization of images from Lightroom and the images are so not in my normal hard drive folder structure.  Periodically, I offer my images on my main hard drive to two external drives.  How can I manage this process of getting the images synchronized to an external hard drive?

    Thank you

    Andrew

    Hi André,.

    You can specify the location of Lightroom Mobile images to be stored in the Lightroom preferences > Lightroom mobile tab > check "Specify a location for the mobile Lightroom images" > click on select, then select the location

    Kind regards

    Claes

  • How to make images usable mobile version desktop version

    I created my desktop version of my website, now I want to create a mobile version. I have some images to vector when place in my mobile version are too big so I sized them down in muse and they are blurry. Why is this? I also tried to change the size of the image in photoshop and then place in the mobile Muse and it did not work

    Why don't you use Google maps for this widget?

    You can place a "new Star" widget, delete all except one's triggers, resize the trigger and call it "Directions." Then configure the widget to open the target at the click on. Finally place the Google maps widget in the target of the new widget recommended.

  • Specialized and custom vertical scrolling image problems.

    I need to create a page of "scrolling credits" portrait in my film, but I can't use the standard of 'credits' tools, as the wording must be of a certain size, fonts, colors and style to match the other images in the film.   I created a 'page', tour credits in a program of the editor and that I imported it into my film assets.   However, when I try to insert in my film, it appears very little first - fitting himself up to the screen.   I then use the ' applied Effects > Motion' then position it tool to enlarge up to adjust the WIDTH of the screen, so that the top of the page "" is visible in the position "start".   I then use ' effects fx > Vertical Image pans to make pan my 'page' to make words seem to scroll to the top down.

    After three attempts so far, I've been making registration b very low resolution, (b) jerky and erratic scrolling movement and (c) not start or stop in the right position.   Not only that, it seems to be draining a lot of processing capability of Adobe Premiere Elements, so that it remains at a standstill, and I have to keep waiting for every order to settle and take effect before I can hit the next button... !

    Does anyone have ideas how I can fix this annoying problem that keeps to the top of my project in full?

    sparkoparkes

    What version of Premiere Elements, what operating system?

    What is the predefined project that you set for Premiere Elements project? You (manually) or project (automatically) been setting the preset project to match the properties of your import.

    Which would seem to not address most of the problems - in other words, create your import to have the same resolution as that of the creation of the project.

    As to apply an effect to roll on your document of credits created outside the project, are you using fx = Presets effects and scrolling vertical Image pans?

    Instead, please review the keyframes of the property found Position as applied effects tab/Applied effects Palette/Motion Panel expanded and position the property.

    Please review and give more information. Questions or need any clarification on the above, do not hesitate to ask.

    Thank you.

    RTA

Maybe you are looking for