03 का 01
नवीनतम Atomic.io अद्यतन स्क्रॉल करने योग्य कंटेनर शामिल है
कुछ महीने पहले मैंने दिखाया कि कैसे प्रोटोटाइप गति के लिए atomic.io का उपयोग किया जा सकता है । टुकड़े में किए गए प्रमुख बिंदुओं में से एक क्लाइंट या टीम की कल्पनाओं को छोड़ने के बजाए "गति दिखा रहा था" महत्वपूर्ण था। वास्तव में, यह इतना महत्वपूर्ण हो गया है कि दृश्य पर यूएक्स / यूआई उपकरण की एक पूरी नई श्रेणी दिखाई दे रही है। इनमें शामिल हैं - ऐप्पल कीनोटे , एडोब के एज एनिमेट, इफेक्ट्स और यूएक्सपीन के बाद, कुछ नाम। ब्लॉक पर नया बच्चा Atomic.io है जो खुले बीटा में था जब मैंने पहली बार उत्पाद के बारे में लिखा था।
खुले बीटा के बारे में अच्छी बात यह है कि वे सॉफ़्टवेयर निर्माता को फीचर सेट पर उपयोगकर्ता फीडबैक एकत्र करने का मौका देते हैं, जिसमें लापता फीचर्स भी शामिल हैं, और फिर उन्हें एप्लिकेशन में जोड़ें और उन्हें व्यावसायिक रिलीज से पहले परीक्षण किया है। परमाणु के मामले में, एक विशेषता जिसे मैं वास्तव में याद करता था वह लंबवत या क्षैतिज सामग्री को स्क्रॉल करने की क्षमता थी। इसमें कार्ड, स्लाइड शो या व्यावहारिक रूप से कुछ भी शामिल हो सकता है जो उपयोगकर्ता किसी ऐप या साइट के इंटरफ़ेस की सीमाओं के भीतर स्वाइप या ड्रैग करेगा।
यह एक विषय होना चाहिए जो बहुत से उपयोगकर्ताओं ने मांगे क्योंकि स्क्रॉल करने योग्य कंटेनरों को इस महीने ऐप में पेश किया गया था और मुझे यह मानना है कि प्रोटोटाइप में स्क्रोल करने योग्य सामग्री बनाना सक्षम है।
ऐसे…
03 में से 02
परमाणु में वर्टिकल स्क्रॉलिंग सामग्री कैसे बनाएँ
आपको पहले 30 दिनों के नि: शुल्क परीक्षण के लिए साइन अप करना होगा और उस अवधि के अंत में, आपको तीन मूल्य निर्धारण योजनाएं प्रस्तुत की जाएंगी।
सबसे पहले आपको यह जानने की ज़रूरत है कि आप जो भी काम करेंगे, वह ब्राउज़र में है और ऐप का उद्देश्य Google क्रोम पर सख्ती से है। एक बार लॉग इन करने के बाद, आपको प्रोजेक्ट पेज पर ले जाया जाएगा। ऐप खोलने के लिए, नया प्रोजेक्ट बटन क्लिक करें ।
जब इंटरफ़ेस प्रकट होता है तो आप देखेंगे कि सीमित संख्या में टूल्स हैं, पृष्ठों और पृष्ठों को पृष्ठों, आर्टबोर्ड और दाईं ओर, एक संदर्भ-संवेदनशील गुण पैनल में जोड़ने की क्षमता।
इस उदाहरण में, मैंने एक आईफोन 5 प्रीसेट के साथ शुरू किया जो कि 320 x 568 है। फिर मैं छवियों को स्क्रॉल करने के लिए फ़ोल्डर खोलता हूं और उन्हें कैनवास पर खींचता हूं। वे स्वचालित रूप से प्रोजेक्ट में जोड़े गए थे और आप देख सकते हैं कि वे परत परत पर क्लिक करते समय अलग-अलग परतों पर हैं। मैंने फिर तीर उपकरण (चयन) का चयन किया, एक छवि का चयन किया और उन्हें बीच में कुछ जगह जोड़ने के लिए इसे एक नई स्थिति में खींच लिया। मैंने फिर सभी छवियों का चयन किया और टूलबार पर वर्टिकल वर्टिकल बटन पर क्लिक किया । यह समान रूप से छवियों को दूरी दिया।
अगला चरण स्क्रॉल करने के लिए सभी सामग्री का चयन करना है और या तो कंटेनर बटन पर क्लिक करना है या समूह बटन पॉप डाउन से स्क्रॉल कंटेनर बनाएं का चयन करना है। एक बार कंटेनर बनने के बाद- आप इसे परत पैनल में देखेंगे - कंटेनर पर क्लिक करें और नीचे के हैंडल को कैनवास के नीचे ऊपर खींचें । प्रॉपर्टी पैनल के नीचे पूर्वावलोकन बटन पर क्लिक करें और यह एक ब्राउज़र विंडो लॉन्च करेगा। सामग्री को स्क्रॉल करने के लिए अपने माउस के स्क्रोल व्हील का प्रयोग करें। अपनी प्रोजेक्ट पर वापस जाने के लिए, ब्राउज़र विंडो के निचले दाएं भाग में स्थित संपादन बटन पर क्लिक करें ।
03 का 03
परमाणु में क्षैतिज स्क्रॉलिंग सामग्री कैसे बनाएँ
क्षैतिज स्क्रॉलिंग को पूरा करने के लिए उतना ही आसान है।
इस मामले में, कैनवास पर छवियों की एक श्रृंखला खींचा और उन्हें एक-दूसरे के खिलाफ दबा दिया। चयनित छवियों के साथ, मैं यह सुनिश्चित करने के लिए शीर्ष संरेखण बटन पर क्लिक करता हूं कि वे सभी एक दूसरे के साथ गठबंधन हों।
फिर मैंने Shift कुंजी दबाई और परत पैनल में प्रत्येक परत का चयन किया। चयनित छवियों के साथ, मैंने कंटेनर बटन पर क्लिक किया और गुण पैनलों में, Behaviors क्षेत्र में क्षैतिज रूप से चयनित किया।
फिर मैंने पूर्वावलोकन बटन पर क्लिक करके एक ब्राउज़र विंडो में प्रोजेक्ट का परीक्षण किया।
हालांकि मैंने दिखाया है कि वर्टिकल और क्षैतिज स्क्रॉलिंग के अलग-अलग संस्करण कैसे बनाएं, जब तक आप एक कंटेनर में स्क्रॉल करने योग्य सामग्री डालते हैं, तो आप इन कंटेनरों को स्क्रीन के अलग-अलग क्षेत्रों में रख सकते हैं। उदाहरण के लिए, एक वेब पेज में एक साइड मेनू में लंबवत स्क्रॉलिंग सामग्री हो सकती है और उसी पृष्ठ पर स्लाइड-शो में क्षैतिज स्क्रॉलिंग सामग्री हो सकती है। वास्तव में, एक कंटेनर में छवि पिकर जैसी वस्तुओं के लिए लंबवत और क्षैतिज स्क्रॉलिंग हो सकती है जिसमें एक दर्जन या तो थंबनेल होते हैं।
Atomic.io में इस सुविधा के बारे में और जानने के लिए जांचें:
- ब्लॉग घोषणा
- स्क्रॉलिंग कंटेनर ट्यूटोरियल
- कंटेनर का उपयोग कर मास्किंग
- स्क्रॉलिंग कंटेनर समस्या निवारण